【Salesforce】Visualforce② visualforceのタグを覚えたい

この記事は新社会人のSalesforce学習記録とその他 Advent Calendar 2025の15日目の記事です。

apexタグ

apexには様々なタグがあります。ボタンを表示するもの、入力フィールドを出すものなど、タグ一つで簡単に実装することができます。標準コントローラーのみでApexを使わない場合でもボタンを押したときに入力フィールドの値を保存するなどすることができます。もちろんコントローラー拡張でApexを使用し、複雑な操作を実装することもできます。
以下ではapexタグのうち学習したものを載せていきます。

apex:inputField

入力フォームを実装する際に使用します。

<apex:inputField value="{account.Name}">
</apex:inputField>

標準コントローラーでApexを使わない場合でも、ボタンと一緒に実装することで入力フォームに入力した内容を保存するなどの処理を行うことができます。
valueには"{!アカウント名.項目名}"と書きます。"{}"の中で、アカウント名の前に!を書くのが特徴で、lwcで使うHTMLと混同しやすいポイントです。

lwcのHTML	visualforce
{}を使う	{}を使う
""でかこまない	""で囲む
!がいらない	!がいる

apex:inputText

テキストのみ入力できる系の入力フォームです。
複数行入力する場合にはapex:inputTextareaとしたり、チェックボックスを実装するにはapex:inputCheckboxで行けたりするようです。

apex:commandButton

ボタンです。inputfieldと一緒に使うことができます。ボタンを押したときの動作はactionで指定でき、inputfieldのvalueの時と同じように"{!　}"を使用します。

<apex:commandButton action="{!Save}">
</apex:commandButton>

セーブをする場合はそのままSaveと書けばいいようです。Saveの他に、
入力系だと
・delete
・edit
等があり、描画系だと
・view→レコード一覧画面へ移動
・new→レコード新規作成画面へ移動
等があるようです。Apexなしでも、割といろんなことができます。

apex:form

入力系(ボタン、入力フォーム)の使用にはこれが必要なようです。
これを先ほどのタグの外側に配置させて、囲むように使用することでボタンや入力フォームが有効になります。

<apex:form>
    <apex:inputfield action="{!Contact.Name}" />
    <apex:commandButton action="{!Save}" value="保存" />
</apex:form>

apex:pageの内側はこんな感じになります。標準コントローラーにContactを設定している場合の例です。
inputfieldは複数あっても、commandButtonの上にあろうが下にあろうがボタンを押したときに処理されます。
apex:formの中でのみ動作するようです。外で動かしても機能しないみたいです。

apex:pageBlock

囲まれたタグ全体を囲むような枠を作成できます。titleをつけると枠の中、上側にそこそこでかい文字でタイトルが出てきます。見た目をいい感じにしたいときに便利です。

<apex:pageBlock title="adventCalendar2025">
   <p>クリスマスだよ</p>
</apex:pageBlock>

枠の中がいい感じになります。

apex:pageBlockSection

pageBlockSectionです。囲んだタグをいい感じに整頓します。先ほどのは枠の中に収めるだけだったのに対してこちらは配置など整頓する部分になります。
例えばcolumnをつけるとinputfieldが大量にあった場合、一行につきn個ずつinputfieldを配置するといったことが可能なようです。

<apex:pageBlockSection title="1221" column="2">
//実際にはここにいろいろはいります
</apex:pageBlockSection>

titleをつけると、中の表示を隠せるタイプの黒幕が出現します。クリックして中身を出したり非表示にすることができるため便利です。