LWCとは？基本知識からセットアップ手順、操作方法まで徹底解説！

「SalesforceのUI開発を効率化したいけど、何から始めればいいの？」
「LWCってよく聞くけど、どんな技術なの？」

そんな疑問をお持ちの方に向けて、本記事では LWC（Lightning Web Components）の基本から環境構築、実際にコードを書いて動作を確認するまで をわかりやすく解説します。

LWCは、Salesforce未経験者でも比較的簡単に習得できるフレームワークです。
本記事を読めば、あなたも 「LWCで実装できる！」 という自信がつくはずです。
それでは、LWCについて学んでいきましょう！

Salesforceに関する詳しい内容について知りたい方は、こちらの記事もぜひご覧ください。

参照：Salesforce（セールスフォース）とは？製品群や機能、メリット・デメリットを簡単に解説！

LWCとは

LWC（Lightning Web Components）は、Salesforceが提供するWebコンポーネントフレームワークです。再利用可能なUIコンポーネントを作成でき、現在のSalesforce UI開発の標準となりつつあります。

LWCの特徴

Web標準に基づいたフレームワーク

LWCは、Web Componentsの標準仕様に基づいて構築されています。HTML、CSS、JavaScriptといったWeb標準技術をベースにしているため、Salesforceプラットフォームに特化した専門知識を新たに習得する必要はありません。

既存のWeb開発スキルを持つ開発者にとって学習コストが低く、参入しやすいのが特徴です。また、Web標準技術に準拠しているため、Salesforce環境だけでなく一般的なWeb技術との連携も容易です。

再利用可能なコンポーネント設計

再利用可能なコンポーネント設計です。​コンポーネント単位で開発を行うため、機能を細かく分割し、再利用性の高いUIパーツを効率的に作成できます。​

これにより開発の効率化、保守性の向上、そして一貫性のあるUIデザインの実現につながります。​一度作成したコンポーネントは、Salesforce組織内のさまざまな場所で活用できるため、開発リソースを有効活用できます。​

さらに、LWCコンポーネントはShadow DOMを活用した完全なカプセル化を実現しており、各コンポーネントが独立して機能します。​

これにより、再利用性が高まり、メンテナンス性も向上します。​また、軽量で高性能な設計が可能となり、ユーザーエクスペリエンスの向上に寄与します。

Auraコンポーネントとの互換性

従来のAuraコンポーネントとも互換性があり、既存のSalesforceアプリケーションにLWCを段階的に導入することが可能です。​これにより、既存のコードベースを活かしつつ、新しい技術への移行をスムーズに行えます。

LWCを活用して実現できる機能例

LWCは、Salesforceプラットフォーム上で様々な機能を実現するために活用できます。

データ入力フォームの作成

LWCを使用すると、ユーザーがSalesforceのデータを直接入力・更新するためのフォームを柔軟に作成できます。例えば、取引先責任者の情報を登録・編集するフォームや、商談の進捗状況を更新するフォームなどを、ドラッグ＆ドロップ操作が可能なLightning App Builder上で簡単に作成できます。

入力項目のバリデーションルールや入力支援機能なども実装することで、データ入力の品質向上にも貢献します。

ダッシュボードコンポーネントの開発

Salesforceに蓄積されたデータを可視化するダッシュボードに表示するコンポーネントを開発できます。売上データ、顧客満足度、営業活動の状況など、様々なビジネス指標をグラフやチャートで分かりやすく表示し、データに基づいた意思決定を行うことができます。

LWCで作成したダッシュボードコンポーネントは、リアルタイムデータ更新やドリルダウン機能などを実装することで、よりインタラクティブなデータ分析環境を提供できます。

検索機能の実装

LWCを活用することで、ユーザーが入力したキーワードに基づいてSalesforceのデータを検索・フィルタリングする機能を実装できます。グローバル検索だけでなく、特定のオブジェクトに特化した検索機能や、複合条件による絞り込み検索なども実現可能です。検索結果をリスト形式やカード形式で表示したり、検索結果を地図上にプロットしたりするなど、UIも柔軟に設計できます。

通知・アラートコンポーネント

LWCで通知・アラートコンポーネントを作成し、Salesforceユーザーに対して重要なアクションや情報をタイムリーに伝えることができます。

