コードの分析と組織へのリリース

Lightning Web コンポーネント開発用の推奨ツールをインストールしました。そして、リリースが失敗することがわかっている壊れたコードをコピーして貼り付けました。恐らくみなさんは実際にこのようなことをしたことはないでしょう。

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

JavaScript のエラーを修正する

開発者として最も重要なタスクは、インターネットで (正常に機能する) コードを検索した後、機能するコードを自分で記述することです。引き起こしたエラーを修正しましょう。まずは JavaScript ファイルからです。

  1. Visual Studio Code を開きます。
  2. myFirstWebComponent.js をクリックします。
  3. 赤の下線が引かれた track の上にマウスポインタを置きます。この特定のエラーに関連するエラーメッセージが表示されます。
    「Decorators transform is necessary (デコレータ変換が必要です)」と「‘track’ is not defined (‘track’ が定義されていません)」というエラーメッセージを表示するホバーウィンドウ
  4. [Problems (問題)] タブをクリックして、現在開いているファイルに含まれるすべてのエラーを表示します。次のように表示されます。
    複数のエラーが表示された Visual Studio Code の [Problems (問題)] タブ

現在のファイルと [Problems (問題)] タブの両方に、コード内で検出されたエラーが表示されます。

最初のエラーメッセージは、Lightning Web コンポーネントエンジンの要件の結果であることを示しています。そのようなエラーには「LWC」が含まれ、その後に数字が続きます。コードをよく見ると、1 行目で lwc エンジンから LightningElement をインポートしていますが、track はインポートしていません。これを修正しましょう。

  1. 中括弧内の LightningElement のすぐ後を右クリックします。
  2. track」と入力します。2 つの語はカンマで区切ってください。次のようなコードになります。
    import { LightningElement, track } from 'lwc';
  3. macOS で CMD+S、Windows または Linux で CTRL+S を押して、ファイルを保存します。

両方のエラーと赤線がなくなります。

メモ

メモ

IDE では、ユーザが文字を入力すると、デフォルトでファイルの内容が検証されます。これについては、Visual Studio Code 内の設定として、検証を入力時に行うか、ファイル保存後に行うかを設定できます。

でも待ってください。両方のエラーはなぜ消えたのでしょうか? それに、なぜもう 1 つのエラーメッセージの先頭に [eslint] が付いているのでしょうか?

Lightning Web コンポーネント拡張機能には、デフォルトで ESLint が含まれています。ESLint はコードのエラー、コーディングのベストプラクティスなどを評価する構文チェックツールです。Salesforce では、Lightning Web コンポーネント開発者が優れたコードを記述できるよう特定の ESLint ルールを標準で提供しています。間違えた場合は、コードをリリースする前に構文チェックルールで見つけることができます。素晴らしいですね。

前述のエラーメッセージは [no-undef] を示していました。このエラーメッセージは、プロパティ (この場合は decorator track) を定義したが、前に宣言されていないことを意味します。これは、コードをクリーンでメンテナンスしやくするために非常に役に立つ、数多くある構文チェックルールの1 つです。

lwc メタデータフォルダに自動的に追加された .eslintrc ファイルを覚えていますか? これは、Salesforce 固有の構文チェックルールを定義する設定ファイルです。

{
   "extends": "plugin:@salesforce/eslint-config-lwc/recommended"
}

Salesforce では baserecommendedextended を含む様々なルールセットが提供されています。これらの構文チェックルールはプロジェクトに固有のものなので、プロジェクトごとに異なるルールセットを使用できます。

メモ

メモ

Lightning Web コンポーネントをリリースするときに、Salesforce では自動的に @salesforce/eslint-config-lwc/base 構文チェックルールに対してコードが検証されます。構文チェックルールを自分で設定する場合は、その点に留意してください。

ESLint または Salesforce が提供する構文チェックルールについての詳細は、GitHub リポジトリを参照してください。

JavaScript ファイルが正常に機能するようになったので、次は Web コンポーネントテンプレートの HTML マークアップを修正しましょう。

HTML テンプレートのエラーを修正する

JavaScript ファイルのエラーを修正したので、次は Visual Studio Code のインテリセンス機能を Salesforce Lightning Web コンポーネント拡張機能と連携して使用する方法を学習します。

  1. Visual Studio Code で myFirstWebComponent.html を開きます。
  2. 赤の下線が引かれた for:each 属性の空の中括弧内にカーソルを置きます。
  3. CTRL+Space キーを押します。インテリセンスドロップダウンが表示されます。
    インテリセンスウィンドウに表示された HTML マークアップ
  4. Enter キーを押します。
  5. 次に、赤でマークされた div タグに次の属性を追加します。
    key={contact.Id}
  6. macOS で CMD+S、Windows または Linux で CTRL+S を押して、ファイルを保存します。

