Hello World Lightning Web コンポーネントを作成する

メモ

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

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

Trail Together の動画

エキスパートの説明を見ながらこのステップを進めて行きたい場合は、Trailhead Live の Trail Together シリーズの一部である、こちらの動画をご覧ください。

(巻き戻して最初から見直したい場合、このクリップは 11:49 分から開始されます。)

Salesforce DX プロジェクトを作成する

開発環境を設定したところで、いよいよ簡単な Lightning Web コンポーネントを作成できます。

Visual Studio Code で、Ctrl+Shift+P (Windows) または Cmd+Shift+P (macOS) を押して、コマンドパレットを開きます。
SFDX と入力します。
[SFDX: Create Project (SFDX: プロジェクトを作成)] を選択します。
Enter キーを押して、Standard (標準) オプションを受け入れます。
プロジェクト名として HelloWorldLightningWebComponent と入力します。
Enter キーを押します。
プロジェクトを保存するフォルダーを選択します。
[Create Project (プロジェクトを作成)] をクリックします。次のようなベース設定が表示されます。

「Do you trust the authors of the files in this folder? (このフォルダー内のファイルの作成者を信頼しますか?)」という権限に関するプロンプトが表示されたら、[Yes (はい)] を選択します。

Trailhead Playground を承認する

Visual Studio Code で、Ctrl+Shift+P (Windows) または Cmd+Shift+P (macOS) を押して、コマンドパレットを開きます。
SFDX と入力します。
[SFDX: Authorize an Org (SFDX: 組織を承認)] を選択します。
Enter キーを押して、プロジェクトのデフォルトのログイン URL オプションを受け入れます。
Enter キーを押して、default という別名を受け入れます。
ブラウザーの別ウィンドウで Salesforce ログイン画面が開きます。
Trailhead Playground のログイン情報を使用してログインします。
アクセスを許可するよう要求されたら、[Allow (許可)] をクリックします。
ブラウザーで認証した後、CLI がログイン情報を記憶します。次のような成功メッセージが表示されます。

Lightning Web コンポーネントを作成する

Visual Studio Code で、Ctrl+Shift+P (Windows) または Cmd+Shift+P (macOS) を押して、コマンドパレットを開きます。
SFDX と入力します。
[SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] を選択します。
新しいコンポーネントの名前として helloWorld と入力します。
Enter キーを押して、デフォルトの force-app/main/default/lwc を受け入れます。
Enter キーを押します。
Visual Studio Code で、新しく作成したファイルを表示します。

helloWorld.html という HTML ファイルに、次のコードをコピーして貼り付けます。

<template>
  <lightning-card title="HelloWorld" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
      <p>Hello, {greeting}!</p>
      <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
    </div>
  </lightning-card>
</template>

ファイルを保存します。

helloWorld.js という JavaScript ファイルに、次のコードをコピーして貼り付けます。

import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
        greeting = 'World';
        changeHandler(event) {
        this.greeting = event.target.value;
        }
}

ファイルを保存します。

helloWorld.js-meta.xml という XML ファイルに、次のコードをコピーして貼り付けます。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

ファイルを保存します。

Trailhead Playground にリリースする

force-app/main の下にある default フォルダーを右クリックします。
[SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] をクリックします。
統合ターミナルの [Output (出力)] タブにリリースの結果が表示されます。コマンドが正常に実行されると、組織にアップロードされた 3 本のファイルが [Deployed Source (リリース済みのソース)] メッセージに表示されます。

Lightning Experience でアプリケーションにコンポーネントを追加する

Visual Studio Code で、Ctrl+Shift+P (Windows) または Cmd+Shift+P (macOS) を押して、コマンドパレットを開きます。
SFDX と入力します。
[SFDX: Open Default Org (SFDX: デフォルトの組織を開く)] を選択します。
別のブラウザーで Trailhead Playground が開きます。
をクリックして、[Setup (設定)] を選択します。
[Quick Find (クイック検索)] ボックスに Home (ホーム) と入力し、[Feature Settings (機能設定)] セクションで [Home (ホーム)] を選択します。
[Advanced Seller Home (高度な営業ホーム)] で、設定を [Inactive (無効)] に切り替えます。
アプリケーションランチャー () で、[Sales (セールス)] を見つけて選択します。
をクリックして、[Edit Page (編集ページ)] を選択します。
Lightning コンポーネントのリストの [Custom (カスタム)] 領域から helloWorld Lightning Web コンポーネントをページキャンバスの上部にドラッグします。
[Save (保存)] をクリックします。
[Activate (有効化)] をクリックします。
[Assign as Org Default (組織のデフォルトとして割り当て)] をクリックします。
[Save (保存)] をクリックします。
もう一度 [Save (保存)] をクリックしてから、をクリックしページに戻ります。
ページを更新すると、新しいコンポーネントが表示されます。

HelloWorld Lightning Web コンポーネントを表示するホームページ。

最初の Lightning Web コンポーネントを作成できました。

次のステップ

https://developer.salesforce.com/code-samples-and-sdks にあるコードサンプルと SDK をご覧ください。helloWorld コンポーネントに機能を追加したり、他のサンプルコンポーネントを見たり、独自のコンポーネントを作成したりできます。「コンポーネントの参照」で Lightning Web コンポーネントのコーディング方法を参照し、いろいろ試してみてください。

ヘルプをお探しですか?

もっと探す