Salesforceの導入サポート、開発・連携を行う(株)FDCのエンジニアチームが、Salesforce Lightning 開発の基礎から実践例まで、初心者の方にもわかりやすく解説します。

Salesforceには多くの開発手法が存在しますが、現在の主流は「Lightning Web Components（LWC）」を中心としたモダンな開発スタイルです。

「何から手をつければいいかわからない」「LWCとAuraの違いが把握できていない」という方に向けて、2026年最新の情報をもとに体系的にまとめました。


株式会社エフ・ディー・シーはSalesforceコンサルティングパートナー

Salesforce Lightning開発とは？基本概念をおさらい

Salesforce Lightning開発とは、Salesforceプラットフォーム上で動作するカスタムUIや業務アプリケーションを構築するための開発全般を指します。2015年に登場した「Lightning Experience（LEX）」という新しいUIフレームワークを土台として、その上でコンポーネントやページをカスタマイズする開発手法です。

Lightning ExperienceとLightning開発の関係

Lightning Experienceとは、従来の「Salesforce Classic」に代わるモダンなUI環境です。より直感的な操作性と高い生産性を提供し、現在ほとんどの組織でデフォルトのUIとして採用されています。Lightning開発は、このLightning Experience上で動作するカスタムコンポーネントやページを作成することを指します。エンジニアだけでなく、管理者もノーコード/ローコードツールを使って開発に参加できる点が大きな特長です。

Salesforce Lightning開発の3つのアプローチ

Salesforceでは、目的や技術レベルに応じて3つの開発アプローチを選択できます。それぞれの特長を下の表で確認してみましょう。

アプローチ 主なツール 特長 対象者
ノーコード/ローコード Lightning App Builder、フロービルダー コーディング不要でドラッグ＆ドロップ操作。業務プロセスの自動化も実現 管理者・業務担当者
コンポーネント開発（LWC） Lightning Web Components HTML/JavaScript/CSSで再利用可能なUIパーツを作成。Web標準に準拠 フロントエンド開発者
サーバーサイド開発 Apex（Java風の独自言語） ビジネスロジックやデータ処理を実装。LWCと連携して使用することが多い バックエンド開発者

これら3つを組み合わせることで、Salesforce上にフルカスタムのアプリケーションを構築できます。実際の開発現場では、管理者がLightning App Builderでページレイアウトを構成し、開発者がLWC＋Apexで複雑なカスタムコンポーネントを組み込む、というハイブリッドな進め方が一般的です。

Lightning Web Components（LWC）の基礎知識

現在のSalesforce Lightning 開発の中心となっているのが、Lightning Web Components（LWC）です。Salesforceの公式ドキュメントでも「LWCはSalesforceプラットフォーム上でWebおよびモバイルアプリケーションの最新UIを作成するためのフレームワーク」と定義されています。

LWCの特長は、W3C（World Wide Web Consortium）が定めるWeb標準技術に準拠している点です。HTML・JavaScript・CSSという広く普及した技術を使って開発できるため、Web開発経験があるエンジニアであれば比較的スムーズに習得できます。また、ネイティブブラウザ機能を最大限活用するため、従来のAuraコンポーネントと比べてパフォーマンス面でも優位性があります。

LWCを構成するファイル

LWCコンポーネントは、基本的に以下の3種類のファイルで構成されています。

ファイル種別 拡張子 役割
HTMLテンプレート .html コンポーネントの構造（レイアウト）を定義する。<template>タグで囲む
JavaScriptコントローラー .js コアとなるビジネスロジック・イベント処理を記述する
CSSスタイルシート .css コンポーネントのデザイン・アニメーションを定義する

このほかに、コンポーネントのメタデータを定義する.js-meta.xmlファイルも必要です。どのページ（レコードページ・アプリページなど）に配置できるかをこのファイルで設定します。つまり実際のコンポーネントは最低4ファイル構成になると覚えておきましょう。

LWCの3つのデコレータ（@api・@track・@wire）

LWC開発において必ず理解しておきたいのが「デコレータ」です。デコレータとは、JavaScriptのプロパティや関数に特別な機能を付与する仕組みです。LWCには以下の3つの独自デコレータが用意されています。（参考：Salesforce Developers 公式ドキュメント「デコレータ」）

  • @api：コンポーネントのプロパティや関数を「公開」する。親コンポーネントから値を受け取ったり、外部からメソッドを呼び出したりする際に使用する
  • @track：オブジェクトや配列の内部変更を検知し、コンポーネントを再描画（リアクティブ更新）する際に使用する
  • @wire：Salesforceのデータをリアクティブに取得するためのワイヤサービスを利用する。Apexメソッドやワイヤアダプタからデータをコンポーネントにバインドする

特に@wireデコレータはSalesforceデータとのリアルタイム連携に欠かせない機能です。例えば、取引先情報をリアクティブに表示するコンポーネントを作成する場合などに頻繁に使用します。なお、@trackについてはLWCの進化により、プリミティブ型のリアクティブ検知はデコレータなしでも自動的に行われるようになっています。オブジェクトや配列のネストされたプロパティの変更を検知したい場合に明示的に使う、というのが現在の使い分けです。

AuraコンポーネントとLWCの違い・使い分け

LWCが登場する前の主流開発フレームワークが「Auraコンポーネント」です。現在もAuraは利用できますが、Salesforce公式は原則としてLWCでの新規開発を推奨しています。（参考：Salesforce Developers「Lightning Web Components または Aura の選択方法」）

比較項目 Lightning Web Components（LWC） Auraコンポーネント
登場時期 2019年〜 2014年〜
技術標準 W3C Web標準に準拠 Salesforce独自フレームワーク
パフォーマンス 高速（ネイティブブラウザ機能活用） LWCと比べてオーバーヘッドが大きい
学習コスト 低い（Web標準知識が活かせる） Salesforce独自の学習が必要
Salesforceの推奨方針 新規開発は原則LWCを推奨 LWCで非対応の機能がある場合のみ使用
相互運用 Auraコンポーネント内にLWCをネストして使用可能 LWC内にAuraをネストすることは不可

相互運用の行で示した通り、AuraからLWCへは一方通行の関係です。既存のAuraアプリケーションにLWCコンポーネントを段階的に組み込むことはできますが、その逆はできません。この特性を活かして、既存Aura資産を維持しながら新規パーツはLWCで開発する「段階的マイグレーション」が現実的な移行戦略として多くの現場で採用されています。

Salesforce Lightning開発の環境構築ステップ

Salesforce Lightning 開発を始めるには、以下の環境を準備する必要があります。すべてSalesforce公式が提供するツールであり、無料で利用可能です。

  1. Visual Studio Code（VS Code）をインストール：Salesforce推奨の無料エディタ。シンタックスハイライトやデバッグ機能が充実している
  2. Salesforce Extension Pack を導入：VS Code用のSalesforce公式拡張機能。LWCの補完機能・構文チェックが使えるようになる
  3. Salesforce CLI（sf コマンド）をインストール：コマンドラインからSalesforce組織の操作・デプロイが可能になる開発基盤ツール
  4. Salesforce Developer Edition（無料）またはスクラッチ組織を用意：開発・テスト専用の環境。本番環境に影響せずに安全に開発できる
  5. DX プロジェクトを作成し、組織に接続：sf project generateコマンドでプロジェクトを作成し、sf org loginコマンドで組織に接続する

特にSalesforce CLIのインストールはすべての開発作業の起点となるため、最初に確実に設定しておきましょう。Spring ’26（2026年2月〜順次展開）以降はTypeScriptサポートも正式対応したため、型安全な開発環境を最初から整えることも可能です。

LWCの実装例：Apexと連携したデータ取得コンポーネント

ここでは、LWCとApexを連携させた実装の基本例を紹介します。「取引先（Account）情報を取得して画面に表示するコンポーネント」を例に構成を見ていきましょう。

①Apexクラス（サーバーサイド）の作成

まず、データを取得するApexクラスを作成します。LWCから呼び出せるように、@AuraEnabled(cacheable=true)アノテーションを付与するのがポイントです。

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name, Phone FROM Account LIMIT 10];
    }
}

②LWCのJavaScriptファイル（クライアントサイド）

