Skip to main content

Create a Hello World Lightning Web Component

メモ

メモ

日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語以外の言語には対応していません。Trailhead Playground の [言語] を [English]、[地域] を [アメリカ合衆国] に切り替えてください。こちらの指示に従ってください。

Trail Together の動画

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

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

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

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

  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。
    メモ

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


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>52.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 (出力)] タブにリリースの結果が表示されます。コマンドが正常に実行されると、組織にアップロードされた 3 本のファイルが [Deployed Source (リリース済みのソース)] メッセージに表示されます。

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

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