例えば、承認依頼、タスクの期日超過、システムエラーなどを通知したり、特定の条件を満たすレコードが作成された場合にアラートを表示したりすることができます。通知方法は、画面上のポップアップ表示、メール通知、チャット通知など様々な方法を選択できます。

LWCを利用する3つのメリット

LWCをSalesforce開発に採用することで、開発組織やSalesforce環境に多くのメリットをもたらします。

Salesforce未経験者でも参画しやすい

LWCはWeb標準技術に基づいているため、Salesforce独自の開発言語であるApexやVisualforceの知識がなくても、JavaScriptの経験があれば比較的容易に開発に参画できます。

Web業界で広く普及している技術を採用しているため、開発者の採用ハードルが下がり人材確保の面で有利になります。「Salesforce開発者が足りない」「経験者が少なくて採用が大変」といった課題を抱える企業にとって、LWCは有効な解決策となる可能性があります。採用難易度が下がることで社内の開発チームを拡大しやすく、プロジェクトを円滑に進めることにも繋がります。

パフォーマンス負荷が小さい

LWCは、Web標準の仕組みであるShadow DOMや仮想DOMを活用することで、従来のVisualforceやAura Componentsと比較して、パフォーマンス負荷が大幅に軽減されています。コンポーネントがカプセル化されているため、不要な再レンダリングを抑制し効率的な描画処理を実現します。

サーバー側の処理負荷も軽減されるため、ページの表示速度が向上しユーザー体験の向上に繋がります。「Salesforceの画面が重い」「UIの動きが遅い」といったユーザーからの不満を解消し、快適なSalesforce利用環境を提供できます。

Salesforce以外のスキルを身に付けることができる

LWCはHTML、CSS、JavaScriptといったWeb標準技術をベースにしているため、LWCの開発を通じてSalesforce固有のスキルだけでなく、Web開発者として市場価値の高いスキルを習得できます。

VisualforceやAuraのようなSalesforce独自の仕様に依存しないため、学習コストが低く、技術的な陳腐化のリスクも抑えられます。LWCで培ったスキルは、Salesforce以外のWeb開発プロジェクトでも十分に通用するため、開発者のキャリアパスを広げることも期待できます。

LWCの環境を構築する手順

LWC開発に必要なツール

LWC開発を始めるには、以下のツールを準備する必要があります。

• Visual Studio Code (VS Code)： Microsoft社が提供する無料のコードエディタです。LWC開発に必要な拡張機能が豊富に提供されており、効率的な開発を行うことができます支援します。
  
• Salesforce CLI：コマンドラインインターフェースツールです。Salesforce組織へのログイン、ソースコードの作成、デプロイ、テスト実行など、Salesforce開発に必要な様々な操作をコマンドラインから実行できます。
  
• Salesforce Dev Hub組織： Scratch Orgと呼ばれる一時的な開発環境を作成・管理するためのSalesforce組織です。Dev Hub組織を有効化することで、Scratch Orgを自由に作成し、LWCの開発やテストを行うことができます。開発作業は通常、本番環境以外の組織で行うことが推奨されるため有効な手段となります。

VSCode及びSalesforceCLIのインストール手順については、「Salesforce CLIとは？基本機能、使うべき理由やインストール手順を解説」より詳細な手順をご確認いただけます。

VS Codeのインストール

1. Visual Studio Code（VS Code）を公式サイトからダウンロードし、インストールします。
インストール手順は、ダウンロードしたインストーラーを実行し、画面の指示に従ってください。

2.VS Codeのインストール後、Salesforce開発を効率化するための拡張機能 Salesforce Extension Pack （Expanded）をインストールします。

VS Codeの拡張機能メニュー（Ctrl+Shift+X または Cmd+Shift+X）から「Salesforce Extension Pack（Expanded）」を検索し、インストールしてください。

Salesforce CLIのセットアップ

次に、Salesforce CLIをインストールします。

Windowsの場合：

Salesforce CLIダウンロードページから、Windows版のインストーラー（.exeファイル）をダウンロードし、実行します。

インストーラーを実行し、画面の指示に従ってインストールを進めます。

Macの場合：

Macの場合も同様にSalesforce CLIダウンロードページから、MacOS版のインストーラー（.pkgファイル）をダウンロードし、実行します。

インストールが完了したら、コマンドプロンプトにて[sf version]と入力し、インストールされていることを確認します。

