2021年05月30日
第23回勉強会ではLightning Web Component(LWC)について発表がありました。
従来から提供されていたLightningコンポーネントはAuraフレームと呼ばれるプログラミングモデルをベースに作られていました。
このAuraフレームは8年ほど前に開発されたもので、この時期ではまだまだJavaScriptによるコンポーネントベースおよびエンタープライズ開発を行うための規格のようなものが確立されていませんでした。
そういった時代の背景からAuraフレームは独自のコンポーネントモデルとモジュール化の仕組みを持っていました。当時としては先進的でしたが、規格が確立されてからは他のOSSを利用する際の労力が大きく、AuraベースでLightningコンポーネントを運用するのは開発面での非効率となってきました。
この開発面で起こる非効率性を解決するために、多数のWeb標準をベースにした技術と再利用可能な独自のHTMLタグを作成できるWeb ComponentプラットフォームであるLWCが開発されました。
メリットとしてはよく挙げられるのは以下の2点です。
LWCは大きくHTMLファイル、JSファイル、XMLファイルの3つのファイル構成から成っています。
HTMLファイル:画面構成を記述。ファイルは必ず<template>タグで開始し、作成直後は<template>タグのみ記載された状態。
JSファイル:ロジックを記述。クラスやメソッドにデコレータを追加することで、組織のデータを簡単に読み込んだり、コンポーネント間の連携が簡単に実現できる。
XMLファイル:各種設定を記述。作成したコンポーネントをどこで使用するか記載する。
ゼロベースでLWCを作成する際、LWC自体が開発者コンソール未対応なので、VSCodeの環境構築する必要があります。
以下の3ステップでLWC作成の準備を行います。
準備が終わればあとは作成するだけ。
こちらもCtrl + Shift + Pでコマンドパレットを開いたら3ステップ行います。
今回は3つ作成しました。
1つ目がその場で取引先の項目を編集できるもの。
2つ目が取引先を入力することでそのページに遷移するもの。
3つ目は現在登録している取引先責任者を検索できるもの。
取引先の責任者変更メールが来た時、わざわざ上記のような内容を対応するSalesforceページに入力するのは個人的に煩わしく感じることが多々あります。
地味ではありますが、LWCを使うことで一手間をスキップ出来るのは長期的に見ていいですね。