Lightning Web コンポーネントを作成する

このステップでは、インストールしたツールの使用方法を学習します。

エキスパートから直接学べることをご存知でしたか? この動画で、このプロジェクトのトピックについての詳細をご覧ください。

Salesforce DX プロジェクトを作成する

Salesforce CLI を使用した組織を操作するための基盤は Salesforce DX プロジェクトです。プロジェクトは、複数のローカル設定ファイルとリリースするコードで構成されます。Salesforce 用語では、このコードをメタデータと呼んでおり、Salesforce Platform の基盤です。Salesforce を使用し始めたばかりの方は、「プラットフォーム開発の基礎」でメタデータ駆動型アプローチについて詳細を参照してください。

Visual Studio Code を使用してプロジェクトを作成します。

  1. Visual Studio Code を開きます。
  2. macOS で Command+Shift+P、Windows または Linux で Ctrl+Shift+P を押し、「create project」と入力します。[SFDX: Create Project (SFDX: プロジェクトを作成)] を選択し、Enter キーを押します。
  3. デフォルトのプロジェクト種別選択の [Standard (標準)] はそのままにして、Enter キーを押します
  4. プロジェクト名として「trailhead」と入力し、Enter キーを押します。
  5. プロジェクトを保存するローカルマシンのディレクトリを選択します。[Create Project (プロジェクトを作成)] をクリックします。

素晴らしい! Lightning Web コンポーネントを使用するために、最初の Salesforce DX プロジェクトを作成しました。Visual Studio Code で自動的に新しいプロジェクトが開きます。

Dev Hub を承認する

次のステップは、Dev Hub の承認です。Trailhead Playground を使用していている場合は、次のステップで使用するログイン情報の取得方法を「Trailhead Playground のユーザ名とパスワードの取得」で学習できます。

  1. Visual Studio Code で、macOS の場合は Command+Shift+P、Windows または Linux の場合は Ctrl+Shift+P を押します。
  2. 「sfdx」と入力します。
  3. [SFDX: Authorize Dev Hub (SFDX: Dev Hub を承認)] を選択します。
  4. Dev Hub 組織のログイン情報を使用してログインします。
  5. [Allow (許可)] をクリックします。
    Dev Hub の認証画面
  6. ブラウザで認証した後、CLI は Dev Hub のログイン情報を記憶します。次のような成功メッセージが表示されます。開発者ハブの承認成功メッセージ

Dev Hub の認証は、スクラッチ組織を作成するための前提条件です。スクラッチ組織は、Salesforce Platform での開発用の一時的な環境です。これは次のステップで作成します。

スクラッチ組織を作成する

  1. Visual Studio Code で、macOS の場合は Command+Shift+P、Windows または Linux の場合は Ctrl+Shift+P を押します。
  2. 「sfdx」と入力します。
  3. [SFDX: Create a Default Scratch Org... (SFDX: デフォルトのスクラッチ組織を作成する...)] を選択します。
  4. Enter キーを押して、デフォルトの project-scratch-def.json を受け入れます。
  5. Enter キーを押して、デフォルトの trailhead というスクラッチ組織の別名を受け入れます。
  6. Enter キーを押して、デフォルトの 7 days (7 日間) というスクラッチ組織の期間を受け入れます。
  7. スクラッチ組織が作成されるまでしばらくお待ちください。VS Code の出力パネルに次のような成功メッセージが表示されます。
17:18:11.779 sfdx force:org:create -f config\project-scratch-def.json --setalias trailhead --durationdays 7 --setdefaultusername --json --loglevel fatal ended with exit code 0

最初の Lightning Web コンポーネントを開発する準備が整いました。Salesforce DX についての詳細は、「Salesforce DX を使用したアプリケーション開発」を参照してください。

Lightning Web コンポーネントを作成する

Lightning Web コンポーネントの作成は単純なプロセスです。そのうえ、Salesforce CLI ですでにプロジェクト構造が作成されているので、さらに簡単に作成を開始できます。

フォルダ構造は次のようになっています。

ファイルエクスプローラに表示された Visual Studio Code 内の Salesforce DX プロジェクト。.sfdx、.vscode、config、force-app のサブディレクトリを含む。

作成したプロジェクトには、force-app/main/default という特別なフォルダがあります。このフォルダはパッケージディレクトリと呼ばれ、現在の Salesforce DX プロジェクトのすべてのメタデータが含まれています。Lightning Web コンポーネントもメタデータであるため、lwc というサブフォルダに保存されます。次のステップでは、Lightning Web コンポーネントをこのフォルダに追加します。

メモ

メモ

lwc フォルダには、.eslintrc と jsconfig.json という 2 つのファイルがあります。これらについては、このプロジェクトで後ほど説明します。

Salesforce DX プロジェクトを作成するのに使用したように、Lightning Web コンポーネントの作成にも Visual Studio Code を使用できます。または、Salesforce CLI を直接使用できます。

  1. Visual Studio Code を開きます。
  2. macOS で Command+Shift+P、Windows または Linux で Ctrl+Shift+P を押し、「focus terminal」と入力します。Enter キーを押します。
  3. sfdx force:lightning:component:create -n myFirstWebComponent -d force-app/main/default/lwc --type lwc」と入力し、Enter キーで確定します。

