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 コンポーネントの基本
始めましょう!
①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
SFDX
」と入力します。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
1、taskkill /F /PID 12345
2、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
⑨Lightning Web コンポーネントを作成する(VSCode)
SFDX: Create Lightning Web Component
新しいコンポーネントの名前として「
helloWorld
」と入力します。
Enter キーを押して、デフォルトの force-app/main/default/lwc を受け入れます。
helloworldを作成した
Codeは以下の通りです。
helloWorld.html
説明:
lightning–card:Cards are used to apply a container around a related grouping of information.
https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example
icon–name:Custom icons are available for the identity of user created objects.
Lightning Design System
https://www.lightningdesignsystem.com/icons/
lightning–input:Represents interactive controls that accept user input depending on the type attribute.
{greeting}:変数
value={greeting} onchange={changeHandler}:valueが変わるとき、changeHandlerメソッドを呼び出
helloWorld.js
説明:
greeting = ‘World’; デフォルト値
changeHandler(event) { this.greeting = event.target.value; }入力する値はgreeting に格納する
helloWorld.js-meta.xml
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
setup⇒
Trailhead Playground にリリースする
SFDX: Deploy Source to Org
helloworldコンポーネントはHome画面に追加
Home画面のsetup⇒Edit Page
有効化して保存する
123を入力する
これで完成です。
リソース:
クイックスタート: Lightning Web コンポーネント:
https://trailhead.salesforce.com/ja/content/learn/projects/quick-start-lightning-web-components
Lightning Web コンポーネントの基本:
https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-basics
Lightning Web Components Dev Guide:
https://developer.salesforce.com/docs/component-library/documentation/en/lwc
LIGHTNING WEB COMPONENTS PLAYGROUND:
https://developer.salesforce.com/docs/component-library/tools/playground
Lightning Web Components:https://lwc.dev/
Lightning Design System:
https://www.lightningdesignsystem.com
https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm
https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_dev.meta/sfdx_dev/sfdx_dev_intro.htm
Salesforce CLI Command Reference:
Salesforce CLIで使用可能なコマンド:
以上となります。
何か問題がございましたら、コメントを頂れば嬉しいです。
Latest posts by zchao (see all)
- Auraでアクションボタン作成して画面のチェックボックス項目一括処理 - 2021年4月12日
- デフォルト項目値を含むレコード作成実例説明(defaultFieldValues) - 2021年1月9日
- Salesforce のノーコード・ローコード開発 - 2020年12月31日
转载请注明:zchao博客之家 » LWC勉強ー初めて(001)