Salesforce Dev Hubの有効化

Salesforce CLIを利用してScratch Orgを作成するには、事前にDev Hub組織を有効化する必要があります。Dev Hub組織は、本番環境とは別のDeveloper Edition組織やSandbox組織を推奨します。

Dev Hub組織の有効化手順は以下の通りです。

1. Dev Hub組織にSalesforce管理者権限を持つユーザーでログインし、「設定」をクリックします。

2. [設定] > [Dev Hub] をクリックします。

3. [Dev Hub を有効化] スイッチをオンにします。

※注意点として、一度有効にすると無効化することはできません。

Dev Hubの有効化が完了すると、Salesforce CLIからScratch Orgを作成できるようになります。

4. ターミナルを開き、以下のコマンドを実行してDev Hubにログインします。

このコマンドを実行すると、ブラウザが開き、Salesforceのログイン画面が表示されます。Dev Hubを有効にした組織のユーザー名とパスワードを入力してログインします。

5.Dev Hubが有効になったら、スクラッチ組織を作成することができます。CLIを使用して、以下のコマンドでスクラッチ組織を作成します。

これにより、指定した設定ファイルに基づいて新しいスクラッチ組織が作成されます

LWCのセットアップ

Salesforceプロジェクトの作成

LWCの開発を始めるには、まずSalesforceプロジェクトをローカル環境に作成する必要があります。Salesforce CLIを使用して、以下のコマンドをターミナルまたはコマンドプロンプトで実行します。

1. 「sfdx force：project：create -n HelloWorld」： HelloWorldという名前のSalesforceプロジェクトを新規作成するコマンドです。プロジェクト名は任意に変更可能です。

2.「cd HelloWorld」： 作成したプロジェクトディレクトリに移動するコマンドです。

3.「dir」：ディレクトリ内のファイルを展開するコマンドです。

コマンド実行後、HelloWorldディレクトリが作成され、Salesforceプロジェクトの基本的なファイル構成が生成されていることを確認します。

環境構築時によく起こるエラーと対処方法

LWCの開発環境構築時に、いくつかのエラーが発生する場合があります。ここでは、よくあるエラーとその対処方法について解説します。

Salesforce CLIが正しくインストールされていない

Salesforce CLIのインストールが正しく完了していない場合、sfdx コマンドが認識されず、エラーメッセージ「sfdx： command not found」が表示されることがあります。

このエラーが発生した場合、以下の手順で対処してください。

①Salesforce CLIの再インストール
Salesforce CLIをアンインストールし、再度インストール手順をやり直してください。インストール時に管理者権限が必要な場合や、特定のオプション設定が必要な場合がありますので、Salesforce CLIのインストール手順を改めて確認してください。

②環境変数の確認
Salesforce CLIのインストールディレクトリが、システムの環境変数Pathに追加されているか確認してください。環境変数PathにSalesforce CLIのインストールディレクトリが登録されていない場合、sfdx コマンドが認識されません。環境変数の設定方法は、OSによって異なりますので、お使いのOSの環境変数設定方法を調べて、PathにSalesforce CLIのインストールディレクトリを追加してください。

③再起動
環境変数を変更した場合は、PCを再起動して変更を反映させてください。

④バージョン確認
再度、ターミナルまたはコマンドプロンプトで sfdx –version コマンドを実行し、バージョン情報が表示されるか確認してください。バージョン情報が表示されれば、エラーは解消されています。

Dev Hubが有効になっていない

Dev Hub組織が有効化されていない状態で、Scratch Orgを作成しようとすると、エラーメッセージ「Dev Hub is not enabled for this org」が表示されます。

このエラーが発生した場合、前述の「Salesforce Dev Hubの有効化」の手順に従って、Dev Hub組織を有効化してください。Dev Hub組織を有効化することで、Scratch Orgを作成できるようになります。

Scratch Orgが作成されていない

Scratch Orgの作成コマンドを実行したにも関わらず、Scratch Orgが作成されない場合や、エラーメッセージ「No Active Scratch Org found」が表示されることがあります。

このエラーが発生した場合、以下の手順で対処してください。

