Visualforceでの開発時代が長かったのですが、重い腰を上げてLWCに移行を試みています。
LWCを開発するにあたり、Vue.jsでの開発をやっていたのですが、LWC開発にあたってはjs系のフレームワークを勉強しておくとスムーズにいくかもしれません。
SalesforceのLightning Web Componentについてはまだまだ情報が少ないために、開発になれるまで時間がかかるかもしれません。ここでは、そんなみなさんの羅針盤になるような情報をまとめていくつもりです。
LWCのざっくりとした理解
フロントエンドをjsで書き、バックエンドをApexで書く形になります。
Apexは@AuraEnabledアノテーションを付与することで、フロントエンド側からデータへのアクセスが可能になります。
ハマったところ
'foobaa' is not defined
LWCでは、恐らくその性質上、カスタムクラスを作って1レコードの中に、複数のオブジェクトやパラメータを含めてフロントエンドに返すようなことをよくやると思います。
Apexではエラーが出ないのに、いざWebブラウザで開くと
'foobaa' is not defined
というエラーが返ってくるということがあります。
これは、カスタムクラスに入れたカラムが@AuraEnabledになっていなかったり、
jsファイル内で@apiを定義していなくてhtmlファイル側からアクセス出来なかったりすることが多いです。
もう一つは、そもそも値がnullだった場合に参照していると同様のエラーが出ます。
こういう場合は、htmlファイル側で
<template if:true={d.timeline.eventID__c}>
</template>
こんなふうにして値の存在を確認してから出力するようにします。
Lightning iconを使う
https://www.lightningdesignsystem.com/icons/
Lightning Design Systemのサイトのコンポーネントには、頻繁に使われているのですが
例：https://www.lightningdesignsystem.com/components/activity-timeline/#site-main-content
<svg class="slds-button__icon slds-timeline__details-action-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
これはそのままでは使えません。
この３行をまとめて以下のように書きます。
<lightning-icon icon-name="standard:form" alternative-text="form" title="form"></lightning-icon>
割とシンプルですよね。
なんでLightning Design SystemのサイトはLWC対応のコードの提供をしてくれないんだろうか。いちいち調べるのが面倒すぎるのでなんとかしてほしい。
リンクをテンプレートにハードコーディングしてはいけない
Vue.jsなんかもそうなんですよね。js使って飛ばしましょうというやり方になります。
参考にしたのはこちらのQiitaでした。
Lightning Web ComponentでURLにParameterを追加する方法
https://qiita.com/10kaoru12/items/015b0294b5fcccf35024
パラメータの受け取り方、受け渡し方についてはこのままの実装で問題ありませんでした。
LWCからApexへの値渡し
Lightning Web ComponentsからApexクラスにJSONデータを受け渡す方法
https://note.com/koji_matae/n/n2344bde286bc
こちらを参照しました。
フロントエンドからはJSONを文字列に変換して送信。ApexではStringで受け取ったものをJSON.deserializeUntypedで解析して使います。
@AuraEnabledなApexのテストの書き方
↑に書いたとおり、JSONをStringで渡すので、正規の書き方で入ってくるようなJSON文字列を生成してStringに乗せて、クラスに食わせればOKという感じですね。
英語のリソースを探したほうが早い
例えば今回LWCでLightning Web ComponentのActivity Timelineの実装を行いました。
https://lightningdesignsystem.com/components/activity-timeline/#site-main-content
ここに書いてあるHTMLのサンプルコードはこのままでは使えません。そのため、LWC ActivityTimelineみたいなキーワードで検索してソースを探してみると、Githubがヒットします。
https://github.com/anandbn/timeline-lwc
膨大な量に見えるので最初は戸惑うかもしれませんが、色々なパターンでコードが提供されており勉強になります。
jsで詳細データの開閉する部分とかは見れば一発で分かる感じになっています。使ってみてください。
to be continued...
まだまだあると思うのでまた書きます。
続編：Lightning Web Component実装例1
https://qiita.com/geeorgey/items/ff2ab9503091366dfb7d