Salesforce の Apex と Visualforce の開発で何ができるんだっけ？

# はじめに
Salesforce には画面やバックグラウンドの処理を作成する方法がいくつかあります。
　・Visualforceページ、Apexクラス
　・Lightning Web Component
　・Aura Component

今回はその中でも「Visualforceページ、Apexクラス」のお話をしていこうと思います。

「Salesforce で標準の画面があるのに、画面とか作る必要ってあるの？」
「そもそも何ができるんでしたっけ？」
と言う疑問がわいてきます。

もちろん、Salesforce の標準で提供している画面を用いることで
データ（レコード）を作ったり、編集したり、削除したり、一覧で見たりすることができます。
これでも全然用は足ります。

ただ、細かくカスタマイズができない、と言う場合もあり
要件を満たせない場合もあり得ます。
その場合には開発をして要件を満たす、と言うことになります。


# イメージ

ユーザーが操作する画面は「Visualforceページ」。
ボタンを押して、その内容を処理するのが「Apex」となります。
更に、SOQLを使ってオブジェクトに保存する、と言った流れになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/b10e96fc-042a-2178-ef2e-b21163020d60.png)


# 簡単なページを作ってみましょう。

Salesforce の設定を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/f132d55f-7778-10fe-e272-2bc50e2759eb.png)

クイック検索欄で、``Visualforce`` と入力して、``Visualforce ページ``を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/bfe870c2-e2f4-1bad-5519-b28300b3332f.png)

[新規] ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/5aefc3dd-5ae4-cfc9-efac-7d10862d0dc5.png)

以下のような画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/2551a1c6-ede3-a295-7640-b87303fa511c.png)

「表示ラベル」と「名前」を付けて [保存]ボタンを押します。
（Visualforce Markup の内容は変更しません）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/720adc92-6bbf-173f-af93-d0d1422c9eb7.png)

こんな感じになります。[プレビュー]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/b80f8ff4-ab49-0a61-361c-8c3b3f7c62fb.png)

以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/84961186-a0a6-c8ce-bc9f-21e8dacfc1e6.png)

簡易的ですが、Visualforce ページが完成しました。


# どのように使うの？

#### 1）タブをクリックするとVisualforceページを表示する設定

Salesforce の設定から「タブ」を開き、「Visualforce タブ」の [新規]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/bb47baff-cc78-eb5a-0515-18b5c193612f.png)

「Visualforceページ」で先ほど作った Visualforceページを指定し、「タブの表示ラベル」「タブ名」「タブスタイル」を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/4374e979-0af2-de66-23f5-4cad8465ea02.png)

「アプリケーションランチャー」から選べるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/763c533b-6cb5-1d97-9906-fcb834c36dec.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/f201c610-fc4e-b1ec-c965-de6b94a73cf9.png)


#### 2）Lightning コンポーネントとしてVisualforceページを表示する設定
Lightning であれば、コンポーネントとしてVisualforce ページを配置することができます。

「Lightning Experience、エクスペリエンスビルダーサイト、およびモバイルアプリケーションで利用可能」にチェックする必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/67bcfe22-d8b4-7c75-d519-2592c11f6e36.png)


Salesforce の設定から「Lightning アプリケーションビルダー」を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/985ea3ef-f32f-c5d0-74d2-b6a9d78f9350.png)

「Visualforce ページ名」で先ほど作った Visualforce ページを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/685983fc-b6e1-167a-726c-36a043ceee2a.png)

保存して、有効化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/41358f22-4741-ff6c-8fdf-9b378c8b0123.png)

すると、当該のページに表示されるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/7be69677-ff26-97f9-5601-283188657fb6.png)

複数のVisualforceページをページに配置することで
要件に応じたページを作成することができるようになります。


#### 3）レコードの作成等の標準画面の変わりにVisualforceページを表示する設定

レコードの新規作成等のSalesforce標準の画面を任意のVisualforceページに切り替えることができます。
今回は、取引先の新規ボタンをクリックしたときの画面を変更してみます。

変更前の動きを確認します。
「取引先」から[新規]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/d7564ca6-9c85-3c7c-6c2f-1bae6df08041.png)

このように「新規取引先」のポップアップが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/276eb820-83d6-16f5-f1af-c2b45f33a764.png)


それでは変更してみたいと思いますが
まずその際に、Visualforce ページの apex:page に standartController を設定する必要があります。
``
<apex:page standardController="Account">
``

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/38ca2083-39ed-57cf-10a9-492cbfd77414.png)

「オブジェクトマネージャー」から「取引先」を選び
「ボタン、リンク、およびアクション」を選びます。「新規」右の [▼]から「編集」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/774e3b82-ec2f-d630-4fb5-5a512984872e.png)

「プロパティの上書き」で「Salesforce Classic の上書き」で
「Visualforce ページ」を選び、先ほど作った Visualforceページを指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/b20e4ae8-6965-9ca7-d58b-83e335a162bc.png)

:::note
ラジオボタンの切り替え忘れに注意！
:::


設定が変更されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/2e17ec41-070f-cde7-8927-24a050d6620e.png)

「新規」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/4c6ca5a9-8c74-acef-c463-f32c92c4012a.png)

すると、先ほど作った Visualforce ページが表示されます。
※表示されない場合は、ブラウザのキャッシュをクリアしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/f49b4462-2bc5-f3f0-ba33-e8ccae143723.png)

他にも、Visualforce ページを利用した方法はいくつかあります。

# さいごに
Salesforce 標準画面では実現できない要件を Visualforce ページと Apex を利用することで実現することができます。

例えば
・レコードを新規に作成にあたって、他のオブジェクトのレコードを参照する必要があるため、画面を作る。
・入力値に対して、特殊なチェックをする必要があるため、画面を作る。