LWC勉強ー初めて(001)

LWC：Lightning Web Components

主に知識：HTML、JavaScript、CSS など標準テクノロジに関する。

(1) JavaScript ファイルを作成し、(2) HTML ファイルを作成し、必要に応じて (3) CSS ファイルを作成します。

HTML は、コンポーネントの構造を提供します。
JavaScript は、コアビジネスロジックとイベント処理を定義します。
CSS は、コンポーネントのデザインとアニメーションを提供します。

Lightning Web コンポーネントを効率的に開発するには、次のツール

Dev Hub とスクラッチ組織

Salesforce コマンドラインインターフェース (CLI)

Lightning コンポーネントライブラリ

GitHub

Visual Studio Code Salesforce 拡張機能パック

こちら⇒Lightning Web コンポーネントの基本

https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-basics/discover-lightning-web-components

始めましょう！

①Visual Studio CodeインストールとSalesforce DX 環境の設定

VSCodeでSFDC環境構築、複数の方法でメタデータを取得ーVSCode(利用できるPackage.xmlをアップロード)

②Trailhead Playground を設定する

Trailhead Playground のユーザ名とパスワードの取得と変更ーsetPassword(‘userid’,’password’)

③Salesforce CLI

OS	インストーラへのリンク
macOS	https://sfdc.co/sfdx_cli_osx ファイルを右クリックして [Open (開く)] を選択します。メッセージが表示されたら、もう一度 [Open (開く)] をクリックします。
Windows 32-bit	https://sfdc.co/sfdx_cli_win
Windows 64-bit	https://sfdc.co/sfdx_cli_win64
Debian/Ubuntu 64	https://sfdc.co/sfdx_cli_linux マニフェストにあるいずれかの URL からアーカイブをダウンロードして抽出し、./install スクリプトを実行します。
Debian/Ubuntu x86	https://sfdc.co/sfdx_cli_linux_x86 マニフェストにあるいずれかの URL からアーカイブをダウンロードして抽出し、./install スクリプトを実行します。

CLIのインストール終わった後

コマンドにsfdxを入力する

Windowの場合：

win+r⇒cmd⇒sfdx

もし最新バージョンのCLIを更新する場合、sfdx updateでいい。

④Dev Hub

Trailhead Playground利用環境をログインして、setupに

⑤Visual Studio Code の設定

拡張機能アイコン

Salesforce Extension Pack：Extensions for developing on the Salesforce Platform

vscode-icons：Icons for Visual Studio Code

Salesforce Package.xml Generator Extension for VS Code：Extension for generating Package.xml on the Salesforce Platform

ESLint：Integrates ESLint JavaScript into VS Code.

Prettier – Code formatter：Code formatter using prettier

⑥Salesforce DX プロジェクトを作成する

Visual Studio Code で、Ctrl+Shift+P (Windows) または Cmd+Shift+P (macOS) を押して、コマンドパレットを開きます。

「SFDX」と入力します。

SFDX: Create Project

SFDX: Create Project With Manifest（xmlを含め）

Stabdard

Project Nameを入力する（HelloWorldLightningWebComponent）、Workspaceを選択する

コマンドに以上と同じように動作もできます。

sfdx 操作

リンクしたORG

sfdx force:org:list

ヘルプ

sfdx force –help（ほかの同じように –help）

cd path

先、作ったプロジェクトは F：\Workspaceにある

プロジェクトを作成する

実際のPCのWorkspaceへ

それぞれの中身に行きましょう

HelloWorldLightningWebComponent

myLWC

⑦Trailhead Playground を承認する（先にVSCode）

SFDX: Authorize an Org

環境のURL：今回はlogin.salesforce.comですね。

Project DefaultとProductionもできます。

Project Default

ORG alias入力とか、Enterでもいいし

SFDCのログイン画面へ（先程、作成したTrailhead Playground）

ログインした成功の場合、VSCodeのOUTPUTへ

ログインできない、http://localhost:1717/OauthRedirect?みたいなエラーが発生した場合、

win+r⇒cmd⇒

netstat -ano|findstr “1717”

例えば、pid＝12345

１、taskkill /F /PID 12345

２、ctrl + alt + delete⇒task manager⇒node.js

⑧Trailhead Playground を承認する（コマンド）

ログイン

sfdx force :auth :web:login

ブラウザの画面を開いて、ユーザー名とパスワードを入力する

リンクしたORGからログアウト

sfdx force:auth:logout –targetusername vscodeOrg

こちら⇒

https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_dev.meta/sfdx_dev/sfdx_dev_auth_logout.htm

https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_dev.meta/sfdx_dev/sfdx_dev_create_clone_sandboxes.htm?search_text=sfdx%20force:org:delete

⑨Lightning Web コンポーネントを作成する（VSCode）

SFDX: Create Lightning Web Component

新しいコンポーネントの名前として「helloWorld」と入力します。

Enter キーを押して、デフォルトの force-app/main/default/lwc を受け入れます。

helloworldを作成した

Codeは以下の通りです。

https://trailhead.salesforce.com/ja/content/learn/projects/quick-start-lightning-web-components/create-a-hello-world-lightning-web-component

helloWorld.html