Salesforce Visualforceの基礎の基礎

これは何？

この記事は「24日後に立派なSalesforceエンジニアになるWEBエンジニア Advent Calendar 2022」の16日目の記事です。9日後に立派なSalesforceエンジニアになるために今日はVisualforceについてみていきたいと思います。

Visualforceとは？

Visualforce は、Lightning プラットフォームでネイティブにホストできる高度なカスタムユーザインターフェースを、開発者が作成できるようにするフレームワークです。Visualforce フレームワークには、HTML に似たタグベースのマークアップ言語、およびクエリや保存など、基本的なデータベース操作を非常に簡単に実行できるサーバ側の「標準コントローラ」のセットが含まれています。
Visualforce開発者ガイド

つまりVisualforceはSalesforceの画面を独自に作成するためのフレームワークで、標準で用意されてるコントローラや、Apexで作った独自のロジックを呼び出し画面を表示することができるもの。

あれ？昨日までやってきたLWCと何が違うんだっけ？？

ちょっとだけ両方を触ってみたうえで私の独断と偏見100%でお伝えすると、今から新しく作るものは基本LWCでいいと思う。特に今回のアドベントカレンダーにあるようにバックグラウンドがWEBエンジニアなら尚更。
ちなみに公式にもどのような場合に Visualforce ではなく Lightning Web コンポーネントを使用すべきですか?という内容について以下のように書かれている。

新規の開発の場合は、Lightning Experience ローコードツールと Lightning Web コンポーネントを使用することを常にお勧めしています。これらには、さまざまなメリットがあり、開発も容易に行えるようになります。

あれ？私はなぜVisualforceを学ぼうとしてるんだ？？

と、なるけど、とりあえずどんなものか知っておく必要があると思うので気を取り直して進んでいく。

Visualforceはどんな場面で使えるの？

Salesforce内ではさまざまなところから Visualforce　を呼び出せるようになっているので、ここではいくつか例に挙げながらみていこうと思う。

1. Lightning アプリケーションビルダーでコンポーネントとして利用する

左側のコンポーネントの中にVisualforceがあるので、それを表示したいところに持っていき、表示するVisualforce名を選択する。

2. クイックアクションとして利用する

先に 設定 > ユーザーインターフェース > グローバルアクション > グローバルアクション　からグローバルアククションとしてVisualforceを呼び出すように設定し保存しておく。

その後、クイックアクションを設定したいオブジェクトのページレイアウトから先ほど作成したアクションを配置する。

こうすることでクイックアクションとしてVisualforceを呼び出すことができるようになる。

3. タブから利用する

まずはタブの設定を行う。設定 > ユーザーインターフェース > タブから表示したいVisualforceの情報を登録。

するとこのようにタブに追加されて、ここからVisualforceを呼び出すことができる。

現状よく使っているのはこの辺り。
それ以外にもいくつか呼び出せるところはあるので、また出てきたらその時に触れていこうと思う。

Visualforceのサンプルコード

Visualforceページは pages を右クリックしてSFDX:Visualforceページを作成から作っていく。開発環境構築についてはこちらの記事で記載している。

新規作成するとtest.page とtest.page-meta.xml の2ファイルが生成されるが、主にtest.pageにコードを書いていく。

test.page

<apex:page standardController="Contact" >
    <apex:form >
        <apex:pageBlock title="Edit Contact">
            <apex:pageBlockSection columns="1">
                <apex:inputField value="{!Contact.FirstName}"/>
                <apex:inputField value="{!Contact.LastName}"/>
                <apex:inputField value="{!Contact.Email}"/>
                <apex:inputField value="{!Contact.Birthdate}"/>
            </apex:pageBlockSection>
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

htmlぽいちゃぽいけど、LWCに比べるとなんともとっつきにくい感じがする。
上記をsandboxにデプロイして取引先責任者のページに配置するとこんな感じになる。

この部分<apex:page standardController="Contact" >で標準の取引先責任者のコントローラーを呼び出している。詳細についてはこちらに記載されているが、標準コントローラーを使うことで新たにクラスを作らなくても、レコードの保存や編集、削除といった標準機能を使うことができる。ただし標準機能以上のことを処理させたい場合は、自分でカスタムコントローラーを作ってそれを呼び出してやる必要がある。が、この辺りの詳しい内容についてはまた別記事で紹介しようと思う。

最後に

今までLWCをやってきて新たにVisualforceに触れてみたけど、やっぱり個人的にはLWCで全て実装したいなと感じました。が、Visualforceじゃないとできないシーンもあるので、一応知識としては知っておいた方が実装面においては役に立ちそうです。
ということで明日はVisualforceもちょっと使う、コールシステムとの連携周りについて書いていきたいと思います。