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

メモ

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

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

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

JavaScript のエラーを修正する

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

Visual Studio Code を開きます。
myFirstWebComponent.js をクリックします。
赤の下線が引かれた track の上にマウスポインターを置きます。この特定のエラーに関連するエラーメッセージが表示されます。

@track
c:\Git\set-up-lwc-dev-tools\myFirstWebComponent.js: LWC1102: Invalid ‘track’ decorator usage.
Supported decorators (api, wire, track) should be imported from “lwc” lwc

[Problems (問題)] タブをクリックして、現在開いているファイルに含まれるすべてのエラーを表示します。次のように表示されます。

Visual Studio の [Problems (問題)] に 2 つのエラー、「for:each directive is expected to be an expression (for:each ディレクティブは式であることが想定されています)」と「invalid track decorator usage (無効な track デコレーターの使用です)」が表示されている。

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

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

中かっこ内の LightningElement のすぐ後を右クリックします。
track (トラック) と入力します。2 つの語はカンマで区切ってください。次のようなコードになります。
import { LightningElement, track } from 'lwc';
macOS の場合は Command + S、Windows または Linux の場合は Ctrl + S を押して、ファイルを保存します。

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

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

でも待ってください。両方のエラーはなぜ消えたのでしょうか?

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

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

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

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

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

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

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

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

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

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

Visual Studio Code で myFirstWebComponent.html を開きます。
赤の下線が引かれた for:each 属性の空の中かっこ内にカーソルを置きます。
Ctrl + Space キーを押します。インテリセンスドロップダウンが表示されます。

インテリセンスウィンドウが表示された HTML マークアップ。

[contact] を選択し、Enter キーを押して contact を挿入します。
s を付けて contacts と複数形にします。
次に、赤でマークされた div タグに key={contact.Id} という属性を追加します。
macOS の場合は Command + 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-accordion や lightning-button など) のリストが表示された Lightning 基本コンポーネントのインテリセンスウィンドウ。

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

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

コードまたはトークンに関する警告メッセージの原因の 1 つは、Salesforce CLI のインストールが古いことです。CLI によって生成されるコンポーネントコードは、使用している CLI のインストールでは最新であるというだけです。SLDS Validator (Salesforce Extensions Pack の 1 つ) は古いコードにフラグを付けるため、古い CLI では警告が多くなる可能性があります。

このバッジでは、この手順の完了には関係ないため、設計トークンの警告を無視して構いません。ただし、このバッジ以外では、すべての警告メッセージを調査し、Salesforce CLI を最新の状態に保つ必要があります。

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

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

組織にメタデータをリリースするには、[Terminal (ターミナル)] タブに次のコマンドを入力します。
sf project deploy start --target-org scratchOrg
Enter キーを押します。

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

スクラッチ組織を開くには、[Terminal (ターミナル)] タブに次のコマンドを入力します。
sf org open --target-org scratchOrg
Enter キーを押します。

スクラッチ組織でローカル開発が有効になりました。ただし、ローカル開発 CLI コマンドを実行するまではリアルタイムプレビューは表示されません。これについては後ほど説明します。

次は、Account (取引先) レコードページを設定しましょう。

アプリケーションランチャー () で、[Sales (セールス)] を見つけて選択します。
[Accounts (取引先)] タブをクリックし、[New (新規)] をクリックして取引先を作成します。
[Account Name (取引先名)] に Component Developers (コンポーネント開発者) と入力し、[Save (保存)] をクリックします。
[Setup (設定)] () をクリックし、[Edit Page (ページを編集)] を選択して Lightning アプリケーションビルダーを開きます。
myFirstWebComponent コンポーネント ([Custom (カスタム)] の下) をページにドラッグします。
Lightning アプリケーションビルダーのメニューバーで、[Desktop (デスクトップ)] をクリックしてドロップダウンを開き、[Phone (電話)] を選択します。
もう一度、myFirstWebComponent コンポーネントをページにドラッグします。
[Save (保存)] をクリックし、[Activate (有効化)] をクリックします。
[Assign as Org Default (組織のデフォルトとして割り当て)] をクリックし、[Desktop and phone (デスクトップおよび電話)] を選択します。
[Next (次へ)]、[Save (保存)] の順にクリックします。
[Back (戻る)] () をクリックして取引先レコードに戻ります。
Lightning Web コンポーネントは次のようになります。