第23回勉強会ではLightning Web Component（LWC）について発表がありました。

 

Lightning Web Componentとは？

 

従来から提供されていたLightningコンポーネントはAuraフレームと呼ばれるプログラミングモデルをベースに作られていました。

 

このAuraフレームは8年ほど前に開発されたもので、この時期ではまだまだJavaScriptによるコンポーネントベースおよびエンタープライズ開発を行うための規格のようなものが確立されていませんでした。

そういった時代の背景からAuraフレームは独自のコンポーネントモデルとモジュール化の仕組みを持っていました。当時としては先進的でしたが、規格が確立されてからは他のOSSを利用する際の労力が大きく、AuraベースでLightningコンポーネントを運用するのは開発面での非効率となってきました。

 

この開発面で起こる非効率性を解決するために、多数のWeb標準をベースにした技術と再利用可能な独自のHTMLタグを作成できるWeb ComponentプラットフォームであるLWCが開発されました。

 

メリットとしてはよく挙げられるのは以下の2点です。

• コードの記述量が減り、コードの判読、管理、単体テストが容易になる
• Lightningコンポーネントフレームワークで最新のJavaScriptやWeb標準が利用できるようになるB

 

LWCは大きくHTMLファイル、JSファイル、XMLファイルの3つのファイル構成から成っています。

HTMLファイル：画面構成を記述。ファイルは必ず<template>タグで開始し、作成直後は<template>タグのみ記載された状態。

JSファイル：ロジックを記述。クラスやメソッドにデコレータを追加することで、組織のデータを簡単に読み込んだり、コンポーネント間の連携が簡単に実現できる。

XMLファイル：各種設定を記述。作成したコンポーネントをどこで使用するか記載する。

 

LWCの作成手順

ゼロベースでLWCを作成する際、LWC自体が開発者コンソール未対応なので、VSCodeの環境構築する必要があります。

 

以下の3ステップでLWC作成の準備を行います。

 

• VSCodeをインストール
• コマンドラインインターフェース(CLI)をインストール
• VSCodeを起動して”Salesforce Extension Pack”をインストール

 

 

準備が終わればあとは作成するだけ。

こちらもCtrl + Shift + Pでコマンドパレットを開いたら3ステップ行います。

 

• Create Project(プロジェクトを作成)を選択し、プロジェクト名を入力
• Authorize an Org（組織を承認）を選択し、ブラウザで認証
• Create Lightning Web Component（Lightning Web コンポーネントを作成）

 

 

LWCで作ったもの

今回は3つ作成しました。

１つ目がその場で取引先の項目を編集できるもの。

 

 

2つ目が取引先を入力することでそのページに遷移するもの。

 

 

3つ目は現在登録している取引先責任者を検索できるもの。

取引先の責任者変更メールが来た時、わざわざ上記のような内容を対応するSalesforceページに入力するのは個人的に煩わしく感じることが多々あります。

地味ではありますが、LWCを使うことで一手間をスキップ出来るのは長期的に見ていいですね。