Visual Studio Code からのコンポーネントのプレビュー

モバイル拡張機能プラグインをインストールして Xcode および Android Studio を設定したら、Visual Studio Code 向け Salesforce 拡張機能をインストールします。これで、VS Code コマンドパレットからモバイルプレビューを起動できるようになります。編集時にコンポーネントに対して行った視覚的な変更はモバイルプレビューにすぐに反映されます。

モバイルプレビューを起動すると、拡張機能により、選択したプラットフォーム (Android エミュレータまたは iOS シミュレータ) の仮想デバイスが初期化されます。選択できるオプションは、次のとおりです。

  • デフォルトの仮想デバイス
  • Android Studio または Xcode で設定した互換性のあるデバイス
  • デフォルト設定に基づく新しい名前付きデバイス (入力したカスタム名を使用)
  • 最後に使用した名前付きデバイス (存在する場合)

  1. Visual Studio Code 拡張機能をインストールするには、「Visual Studio Code 向け Salesforce 拡張機能」の手順を実行します。

  2. [Settings (設定)] では、拡張機能をカスタマイズすることもできます。

    1. [Log Level (ログレベル)] で、コンパイラメッセージの粒度を選択します。
    2. 最後に使用した名前付きデバイスを簡単に呼び戻せるように [Remember Device (デバイスを記憶)] をオンにします。

  3. Visual Studio Code で、Lightning Web コンポーネントプロジェクトを開きます。

  4. コンポーネントをプレビューするには、次のいずれかの方法を使用します。

    • プロジェクトで、コンポーネントフォルダを右クリックし、[SFDX: Preview Component Locally (SFDX: ローカルでコンポーネントをプレビュー)] を選択します。
    • コマンドパレットで、「preview component」と入力し、[SFDX: Preview Component Locally (SFDX: ローカルでコンポーネントをプレビュー)] を選択します。

  5. [Use Android Emulator (Android エミュレータを使用)] または [Use iOS Simulator (iOS シミュレータを使用)] を選択します。

  6. 次のいずれかの操作を実行します。

    • 記憶されたデバイス名のリストが表示された場合、リストからデバイスを選択します。
    • 新しい仮想デバイスの名前を入力します。
    • 項目を空白のままにして、デフォルト設定を使用します。

  7. カスタムネイティブアプリケーションでのプレビューの場合のみ: コンポーネントをモバイルブラウザでプレビューするかカスタムネイティブアプリケーションでプレビューするかを選択します。Lightning Web コンポーネントプロジェクトの設定ファイルでカスタムアプリケーションが記述されている場合、カスタムアプリケーションがリストに表示されます。VS Code の場合、プロジェクトのルートディレクトリにこのファイルが含まれている必要があります。

関連トピック