特殊时期,大家一定要保重身体。增强自身免疫力,一切都会过去,一起加油!!!

LWC勉強ー初めて(001)

LWC zchao 434℃ 0评论

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 formatterCode 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

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

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

説明:

lightningcard:Cards are used to apply a container around a related grouping of information.

https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example

iconname:Custom icons are available for the identity of user created objects.

Lightning Design System

https://www.lightningdesignsystem.com/icons/

 

lightninginput: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>

Lightning App Builderが三つあります。

setup⇒Lightning App Builder

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

Salesforce DX 設定ガイド:

https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm

Salesforce DX 開発者ガイド:

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

Salesforce CLI Command Reference:

https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference.htm

Salesforce CLIで使用可能なコマンド:

Salesforce CLIを整理してみた

 

以上となります。

何か問題がございましたら、コメントを頂れば嬉しいです。

 

转载请注明:zchao博客之家 » LWC勉強ー初めて(001)

喜欢 (5)or分享 (0)

您必须 登录 才能发表评论!