Hello World Lightning Web コンポーネントの作成

学習の目的

このプロジェクトでは、次のことを行います。

一連の簡単な Lightning Web コンポーネントを構築する。
単一レコード、次にレコードのリストからデータを取得して表示する。
機能を子コンポーネントとしてカプセル化する。
クロスコンポーネント通信にイベントを使用する。

メモ

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

翻訳版の Trailhead を活用する方法については、自分の言語の Trailhead バッジをご覧ください。

はじめに

このプロジェクトでは、パークレンジャーが熊を追跡できるアプリケーションを作成して、Lightning Web コンポーネントの基本的な概念を試してみます。

Lightning Web コンポーネントは、Lightning コンポーネントを構築するための新しいプログラミングモデルです。最新の Web 標準が使用されており、元の Aura プログラミングモデルとの相互運用が可能です。

このプロジェクトでは、あなたは Ursus Park という架空の国立公園に勤務しています。あなたが作成するアプリケーションを使用し、レンジャーは公園内を徘徊する熊を追跡することができます。

完成した Ursus Park アプリケーションの概要

メモ

このプロジェクトでは、Trailhead Playground 組織に対してアプリケーションを開発します。また、force:source:push コマンドを使用して、スクラッチ組織に対して Lightning Web コンポーネントを開発することもできます。ソース駆動型開発についての詳細は、「Salesforce DX を使用したアプリケーション開発」モジュールを参照してください。

始める前に

このプロジェクトに取り掛かる前に、「クイックスタート: Lightning Web コンポーネント」の以下の手順を実行してください。クイックスタートのこの手順を完了していない場合、このプロジェクトを実行することはできません。

VS Code と Salesforce CLI がインストールされていることを確認してください。

Trailhead Playground を設定する

新しい Trailhead Playground を作成するには、このステップの最後にあるドロップダウンをクリックして [Create a Trailhead Playground (Trailhead Playground を作成)] を選択します。
Trailhead Playground を作成したら、[Launch (起動)] をクリックします。

組織に [Get Your Login Credentials (ログイン情報の表示)] というタブが表示されている場合は、以下の手順に従います。

表示されていない場合は、アプリケーションランチャー () を開き、[Playground Starter] をクリックして手順に従います。Playground Starter アプリケーションが表示されない場合は、Trailhead ヘルプの「Find the username and password for your Trailhead Playground (Trailhead Playground のユーザー名とパスワードの調べ方)」を参照してください。

[Get Your Login Credentials (ログイン情報の表示)] タブをクリックし、ユーザー名をメモします。
[Reset My Password (パスワードのリセット)] をクリックします。これにより、ユーザー名に関連付けられているアドレスにメールが送信されます。
メール内のリンクをクリックします。
新しいパスワードを入力し、確認して、[Change Password (パスワードを変更)] をクリックします。

Ursus Park アプリケーションを設定する

