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

※以下、備忘メモです。

## やりたいこと
・Lightning Web Component の開発環境を整える。
・サンプルコード（Trailheadに掲載）をデプロイし、Web画面上で確認する。

## 動作環境

| OS       |      ブラウザ |
|:-----------------|:------------------|
| Windows 10             |           Chrome最新 |

## 実施手順
####① 事前準備
以下インストールを行う。
　**１．JDK**（※インストールしてない場合）
　　　⇒Java Development Kit の略。
　　　⇒javaを動かす開発キット。
　**２．VSCode**
　　　⇒Visual Stadio Code の略。
　　　⇒ソースコードエディタ。開発するときに立ち上げてソース書いたりここからデプロイしたりする。
　**３．CLI**
　　　⇒コマンドラインインターフェース。
　　　⇒黒い画面。コマンド叩いて操作するところ。
　**４．Salesforce Extension Package**
　　　⇒VSCodeよりインストールするパッケージ。
　　　⇒JDK入ってないとインストールされないアプリケーションもあるため要注意。

#### ② 操作手順
以下操作を行う。
　１．SFDCの開発環境を作る（※作成していない場合）
　２．VSCode上でコマンドパレット開く
　　　　⇒ Windows `Ctrl+Shift+P`、macOS `Cmd+Shift+P` 
　３．プロジェクトの作成 `SFDX: Create Project`
　４．組織の承認 `SFDX: Authorize an Org`
　５．Webコンポーネント作成 `SFDX: Create Lightning Web Component`
　６．リソース選択、デプロイ `SFDX: Deploy Source to Org`
　７．VSCode上でコマンドを叩き、組織（開発環境）を開く `SFDX: Open Default Org `
　８．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の環境変数が正しく指定されているか確認、されてなければ設定を実施。
・アプリを閉じ、再起動を実施。
・アンインストールして、再インストール実施。


## 参考にしたサイト
- Trailhead
https://trailhead.salesforce.com/ja/content/learn/projects/quick-start-lightning-web-components/set-up-salesforce-dx?trail_id=build-lightning-web-components


- テラスカイブログ
 https://base.terrasky.co.jp/articles/5f2tk



## 以下、参考として詳細手順掲載。（記載中。）
１．Salesforceの環境を作成
　　　⇒Trailheadアカウントが無い場合以下からDeveloper環境取得。
　　　　SFDCは本番環境と開発環境でログインURLなどが異なるが、Developerは本番環境に該当。
　　　　https://developer.salesforce.com/signup?d=70130000000td6N

２．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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450298/0cd32f8c-7dec-f048-8855-c6daf6ea92b9.png)

３．インストールするため、ひたすら「Next」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450298/e8c3b136-53bd-ce44-4cd0-c8bc5120fb04.png)

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

５．VisualStudioのサイトより、VSCodeをダウンロード
https://code.visualstudio.com/
※ページを開くと自動ダウンロードが実行される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450298/447c650c-3a90-47ef-fcda-ac32bde6fa88.png)

６．インストールするため、、ひたすら「次へ」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450298/4ee29548-3807-f8dc-394c-99f80e039b5d.png)

７．VisualStudioを開き、Trailheadに記載している以下手順（Salesforce Extension Packのインストール）を実施
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450298/0cc73176-b13e-782a-3979-d15549fb8465.png)
※このSalesforce Extension Packは、以下のように複数のアプリケーションが含まれている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450298/0ebfe202-8b8d-16a9-bda5-7b9095d1292d.png)


８．Salesforce DX プロジェクトを作成
VSCode上で、Windows の場合は Ctrl+Shift+Pを押し、「sfdx」を入力。
以下のように色々出てくるので、sfdx create projectをクリック⇒コンポーネントの名前を入力⇒フォルダ選択⇒生成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450298/12acccfb-c36f-f8a3-56c8-4bdf6bf87368.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450298/659c5a09-0a2f-c459-6569-6d415c4968c9.png)