LWC（Lightning Web Components）の開発工程は、例えるなら**「誰でも味付けを変えられるカレーのセット」**を作るようなものです。
今回の作業で「画面上の設定を変えるだけで、プログラムの動きが変わる」というLWCの醍醐味を整理しましょう。
① 【下準備】プログラマーの仕事（VS Code）
まず、キッチンの奥（VS Code）でベースとなる「カレーセット」を作ります。
- HTML: お皿とスプーン（入力欄とボタン）を用意。
- JavaScript: 「隠し味（初期値）」を受け取れるように設定。
- Meta XML: 「このカレーは、メニュー表（Appビルダー）に載せていいですよ」と許可を出す。
② 【納品】クラウドへ送る（デプロイ）
作ったセットを、お店（Salesforceの組織）へ運びます。
- Deploy Source to Org を実行。
- これで、Salesforceという大きな箱の中にあなたの部品が届きました。
③ 【盛り付け】管理者の仕事（Appビルダー）
お店の店長（管理者）として、メニューを完成させます。
- Appビルダー: 左側の棚（コンポーネント一覧）から部品を取り出し、画面に配置。
- プロパティ設定: 右側のパネルで「初期値：Google」と入力。
[!IMPORTANT]
今回のポイント！
コードを一切触らずに、画面上で「味付け（初期値）」を変えられるようにしたのが、今回の最大の成果です。
📊 今回の仕組み図（イメージ）
管理画面での操作が、どのようにプログラムに伝わっているかの流れです。
-
メタデータ (
js-meta.xml): 「右側に設定欄を作って！」と命令。 -
JavaScript (
@api): 「OK、設定欄に入れた文字を受け取るよ！」と待機。 - Appビルダー: 管理者が文字を入れると、その瞬間に JavaScript に値が届く。
✅ 初心者が次に目指すべきこと
今はまだ、**「箱（入力欄）に入っている文字を、そのままポップアップに出す」**という、いわば「やまびこ」のような状態です。
これに**「本物の魔法」**をかけるには、次のようなステップに進みます。
| ステップ | 内容 | 必要なスキル |
|---|---|---|
| Step 1 | ボタンを押したら、Salesforceの倉庫（DB）へ走りに行く。 | Event Handling |
| Step 2 | 倉庫から「取引先」などの情報を取ってくる。 | Apex (サーバーサイド) |
| Step 3 | 取ってきた情報を、綺麗なリストとして画面に並べる。 | template for:each |
最後に
今回の「でてるやん！」という成功体験は、この先のステップすべてで必要になる一番大事な基礎です。この調子で、次は「倉庫（DB）」との連携にチャレンジしましょう！