コードは次のようになります。

<lightning-card title="ContactInformation" icon-name="custom:custom14">
   <div class="slds-m-around_medium">
      <template for:each={contacts} for:item="contact">
         <div key={contact.Id}>
            {contact.Name}, {contact.Title}
         </div>
      </template>
   </div>
</lightning-card>

コードを修正しているときに、次の 2 つのことがありました。

1 つ目は、HTML マークアップ内の式のインテリセンス。Lightning Web コンポーネント拡張機能ではインテリセンスを使用できます。つまり、JavaScript ファイルに他のプロパティまたは関数を追加すると、それらは自動的にテンプレートファイル内で使用できるようになります。これは大幅な時間の節約になります。

2 つ目は、その場でコード (この場合はマークアップ) の検証が行われたことです。これは JavaScript ファイルと同様です。たとえば、必要な属性がなければ、IDE によって指摘されます。

また、テンプレート内のすべての Lightning 基本コンポーネントでインテリセンスを使用できます。「<lightning」と入力し始めると、次のようなリストが表示されます。

Lightning 基本コンポーネントのリストを表示する Lightning 基本コンポーネントのインテリセンスウィンドウ

さらに、既存のマークアップの上にカーソルを置くと、選択した基本コンポーネントに関する豊富な情報が表示されます。

Lightning 基本コンポーネントのドキュメント

新しい Lightning Web コンポーネントをリリースして設定する

すべてのコードを修正したところで、次はローカルメタデータをスクラッチ組織にプッシュします。

  1. Visual Studio Code を開きます。
  2. macOS で Command+Shift+P、Windows または Linux で Ctrl+Shift+P を押し、「focus terminal」と入力します。Enter キーを押します。
  3. 次のコマンドを入力してメタデータを組織にリリースします。
    sfdx force:source:push
  4. Enter キーを押します。

メタデータがスクラッチ組織に正常にプッシュされたら、コンポーネントを Account (取引先) レコードレイアウトに追加できます。

メモ

メモ

force:source:deploy コマンドを使用して、スクラッチ組織に対して Lightning Web コンポーネントを開発することもできます。ソース駆動型開発についての詳細は、「Salesforce CRM のカスタマイズと拡張機能」モジュールの「Salesforce 環境と Salesforce DX で迅速なイノベーション」単元を参照してください。

Visual Studio Code をすでに開いているので、Salesforce CLI の別の機能を利用できます。

  1. Visual Studio Code ターミナルに移動します。
  2. 次のコマンドを入力して Enter キーを押すと、デフォルトのスクラッチ組織が開きます。
    sfdx force:org:open

次は、Account (取引先) オブジェクトレイアウトを設定しましょう。

  1. アプリケーションランチャー (アプリケーションランチャーアイコン) で、[Sales (セールス)] を見つけて選択します。
  2. [Accounts (取引先)] タブをクリックし、[New (新規)] をクリックして取引先を作成します。[Account Name (取引先名)] に「Component Developers」(コンポーネント開発者) と入力し、[Save (保存)] をクリックします。
  3. ギアアイコン (設定ギア) をクリックし、[Edit Page (編集ページ)] を選択して Lightning アプリケーションビルダーを開きます。
  4. myFirstWebComponent コンポーネントをページにドラッグします。
  5. [Save (保存)] をクリックし、[Activate (有効化)] をクリックします。
  6. [Assign as Org Default (組織のデフォルトとして割り当て)] をクリックし、[Save (保存)] をクリックします。
  7. [Back (戻る)] をクリックして、Account (取引先) レコードに戻ります。

これで終わりです。このプロジェクトでは、Lightning Web コンポーネント開発で推奨される開発者ツールのインストール方法と使用方法を説明しました。また、エラーを含むコードをコピーして貼り付ける方法も説明しました (今後は避けてください)。

[Verify Step (ステップを確認)] をクリックして、バッジを獲得します。Trailhead の「Sample Gallery (サンプルギャラリー)」Lightning Web コンポーネントのレシピでその他の例を参照し、優れた Lightning Web コンポーンネントを開発する方法をコードから学んでくさい。

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