進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

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

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

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

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

Trailhead Playground を承認する

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

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

  1. Visual Studio Code で、Ctrl+Shift+P (Windows) または Cmd+Shift+P (macOS) を押して、コマンドパレットを開きます。
  2. SFDX と入力します。
  3. [SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] を選択します。[SFDX: Create Lightning Component (SFDX: Lightning コンポーネントを作成)] は使用しないでください(この場合は Aura コンポーネントが作成されます)。
  4. 新しいコンポーネントの名前として helloWorld と入力します。
  5. Enter キーを押して、デフォルトの force-app/main/default/lwc を受け入れます。
  6. Enter キーを押します。
  7. Visual Studio Code で、新しく作成したファイルを表示します。
    Visual Studio Code の Lightning Web コンポーネントファイル階層
  8. 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>
  9. ファイルを保存します。
  10. helloWorld.js という JavaScript ファイルに、次のコードをコピーして貼り付けます。
    import { LightningElement } from 'lwc';
    
    export default class HelloWorld extends LightningElement {
      greeting = 'World';
    
      changeHandler(event) {
        this.greeting = event.target.value;
      }
    }
  11. ファイルを保存します。
  12. helloWorld.js-meta.xml という XML ファイルに、次のコードをコピーして貼り付けます。
    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
      <apiVersion>45.0</apiVersion>
      <isExposed>true</isExposed>
      <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
      </targets>
    </LightningComponentBundle>
  13. ファイルを保存します。

Trailhead Playground にリリースする

  1. force-app/main の下にある default フォルダを右クリックします。
    default フォルダを右クリックし、オプションリストの [SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] が選択されています。
  2. [SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] をクリックします。
  3. 統合ターミナルの [Output (出力)] タブにリリースの結果が表示されます。「SFDX: Deploy Source to Org ... ended with exit code 0 (SFDX: 組織にソースをリリース ... 終了コード 0 で終了しました)」という通知も表示されます。これは、コマンドが正常に実行されたことを意味します。
    成功を示す終了コード 0 を含む結果を表示する [Output (出力)] タブ。

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

  1. Visual Studio Code で、Ctrl+Shift+P (Windows) または Cmd+Shift+P (macOS) を押して、コマンドパレットを開きます。
  2. SFDX と入力します。
  3. [SFDX: Open Default Org (SFDX: デフォルトの組織を開く)] を選択します。
    別のブラウザで Trailhead Playground が開きます。
  4. アプリケーションランチャー (アプリケーションランチャー) で、[Sales (セールス)] を見つけて選択します。
  5. 設定ギア をクリックして、[Edit Page (編集ページ)] を選択します。
  6. Lightning コンポーネントのリストの [Custom (カスタム)] 領域から helloWorld Lightning Web コンポーネントをページキャンバスの上部にドラッグします。 右列に HelloWorld Lightning Web コンポーネントが配置された Lightning アプリケーションビルダー。
  7. [Save (保存)] をクリックします。
  8. [Activate (有効化)] をクリックします。
  9. [Assign as Org Default (組織のデフォルトとして割り当て)] をクリックします。
  10. [Save (保存)] をクリックします。
  11. もう一度 [Save (保存)] をクリックしてから、戻る矢印 をクリックしページに戻ります。
  12. ページを更新すると、新しいコンポーネントが表示されます。

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

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

次のステップ

https://trailhead.salesforce.com/sample-gallery にあるサンプルアプリケーションをご覧ください。helloWorld コンポーネントに機能を追加したり、他のサンプルコンポーネントを見たり、独自のコンポーネントを作成したりできます。「コンポーネントの参照」で Lightning Web コンポーネントのコーディング方法を参照し、いろいろ試してみてください。