最初の Lightning Web コンポーネントに必要なファイルが作成されます。

Lightning Web コンポーネントフォルダが展開されたメタデータディレクトリ構造。

コマンドで使用したパラメータは次のとおりです。

  • -n — Lightning Web コンポーネントフォルダの名前とファイルを定義します。
  • -d — Lightning Web コンポーネントの作成先であるターゲットディレクトリを定義します。ターゲットディレクトリの名前は lwc である必要があります。
  • --type — Lightning Web コンポーネントを作成することを示します。
メモ

メモ

実際にやってみてわかるように、開発プロセスで Salesforce CLI を使用するのは簡単です。代わりに Visual Studio Code を使用したい場合は、lwc フォルダを右クリックするか、Visual Studio Code でコマンドパレットを開いてください。どちらの方法でも、Salesforce CLI を呼び出す [SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーンネントを作成)] オプションが表示されます。

最初の Lightning Web コンポーネントにコードとメタデータを追加する

ここで、Lightning Web コンポーネントを構成するファイルを見てみましょう。あらかじめ用意されている HTML、JavaScript、XML をコピーして貼り付けます。最初は myFirstWebComponent.js-meta.xml ファイルです。

  1. lwc サブフォルダ内に作成した新しい myFirstWebComponent サブフォルダを開きます。
  2. myFirstWebComponent.js-meta.xml をクリックします。
  3. XML ファイルの内容を次の XML マークアップコードで置き換えます。
    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
       <apiVersion>45.0</apiVersion>
       <isExposed>true</isExposed>
       <targets>
           <target>lightning__AppPage</target>
           <target>lightning__RecordPage</target>
           <target>lightning__HomePage</target>
       </targets>
    </LightningComponentBundle>
  4. macOS で CMD+S、Windows または Linux で CTRL+S を押して、ファイルを保存します。

更新したファイルはメタデータ定義ファイルです。たとえば、Lightning アプリケーションビルダーを使用して Salesforce ユーザインターフェースのどこに追加できるか (ターゲット) を制御するなど、いくつかの設定要素が含まれています。メタデータ設定オプションについての詳細は、ドキュメントを参照してください。

次は、Lightning Web コンポーネントの JavaScript ファイルを更新します。

メモ

メモ

これからコピーして貼り付ける JavaScript コードと HTML マークアップにはエラーが含まれています。赤の波線が表示されても気にしないでください。このプロジェクトの後の方で、Visual Studio Code の機能と Salesforce Lightning Web コンポーネント拡張機能を使用して、エラーを解決します。

  1. Visual Studio Code で、myFirstWebComponent.js をクリックします。
  2. ファイルの内容を次のコードで置き換えます。
    import { LightningElement } from 'lwc';
    export default class HelloIteration extends LightningElement {
        @track
        contacts = [
            {
                Id: 1,
                Name: 'Amy Taylor',
                Title: 'VP of Engineering',
            },
            {
                Id: 2,
                Name: 'Michael Jones',
                Title: 'VP of Sales',
            },
            {
                Id: 3,
                Name: 'Jennifer Wu',
                Title: 'CEO',
            },
        ];
    }
  3. macOS で CMD+S、Windows または Linux で CTRL+S を押して、ファイルを保存します。

ファイルを保存するとすぐに目に付くものがあります。

  • @track というアノテーション付きの語の下に赤の波線が引かれています。
  • エクスプローラの JavaScript ファイルの色が赤に変わり、その横に「2」が表示されています。

エラーが強調された JavaScript ファイルを開く

どちらも JavaScript コードの何かが正しくないことを示しています。優秀な開発者であるあなたは、通常であればすぐに修正することでしょう。今はこの問題を無視しておきます。代わりに、Web コンポーネントテンプレートファイルに HTML マークアップを追加します。

  1. Visual Studio Code で、myFirstWebComponent.html をクリックします。
  2. 既存の <template></template> タグ内に次のマークアップを挿入します。
    <lightning-card title="ContactInformation" icon-name="custom:custom14">
       <div class="slds-m-around_medium">
          <template for:each={} for:item="contact">
             <div>
                {contact.Name}, {contact.Title}
             </div>
          </template>
       </div>
    </lightning-card>
  3. macOS で CMD+S、Windows または Linux で CTRL+S を押して、ファイルを保存します。

ここでも、HTML マークアップの何かが正しくないことがわかります。

HTML テンプレートファイルが開き、4 行目のエラーが強調されている

これも (今は) 無視しましょう。

通常、次のステップは組織へのプロジェクトのリリースですが、コードに多数のエラーがあるので、リリースは失敗します。あなたが実際にリリースの失敗を経験することがあるかどうかはわかりませんが、重要なのは、IDE に表示されるエラーに注意し、すぐに修正することです。

今は何も検証できないので、[Verify Step (ステップを確認)] をクリックして次の最後のステップに進み、コードを修正しましょう。

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる