Salesforceの画面開発を比較！Visualforce・Apex・LWCの特徴と選び方
Salesforceには、取引先や商談の管理画面など、あらかじめ用意された標準的な画面が備わっています。しかし業務によっては、標準画面だけでは対応しきれない独自の要件が生じることもあります。
そのような場合に活用できるのが、Visualforce・Apex・LWC（Lightning Web Components）といったカスタム開発の技術です。これらを活用することで、より使いやすく業務効率の高い独自の画面を実現できます。
本記事では、Salesforceの画面開発の基本概念から、各開発手法の特徴や手順、運用のポイントまでわかりやすく解説します。
Salesforceの画面開発とは
Salesforceの画面開発とは、標準UIをカスタマイズしたり、業務要件に合わせた独自の画面を構築したりする取り組みです。開発の目的や規模に応じて、ノーコードの設定からコーディングを伴う本格的な開発まで、複数の手法を使い分けられます。
Salesforceにおける画面開発（UI開発）の基本概念
Salesforceの画面開発は、大きく「設定ベース」と「コードベース」の2つのアプローチに分けられます。設定ベースはプログラミングの知識がなくてもノーコードで実現できる方法として、管理画面上の操作のみで画面レイアウトの変更や業務フローの組み込みが可能です。一方、複雑な要件や標準機能では対応しきれないケースには、コードを書くコードベースの開発が必要になります。
コードベースの開発手法には、冒頭でもお伝えしたように主にVisualforce・Apex・LWCの3つがあります。それぞれ得意とする用途や対応できる要件が異なるため、開発規模やシステムの現状に応じて適切な手法を選ぶことが、品質の高い画面開発を実現するうえで重要です。
どの手法が最適かは、「何を作りたいか」「既存システムにどう組み込むか」「開発・保守を担うチームのスキル」といった観点から検討するとよいでしょう。
Lightningアプリケーションビルダーを使った標準UIカスタマイズ
コードを書かずにSalesforceの画面をカスタマイズしたい場合に活用できるのが、「Lightningアプリケーションビルダー」です。ドラッグ＆ドロップの直感的な操作で画面レイアウトを変更できるため、管理者がコーディングなしで多くのカスタマイズを実現できます。
Lightningアプリケーションビルダーの中で特に重要な機能が「Lightningレコードページ」の編集です。Lightningレコードページとは、商談・取引先・ケースなどの各レコード詳細画面のレイアウトを指します。Lightningアプリケーションビルダー上でレコードページを編集すると、表示する項目の順序や関連リストの配置を、ユーザーの役割やデバイス（PC・スマートフォンなど）ごとに切り替えられます。例えば、営業担当には商談の進捗に関わる項目を上部に表示し、管理者には承認関連の情報を優先表示するといった設定が可能です。
業務効率を意識したレイアウト設計として、よく使う情報を画面上部に配置することが基本的なポイントです。スクロールしなくても必要な情報がすぐ目に入る構成にするだけで、日常業務のストレスを大きく軽減できます。
さらに、動的フォーム※1を活用すると、レコードの状態や入力値に応じて表示する項目を条件付きでコントロールすることも可能です。フローやコンポーネントを組み合わせることで、承認ボタンや画面フロー（ステップ形式で入力を案内する画面）などの業務フローをコードなしで画面に組み込むこともできます。
※1 動的フォームとは、レコードの状態や入力内容に応じて、画面に表示する項目を自動的に切り替えられる機能です。例えば、商談フェーズが「提案済み」に進んだ段階で見積金額の入力欄を表示するといった設定が、コードなしで実現できます。
Visualforceを使った画面カスタマイズ
VisualforceはSalesforceが独自に提供するページ記述言語で、HTMLに近い構文でカスタム画面を作成できます。標準UIでは実現できない独自レイアウトや帳票出力など、幅広い用途に対応できる成熟した技術です。
Visualforceで実現できること
VisualforceはSalesforce専用のマークアップ言語で、HTMLに近い記法でカスタムページを作成できます。Web開発の経験があれば比較的とっつきやすく、Salesforceのデータを柔軟に画面に表示するための仕組みが豊富に備わっています。
Visualforceが特に力を発揮するのは、PDF出力・帳票印刷・複雑なフォーム画面といった、標準UIでは対応が難しい要件です。例えば、商談成立後に見積書や契約書をSalesforceから直接PDFとして出力したい場合、Visualforceを使えば独自のフォーマットで帳票を作成できます。
また、AppExchangeで提供されているサードパーティ製の帳票ツールを採用するケースもあります。Visualforceで対応するかサードパーティツールを活用するかは、要件やコストに応じて判断するとよいでしょう。
Visualforceは長年にわたって使われてきた成熟した技術であるため、既存のSalesforceシステムに組み込まれたVisualforceページは、現在も多くの組織で運用されています。新規開発では後述のLWCが主流となっていますが、既存のVisualforceページを保守・改修する場面は依然として多く、Visualforceの知識は現場で引き続き重要なスキルです。
Visualforceの開発手順
Visualforceの開発は、Salesforceが提供する「開発者コンソール」またはMicrosoftのエディタである「VSCode」を使って行います。開発者コンソールはブラウザ上で動作するためすぐに使い始められるため、VSCodeはより本格的な開発環境として広く利用されています。
Visualforceページを作成する際は、画面の見た目を定義する「Visualforceページ（.page）」と、データ処理やビジネスロジックを担う「Apexコントローラー（.cls）」を組み合わせるのが基本的な構成です※2。シンプルな表示であれば標準コントローラーをそのまま使うこともできますが、独自のロジックが必要な場合はApexクラスを自作して連携させます。ApexはSalesforce専用のプログラミング言語で、Javaに近い構文を持っており、データの取得・更新・削除といった処理をコードで細かく制御することができます。
作成したVisualforceページは、プロファイルやカスタムタブを通じてユーザーに公開できます。特定のユーザーだけに表示させたい場合は、プロファイルのアクセス設定でページの公開範囲を制限するとよいでしょう。開発後は必ずSandbox環境でテストを行い、意図どおりに動作することを確認してから本番環境にリリースする流れが基本です。
Lightning Web Components（LWC）を使った画面カスタマイズ
LWC（Lightning Web Components）はSalesforceが2019年に導入したモダンなUI開発フレームワークで、現在の標準的な開発手法です。Web標準技術（HTML・JavaScript）をベースにしているため、最新のSalesforce機能との親和性が高く、高パフォーマンスな画面開発が可能です。
LWCとは？Visualforceとの違い
LWC（Lightning Web Components）は、HTML・JavaScript・CSSというWeb標準技術をベースにした、コンポーネント開発フレームワークです。「コンポーネント」とは、ボタンや入力フォーム・カードUIなど画面を構成する部品のことで、LWCではこれらの部品を独立したユニットとして開発し、組み合わせることで画面全体を構築していきます。
VisualforceとLWCの最も大きな違いは、技術的な基盤です。VisualforceはSalesforce独自のマークアップ言語であるのに対し、LWCはWeb標準技術をそのまま活用しているため、Web開発の知識やスキルをそのまま活かしやすい設計になっています。
また、LWCはブラウザのレンダリングエンジンを直接活用する仕組みのため、Visualforceと比べて表示速度が速く、モバイル対応にも優れています。スマートフォンやタブレットでSalesforceを利用する場面が増えている現代では、この点は大きなアドバンテージです。
Salesforceは現在、新規開発においてLWCを推奨しており、新しい機能や最新のSalesforceプラットフォームとの連携も、LWCを前提として設計されているものが増えています。Visualforceが今後も保守・運用され続けることは変わりませんが、これから新しい画面開発を始める場合はLWCを選択するのが基本的な方針です。
LWC（Lightning Web Components）の開発手順
LWCの開発を始めるには、まず、VSCodeにSalesforceの拡張機能（Salesforce Extension Pack）とSalesforce CLIをインストールします。その後、ローカルの開発環境を構築してください。Salesforce CLIはコマンドラインツールで、組織との接続やコードのデプロイなどの操作をターミナル上で行えます。
LWCでは、1つのコンポーネントをHTML・JavaScript・メタデータ（XML）の3つのファイルで構成します。独自のスタイルを適用したい場合はCSSファイルを追加することもできますが、必須ではありません。
HTMLファイルはコンポーネントの見た目（テンプレート）を定義し、JavaScriptファイルはデータの取得やユーザー操作に応じた処理ロジックを記述してください。CSSファイルはコンポーネント固有のスタイルを定義し、メタデータファイルはコンポーネントをどの場所に配置できるかといった設定情報を管理します。この4ファイルが1セットになって1つのコンポーネントとして機能します。
作成したコンポーネントは、Lightningアプリケーションビルダー上で、Lightningレコードページやアプリケーションページに配置して使用します。ビルダーのサイドパネルに作成したコンポーネントが表示されるため、ドラッグ＆ドロップで画面上の任意の位置に配置できます。開発したコンポーネントは他の画面でも再利用できるため、共通部品として整備しておくと開発効率が大きく向上するでしょう。
画面開発を進めるための実践ポイント
画面開発をスムーズに進めるためには、開発前の準備と開発後の運用・保守の両面が重要です。要件の整理から環境構築・テスト・リリース管理まで、開発全体を見通した取り組みが成功のカギとなります。
要件整理と開発環境のセットアップ
画面開発でよく起こる失敗の一つは、要件の認識にずれが生じることです。「こういう画面を作ってほしい」という依頼に対して、開発者側が想定していたものと現場の求めるものが異なっていたというケースは珍しくありません。これを防ぐために、開発前にユーザーの業務フローと画面要件を詳細にヒアリングし、ワイヤーフレーム（画面の下書き）などを使って認識を揃えておくことが重要です。
要件が整理できたら、次に「標準機能で対応できるか」それとも「カスタム開発が必要か」を仕分けます。カスタム開発はコストと時間がかかるため、標準機能や設定ベースのカスタマイズで対応できる要件は積極的に活用することが、開発効率と保守性の観点から重要です。標準機能では対応できないと判断した要件に対してのみ、VisualforceやLWCによるコード開発を検討するという順序が基本的なアプローチになります。
開発環境については、本番環境に直接コードを書くことは絶対に避けましょう。本番環境への直接開発は、ミスが即座に利用中のユーザーに影響するリスクがあります。Salesforceが無償で提供するDeveloper EditionやSandbox環境（本番データをコピーしたテスト環境）を使って開発・検証を行い、問題がないことを確認してからリリースするフローを必ず守ることが重要です。
リリース管理と継続的な改善のポイント
開発したコードをSandboxから本番環境へ移行（デプロイ）する際は、変更セットまたはSalesforce CLIを使用します。変更セットはSalesforceの管理画面から操作できるGUIベースの方法で、比較的シンプルな変更に向いています。Salesforce CLIはコマンドラインからデプロイを実行する方法で、より複雑な変更や自動化を行いたい場合に適しています。また、Gitなどのバージョンコントロールツールでコードの履歴管理を行うことで、変更内容の追跡や問題発生時のロールバックが容易になります。
リリース後は、ユーザーへのトレーニングを忘れずに実施しましょう。どれだけ使いやすい画面を開発しても、使い方が現場に伝わらなければ定着しません。操作マニュアルの作成や、ハンズオン形式のトレーニングセッションを通じて、新しい画面への移行をスムーズにサポートすることが大切です。
開発は、一度完成させたら終わりではありません。Salesforceは年3回（春・夏・冬）※3のバージョンアップが行われるため、アップデートに合わせた動作確認が定期的に必要です。また、実際に使い始めたユーザーから「この項目をもう少し見やすくしてほしい」「このボタンの位置が使いにくい」といったフィードバックが集まってきます。そのフィードバックを基に、定期的に改善を続けることで、現場で実際に活用される画面へと成長させることができます。
まとめ
本記事では、Salesforceの画面開発の基本概念から、Visualforce・LWCそれぞれの特徴と開発手順、実践的な運用ポイントまで解説しました。
設定ベースのLightningアプリケーションビルダーはノーコードで手軽に画面をカスタマイズでき、帳票出力など標準UIでは対応しきれない要件にはVisualforceが有効です。そして、これから新規に画面開発を始める場合はLWCが現在の標準的な選択肢となっています。それぞれの手法の特性を理解し、要件に応じて使い分けることが、品質の高い画面開発の第一歩です。
また、開発前の要件整理・Sandbox環境での検証・リリース後の継続的な改善というサイクルを整えることが、長期的に安定したシステム運用につながります。
『エス･ビー･エス株式会社 』では、Salesforceパートナーとして200社以上の導入実績を持ち、ニーズに合ったシステム構築と内製化に向けたご支援を行っています。 業務改善やDXを進めたい会社様にとって、Salesforceは今後ますます重要な選択肢です。ぜひお気軽にお問い合わせください。