tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Visuaforce開発の種類について

Visualforce開発の種類についてです。Visualforceはapexタグという独自タグを使わないと行けないイメージが定着していますが、いろんな方法で開発が可能になっていますので紹介します。(下記の名前部分は説明用に勝手につけたやつ)

Visualforce Classic

apexタグをつかった開発方法です。pageBlockやpageBlockTableでClassicデザインのページ開発が可能になっています。

コードイメージ

f:id:tyoshikawa1106:20190810162314p:plain

画面イメージ①

f:id:tyoshikawa1106:20190810162030p:plain

画面イメージ②

f:id:tyoshikawa1106:20190810162048p:plain

Visualforce Clasic (Lightningスタイル版)

apexタグをつかった開発方法ですが、『lightningStylesheets="true"』を宣言することでLighitning Experienceに近い見た目に変更できます。

コードイメージ

f:id:tyoshikawa1106:20190810162555p:plain

画面イメージ①

f:id:tyoshikawa1106:20190810162432p:plain

画面イメージ②

f:id:tyoshikawa1106:20190810162502p:plain

Visualforce Lightning (Javascript Remoting)

apexタグを使わない開発方法。HTMLタグとJavascriptを中心に進められます。CSSはLightning Design Systemを利用することでLightning Experienceと同じ見た目に揃えることができます。

コードイメージ

f:id:tyoshikawa1106:20190810163110p:plain

画面イメージ①

f:id:tyoshikawa1106:20190810162754p:plain

画面イメージ②

f:id:tyoshikawa1106:20190810162951p:plain

apexタグ or Javascript Remoting

apexタグを使わない方法の場合はフロント側のほとんどの機能をJavascriptで実装する必要があります。実装難易度は上がりますが、apexタグ使用時の制限の影響を受けずに開発が可能です。

例: ビューステートエラー

apexタグの場合は画面に表示する情報量が多いとビューステートエラーが発生します。例えば取引先検索ページの場合、8000件の検索結果を表示すると発生しました。
f:id:tyoshikawa1106:20190810163617p:plain:w300

f:id:tyoshikawa1106:20190810163650p:plain


Javascript Remotingの場合は上記ビューステートエラーが発生した件数でも問題なく表示できます。
f:id:tyoshikawa1106:20190810163829p:plain

DEMO

サンプルコード

github.com