Lightning Web コンポーネントを作成する
このステップでは、インストールしたツールの使用方法を学習します。
エキスパートから直接学べることをご存知でしたか? この動画で、このプロジェクトのトピックについての詳細をご覧ください。
Salesforce CLI を使用した組織を操作するための基盤は Salesforce DX プロジェクトです。プロジェクトは、複数のローカル設定ファイルとリリースするコードで構成されます。Salesforce 用語では、このコードをメタデータと呼んでおり、Salesforce Platform の基盤です。Salesforce を使用し始めたばかりの方は、「プラットフォーム開発の基礎」でメタデータ駆動型アプローチについて詳細を参照してください。
Visual Studio Code を使用してプロジェクトを作成します。
- Visual Studio Code を開きます。
- macOS で Command+Shift+P、Windows または Linux で Ctrl+Shift+P を押し、「create project」と入力します。[SFDX: Create Project (SFDX: プロジェクトを作成)] を選択し、Enter キーを押します。
- デフォルトのプロジェクト種別選択の [Standard (標準)] はそのままにして、Enter キーを押します
- プロジェクト名として「trailhead」と入力し、Enter キーを押します。
- プロジェクトを保存するローカルマシンのディレクトリを選択します。[Create Project (プロジェクトを作成)] をクリックします。
素晴らしい! Lightning Web コンポーネントを使用するために、最初の Salesforce DX プロジェクトを作成しました。Visual Studio Code で自動的に新しいプロジェクトが開きます。
次のステップは、Dev Hub の承認です。Trailhead Playground を使用していている場合は、次のステップで使用するログイン情報の取得方法を「Trailhead Playground のユーザ名とパスワードの取得」で学習できます。
- Visual Studio Code で、macOS の場合は Command+Shift+P、Windows または Linux の場合は Ctrl+Shift+P を押します。
- 「sfdx」と入力します。
- [SFDX: Authorize Dev Hub (SFDX: Dev Hub を承認)] を選択します。
- Dev Hub 組織のログイン情報を使用してログインします。
-
[Allow (許可)] をクリックします。
- ブラウザで認証した後、CLI は Dev Hub のログイン情報を記憶します。次のような成功メッセージが表示されます。
Dev Hub の認証は、スクラッチ組織を作成するための前提条件です。スクラッチ組織は、Salesforce Platform での開発用の一時的な環境です。これは次のステップで作成します。
- Visual Studio Code で、macOS の場合は Command+Shift+P、Windows または Linux の場合は Ctrl+Shift+P を押します。
- 「sfdx」と入力します。
- [SFDX: Create a Default Scratch Org... (SFDX: デフォルトのスクラッチ組織を作成する...)] を選択します。
-
Enter キーを押して、デフォルトの
project-scratch-def.jsonを受け入れます。 -
Enter キーを押して、デフォルトの
trailheadというスクラッチ組織の別名を受け入れます。 -
Enter キーを押して、デフォルトの
7 days(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 コンポーネントの作成は単純なプロセスです。そのうえ、Salesforce CLI ですでにプロジェクト構造が作成されているので、さらに簡単に作成を開始できます。
フォルダ構造は次のようになっています。
作成したプロジェクトには、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 を直接使用できます。
- Visual Studio Code を開きます。
- macOS で Command+Shift+P、Windows または Linux で Ctrl+Shift+P を押し、「focus terminal」と入力します。Enter キーを押します。
- 「
sfdx force:lightning:component:create -n myFirstWebComponent -d force-app/main/default/lwc --type lwc」と入力し、Enter キーで確定します。
最初の 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 コンポーネントを構成するファイルを見てみましょう。あらかじめ用意されている HTML、JavaScript、XML をコピーして貼り付けます。最初は myFirstWebComponent.js-meta.xml ファイルです。
- lwc サブフォルダ内に作成した新しい myFirstWebComponent サブフォルダを開きます。
- myFirstWebComponent.js-meta.xml をクリックします。
- 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> - macOS で CMD+S、Windows または Linux で CTRL+S を押して、ファイルを保存します。
更新したファイルはメタデータ定義ファイルです。たとえば、Lightning アプリケーションビルダーを使用して Salesforce ユーザインターフェースのどこに追加できるか (ターゲット) を制御するなど、いくつかの設定要素が含まれています。メタデータ設定オプションについての詳細は、ドキュメントを参照してください。
次は、Lightning Web コンポーネントの JavaScript ファイルを更新します。
メモ
これからコピーして貼り付ける JavaScript コードと HTML マークアップにはエラーが含まれています。赤の波線が表示されても気にしないでください。このプロジェクトの後の方で、Visual Studio Code の機能と Salesforce Lightning Web コンポーネント拡張機能を使用して、エラーを解決します。
- Visual Studio Code で、myFirstWebComponent.js をクリックします。
- ファイルの内容を次のコードで置き換えます。
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', }, ]; } - macOS で CMD+S、Windows または Linux で CTRL+S を押して、ファイルを保存します。
ファイルを保存するとすぐに目に付くものがあります。
-
@trackというアノテーション付きの語の下に赤の波線が引かれています。 - エクスプローラの JavaScript ファイルの色が赤に変わり、その横に「2」が表示されています。
どちらも JavaScript コードの何かが正しくないことを示しています。優秀な開発者であるあなたは、通常であればすぐに修正することでしょう。今はこの問題を無視しておきます。代わりに、Web コンポーネントテンプレートファイルに HTML マークアップを追加します。
- Visual Studio Code で、myFirstWebComponent.html をクリックします。
- 既存の
<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> - macOS で CMD+S、Windows または Linux で CTRL+S を押して、ファイルを保存します。
ここでも、HTML マークアップの何かが正しくないことがわかります。
これも (今は) 無視しましょう。
通常、次のステップは組織へのプロジェクトのリリースですが、コードに多数のエラーがあるので、リリースは失敗します。あなたが実際にリリースの失敗を経験することがあるかどうかはわかりませんが、重要なのは、IDE に表示されるエラーに注意し、すぐに修正することです。
今は何も検証できないので、[Verify Step (ステップを確認)] をクリックして次の最後のステップに進み、コードを修正しましょう。