Skip to main content

Analyze Your Code and Deploy It to Your Org

メモ

メモ

日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語で受講していただく必要があります。英語の意味についてはかっこ内の翻訳をご参照ください。Trailhead Playground では (1) [Locale (地域)] を [United States (米国)] に、[Language (言語)] を [English (英語)] に切り替えて、(2) 英語の値のみをコピーして貼り付けてください。こちらの指示に従ってください。

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

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 はインポートしていません。これを修正しましょう。

  • 中括弧内の LightningElement のすぐ後を右クリックします。
  • track (トラック) と入力します。2 つの語はカンマで区切ってください。次のようなコードになります。
    import { LightningElement, track } from 'lwc';
  • 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 では 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 コンポーネント拡張機能と連携して使用する方法を学習します。

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

    インテリセンスウィンドウに表示された HTML マークアップ
  4. [contact] を選択し、Enter キーを押して contact を挿入します。
  5. s を付けて contacts と複数形にします。
  6. 次に、赤でマークされた div タグに key={contact.Id} という属性を追加します。
  7. 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 基本コンポーネントのドキュメント

メモ

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

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

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

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

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

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

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

次は、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 (組織のデフォルトとして割り当て)] をクリックし、[Next (次へ)] をクリックして、[Save (保存)] をクリックします。
  7. [Back (戻る)] (戻る) をクリックして、Account (取引先) レコードに戻ります。

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

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

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