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