デベロッパー エクスペリエンス
ミニアプリ自体について説明したところで、ここではさまざまなスーパーアプリ プラットフォームのデベロッパー エクスペリエンスに焦点を当てたいと思います。すべてのプラットフォームのミニアプリ開発は、スーパーアプリ プラットフォームによって無料で提供されている IDE で行われます。まだたくさんありますが、ここでは特に人気の高い 4 つと、比較のために 5 つ目のクイックアプリに焦点を当てたいと思います。
ミニアプリの IDE
スーパーアプリと同様に、IDE の大部分は中国語でのみ提供されています。実際には、中国語バージョンをインストールし、英語（または海外）バージョンでは最新ではない場合があるため、インストールしていないことを確認する必要があります。macOS のデベロッパーは、署名されていない IDE もあるため、macOS ではインストーラの実行が拒否されます。Apple のヘルプで概説されているとおり、自己責任でこれをバイパスできます。
Mini アプリのスターター プロジェクト
ミニアプリの開発を迅速に開始するために、すべてのスーパーアプリ プロバイダがデモアプリを提供しています。デモアプリはすぐにダウンロードしてテストでき、場合によってはさまざまな IDE の「新しいプロジェクト」ウィザードに統合されることもあります。
開発フロー
IDE を起動してミニアプリ（デモ用）を読み込んだら、必ず最初にログインします。通常、IDE によって生成されたスーパーアプリ（すでにログインしている）で QR コードをスキャンするだけで済みます。パスワードを入力しなければならないことは、ほとんどありません。ログインすると、IDE がユーザーの ID を認識し、プログラミング、デバッグ、テスト、審査のためにアプリを送信できるようになります。以下に、上記の段落で説明した 5 つの IDE のスクリーンショットを示します。
ご覧のとおり、すべての IDE の基本的なコンポーネントはよく似ています。VS Code を支えているのと同じプロジェクトである Monaco Editor に基づくコードエディタが常に存在します。すべての IDE に、Chrome DevTools フロントエンドに基づくデバッガがありますが、変更点は後で詳しく説明します（デバッガをご覧ください）。IDE 自体は NW.js または Electron アプリとして実装され、IDE のシミュレータは NW.js <webview> タグまたは Electron <webview> タグとして実現され、これらは Chromium <webview> タグに基づきます。IDE の内部に興味がある場合は、Chrome DevTools でキーボード ショートカットの Ctrl+Alt+I（Mac の場合は command+option+I）を使用して確認するだけで済みます。
![バイドゥの DevTools を調べるために使用される Chrome DevTools。Chrome DevTools の [要素] パネルに、シミュレータの WebView タグが表示されています。](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/chrome-devtools-used-ins-107c9e255b2fa.png?hl=ja)
<webview> タグとして認識されていることがわかりました。
シミュレータと実機のテストとデバッグ
このシミュレータは、Chrome DevTools のデバイスモードで確認できるものと同様のものです。さまざまな Android デバイスと iOS デバイスをシミュレートしたり、スケールやデバイスの向きを変更したりできるだけでなく、さまざまなネットワーク状態、メモリ圧力、バーコード読み取りイベント、予期しない終了、ダークモードをシミュレートできます。
組み込みのシミュレータで、アプリの動作を大まかに把握するだけでは十分ですが、通常のウェブアプリのようなオンデバイス テストは不可能です。開発中のミニアプリのテストは、QR コードをスキャンするだけで完了します。たとえば、ByteDance DevTools では、IDE によって動的に生成された QR コードを実際のデバイスでスキャンすると、クラウドにホストされたバージョンのミニアプリが表示され、すぐにデバイスでテストできます。これが ByteDance で機能する仕組みとして、QR コードの背後にある URL（例）はホストされたページ（例）にリダイレクトされ、そこに snssdk1128:// などの特別な URI スキームのリンクが含まれ、Douyin や Toutiao などのさまざまな ByteDance スーパーアプリでミニアプリをプレビューできます（こちらは例）。他のスーパーアプリ プロバイダは中間ページを経由せず、プレビューを直接開きます。
さらに魅力的な機能として、クラウドベースのプレビューのリモート デバッグがあります。同様に IDE で生成された特別な QR コードをスキャンするだけで、物理デバイスでミニアプリが開き、リモート デバッグ用に Chrome DevTools ウィンドウがパソコン上で実行されます。
デバッガ
要素のデバッグ
ミニアプリのデバッグ エクスペリエンスは、Chrome DevTools を使った経験がある人にはおなじみのものです。ただし、ワークフローをミニアプリに合わせて調整する重要な違いがいくつかあります。ミニアプリの IDE には、Chrome DevTools の [Elements] パネルではなく、特定の HTML 言語に合わせてカスタマイズされたパネルがあります。たとえば、WeChat の場合、このパネルは Wxml（WeiXin Markup Language）と呼ばれます。Baidu DevTools では、Swan Element と呼ばれます。ByteDance DevTools では Bxml と呼ばれます。Alipay はこれに AXML という名前を付け、Quick App では単に「UX」としてパネルを参照します。これらのマークアップ言語については、後で詳しく説明します。
![WeChat DevTools の [Wxml] パネルでイメージを検査する使用されているタグが「image」タグであることがわかります。](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/inspecting-image-wechat-d732811586a65.png?hl=ja)
<image> 要素を検査する。
カスタム要素の仕組み
about://inspect/#devices を使用して実際のデバイスで WebView を調べると、WeChat DevTools が意図的に事実を隠していたことがわかります。WeChat DevTools に <image> が表示されていましたが、実際に見ているのは、<div> が唯一の子である <wx-image> というカスタム要素です。興味深いことに、このカスタム要素は Shadow DOM を使用しません。これらのコンポーネントの詳細については、後述します。
<image> 要素を調べると、これは実際には <wx-image> カスタム要素であることがわかりました。
CSS のデバッグ
もう 1 つの違いは、CSS のさまざまな言語におけるレスポンシブ ピクセル用の新しい長さの単位 rpx です（この単位については後述）。WeChat DevTools では、デバイスに依存しない CSS の長さ単位を使用することで、さまざまなデバイスサイズ向けの開発をより直感的に行うことができます。
200rpx 0）で指定されたパディングを検査します。
パフォーマンス監査
ミニアプリではパフォーマンスが最重要事項であるため、WeChat DevTools やその他の DevTools に、Lighthouse からヒントを得た統合監査ツールが組み込まれているのは当然のことです。監査の重点分野は 合計、パフォーマンス、経験、ベストプラクティスですIDE のビューをカスタマイズできます。以下のスクリーンショットでは、監査ツールの表示スペースを広げるために、一時的にコードエディタを非表示にしています。
API モック
API レスポンスのモックは、デベロッパーが別のサービスを設定するのではなく、WeChat DevTools に直接組み込まれています。デベロッパーは使いやすいインターフェースを使用して、API エンドポイントと必要な疑似レスポンスを設定できます。
謝辞
この記事は、Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent、Keith Gu によってレビューされました。