ミニアプリで効果的だったこと
この章では、ウェブ デベロッパーの視点からミニアプリの調査で得た教訓を検討し、ミニアプリ方式で開発する意味について説明します。
コンポーネント
タブ、アコーディオン、カルーセルなどの一般的な UI パラダイムの実装をデベロッパーが新たに作成しなくても済むように、ミニアプリにはデフォルトのコンポーネントが用意されています。必要に応じて拡張することもできます。ウェブでも同様に多くのオプションがあります。その一部は、ミニアプリ コンポーネントに関する章で説明しています。理想的には、ウェブ上のコンポーネント ライブラリは、自由に組み合わせられるように構築されています。実際には、コンポーネントを使用する際に購入する必要のあるデザイン システムに関する特定のロックインが存在するケースや、コンポーネント ライブラリがすべてまたはなしの形で配布され、個々のコンポーネントをプロジェクトに簡単に追加できないケースがあまりにも多いのです。ただし、単独で使用できるアトミック コンポーネントや、意図的にスタイル設定されていない generic-components などのライブラリもあります。そのような方法を見つけて使用することをおすすめします。
モデルビュー ビューモデル
モデルビュービューモデル（MVVM）アーキテクチャ パターンは、マークアップ言語を介したグラフィカル ユーザー インターフェース（ビュー）の開発とバックエンド ロジック（モデル）の開発を分離しやすくします。つまり、ビューは特定のモデル プラットフォームに依存しません。このパターンにはいくつかのデメリットが記載されていますが、一般的に、ミニアプリのような複雑なアプリには非常に適しています。特に、豊富なテンプレート ライブラリを使用する場合に効果的です（次の章を参照）。
ページ単位の思考
ミニアプリをデバッグすると、基本的にマルチページ アプリケーション（MPA）であることがわかります。これには、単純なルーティングや、ページごとの競合のないスタイル設定など、多くの利点があります。プログレッシブ ウェブアプリに MPA アーキテクチャを正常に適用しています。ページ単位で考えると、各ページの CSS ファイルや JavaScript ファイルなどのリソースや、画像や動画などのアセットを管理しやすくなります。最も重要なことは、この方法でビルドすると、他に何も読み込まない場合は、ルートベースのコード分割が無料で利用できることです。その場合、各ページは、機能するために必要なものだけを厳密に読み込みます。
ビルドプロセス
ミニアプリにはビルドプロセスは表示されません。ウェブでは、Snowpack などの最新のビルドツールが JavaScript の組み込みモジュール システム（ESM）を活用して、不要な作業を回避し、プロジェクトの規模に関係なく高速な状態を維持します。Web Bundles などのテクノロジーは初期段階ですが、ビルドプロセスに簡単に追加できます。
強力な機能
最近、ウェブ プラットフォームには多くの新機能が追加されています。Bluetooth、USB、HID、シリアル、NFC を介したデバイスへのアクセスが可能になりました。WebView で実行され、JavaScript ブリッジに依存するミニアプリの場合、ウェブではこれらの強力な機能を直接使用できるため、JavaScript ブリッジによって提供される API に対してではなく、中間エージェントなしでブラウザ API に対してプログラムします。
謝辞
この記事は、Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent、Keith Gu が確認しました。