①Scratch Org作成コマンドの再実行
Scratch Orgの作成コマンド sfdx force：org：create -s -f config/project-scratch-def.json -a myScratchOrg を再度実行してみてください。一時的なネットワークエラーやSalesforce側の問題でScratch Orgの作成に失敗している可能性があります。

②Dev Hub組織の確認
Dev Hub組織にログインし、Scratch Orgの作成制限数や有効期限などを確認してください。組織の制限数を超えてScratch Orgを作成しようとしたり、有効期限切れのScratch Orgを操作しようとしたりするとエラーが発生する場合があります。

③Salesforce CLIの認証確認
Salesforce CLIがDev Hub組織に正しく認証されているか確認してください。sfdx force：org：list コマンドを実行し、認証済みの組織リストにDev Hub組織が含まれているか確認します。認証が切れている場合は、sfdx force：auth：web：login -d -r https：//login.salesforce.com コマンドで再度Dev Hub組織に認証してください。

LWCの操作方法

新しいLWCコンポーネントを作成する方法

Salesforceプロジェクトを作成したら、次にLWCコンポーネントを作成します。Salesforce CLIを使用して、以下のコマンドをターミナルまたはコマンドプロンプトで実行します。

     sfdx force：lightning：component：create -n helloWorld –type lwc -d force-app/main/default/lwc

■ [sfdx force：lightning：component：create -n helloWorld –type lwc -d force-app/main/default/lwc] 

helloWorld という名前のLWCコンポーネントを force-app/main/default/lwc ディレクトリに作成するコマンドです。コンポーネント名は任意に変更可能です。

■ -n helloWorld

作成するLWCコンポーネントの名前を helloWorld に指定します。

■ -d force-app/main/default/lwc

LWCコンポーネントを作成するディレクトリを force-app/main/default/lwc に指定します。Salesforceプロジェクトの標準的なLWCコンポーネントの配置場所です。

コマンド実行後、force-app/main/default/lwc ディレクトリ内に helloWorld ディレクトリが作成され、LWCコンポーネントに必要なファイル（helloWorld.html, helloWorld.js, helloWorld.js-meta.xml）が生成されます。

LWCの基本実装を学ぶため、”Hello World” を出してみよう

LWCの基本的な開発の流れを理解するために、今回はデフォルトで「HelloWorld！」と表示して、名前を入力してボタンを押下すると「Hello {入力値}!」を返すLWCコンポーネントを作成してデプロイするまでの流れを確認していきましょう！

LWCの構成要素

LWCコンポーネントは主に以下の3つのファイルで構成されています。

➀HTMLファイル（.html）： コンポーネントのUI（ユーザーインターフェース）の構造を定義します。HTMLの構文を使用して、テキスト、ボタン、画像などのUI要素を配置します。

➁JavaScriptファイル（.js）： コンポーネントのロジック（JavaScript処理）を記述します。イベント処理、データ操作、API呼び出しなど、コンポーネントの動的な動作をJavaScriptで実装します。

➂XMLファイル（.js-meta.xml）： コンポーネントの設定情報（メタデータ）を定義します。Salesforce上でコンポーネントをどのように利用できるかを設定します。例えば、Lightning App Builderで利用可能にする、レコードページに配置可能にする、などの設定をXMLファイルで行います。

それでは、処理内容について解説していきます。

HTMLで簡単なUIを作る

helloWorld.html ファイルを編集して、シンプルなUIを作成します。以下のコードを helloWorld.html に記述してください。ここでは、ユーザの入力を受け取り、ボタンを押下すると画面上のテキストを更新する仕組みを実装しています。

 ＜コードの解説＞

• 初期表示は「Hello, World!」
• ユーザーが入力欄に名前を入力
• 「Update Greeting」ボタンをクリック
• 入力値が greeting に反映され、「Hello, ○○!」と表示

JavaScriptでデータを動的に変更

次に、helloWorld.js ファイルを編集して、JavaScriptでデータを動的に変更する処理を追加します。ここでは、ボタンをクリックしたらテキストの内容を変更する簡単な例を実装します。

以下のコードを helloWorld.js に記述してください。

＜コードの解説＞

• 初期状態：「Hello, World!」を表示
• 入力欄に文字を入力 ： tempGreeting に値を一時保存
• ボタンを押す：greeting を更新し、表示を変更（空なら “World” に戻る）

XMLファイルの設定 (helloWorld.js-meta.xml)

