デベロッパー エクスペリエンス
ミニアプリそのものについては説明しましたので、ここからはさまざまなスーパーアプリ プラットフォームのデベロッパー エクスペリエンスに焦点を当てたいと思います。すべてのプラットフォームでのミニアプリの開発は、スーパー アプリ プラットフォームが無料で提供する IDE で行われます。他にもありますが、ここでは最も人気のある 4 つと、比較用の Quick App の 5 つに焦点を当てます。
ミニアプリ IDE
スーパーアプリと同様に、IDE のほとんどは中国語でのみ利用できます。英語（または海外）版は最新でない可能性があるため、中国語版をインストールするようにしてください。macOS デベロッパーの場合は、すべての IDE が署名されているわけではないため、macOS がインストーラの実行を拒否することに注意してください。ご自身の責任において、Apple のヘルプに記載されているとおりに、この手順をスキップできます。
ミニアプリのスターター プロジェクト
ミニアプリの開発をすぐに開始できるように、すべてのスーパーアプリ プロバイダがデモアプリを提供しています。デモアプリはすぐにダウンロードしてテストできます。また、さまざまな IDE の [新しいプロジェクト] ウィザードに統合されている場合もあります。
開発フロー
IDE を起動して（デモ）ミニアプリを読み込むか作成したら、まずログインします。通常は、IDE で生成された QR コードをスーパーアプリ（すでにログイン済み）でスキャンするだけで済みます。パスワードの入力が必要になることはほとんどありません。ログインすると、IDE はユーザーの身元を認識し、プログラミング、デバッグ、テスト、審査のためのアプリの送信を開始できます。以下に、上記の段落で説明した 5 つの IDE のスクリーンショットを示します。
ご覧のとおり、すべての IDE の基本コンポーネントは非常に似ています。Monaco Editor に基づくコードエディタが常に用意されています。これは、VS Code を支えるのと同じプロジェクトです。すべての IDE に、Chrome DevTools フロントエンドをベースにしたデバッガが用意されています。これについては後で詳しく説明します（デバッガを参照）。IDE 自体は NW.js または Electron アプリとして実装され、IDE のシミュレータは NW.js <webview> タグまたは Electron <webview> タグとして実現されます。これらのタグは Chromium <webview> タグに基づいています。IDE の内部構造に関心がある場合は、多くの場合、キーボード ショートカット Ctrl+Alt+I（Mac の場合は Command+Option+I）を使用して Chrome DevTools で検査できます。
![Chrome DevTools を使用して Baidu の DevTools を検査し、Chrome DevTools の [Elements] パネルにシミュレータの WebView タグを表示している様子。](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/chrome-devtools-used-ins-107c9e255b2fa.png?authuser=1&hl=ja)
<webview> タグとして実現されていることがわかります。シミュレータと実際のデバイスでのテストとデバッグ
シミュレータは、Chrome DevTools のデバイスモードで知られているものと同等です。さまざまな Android デバイスと iOS デバイスをシミュレートしたり、スケールやデバイスの向きを変更したりできるだけでなく、さまざまなネットワーク状態、メモリ負荷、バーコード読み取りイベント、予期しない終了、ダークモードをシミュレートすることもできます。
組み込みのシミュレータでアプリの動作を大まかに把握することはできますが、通常のウェブアプリと同様に、デバイス上でのテストは不可欠です。開発中のミニアプリのテストは、QR コードをスキャンするだけで行えます。たとえば、ByteDance DevTools では、IDE によって動的に生成された QR コードを実機でスキャンすると、クラウドでホストされているミニアプリのバージョンが開き、すぐにデバイスでテストできます。ByteDance の場合、QR コードの背後にある URL（example）は、ホストされているページ（example）にリダイレクトされます。このページには、たとえば snssdk1128:// などの特別な URI スキームを含むリンクが含まれており、Douyin や Toutiao などのさまざまな ByteDance スーパーアプリでミニアプリをプレビューできます（例）。他のスーパーアプリ プロバイダでは、中間ページを経由せずにプレビューが直接開きます。
さらに魅力的な機能は、クラウドベースのプレビュー リモート デバッグです。同様に、IDE で生成された特別な QR コードをスキャンするだけで、ミニアプリが実機で開き、リモート デバッグ用の Chrome DevTools ウィンドウがパソコンで実行されます。
デバッガ
要素のデバッグ
ミニアプリのデバッグ エクスペリエンスは、Chrome DevTools を使用したことがあるユーザーには非常に馴染み深いものです。ただし、ミニアプリに合わせたワークフローにするための重要な違いがいくつかあります。Chrome DevTools の [Elements] パネルの代わりに、ミニアプリ IDE には、特定の HTML 言語に合わせてカスタマイズされたパネルがあります。たとえば、WeChat の場合、パネルは Wxml と呼ばれます。これは WeiXin Markup Language の略です。Baidu DevTools では、Swan 要素と呼ばれます。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?authuser=1&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 によってレビューされました。