@wireデコレータを使ってApexメソッドをリアクティブに呼び出します。

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class AccountList extends LightningElement {
    @wire(getAccounts)
    accounts;
}

このように、@wireを使えばApexメソッドの結果を自動的にコンポーネントにバインドできます。わずか数行のコードでSalesforceのデータを画面に表示できるのがLWCの大きな魅力です。@wireで取得したデータはaccounts.dataとaccounts.errorで参照でき、HTMLテンプレート側でif:trueディレクティブを使ってデータの有無に応じた表示切り替えを行うのが一般的なパターンです。

なお、データの書き込みや削除処理（ミューテーション）については、Spring ’26から完全サポートされたexecuteMutationメソッドを利用する方法も有効です。

Spring ’26で強化されたSalesforce Lightning開発の新機能

2026年2月より順次展開されているSpring ’26リリースでは、Lightning 開発に関わる重要なアップデートが多数含まれています。

  • 動的イベントリスナー（lwc:on ディレクティブ）：HTMLテンプレートに手を加えずに、JavaScriptオブジェクトでイベントリスナーを動的にアタッチできるようになった。動的に生成される要素が多いコンポーネントでの実装がシンプルになる
  • GraphQLミューテーションの完全サポート：lightning/graphqlのexecuteMutationメソッドにより、LWCからレコードの作成・更新・削除を直接実行できるようになった。従来のimperativeなApex呼び出しに代わる選択肢として注目されている
  • Lightning基本コンポーネントのTypeScriptサポート：@salesforce/lightning-typesパッケージ導入により、デプロイ前にコードの型エラーを検出できるようになった。大規模プロジェクトでの保守性向上に大きく貢献する
  • 複雑なテンプレート式（ベータ）：HTMLテンプレート内で三項演算子・オプショナルチェーン・配列メソッドなどをインラインで記述できるようになった。これまでJavaScript側にゲッターを定義していた簡単な条件分岐がテンプレートだけで完結する
  • Apexカーソル（API v66.0〜 正式提供）：大量のSOQL結果をチャンク単位で処理できるようになり、大規模データ処理のパフォーマンスが大幅に向上した

特にTypeScriptサポートとGraphQLミューテーションの対応は、開発品質と開発速度の両面で大きな恩恵をもたらします。既存プロジェクトへの段階的な導入も可能なため、新規コンポーネントから試してみることをおすすめします。

まとめ：Salesforce Lightning開発の始め方

Salesforce Lightning開発は覚えることが多く見えますが、最初の一歩は意外とシンプルです。まずは無料のDeveloper Editionを取得し、VS Code＋Salesforce CLIの環境を整えたら、Trailheadの「Lightning Web コンポーネントのクイックスタート」に沿って最初のLWCコンポーネントを作ってみてください。「Hello World」を画面に表示できた瞬間に、LWCの開発サイクル全体が体感として理解できるはずです。

既存のAura資産がある組織では、すべてを一度にLWCへ移行する必要はありません。新規コンポーネントからLWCで開発し、既存AuraにLWCをネストする形で段階的に移行していく戦略が現実的です。Spring ’26で追加されたTypeScriptサポートやGraphQLミューテーションも活用しながら、モダンなSalesforce開発を進めていきましょう。

Salesforceの開発・運用にお困りなら「SFsolution」にご相談ください

ここまで解説してきた通り、LWC開発やApex連携は強力な手法ですが、「社内にエンジニアリソースが足りない」「既存のAuraコンポーネントをLWCに移行したいが工数が読めない」といった壁にぶつかるケースも少なくありません。

そのようなお悩みをお持ちの方におすすめなのが、弊社(株)エフ・ディー・シーが提供しているSalesforce導入・活用のトータルサポートサービス「SFsolution」です。LWCをはじめとするLightning開発、外部システムとのAPI連携、既存コードのリファクタリングなど、エンジニア領域のご支援を包括的に対応しています。「まずは話だけ聞いてみたい」という方も大歓迎ですので、お問い合わせまたは資料ダウンロードからお気軽にご連絡ください。


株式会社エフ・ディー・シーはSalesforceコンサルティングパートナー