Help us understand the problem. What is going on with this article?

LWC(Lightning Web Component)の環境設定/サンプルコードのデプロイ手順

More than 1 year has passed since last update.

※以下、備忘メモです。

やりたいこと

・Lightning Web Component の開発環境を整える。
・サンプルコード(Trailheadに掲載)をデプロイし、Web画面上で確認する。

動作環境

OS ブラウザ
Windows 10 Chrome最新

実施手順

① 事前準備

以下インストールを行う。
 1.JDK(※インストールしてない場合)
   ⇒Java Development Kit の略。
   ⇒javaを動かす開発キット。
 2.VSCode
   ⇒Visual Stadio Code の略。
   ⇒ソースコードエディタ。開発するときに立ち上げてソース書いたりここからデプロイしたりする。
 3.CLI
   ⇒コマンドラインインターフェース。
   ⇒黒い画面。コマンド叩いて操作するところ。
 4.Salesforce Extension Package
   ⇒VSCodeよりインストールするパッケージ。
   ⇒JDK入ってないとインストールされないアプリケーションもあるため要注意。

② 操作手順

以下操作を行う。
 1.SFDCの開発環境を作る(※作成していない場合)
 2.VSCode上でコマンドパレット開く
    ⇒ Windows Ctrl+Shift+P、macOS Cmd+Shift+P
 3.プロジェクトの作成 SFDX: Create Project
 4.組織の承認 SFDX: Authorize an Org
 5.Webコンポーネント作成 SFDX: Create Lightning Web Component
 6.リソース選択、デプロイ SFDX: Deploy Source to Org
 7.VSCode上でコマンドを叩き、組織(開発環境)を開く SFDX: Open Default Org
 8.SFDCのWeb画面よりドラッグアンドドロップでコンポーネントの配置

手順をすすめる中で起きたエラー(Error: Unrecognized flag)

VSCodeからプロジェクト作成 SFDX: Create Project の際に発生。

エラー内容抜粋

※VSCodeコンソール上に表示されたエラー
Error: Unrecognized flag: {"name":"projectname","char":"n","required":true,"description":"name of the generated project","longDescription":"The name for the new project. Any valid folder name is accepted.","type":"string","values":[]}

対処法

・sfdx updateコマンドを叩いてCLIを最新化。
・そもそもjdkがインストールされているか確認し、インストールされてなければインストールを実施。
 (jdkがインストールされてないと、Salesforce Extension Packの一部がインストールできず、installingの状態で固まってしまう。)
・jdkの環境変数が正しく指定されているか確認、されてなければ設定を実施。
・アプリを閉じ、再起動を実施。
・アンインストールして、再インストール実施。

参考にしたサイト

以下、参考として詳細手順掲載。(記載中。)

1.Salesforceの環境を作成
   ⇒Trailheadアカウントが無い場合以下からDeveloper環境取得。
    SFDCは本番環境と開発環境でログインURLなどが異なるが、Developerは本番環境に該当。
    https://developer.salesforce.com/signup?d=70130000000td6N

2.CLIをダウンロード
   ⇒Trailehadより以下のリンクを押下し画面を開くと自動的にダウンロードが開始。
https://trailhead.salesforce.com/ja/content/learn/projects/quick-start-lightning-web-components/set-up-salesforce-dx?trail_id=build-lightning-web-components
image.png

3.インストールするため、ひたすら「Next」をクリック
image.png

4.インストールできたか確認
※「sfdx」って検索すると、コマンドラインインターフェースが出てくるのでクリック
※sfdCではなく、sfdx
image.png!
(https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450298/9daf41b4-5f06-5a04-df89-e9e4b577113f.png)

5.VisualStudioのサイトより、VSCodeをダウンロード
https://code.visualstudio.com/
※ページを開くと自動ダウンロードが実行される。
image.png

6.インストールするため、、ひたすら「次へ」をクリック
image.png

7.VisualStudioを開き、Trailheadに記載している以下手順(Salesforce Extension Packのインストール)を実施
image.png
※このSalesforce Extension Packは、以下のように複数のアプリケーションが含まれている
image.png

8.Salesforce DX プロジェクトを作成
VSCode上で、Windows の場合は Ctrl+Shift+Pを押し、「sfdx」を入力。
以下のように色々出てくるので、sfdx create projectをクリック⇒コンポーネントの名前を入力⇒フォルダ選択⇒生成
image.png

以降、Trailheadの手順参照
https://trailhead.salesforce.com/ja/content/learn/projects/quick-start-lightning-web-components/create-a-hello-world-lightning-web-component

SFDC画面上に配置したLightningWebComponent
image.png

nori83
見る専門です。SFDCの記事を検索しています。 <資格> 上級PlatformDeveloper1次、システムアーキテクト(Identity and Access Management, Integration Artchなど)、アプリケーションアーキ(PFデベ、Data Architecture、Sharing and Visibility デザイナー)など10個以上資格保持
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away