コンテンツ
- PWAとネイティブアプリ：違いは何ですか？
- プログレッシブウェブアプリ：ウェブ向けの構築
- PWAの強み
- PWAの弱点
- リアクトネイティブ
- ReactNativeの強み
- ReactNativeの弱点
- NativeScript
- NativeScriptの強み
- NativeScriptの弱点
アプリを作成するときは、どのアプローチを取る必要がありますか？ PWA / Webテクノロジーのルートを採用する必要がありますか、それともネイティブに移行して特定のプラットフォーム向けに設計する必要がありますか？どちらのオプションにも長所と短所があります。この記事では、Webアプリとネイティブアプリの作成に使用される一般的な選択肢のいくつかに焦点を当てます。
PWA（プログレッシブウェブアプリ）、別名ウェブアプリは、一般的なウェブテクノロジーであるHTML、CSS、JavaScriptで構築されており、ウェブブラウザで動作します。 （ビルドに役立つ重要なHTMLタグのいくつかを確認してください。）PWAは、アプリのように見えるように設計された効果的なモバイルWebサイトであり、Web APIを使用すると、ネイティブアプリと同様の機能が提供されます。
アプリ構築の詳細については、アプリの作成方法に関する投稿をご覧ください。作成したいサイトの場合は、これらのトップウェブサイトビルダーとウェブホスティングサービスをご覧ください。
PWAとネイティブアプリ：違いは何ですか？
プログレッシブウェブアプリには、アプリストアを必要とせずに、デバイスにインストールして実行できるという利点があります。また、プロセスの一部はWebアプリマニフェストです。これにより、開発者はアプリの表示方法と起動方法を制御できます。また、Webデザイナー/フロントエンド開発者は、すぐに構築を開始するために必要なスキルセットをすでに持っています。ネイティブアプリとは異なり、新しい言語を学ぶ必要はありません。
ネイティブアプリは、特定のOSを念頭に置いて構築されています。 iOSとAndroid–そしてその目的を達成するためにフレームワークまたは言語を使用します。 iOSアプリケーションは通常XcodeまたはSwiftを使用し、AndroidアプリはJavaScriptを使用します。ただし、この記事では、両方のプラットフォームで機能するJavaScriptベースのオープンソースフレームワーク（React NativeとNativeScript）に焦点を当てます。
ネイティブアプリの利点は、通常、デバイスのハードウェアとソフトウェアをより有効に活用し、より高速で応答性が高く、アプリストアでの評価を通じて品質保証が得られるため、より優れた機能を提供することです。ただし、特定のフレームワークまたはライブラリの使用方法を学ぶ必要があることを意味します。
ここでは、アプリを構築するための3つの異なるオプション（1つはWeb（PWA）用、2つはネイティブ（React Native、NativeScript）用）について説明します。私たちは、彼らがどのように動作し、何ができるかを調べ、彼らの長所と短所を調べて、アプリを構築するためにどのオプションを選択すべきかを決定するのに役立ちます。
プログレッシブウェブアプリ：ウェブ向けの構築
PWAの強み
- アプリはブラウザでも動作します
- 配布：ブラウザ、エンタープライズ、アプリストア
- React、Angular、Vue、vanillaまたはその他のフレームワークを利用できます
PWAの弱点
- すべてのネイティブAPIにアクセスできません
- iOSとiPadOSでの機能とストアの配布は制限されています
- それは継続的な進化にあります
PWAは、HTML、CSS、JavaScript、ブラウザーのAPIなどのWebスタックのみを使用して、高性能でオフラインのインストール可能なアプリを作成するための現在のデザインパターンです。 Service Workerとウェブアプリマニフェストの仕様のおかげで、Android、iOS、iPadOS、Windows、macOS、Chrome OS、Linuxにインストールした後、ファーストクラスのアプリエクスペリエンスを作成できるようになりました。
PWAを作成するには、サーバー側、バニラJavaScript、React、Vue、Angular、またはその他のクライアント側フレームワークから、任意のアーキテクチャを使用できます。単一ページのアプリケーションでも複数ページのWebアプリケーションでもかまいません。オフラインで、ユーザーをどのようにサポートするかを定義します。
このアプローチでは、アプリのリソースをパッケージ化して署名する必要はありません。ファイルをWebサーバーでホストするだけで、Service Workerがファイルをクライアントにキャッシュし、インストール後に提供します。これは、アプリの更新が必要な場合は、サーバー上のファイルを変更するだけで、ユーザーやアプリストアの介入なしに、ServiceWorkerのロジックがユーザーのデバイス上のファイルを更新することを意味します。
配布に関して、最も一般的な方法はブラウザです。ユーザーは、[ホーム画面に追加]または[インストール]メニュー項目を使用するか、インストールへの招待を受け入れるか、互換性のあるプラットフォームでカスタムWebアプリのユーザーインターフェイスを使用して、ブラウザーからアプリをインストールします。 AppleがAppStoreで公開された純粋なPWAを拒否し、Web開発者がSafariを介して配布することを推奨していることは注目に値します。
ユーザーインターフェイスは、純粋にWebランタイムによって管理されます。つまり、Webデザイナーは、画面上の各コントロールをレンダリングする責任があります。 IonicなどのUIフレームワーク、またはマテリアルデザインライブラリを使用する場合、HTMLとCSSはAndroidまたはiOSのネイティブインターフェイスを模倣しますが、必須ではありません。PWAを実行する場合、優れたユーザーエクスペリエンスを維持するには、Webパフォーマンス手法の適用が必須です。
機能に関しては、PWAはそのプラットフォームのブラウザエンジンで利用可能なAPIにのみアクセスでき、アプリストアのPWAディストリビューションを除いて、ネイティブコードで拡張することはできません。この点で、iOSとiPadOSはPWAのより限定されたプラットフォームですが、Chrome（AndroidおよびデスクトップOS用）はより多くの可用性を備えており、FuguプロジェクトでJavaScriptにすべての可能なAPIを追加するために懸命に取り組んでいます。
- 最適なクラウドストレージ：適切なオプションを選択してください。
リアクトネイティブ
ReactNativeの強み
- React.jsと同じパターン
- 一部のWebAPIが公開されています
- Webおよびデスクトップのサポート
ReactNativeの弱点
- WebUIコンポーネントを再利用できません
- ネイティブブリッジにはいくつかの作業が必要です
- Reactの経験が必要です
React Nativeは、FacebookがスポンサーとなっているオープンソースのJavaScriptベースのコンポーネントフレームワークであり、ReactデザインパターンとJavaScript言語を使用して、iOS、iPadOS、Android用のネイティブアプリを1つのソースコードからコンパイルします。
ただし、レンダリングに使用できるHTML要素はありません。他のネイティブコンポーネントのみが有効です。したがって、レンダリングする代わりに div> とともに p> と 入力> JSXで要素をレンダリングすると、 表示> とともに テキスト> と TextInput>。コンポーネントのスタイリングには、引き続きCSSを使用し、レイアウトはFlexboxを介して定義されます。
ユーザーインターフェイスはブラウザのDOMでレンダリングされませんが、AndroidとiOSのネイティブユーザーインターフェイスライブラリを使用します。したがって、 ボタン> ReactNativeではiOSのUIButtonのインスタンスになり、 android.widget.Button Androidのクラス。 ReactNativeに関係するWebランタイムはありません。
ただし、すべてのJavaScriptコードはデバイス上のJavaScript仮想マシンで実行されるため、アプリのコンパイル時にJavaScriptから実際のネイティブコードへの変換は行われません。 Fetch API、WebSocket、ブラウザーのタイマーなど、Web開発者向けのよく知られたAPIのセットがあります：setIntervalおよびrequestAnimationFrame。その他の機能は、アニメーションなどのカスタムAPIを介してプラットフォームにデプロイされます。
Expoまたはより高度で公式なReactNativeCLIの2つの無料CLIを使用して、簡単なReactNativeプロジェクトを開始できます。公式CLIを使用する場合は、AndroidアプリをコンパイルしてテストするためのAndroid StudioとiOSとiPadOSで同じことを行うためのXcodeも必要になるため、そのプラットフォーム用のmacOSコンピューターが必要になります。
React Nativeは、iOSおよびAndroid用のネイティブアプリをコンパイルします。つまり、アプリの配布は、他のネイティブアプリと同じルール（パブリックアプリのアプリストア、エンタープライズ配布、アルファ/ベータテスト）に従います。通常、ブラウザーを介してアプリを配布することはできませんが、React Native forWebおよびMicrosoftのReactNative forWindowsプラットフォームが役立ちます。
NativeScript
NativeScriptの強み
- コーディングとテストに適したツール
- 遊ぶ準備ができているアプリの広範なギャラリー
- すべてのAndroidおよびiOSAPIはJSで公開されています
NativeScriptの弱点
- 小さなコミュニティ
- WebUIコンポーネントを再利用できません
- Web、デスクトップ、またはReactのサポートはありません
NativeScriptはReactNativeほどよく知られていませんが、同じ分野で競合しています。JavaScriptとWebフレームワークのネイティブiOSアプリとAndroidアプリです。 JavaScriptまたはTypeScriptとXMLユーザーインターフェイスファイルを使用して、ネイティブアプリを作成できます。また、AngularとVueをすぐにサポートするため、これらのフレームワークに慣れている開発者にとっては優れたソリューションです。
AngularまたはVueを使用すると、NativeScriptの利点がより明確になります。 Angularの場合、すべてのデータバインディングを含め、テンプレートにHTMLではなくXMLを使用して、以前と同じコンポーネントを作成します。 XMLでは、 div> とともに p> と img>、あなたは配置します StackLayout> とともに ラベル> と 画像> 成分。
CSSとSassは、ブラウザーのCSSと同様のスタイルでサポートされています。ルーティングとネットワーク管理は、標準のAngularサービスの実装を通じて行われます。 Vueの場合、これは似たようなものです。同じでHTMLを使用する代わりに、XMLでテンプレートを記述します テンプレート> .vueファイルの要素。
NativeScriptには、AndroidまたはiOSのネイティブコントロールにマップされるコンポーネントのコレクションが含まれているため、リストまたはピッカーをレンダリングすると、React Nativeと同じ考え方を使用して、ネイティブアプリになります。
JavaScriptまたはTypeScriptコード（トランスパイル）は、ネイティブ環境との間のブリッジを備えたデバイス上のJavaScript仮想マシンで実行されます。そのブリッジでは、AndroidまたはiOS / iPadOSのネイティブAPI全体が公開されているため、クロスプラットフォームAPIにアクセスできるにもかかわらず、JavaScript / TypeScriptからJavaまたはObjective-Cコードをインスタンス化または呼び出すことができ、NativeScriptはデータ型をマーシャリングします。
NativeScriptは、VSコードプラグイン、CLI、ホットリロードテストシステム、NativeScriptプレイグラウンドアプリなどのツールを強力にサポートしているため、テスト中にすべての依存関係をインストールする必要はなく、オンラインなどのいくつかの追加サービスも必要ありません。遊び場。
最後に、NativeScriptは、AndroidとiOS向けのアプリのみをコンパイルします。これらのアプリは、ルール、エンタープライズディストリビューション、アルファ/ベータテストに準拠している場合に、公式の配布チャネルとアプリストアからインストールできます。通常、ブラウザーからアプリを配布する方法はなく、このプラットフォーム用のデスクトップアプリのソリューションもありません。
この記事はもともとで公開されました 325号 of netは、ウェブデザイナーと開発者向けの世界で最も売れている雑誌です。購入 325号 または 申し込む ネットに。
2020年4月にGenerateJSでJavaScriptスーパースターのラインナップに参加してください。このカンファレンスは、より優れたJavaScriptの構築を支援します。今すぐ予約generateconf.com
