ローカル開発を使用してコンポーネントをプレビューする

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

このプロジェクトでは、ここまでにスクラッチ組織 (別名 scratchOrg)、Lightning アプリケーション、Lightning Web コンポーネント (myFirstWebComponent) を作成しました。次はローカル開発を実行して、Lightning アプリケーションのリアルタイムプレビューでコンポーネントを表示します。

デスクトップ環境の Lightning アプリケーションのローカル開発を実行する

ローカル開発を使用すれば、デスクトップまたは Salesforce モバイルアプリケーション (iOS または Android) 環境の Lightning アプリケーションのリアルタイムプレビューを実行できます。ローカルコンポーネントが変更されるとプレビューが自動的に更新されるため、コードをリリースしたり、ブラウザーページを更新したりする必要はありません。デスクトッププレビューを実行する場合とモバイルプレビューを実行する場合では、コマンドフラグが異なります。

ローカル開発を使用して、デスクトップ環境のセールス Lightning アプリケーションをプレビューしてみましょう。スクラッチ組織には、使用できるデフォルトアプリケーションがいくつか付属しています。

1. Visual Studio Code で、macOS の場合は Command+Shift+P、Windows または Linux の場合は Ctrl+Shift+P を押し、new terminal と入力し、[Terminal: Create New Terminal] を選択します。
   
2. ローカル開発コマンドの最新バージョンがあることを確認してください。[Terminal (ターミナル)] タブで、sf update と入力し、Enter キーを押します。
   
3. 更新が完了したら、同じ [Terminal (ターミナル)] タブで sf lightning dev app --target-org scratchOrg --device-type desktop と入力し、Enter キーを押します。
   
4. プレビューする Lightning Experience アプリケーションを選択するように求められたら、矢印キーを使用して [Sales (セールス)] を選択し、Enter キーを押します。
   

コマンドが正常に実行されると、ブラウザーの新しいタブが開き、組織の [Seller Home (営業ホーム)] ページのプレビューが表示されます。これで、スクラッチ組織でローカル開発が有効になりました。コマンドで使用したパラメーターは次のとおりです。

• --target-org はプレビューする対象組織を定義します。このフラグを scratchOrg に設定しました。
  
• --device-type はプレビューを実行する環境を定義します。このフラグを desktop に設定したことで、プレビューがデスクトップ環境で実行されました。
  

sf lightning dev app コマンドのその他の省略可能なフラグについての詳細は、『Lightning Web コンポーネント開発者ガイド』の「Lightning アプリケーションのプレビュー (正式リリース)」を参照してください。

次に、コンポーネントを編集して、ローカル開発のプレビューがリアルタイムで更新される様子を見てみましょう。

1. ブラウザーで、[Accounts (取引先)] タブをクリックし、[Component Developers (コンポーネント開発者)] レコードを開きます。
   
2. Visual Studio Code で、myFirstWebComponent.html を開きます。
   
3. <lightning-card> 要素で、title の値を “ContactInformation” から “Contact Information” に変更します。コードの更新された行は次のようになります。
   <lightning-card title="Contact Information" icon-name="custom:custom14">
4. macOS の場合は Command + S、Windows または Linux の場合は Ctrl + S を押して、ファイルを保存します。
   

ブラウザーでアプリケーションのプレビューを見ると、コンポーネントのタイトルがローカルでの変更に基づいて自動的に更新されています。変更を表示するために、アプリケーションを再リリースしたり、手動でページを更新する必要はありませんでした。

iOS 環境の Lightning アプリケーションのローカル開発を実行する (macOS のみ)

ローカル開発を使用すれば、iOS シミュレーターまたは Android エミュレーターでプロジェクトを表示できます。同じ Lightning アプリケーションの iOS 環境でのプレビューを実行する方法を見ていきましょう。

このセクションでは、iOS シミュレーターについてのみ説明しますが、同じプロセスに従って Android エミュレーターを使用することもできます。Android Studio でのローカル開発の使用についての詳細は、「Android エミュレーター」を参照してください。

Mac ユーザーは Xcode を使用してローカル開発の iOS シミュレーターを実行できます。まだ Xcode をインストールしていない場合は、Mac App Store からインストールして、初期設定プロセスを完了します。必ず、モバイルデバイス用の iOS シミュレーターをダウンロードしてください。

Xcode のインストールが完了したら、Visual Studio Code を開きます。iPhone シミュレーターで Lightning アプリケーションを実行しましょう。

1. Visual Studio Code で、Command+Shift+P を押し、new terminal と入力し、[Terminal: Create New Terminal] を選択します。
   
2. 新しいターミナルウィンドウで sf lightning dev app --target-org scratchOrg --device-type ios を実行します。
   
3. プレビューする Lightning Experience アプリケーションを選択するように求められたら、[Sales (セールス)] を選択し、Enter キーを押します。
   
4. プレビューに使用するデバイスを選択するように求められたら、有効なオプションのリストから [iPhone] を選択します。
   
