salesforce Lightning Web コンポーネントの作成

Lightning Web コンポーネント环境配置

1.Salesforce DX 環境の設定

①Salesforce CLI をインストールする。

1. https://developer.salesforce.com/tools/sfdxcli から CLI をインストールします。
2. CLI が正しくインストールされていることを確認し、最新版でコマンドラインから次のコマンドを実行して確認します。

3. sfdx update

   sfdx-cli: Updating CLI.... のように出力が表示されます。

②Visual Studio Code と Salesforce DX 向け拡張機能をインストールする。

このプロジェクトでは、Visual Studio Code と推奨される Salesforce Extension Pack をインストールします。

開発環境が整っていることを確認する

Visual Studio Code をインストールし、必要な拡張機能を有効にしたところで、次はそれらをテストする必要があります。

1. Visual Studio Code で、Ctrl+Shift+P (Windows) または Cmd+Shift+P (macOS) を押して、コマンドパレットを開きます。
2. 「sfdx」と入力して、Salesforce 拡張機能で提供されるコマンドを絞り込みます。

   

   さらに他の SFDX コマンドを使用すると、そのコマンドが recently used (最近使用) パネルに表示されます。

 

③Lightning Web コンポーネントを作成してリリースする。

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 (プロジェクトを作成)] をクリックします。次のようなベース設定が表示されます。

   

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 (許可)] をクリックします。

   

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 で、新しく作成したファイルを表示します。

   

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>

   Copy

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

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

    Copy

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>

    Copy

13. ファイルを保存します。

Trailhead Playground にリリースする

1. force-app/main の下にある default フォルダーを右クリックします。

   

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 コンポーネントをページキャンバスの上部にドラッグします。

   

7. [Save (保存)] をクリックします。
8. [Activate (有効化)] をクリックします。
9. [Assign as Org Default (組織のデフォルトとして割り当て)] をクリックします。
10. [Save (保存)] をクリックします。
11. もう一度 [Save (保存)] をクリックしてから、

    

     をクリックしページに戻ります。
12. ページを更新すると、新しいコンポーネントが表示されます。

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