LWCの開発でつまづいたこと vol.01
はじめに
はじめまして、CREFILでエンジニアをしている川村です。
最近Salesforceの案件を担当していく中で、ブランドイメージに沿った画面の開発や、標準では対応できない、より柔軟な画面の要望をお客様からいただくケースが増えてきました。
そこで、Salesforceの画面開発で使用するLightning Web Components（以下、LWC）のコーディングに挑戦した際に、つまづいた点などを共有させていただき、同じようにLWCに挑戦されるみなさまのググる時間が少しでも減ったら嬉しいなと思いこの記事を書きました。
なお、この記事はコーディング初挑戦の方でもLWCの開発を行うことが出来るように、極力わかりやすく、イメージしやすい言葉を使うように心がけています。
そのため、説明している内容が厳密に言うと正確ではない箇所もあるかと思いますがご容赦ください。
この記事の概要
・自分がコーディングしたLWCを、自分の組織にデプロイする。
<<補足>>
コーディング：プログラム（コード）を書くこと。
デプロイ：コードを動く状態にすること。ここではSalesforceの組織でLWCを使える状態にすること。
今後投稿予定の記事
・LWCでレコードを取得する。
・LWCでレコードの更新を行う。
・LWCでレコードの追加・削除を行う。
・ボタンやアイコンをLWCに表示する。
０．作業環境
OS ：Windows10
ブラウザ：Chrome（2022/01/06時点の最新バージョン）
１．deploy先のアカウントの作成
まず、Service CloudのDeveloper Editionのアカウントを作成します。
このアカウントのログイン先がdeploy先の環境となります。
なお、すでにdeploy先の環境が別にあるようでしたら、この手順はスキップして１－２まで進んでください。
１ー１．『http://salesforcedevelopersjapan.github.io/lightning-connect-tutorial/create-developer-edition.html』にアクセスします。
１－２．上記ステップ１のリンクをクリックし、移動した先の画面でアカウントを作成します。（無料です。）
<<補足>>
ユーザ名は、メール形式かつ、Salesforceのすべての環境でユニークである必要があります。
１－３．アカウント作成後、入力したメールアドレス宛てに、アカウントの確認メールが送られてくるので、メール本文中央の『アカウントを確認』ボタンをクリックして、移動した先の画面で、パスワードと秘密の質問とその回答を入力します。
１－４．Salesforceにログインできたらアカウントの作成は成功です！
２．開発環境の構築
LWCを開発するために必要なツール等のインストールと設定をしていきます。
<<インストールが必要なもの>>
・Java
・JDK
・Visual Studio Code（以下、VSCode）
・Salesforce CLI
２－１．『Java』『JDK』のインストールと設定
以下のDocumentationに手順がまとまっています。
●Documentation
２－２．VSCodeのインストール
『VSCode インストール Windows』などでググっていただくと、わかりやすいサイトがたくさん出てくると思うので割愛させていただきます。
２－３．Salesforce CLIのインストール
以下のTrailheadの『コマンドラインインターフェース (CLI) をインストールする』の手順を行います。
●Trailhead（Salesforce DX 環境の設定）
https://trailhead.salesforce.com/ja/content/learn/projects/quick-start-lightning-web-components/set-up-salesforce-dx?trail_id=build-lightning-web-components
２－４．VSCodeの設定
以下のTrailheadの手順を行います。
●Trailhead（Visual Studio Code の設定）
https://trailhead.salesforce.com/ja/content/learn/projects/quick-start-lightning-web-components/set-up-visual-studio-code?trail_id=build-lightning-web-components
３．プロジェクトの作成
LWCを開発するプロジェクト（≒LWCをコーディングするフォルダ）を作成します。
３－１．好きな場所（例ではCドライブ直下）にフォルダを作成します。
３ー２．コマンドパレットを開きます。
View ⇒ Command Palette の順にクリックします。
３－３．『SFDX: Create Project』をクリックします。
つづいて『標準』をクリックし、好きなプロジェクト名を入力し、３－１で作成したフォルダを選択し、プロジェクトを作成をクリックします。
以下のように表示されたらプロジェクトが作成されています。
４．LWCをコーディング
いよいよ、LWCをコーディングしていきます。
４－１．LWCの新規作成。
『force-app/main/default/lwc』の上で右クリックし、『SFDX: Create ～』をクリックします。
好きな名前ファイル名（≒LWC名）を入力しEnterを押し、フォルダはデフォルトで問題なければ何も入力せずにEnterを押します。
４－２．作成したLWCの確認。
以下のようにフォルダと３ファイル作成されているはずです。
（例では、LWCの名前をmyFirstWebComponentとしています。）
４－３．『myFirstWebComponent.html』の作成
ひとまず、ボタンが１つ配置されているLWCを作成してみます。
（例では、variantでボタンの色、icon-nameでアイコン、icon-positionでアイコンの表示位置を指定してみましたが、こちらは必須ではないので無くても大丈夫です！）
●テキスト
<template>
<Lightning-card>
<lightning-button label="はじめてのLWC" variant="brand" icon-name="action:edit" icon-position="right"></lightning-button>
</Lightning-card>
</template>４－４．『myFirstWebComponent.js』の作成
今回は、特にLWCに動きをつけないので、作成された状態のままそっとしておきます。
４－５．『myFirstWebComponent.js-meta.xml』の作成
ひとまず、ホーム画面でLWCを使用できるようにします。
4行目をtrueにし、<targets>を追記しています。
●テキスト（4～7行目）
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>５．組織を認証
deploy先の組織を選択します。
５－１．接続先の組織のエイリアス（≒組織の名前）を取得します。ログインしている環境の『.lightning.force.com～』の手前の文字列がエイリアスです。
５－２．VSCodeの左下の『デフォルトの組織が未設定』をクリックし、コマンドパレットに表示された『SFDX: 組織を認証』をクリックし、『本番環境』をクリックします。
その後、５－１で取得したエイリアスを入力しEnterを押します。
５－３．ターミナルにSalesforceのログインURLが表示されるのでクリックします。
５－４．ログインした後、Salesforce CLIからの要求を許可します。
上記５－２で『デフォルトの組織が未設定』と表示されていた箇所に、エイリアス名が表示されていたら組織の認証は成功です。
６．LWCをデプロイ
組織にLWCをdeployします。
これで環境に作成したLWCが表示できるようになります。
６－１．『myFirstWebComponent』のフォルダの上で右クリックし、『SFDX: Deploy Source to Org』をクリックします。
右下に、以下のようなポップアップが出れば成功です。
７．LWCの表示
あとは表示するだけです。
７－１．編集ページを表示する。手順４－５でホーム画面を選択したので、ホーム画面で編集ページをクリックします。
７－２．左のコンポーネントのカスタムに表示されている『myFirstWebComponent』をDrag＆Dropで好きな位置に配置します。
７－３．『保存』ボタンをクリックし、有効可と組織のデフォルトに設定を行います。
無事に表示されました！
おわりに
初めての投稿ということもあり、いたらぬ点も多かったかと思いますが、
少しでもみなさまのお役に立てるとうれしいです！
最後に、参考にLWC開発の際のおすすめTrailheadを共有して終わりたいと思います。
■おすすめTrailhead
https://trailhead.salesforce.com/ja/content/learn/trails/build-lightning-web-components