5. Salesforce モバイルアプリケーションをダウンロードしてインストールするように求められたら、y と入力し、Enter キーを押します。
   

ローカル開発コマンドが正常に実行されると、ターミナル出力は次のようになります。

sf lightning dev app --target-org scratchOrg --device-type ios
? Which Lightning Experience App do you want to use for the preview? Sales
✔ Requirements (0.444 sec)
  ✔ PASSED: Checking macOS Environment (0.000 sec)
  ✔ PASSED: Checking Xcode (0.029 sec)
    › Xcode installed: Xcode 16.2 Build version 16C5032a
  ✔ PASSED: Checking Supported Simulator Runtime (0.414 sec)
    › One or more supported simulator runtimes are configured for iOS: iOS 17.0 iOS 18.2
? Which device do you want to use for the preview? iPhone 15 Pro, iOS 17
Booting device iPhone 15 Pro, iOS 17.0.0, DCF7AD98-FAC7-4267-A546-14A80F874209... done
Installing self-signed certificate... done
? Salesforce Mobile App isn’t installed on your device. Do you want to download and install it? yes
Preparing to download... done
Installing app com.salesforce.chatter... done
terminating app com.salesforce.chatter... done

iPhone シミュレーターで Salesforce アプリケーションが自動的に開きます。アプリケーションの利用規約に同意します。シミュレーターに Salesforce のログインページが表示されます。

次の手順に従って、アプリケーションでスクラッチ組織を開きます。

1. シミュレーターの右上隅にある [Settings (設定)] () をクリックし、[Choose Connection (接続を選択)] メニューを開きます。
   
2. [Choose Connection (接続を選択)] メニューで、[Add (追加)] () をクリックして新しいホストを追加します。
   
3. [Host (ホスト)] 項目のドメインはスクラッチ組織の URL にする必要があります。この URL は、VS Code ターミナルウィンドウで sf org display user --target-org scratchOrg を実行して調べることができます。
   
4. ターミナル出力からインスタンス URL をコピーして、シミュレーターの [Host (ホスト)] 項目に次のように貼り付けます。
   
   
5. 次に、iOS シミュレーターの右上隅の [Done (完了)] をクリックして新しいドメインを追加し、Salesforce ログインページに戻ります。
   
6. [Username (ユーザー名)] 項目に、ステップ 3 でターミナル出力からコピーした [Username (ユーザー名)] をコピーして貼り付けます。ユーザー名は test-value@example.com の形式に従っている必要があります。
   
7. このユーザー名の有効なパスワードを取得するには、VS Code ターミナルで、sf org generate password --target-org scratchOrg と入力し、Enter キーを押します。
   
8. ターミナル出力からパスワードをコピーして、iOS シミュレーターの [Password (パスワード)] 項目に貼り付け、[Log In to Sandbox (Sandbox にログイン)] をクリックします。
   
9. 必要に応じて、指定されたメールアドレスに送信された確認コードを入力します。
   
10. アプリケーションから組織へのアクセスを求められたら、[Allow (許可)] を選択します。
    
    

これで iOS シミュレーターに Salesforce アプリケーションが表示されます。セールスアプリケーションで Component Developers (コンポーネント開発者) 取引先に移動して、ローカル開発の動作を確認しましょう。

1. アプリケーションの右下隅にある [Menu (メニュー)] をクリックし、[Accounts (取引先)] を選択します。
   
2. [Recent Accounts (最近の取引先)] の下にある [Component Developers (コンポーネント開発者)] をクリックします。myFirstWebComponent LWC がページに表示されます。
   
3. Visual Studio Code で、myFirstWebComponent.html を開きます。
   
4. <lightning-card> 要素で、title の値を “Contact Information” から “Contact Info” に変更します。コードの更新された行は次のようになります。
   <lightning-card title="Contact Info" icon-name="custom:custom14">
5. macOS の場合は Command + S、Windows または Linux の場合は Ctrl + S を押して、ファイルを保存します。
   

iOS シミュレーターに戻り、コンポーネントのタイトルが自動的に更新されていることを確認します。ローカル開発を使用してすばやくコンポーネントの反復作業ができました。

これで終わりです。このプロジェクトでは、Lightning Web コンポーネント開発で推奨される開発者ツールをインストールして使用しました。エラーを含むコードをコピーして貼り付けました (今後は避けてください)。ローカル開発を使用して、デスクトップ環境の Lightning Web コンポーネントのリアルタイムプレビューを表示しました。Mac ユーザーの場合は、ローカル開発を使用して iPhone 環境のコンポーネントもプレビューしました。

スクラッチ組織では作業をチェックできませんが、[Verify Step (ステップを確認)] をクリックしてバッジを獲得することはできます。Trailhead のサンプルアプリケーションと Lightning Web コンポーネントのレシピで他のコード例を確認し、優れた Lightning Web コンポーネントを開発する方法を学んでください。

リソース

• Trailhead: Lightning Web コンポーネント用のモバイル開発者ツールを設定する