helloWorld.js-meta.xml ファイルでは、LWCコンポーネントをLightning App Builderで使用できるようにするための設定が記述されています。加えて、配置できる場所の設定が記述されています。

＜コードの解説＞

• <isExposed>true</isExposed>： このコンポーネントをLightning App Builder、Experience Builder、Flow Builderで使用できるように設定する
• <targets>： コンポーネントを配置できるLightningページの種別を指定する
  • <target>lightning__AppPage</target>： アプリケーションページ
  • <target>lightning__RecordPage</target>： レコードページ
  • <target>lightning__HomePage</target>： ホームページ

LWCをSalesforce上で動かす

作成したLWCコンポーネントをSalesforce組織にデプロイし、実際に動作を確認してみましょう。

①ソースコードをSalesforce組織にプッシュ

Salesforce CLIを使用して、ローカルのソースコードをScratch Orgにプッシュします。ターミナルまたはコマンドプロンプトで、Salesforceプロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。
      　sfdx force：source：push

このコマンドを実行すると、ローカルのソースコードがScratch Orgにデプロイされます。

※エラーになる場合は、デフォルトのスクラッチ組織が設定されているか確認します。

➀現在のデフォルト組織が設定されているかを確認する

　sfdx force：org：list

➁既存のスクラッチ組織をデフォルト組織に設定する。

　sfdx force：config：set defaultusername=MyScratchOrg

②Salesforce組織にログインして画面配置 

1. 以下のコマンドを実行し、ログインするユーザにパスワードを設定します。

2. Scratch OrgのログインURLを取得し、ブラウザでScratch Orgにログインします。

ログインURLは、以下のコマンドで確認できます。

sfdx force：org：display –targetusername MyScratchOrg

–targetusername myScratchOrg は、Scratch Orgのエイリアス名です。Scratch Org作成時に指定したエイリアス名に合わせて変更してください。
コマンド実行後、表示される sfdxUrl がログインURLです。

③App Builderでコンポーネントを配置

1. Salesforceにログイン後、[設定] > [Lightning App Builder] を開き、[新規] ボタンをクリックしてアプリケーションページを作成します。

2. ページ種別を選択し（ここでは [アプリケーションページ] を選択）、ページに名前を付けて [次へ] をクリックします。

3. Lightning App Builderの画面が開いたら、左側のコンポーネントリストから、作成した helloWorld コンポーネントをドラッグ＆ドロップして、ページの任意の場所に配置します。

4. [保存] ボタンをクリックし、ページを保存します。

5. [有効化] ボタンをクリックし、ページを有効化します。

6. [アプリケーションをホームページおよびアプリケーションメニューに追加] を選択し、アプリケーション名を入力して [保存] をクリックします。

④プレビューで動作確認

作成したアプリケーションページを開き、helloWorld コンポーネントが正しく表示されていることを確認します。

1. アプリケーションメニューから、先ほど作成したアプリケーションを選択し、アプリケーションページを開きます。

2.input要素に名前を入力しボタンを押下するとテキスト表示が入力した名前に合わせて動的に変化することを確認してください。

まとめ

Salesforce LWC（Lightning Web Components）は、Web標準技術に基づいたSalesforceの最新UI開発フレームワークであり、再利用性の高いコンポーネントを作成し、効率的でパフォーマンスの高いアプリケーションを構築するための強力なツールです。

本記事では、LWCの基本概念、開発環境の構築手順、そして簡単な “Hello World” コンポーネントの作成と動作確認を通して、LWC開発の基礎を解説しました。

LWCを習得することで、Salesforceプラットフォーム上でより高度でインタラクティブなUI/UXを実現し、ビジネス価値の高いSalesforceアプリケーションを開発することが可能になります。ぜひ、LWCの学習を継続し、Salesforce開発スキルを向上させてください。

ストラでは、この記事で解説したLWCの開発支援、活用コンサルティングなど、お客様のSalesforce活用に関するご支援を一貫して行っております。もし導入にお困りの際や、更なる活用方法にご興味をお持ちの場合は、お気軽にお問い合わせください。

また、ストラのSalesforce導入支援や定着化支援、開発支援について、さらに詳しく知りたい方はこちらのページで紹介しています。

• Salesforce導入支援
• Salesforce定着化・活用支援
• Salesforce開発・システム連携支援