こんにちは、技術本部 Sansan Engineering Unit Data Hubグループの小林です。
今回は、SalesforceのVisualforce開発に当たって、Lightningの見た目で開発をしたいときに便利なSalesforce Lightning Design System（以降、SLDS）コンポーネントを使う際にChatGPTを使うと便利だよ！というお話をします。
そもそもSLDSコンポーネントをVisualforceで使う機会が少なくなってきていると思いますが、エンタープライズ向けの開発でまだまだユーザがClassic UIを使っている…なんてことも少なくないので、渋々Visualforceで開発をしている方の一助になればと幸いです。
ちなみに最初に断っておくと、SansanのAppExchangeパッケージ「Sansan CI」では、一部Visualforceで開発したコンポーネントがありますが、LWCへの開発に徐々にシフトしています。
目次
VisualforceでSLDSコンポーネントを使うときに困ること
SLDSコンポーネントはとても便利ですが、Visualforceで使おうとすると困ることがあります。
それは、JavaScriptを自分で書かないといけないこと…！
サンプルのHTMLをコピペするだけで、Lightningの見た目にはなるのですが、CheckBoxやPickListの動作が機能しないので、自分でJavaScriptを書いてコンポーネントの動作を制御してあげないといけません。
これがとても面倒くさい…。
一応、SLDSコンポーネントのページに動作制御用のクラスの記載があるのですが、複雑なコンポーネントになってくると、情報が足りないことも多々あります。
Visualforceページの情報量が多いとそれだけで工数が膨らむ…なんてことも。
しかも、Visualforce + SLDSで開発する機会が少ないのか、検索エンジンを使っても情報が少ないことも…。
そんなときに役に立つのが、あのChatGPTです！
ChatGPTにJavaScriptを書いてもらう
私も最初は「こんなSalesforce関連のコアなこと聞いて、まともな回答返ってくるのかな…」なんて思いつつ、ChatGPTに聞いてみると…
返ってきた！！！
すごい、すごすぎる。
しかも、情報としては、以下を書くだけでドンピシャな答えが返ってきます。
- SLDSであること
- コンポーネントの種類
- Visualforceで使いたいこと
- JavaScriptのサンプルコードを書いてほしいこと
これで一からSLDSで使われているクラスを調べて、JavaScriptで制御して…という作業をしなくて済みます。
もちろん、サンプルコードのままだと動かないこともありますが、少し内容を修正するだけで動くことが多い印象でした。
サンプルコードを参考にしつつ、自分でパフォーマンスの観点などを検討すると、工数を削減しつつ、良いコードが書けると思います。
ChatGPTでSLDSコンポーネントを味方につけよう
コーディングを始め、仕事をする上で欠かせない存在になってきているChatGPTですが、SalesforceのSLDSについて聞いてもすぐに答えが返ってくるなんて最初は考えもしていませんでした。
一番最初にドンピシャで回答してくれるとわかったときは、ものすごく感動して、その後の開発でも細かいところでもどんどんChatGPTを活用するようになりました。
SLDSのVisualforceでの利用を始め、これからもChatGPTを使えるところはどんどん使いつつ、仕事を進めたいと思います。
ぜひ、皆さんもChatGPTを使ってSLDSコンポーネントをフル活用して、デザインも良い画面開発を進めてくださいね！
