初めてSalesforce LWC の開発時にはまったこと

技術を担当しています。宮原と申します。

こちらにて、不定期になると思いますが、Salesforce LWCでの開発関係で見つけたこと、悩んだことなどを備忘録的に投稿していこうと思っています。よろしくお願いします。

　自己紹介を簡単にさせていただくと、18才から愛知県の自動車関連企業にてプログラム開発に携わり、役場職員、酒造メーカー、ネットワーク技術者を経由してSalesforceの開発を10年程度かかわってきた50代のプログラマーです。

　流石にこの年までプログラマーをしてくるとは思いませんでしたが、ここまで来たら生涯現役を目指して頑張っていこうと思っています。中には他の技術者から見ると、当然じゃない？というような基礎的な記事もあると思いますが、温かく見守っていただければと思います。

---

さて、初回という事もありまして、LWC開発にて色々大変だったり、トラブったりしたことを、投稿していこうと思います。すべてではありませんが、今までのApex＋Visualforceでは、苦労しなかったのに、こんなに苦労する事になるとはと思った内容です。

当然、LWCのパーツを利用しない構築ならば、発生しない場合もありますが、それではあまり意味がないこともあり、LWCの標準ライブラリー、パーツを利用した構築を前提とさせて頂きます。

1.起動時における子コンポーネントの初期化処理

親コンポーネントから、子コンポーネント開く際に、起動時の関数(connectedCallback()など)を利用して初期化実施しようとしても、うまくいきません。

例）親で選択された取引先のIDを利用して、子コンポーネントにて取引先一覧を取得

＜× 取得できない実装＞

親CmpからIDのみを渡し、取得処理を子Cmpの初期化処理にて取得処理

＜○取得できる処理＞

親Cmpにて取引先責任者のデータを取得し、引数に追加

※「connectedCallback()」の処理は、親コンポーネントと同時に処理されるため、親コンポーネントが、起動した時点で一緒に処理されます。その他の起動時処理を利用しても工夫等が必要です。素直に親から渡すようにした方が、表示時の描画処理も含め容易に構築可能です。

2.表形式における文字色および背景色の設定（DataTable利用時）

データを表形式にて表示する際に、DataTableを利用することが多いと思います。

通常の表形式と近い為、設計段階で以下のような要件リクエストが出てきました。

• 表題部の背景色や文字色を変更する

• 数値等の条件により、文字色、背景色を変更する

• 縦横に固定する行や列の設定

• 登録済みまたは、未登録のレコードで背景色を変更する

• 罫線の太さや色を変更する

• 「コンボボックス」「チェックボックス」の値により、レコード入力や変更処理を動的にする（結果的に実現できましたが、大変でした...）

Visualforceで作成していた当時では、テーブルを利用していたので当たり前にできた内容ではあり、DataTableでは実現するのに困難が多く、データ変更を可能にしようと思うと、突然難易度が跳ね上がります。

それらを経験した感想として、入力が必要なシーンにおいては、DataTableを利用せず、「Table」を利用した方が良いこともある為、設計仕様に表形式がある場合は、どちらを採用するのか、事前検討をよく行うことをお勧めします。

3.DataTableと子画面を利用した編集機能の実装

2ではDataTableの表示制御ですが、編集についてです。

ボタンなどで子画面（明細画面）を表示し、編集/入力ができるように構築したのですが、特に以下２点で大変苦労しました。

　①子画面（明細入力）で、連続して明細レコードを登録処理

結果的にこちらは実現できませんでした。理由は、項目4と同じ理由です。

　②子画面（明細入力）で、入力した結果がDataTableに反映されない

こちらは、レコード更新用の変数設定と、LWCの表示/非表示の動作が思っていた内容と異なりました。連続で明細を登録した際には、明細のデータ内容が前画面の内容を引き継いでいたり、登録されなかったりします。ブラウザのデバッグ機能を活用して、詳細を調査しながら構築する必要があります。

4.子画面におけるウィザード形式での登録処理

具体的には、以下手順の画面を作成しようとしていました。

　①親となるオブジェクトの編集を行い、完了処理をする

　②関連オブジェクトが複数ある場合、複数オブジェクトの入力を可能とする

　③関連するすべての入力が終わったら、最後に登録処理を実行する

前提として、①で登録ボタンを押した後は、モーダル（ダイアログ）画面にて処理を進めていくものとしていました。

②は、3つ～5つの複数オブジェクトを登録する仕様であったため、モーダルを分割して作成する方針としていましたが、モーダル間の表示/非表示を行うことができませんでした。

更に、Apexでの処理呼び出し時にLoading画面を表示することもできません。

これは、モーダル表示の上から、別のモーダル表示を重ねることができないためと推察しています（あくまでも個人の推察です）。

以上となります。今からLWCの構築を行う方は、一度公式マニュアルを読み込んでみてください。特に今回記載したような内容が含まれている場合は、きっと落とし穴が沢山あるはずです。皆様の構築において、少しでもそれら苦労が回避できればと思います。