Windows の cmd、または MacOS の Terminal など、コマンドプロンプトを開きます。
Ursus Park アプリケーションの git リポジトリをコピーします。
```
git clone https://github.com/trailheadapps/build-apps-with-lwc.git
```
このリポジトリには、Ursus Park アプリケーション、項目セットとレコードとページレイアウトが定義された Bear (熊) オブジェクト、熊レコードとサンプルの熊レコードを取得する Apex コードが含まれています。このプロジェクトベースを使用することで、Lightning Web コンポーネントの開発に集中できます。VS Code には Git サポートが統合されています。また、オープンソースサイト (https://git-scm.com/) から直接インストールすることもできます。
新しい build-apps-with-lwc ディレクトリに移動します。
```
cd build-apps-with-lwc
```
Salesforce CLI を使用して Trailhead Playground を承認して bear-tracking という別名を使用して保存し、現在のユーザーをデフォルトユーザーとして設定します。
```
sf org login web -s -a bear-tracking
```
Salesforce ログインページを表示するブラウザーウィンドウが開いたら、Trailhead Playground のログイン情報を入力します。
アプリケーションコードを組織にリリースします。
```
sf project deploy start -d force-app/main/default
```
Ursus Park User (Ursus Park ユーザー) 権限セットを現在のユーザーに割り当てます。
```
sf org assign permset -n Ursus_Park_User
```
サンプルデータをインポートします。
```
sf data import tree -p data/plan.json
```
ブラウザーで組織を開きます。
```
sf org open
```
アプリケーションランチャー () で、[Ursus Park] を探して選択します。Lightning アプリケーションが開きます。
[Bears (熊)] タブをクリックし、サンプルデータが入力されていることを確認します。

静的 HTML を使用した Hello World Web Lightning コンポーネントを作成する

最初の Lightning Web コンポーネントとして、簡単な hello world コンポーネントを作成しましょう。

VS Code を開きます。
[File (ファイル)] > [Open (開く)] [Folder (フォルダー)] をクリックし、build-apps-with-lwc フォルダーに移動して、GitHub からコピーしたプロジェクトフォルダーを追加します。
サイドバーで、force-app/main/default フォルダーを展開します。
force-app/main/default/lwc フォルダーを右クリックして [SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] をクリックし、コンポーネントに「helloWebComponent」と名前を付けます。
または、コマンドプロンプトで sf lightning generate component --type lwc -n helloWebComponent -d force-app/main/default/lwc を実行しても同じ結果を得ることができます。

helloWebComponent.html の内容を次のマークアップに置き換えます。

<template>
	<lightning-card title="Lightning Web Component" icon-name="custom:custom14">
		<div class="slds-var-m-around_medium">
			<h2>Hello World!</h2>
		</div>
	</lightning-card>
</template>

このマークアップは、card 基本コンポーネントを静的テキストで定義します。

helloWebComponent.js-meta.xml ファイルを編集して <isExposed>false</isExposed> を次の行に置き換えます。
```
<isExposed>true</isExposed>
<targets>
	<target>lightning__AppPage</target>
	<target>lightning__RecordPage</target>
	<target>lightning__HomePage</target>
</targets>
```
これらの行を追加すると、Lightning アプリケーションビルダーであらゆる種別の Lightning ページにコンポーネントを追加できるようになります。
更新したコードを組織にリリースします。VS Code で、default フォルダーを右クリックして [SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] をクリックします。

Hello World コンポーネントをページに追加する

コンポーネントを実装したところで、そのコンポーネントをページに追加して表示しましょう。

ブラウザーで組織を開きます。
```
sf org open
```
アプリケーションランチャー () で、[Ursus Park] を探して選択します。アプリケーションのホームページが開きます。
歯車アイコン () をクリックし、[Edit Page (編集ページ)] を選択します。
[Custom (カスタム)] コンポーネントで helloWebComponent コンポーネントを見つけ、右側の列の上部にドラッグします。
[Save (保存)] をクリックします。
標準のホームページを今回初めて変更したため、更新済みのページを有効にして、変更した内容がユーザーに表示されるようにします。[Activate (有効化)] をクリックします。
[App Default (アプリケーションのデフォルト)] タブをクリックします。
[Assign to Apps (アプリケーションに割り当て)] をクリックします。
[Ursus Park] を選択します。
[Next (次へ)]、[Save (保存)] の順にクリックします。
[Back (戻る)] をクリックしてホームページに戻ります。

Ursus Park ホームページの静的な Lightning Web コンポーネント

お疲れさまでした。最初の Lightning Web コンポーネントを作成して、Lightning Experience のページに追加することができました。この最初のバージョンでは、それほどできることはありません。もう少し動的なものにしましょう。

データバインドを使用する

データをコンポーネントに追加しましょう。一方向データバインドを使用します。まず、読み取り専用データを表示し、それを編集可能にします。

VS Code で、helloWebComponent.html をクリックして編集します。<h2>Hello World!</h2> を <h2>Hello {greeting}!</h2> に置き換えます。次のステップで定義する greeting プロパティにバインドが追加されます。
helloWebComponent.js を編集して内容を次に置き換えます。
```
import { LightningElement } from 'lwc';
export default class HelloWebComponent extends LightningElement {
	greeting = 'Trailblazer';
}
```
このコードで greeting プロパティを宣言し、初期化します。このプロパティはリアクティブです。つまり、greeting の値を変更すると、コンポーネントの HTML テンプレートが自動的に更新されます。
更新したコードを組織にリリースします。default フォルダーを右クリックして [SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] をクリックします。
組織で、Ursus Park のホームページを更新すると、コンポーネントが変更されています (「Hello World!」の代わりに「Hello Trailblazer!」が表示されます)。

これで完了です。データをバインドできました。greeting プロパティが読み取られ、表示されますが、今のところユーザーがこれを変更することはできません。

さらに一歩進み、入力項目を追加してデータを編集可能にしましょう。

VS Code で、helloWebComponent.html を編集して <h2>Hello {greeting}!</h2> の下に次の行を追加します。
```
<lightning-input
label="Name"
value={greeting}
onchange={handleGreetingChange}
></lightning-input>
```
このコードは、SLDS でスタイル設定されたテキスト入力項目を追加します。入力は、greeting プロパティで初期化されます。入力を変更するたびに、次のステップで定義する handleGreetingChange JavaScript 関数がコールされます。
helloWebComponent.js を編集して greeting = 'Trailblazer'; の下に次の行を追加します。
```
handleGreetingChange(event) {
	this.greeting = event.target.value;
}
```
このコードは、イベント (入力項目からの入力変更イベント) から値を取得する関数を定義し、それを greeting プロパティに割り当てます。
更新したコードを組織にリリースします。default フォルダーを右クリックして [SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] をクリックします。
テキスト項目を変更した場合、組織でホームページを更新すると、コンポーネントが即座に更新されます。

Ursus Park のホームページのデータバインドを使用した Lightning Web コンポーネント

データバインドを確立し、データを編集可能にしました。greeting プロパティが表示され、入力項目で値を変更すると自動的に更新されます。

プロパティが表示されるようにすることが最初ですが、では表示する前に値を変換する必要がある場合はどうしたらよいでしょうか? Lightning Web コンポーネントでは、式を使用することができます。

式を使用する

高度なトピックに取り組み、式を使用して動的な値を表示してみましょう。名前を大文字で表示する挨拶のメッセージを返す式を追加します。

VS Code で、helloWebComponent.html を編集して title="Lightning Web Component" を title={capitalizedGreeting} に置き換えます。
<h2>Hello {greeting}!</h2> を <p>Today is {currentDate}</p> に置き換えます。
helloWebComponent.js を編集して handleGreetingChange 関数ブロックの上に次の行を追加します。
```
currentDate = new Date().toDateString();
get capitalizedGreeting() {
	return `Hello ${this.greeting.toUpperCase()}!`;
}
```
このコードは、currentDate クラスプロパティと capitalizedGreeting getter 関数を定義します。このような getter 関数を式と呼びます。この式は、プロパティのように、値を表示するために使用されますが、式の値は関数に記述されたロジックに基づいて計算することができます。追跡プロパティとは異なり、式はリアクティブではありません。コンポーネントが再表示されるたびに自動的に再評価されます。これは、式の値が変更されても、されなくても当てはまります。ユーザーがコンポーネントの入力項目に何かを入力すると、handleGreetingChange イベントハンドラー関数によって greeting プロパティが更新されます。greeting はリアクティブですから、再表示がトリガーされ、式の再評価が実行されます。現在の日付を保持し、表示するために、式を使用する代わりに currentDate クラスプロパティを宣言しました。return new Date().toDateString(); だけの式を記述することもできますが、プロパティの使用には、再表示のたびに新しい Date オブジェクトを作成しないという利点があります。
更新したコードを組織にリリースします。default フォルダーを右クリックして [SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] をクリックします。
組織でホームページを更新すると、式が表示されます。

Ursus Park のホームページの式を使用した Lightning Web コンポーネント

このように、式を使用してコンポーネントテンプレートからロジックを切り離すことができます。さらに言えば、式の使用は、表示する前にプロパティ値を変換できる唯一の方法です。

このステップはこれで完了です。基本コンポーネント、データバインド、式を使用して、基本的な hello world コンポーネントを設定しました。

基本について説明したところで、次はもっと面白い操作について説明します。