🍳 LWC開発：カレーに例える3工程まとめ

どんな取り組みか

本記事では、Lightning Web Components (LWC) の開発工程を、誰でも味付けを変えられる「カレーのセット」作りに例えて解説しています。これにより、「画面上の設定を変えるだけで、プログラムの動きが変わる」というLWCの利点を整理し、理解を深めることを目的としています。

使われた技術スタック

• LWC (Lightning Web Components): SalesforceのUI構築のためのフレームワーク。
• VS Code: LWC開発におけるプログラマーの作業環境。
• Meta XML: LWCコンポーネントをAppビルダーに登録するための設定ファイル。
• Salesforce組織: LWCコンポーネントをデプロイ・配置する環境。
• Appビルダー: Salesforceの管理者が画面を構築・設定するためのツール。

実装のポイント

LWC開発の3つの工程は、以下の通りです。

① 【下準備】プログラマーの仕事（VS Code）

まず、開発環境であるVS Codeで、LWCのベースとなる「カレーセット」を作成します。

• HTML: 画面上の入力欄やボタンといったUI要素を定義します。これは「お皿とスプーン」に例えられます。
• JavaScript: コンポーネントのロジックを記述します。ここでは、外部から初期値（「隠し味」）を受け取れるように設定します。
• Meta XML: 作成したLWCコンポーネントを、SalesforceのAppビルダーで利用可能にするための設定を行います。これは、「メニュー表に載せる許可」に相当します。

② 【納品】クラウドへ送る（デプロイ）

開発したLWCコンポーネントを、Salesforceの組織（「お店」）へデプロイします。この作業には「Deploy Source to Org」というコマンドが使用されます。これにより、作成した部品がSalesforceという大きなプラットフォーム上に配置されます。

③ 【盛り付け】管理者の仕事（Appビルダー）

次に、Salesforceの管理者（「お店の店長」）がAppビルダーを使用して、コンポーネントを画面に配置し、設定を行います。

• Appビルダー: コンポーネント一覧から必要な部品を選択し、画面上にドラッグ＆ドロップで配置します。
• プロパティ設定: 右側のパネルで、コンポーネントの初期値（例：「Google」）などを設定します。これは、カレーの「味付け」を調整する作業に例えられます。

今回の最大の成果は、コードを一切変更せずに、画面上の設定（プロパティ）だけでコンポーネントの動作（味付け）を変えられるようにした点です。

管理画面での操作がプログラムに伝わる仕組みは以下の通りです。

• メタデータ (js-meta.xml): 管理画面に設定項目（右側の設定欄）を作成するよう指示します。
• JavaScript (@api): 設定された値を受け取る準備をします。
• Appビルダー: 管理者が設定した値が、リアルタイムでJavaScriptに渡されます。

得られた成果や学び

今回の開発では、コード修正なしに画面設定だけでコンポーネントの初期値を変更できるという、LWCの基本的な仕組みを体験しました。これは、いわば「箱に入っている文字をそのままポップアップに出す」という「やまびこ」のような状態ですが、この成功体験は今後のより高度な開発における重要な基礎となります。

次に目指すべきステップとしては、この基礎の上に「本物の魔法」をかける、すなわち、よりインタラクティブな機能やデータ連携を実現することが挙げられます。

• ステップ1 (Event Handling): ボタンクリックなどのイベントを検知する。
• ステップ2 (Apex): Salesforceのデータベース（「倉庫」）からデータを取得する。
• ステップ3 (template for:each): 取得したデータを画面上にリスト表示する。

これらのステップに進むことで、データベース連携など、より実践的なLWC開発が可能になります。

まとめ

LWC開発の初期段階における「下準備」「デプロイ」「盛り付け」の3工程を、カレー作りに例えることで、そのプロセスと「画面設定で動作が変わる」というLWCの特性を分かりやすく解説しました。今回得られた「でてるやん！」という成功体験は、今後のデータベース連携などのステップに進むための重要な基礎となります。

出典: https://qiita.com/junko105106/items/21058c6ca51fba7cd9a0