[lwc] あなたにもできる、Lightning Web Component 開発の始め方 [Salesforce]

みなさんこんにちは。Salesforce 中の人、マスコット担当しょっさんです。
本日Perfumeはかしゆかのお誕生日です。ゆかちゃん誕生日おめでとう (∩´∀｀)∩ﾜｰｲ

今年もゆかちゃんの誕生日をお祝いして、Advent Calendarを記していきます。

---

今年は久しぶりにゆかちゃんプログラムを作ります。そして、誰でも Lightning Web Component が作れるよう、その開発プロセスをじっくりと示していきます。画像豊富です。安心してください。

---

# 前提条件

- Visual Studio Code をインストールしている
- [Salesforce CLI](https://developer.salesforce.com/ja/tools/salesforcecli) をインストールしている
- [VS Code 向け Salesforce 拡張機能のインストール](https://developer.salesforce.com/tools/vscode/ja/vscode-desktop/install) が完了していること

準備が良ければ、Visual Studio Code(以下 VSCode) を起動しましょう。

---

# Salesforce DX プロジェクトを作ろう

Lightning Web Component を開発するには、Salesforce DX プロジェクトを作成する必要があります。安心してください。画像たんまりで進めていきます。

## プロジェクトディレクトリを作成する

VSCodeの`コマンドパレット`を出しましょう。Macだと`⌘+⇧+P`で出現します。スゴイ。
パレットが表示されたら、おもむろに `sfdx` と打ってみましょう。きっと上位に`SFDX: Create Project`が表示されるはずです。そちらを選択して`ENTER`キー。
![CleanShot 2023-12-23 at 10.41.22@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/e10b3d07-9294-7744-03b3-80dc3215b540.png)

次に、Salesforce DXプロジェクトのテンプレートを指定します。defaultの`Standard`のままで大丈夫です。自分で一からプロジェクトファイルを定義したいんだ、という玄人かマニア以外は`Standard`で十分問題がありません。
![CleanShot 2023-12-23 at 10.43.48@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/1fb3eb4a-cf62-2634-dcd6-243933b520a7.png)

最後にプロジェクトを命名します。今回は`YUKA`にしました。誕生日だから。
![CleanShot 2023-12-23 at 10.43.58@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/c01f4214-e385-1c2d-f80e-ee0c0830a803.png)
プロジェクトのディレクトリを作るフォルダを指定して完了です。

プロジェクトが正しく作り上げられると、左側のファイルリストがこのようになります。だいたいこれっぽくなっていればOKです。問題ありません。
![CleanShot 2023-12-23 at 10.45.02@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/887fff15-63b4-d127-adc9-7026f76c35e9.png)

## Salesforce組織と繋げよう

Salesforce DXプロジェクトをデプロイする該当の組織を認証して繋げましょう。普段お使いの組織を認証して接続しても良いのですが、悪影響を及ぼさないために、今回は [Scratch Org]() を利用します。
もし`DevHub`を有効化していない場合は、[組織の Dev Hub 機能の有効化](https://help.salesforce.com/s/articleView?id=sf.sfdx_setup_enable_devhub.htm&type=5)を実施しておいてください。

またコマンドパレットを出します。そして今回は`auth`と打ってみましょう。ここから`SFDX: Authorize a Dev Hub`を選択して`ENTER`。
![CleanShot 2023-12-23 at 10.45.41@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/8cb13b71-c4cf-2597-dcd7-294755d909a8.png)
もし、使用中の組織に`YUKA`LWCアプリケーションをデプロイしてやるぜ、という強者の方は`SFDX: Authorized an Org`でも構いません。

次に該当の組織に名前を割り当てられます。名前を付けておくと選択するときに便利です。VSCodeから利用するときは、ログインのアカウント名で区別がつきますのでつけても付けなくとも大丈夫です。
![CleanShot 2023-12-23 at 10.47.14@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/b7ae5a2f-15b1-d320-6040-dfd81cc5cb3b.png)

`ENTER`すると、いつものログイン画面が出てくるので、該当のSalesforce組織にログインしましょう。うまく行けば、こちらの画面になります。この画面が出てきたらブラウザは用なしです。VSCodeへ戻りましょう。
![CleanShot 2023-12-23 at 10.47.35@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/f5c0d66c-bcd0-035f-c232-4ae8139361cb.png)

### Scratch Orgを作る

先ほど`Scratch Org`を作ることを選択された方は、次のコマンドで`Scratch Org`を作成しましょう。
またコマンドパレットを開いて`scratch`と入力します。`SFDX: Create a Default Scratch Org...`しか出てこないはずなので、そのまま`ENTER`。
![CleanShot 2023-12-23 at 10.48.35@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/8cc01e9a-15e2-110f-4b73-7c15832134e0.png)

次にSalesforce DXプロジェクトのScratch Org用ファイルを指定します。defaultのままで問題ないです。このまま`ENTER`しましょう。
![CleanShot 2023-12-23 at 10.48.44@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/bee903f5-f275-055c-cc17-c8f1ccfa28cd.png)

`Scratch Org`にも名前が付けられます。今回は`Yuka`って名前を付けてみました。`Scratch Org`の場合、テンポラリのアカウント名などが割り当てられるため、名無しにしてしまうと判別がつきにくい場合があります。`Scratch Org`を作るときは名前を付けた方が、一般の人間にはちょうど良いと思います。
![CleanShot 2023-12-23 at 10.48.53@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/12a13d07-842f-047c-36e9-caed5272ff86.png)

最後に、この`Scratch Org`の生存期間を指定します。`Scratch Org`はCI/CDなどで一時的にまっさらな組織を作って好き勝手やり放題にするための組織です。最大30日しか生きることのできない組織です。使いたい期間を指定してあげましょう。そう`Scratch Org`の生殺与奪はあなたに任されています。
今回はDefaultの`7`日のままにしています。
![CleanShot 2023-12-23 at 10.49.00@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/597f0575-29e4-b8a8-7261-0b25d3f6ce16.png)

# Lightning Web Componentアプリを動かそう

Salesforce DXプロジェクトを実装する準備ができました。ここからは実際にLightning Web Component(LWC)のアプリを作ってデプロイしていきます。

まずはひな形を作りましょう。今回もコマンドパレットです。`lwc`と入力してみてください。一番上が`SFDX: Create Lightning Web Component`と予想されます。それを選択して`ENTER`。
![CleanShot 2023-12-23 at 10.51.26@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/e334c621-d32e-c193-55da-eee5f4b29486.png)

LWCアプリの名前を入れます。当然`yuka`です。
![CleanShot 2023-12-23 at 10.51.45@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/f72dded4-4d79-9e0a-dde0-89b89f64c2a3.png)

どこのフォルダにつくるのかを指定できます。素人はdefaultに作りましょう。余計なことはしないが吉です。
![CleanShot 2023-12-23 at 10.51.53@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/45614305-7a1f-59da-e496-7c4691d6a294.png)

おめでとうございます。`lwc`ディレクトリ配下に`yuka`ちゃんのフォルダができました。満足です。
![CleanShot 2023-12-23 at 10.52.02@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/4eec056c-ec19-0f7a-b826-5b246e17f689.png)

## 恥ずかしいけどアプリを作ってみよう。

ここからはコーディングです。作成された *.js,*.html,*.xmlについて修正が必要です。ちなみにこれらは何かというと。

- yuka.html ... コンポーネントを表示するための一般的なHTMLファイルです。これがないと何も表示されません。なお[Lightning Design System](https://www.lightningdesignsystem.com)のタグ/CSSが利用できます。
- yuka.js ... 背後で動くJavaScriptです。サーバサイドのApexなどをコールする場合にも使います。特に動的な処理が必要なければ、なにも書かずともコンポーネントは表示できます。表示するだけならな。
- yuka.js-meta.xml ... このLWCを制御するためのメタデータです。アプリとして利用する市内などの制御をさせます。

と言うことで、今回は「縦」と「横」の長さを入力すると「床の面積を表示する」というHello Worldに毛の生えたような内容のプログラムを作ってみます。これくらいの内容の方が何やってるか分かりやすいからいいんです。うろたえるな。

画面表示です。`lightning`系のタグで全部作ってあります。`html`のタグじゃないけどなんとなく分かりそうな感じがするでしょう。
なお、`lightning-card`の`icon-name`で指定可能なアイコンは[icons](https://www.lightningdesignsystem.com/icons/)にあります。

```html:yuka.html
<template>
  <lightning-card title="Yuka" icon-name="standard:data_cloud">
    <lightning-layout>
      <lightning-layout-item flexibility="auto" padding="around-small">
        <lightning-input
          label="TATE"
          type="number"
          min="1"
          max="65535"
          value="0"
          onchange={handleTateChange}
        >
        </lightning-input>
        <lightning-input
          label="YOKO"
          type="number"
          min="1"
          max="65535"
          value="0"
          onchange={handleYokoChange}
        >
        </lightning-input>
        <lightning-button label="Yuka" onclick={handleClick}>
        </lightning-button>
      </lightning-layout-item>
    </lightning-layout>
  </lightning-card>
</template>

```

こちらがJavaScriptです。
`TATE`と`YOKO`の内容が書き換えられると、`Yuka`インスタンスの`tate`と`yoko`変数が変動します。
`YUKA`ボタンをクリックすると、`onclick`で指定された`handleClick`が実行されて計算結果がポップアップで表示されるという、たったそれだけのゆかちゃんプログラムです。

```javascript:yuka.js
import { LightningElement } from 'lwc';

export default class Yuka extends LightningElement {
  tate = 0;
  yoko = 0;
  handleTateChange(event) {
    this.tate = event.target.value;
  }

  handleYokoChange(event) {
    this.yoko = event.target.value;
  }

  handleClick() {
    alert(this.tate * this.yoko);
  }
}
```

最後はメタデータです。`isExposed`を`true`にして見えるようにしてあげます。どこで見えるようにするかを`targes`に追加していきます。今回はLightningアプリケーションビルダーでコンポーネント配置できるように`Lightning__AppPage`を一つ選んでいます。

```xml:yuka.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
      </targets>
</LightningComponentBundle>
```

ここまでできたらファイルを保管してデプロイしましょう。

## LWCアプリをデプロイしよう

さきほどの`yuka`ディレクトリを右クリックして`SFDX: Deploy Source to Org`を選んでみましょう。
![CleanShot 2023-12-23 at 11.08.50@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/b51cf3cd-963e-36ed-6884-13cb06bf6935.png)

もしここで「Default Orgが設定されてねぇよ、なめんな」みたいなエラーが出てきたら、一度 VSCodeを再起動してみましょう。たぶんうまく行きます。というか、Default Orgがちゃんと定義されないのバグだと思う。みんなはうまく行きました？私はいつもうまくいきません。

デプロイがうまく行くと、VSCodeの下の画面がこんな風になってるはずです。

```
=== Deployed Source
STATE    FULL NAME  TYPE                      PROJECT PATH                                    
───────  ─────────  ────────────────────────  ────────────────────────────────────────────────
Changed  yuka       LightningComponentBundle  force-app/main/default/lwc/yuka/yuka.html       
Changed  yuka       LightningComponentBundle  force-app/main/default/lwc/yuka/yuka.js         
Changed  yuka       LightningComponentBundle  force-app/main/default/lwc/yuka/yuka.js-meta.xml

11:12:38.618 ended SFDX: Deploy Source to Org
```

## LWCアプリを配置して動かしてみよう

デプロイがうまく行ったとすると、VSCodeの左下はこんな風になってるはずです。ここで**コンセント**`Yuka`の左側にある窓ボタンを押してみましょう。今接続している組織をオープンするボタンです。
![CleanShot 2023-12-23 at 11.10.05@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/bbdfe188-193b-0dd5-15ba-c3e9d6f3f260.png)

開くと颯爽とSalesforceの設定画面が出てくるでしょう。`Lightning アプリケーションビルダー`を表示して「新規」ボタン。あたらしいLightningアプリを作ります。
![CleanShot 2023-12-23 at 11.11.28@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/7106abc9-6341-6519-75bc-95c30e5dc242.png)

最初に「Lightningページを新規作成」と出てきますから、騙されたと思って「アプリケーションページ」のまま「次へ」を押していきます。
![CleanShot 2023-12-23 at 11.11.35@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/4252c1b9-cf94-b351-41eb-8bc3a7f15184.png)

次にこのアプリケーションを命名します。当然`YUKA`です。
![CleanShot 2023-12-23 at 11.11.44@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/ddbf4fd3-53e5-bc6d-3f8c-51bf9c7c3977.png)

このアプリケーションの構造を決めます。一つのコンポーネントしか配置する予定がないので「1つの範囲」で十分ですが、いろいろお試し下さい。あなたの自由です。ここはあなたの好きなように選択して、好きなようにコンポーネントを配置してみましょう。複数配置も思いのままです。
![CleanShot 2023-12-23 at 11.12.03@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/294f92de-2706-64ce-16e6-f4383e73e4dc.png)

さてここで左側をよく見てください。ここまでしょっさんの教えを聞いて正しくやってきた方にはご褒美の`yuka`が「カスタム」の下にいるはずです。やったぜ。これをドラッグ&ドロップして好きな位置にコンポーネントを配置しましょう。
![CleanShot 2023-12-23 at 11.12.55@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/47001f2e-0859-3d20-946f-b54fc37c8472.png)

私は`1つの範囲`で一旦さみしくそのまま配置してみました。配置が完了したら「保存」を押していきます。
![CleanShot 2023-12-23 at 11.13.10@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/731974f9-f74d-c52c-40fa-d6fda9ba6719.png)

初めてであれば「ページが保存されました」と共に「有効化」を推してきます。有効化しないとアプリへ反映されません。「有効化」しましょう。
![CleanShot 2023-12-23 at 11.13.27@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/40a37d45-53ac-d73d-5a31-3721fa70829e.png)

有効化する際に確認画面になります。イロイロ気になるでしょうが「保存」してください。
![CleanShot 2023-12-23 at 11.13.35@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/b57e3e78-609e-8e27-b385-06061baac023.png)

Salesforce側からナビゲーションメニューへ追加することを強く推奨してきますが、放置して「完了」で良いです。今は。
![CleanShot 2023-12-23 at 11.13.47@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/9fa6c44d-79aa-d904-b2a2-09f167c778c3.png)

おめでとうございます。これでついに`YUKA`ちゃんのアプリケーションがリリースされました。

## LWCアプリを試してみる

リリースが正しく反映されているか不明なので、2回くらいブラウザをリロードしておいてください。3回祈らずとも2回で十分です。

では、リリースされた`YUKA`ちゃんを実行してみましょう。
左上の9つの丸があるところを押すとアプリケーションを直接アクセスできます。当然`yuka`と入力してください。正しくリリースされていれば、このように`YUKA`ちゃんがいるはずです。
![CleanShot 2023-12-23 at 11.14.23@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/0471891b-71e4-070e-6fc4-e8de4ff60583.png)

おもむろに`TATE`と`YOKO`に何かを入れて`Yuka`ボタンをクリックしてみましょう。
![CleanShot 2023-12-23 at 11.14.43@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/d0622c8e-702f-5469-75d5-c2879e5dac43.png)

なんと!!!! 計算された結果が表示されました。おめでとうございます