LWC勉強ースクラッチ組織の作成とリリース(002)

開発したコードは以下のサイトで実行できます。（オンライン環境みたい）

具体的なコードはこちら⇒

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

Thrilheadで作成したPlaygroundをログインして、Dev Hubも有効化になりました。

スクラッチ組織定義ファイルを作成したら、コマンドラインから直接、簡単にスクラッチ組織を作成し、開くことができます。

スクラッチ組織を作成する前に、次の操作を実行します。

Salesforce DX プロジェクトを設定する

Dev Hub 組織を認証する

スクラッチ組織定義ファイルを作成する

昨日も簡単に紹介いたしました。

①VSCodeでプロジェクトを作成する（bikeCard）

②Dev Hub 組織を認証する（Dev Hub有効化のPlayground環境）

①②はこちら⇒

LWC勉強ー初めて(001)

③LWCファイル作成する

ライフサイクルフック

Lightning Web コンポーネントでは、コンポーネントのライフサイクルで重要なイベントは発生したらコードを「フック」できるようにするメソッドが提供されています。こうしたイベントとして、コンポーネントに次の変化があった場合などが含まれます。

作成された
DOM に追加された
ブラウザで表示された
エラーが発生した
DOM から削除された

１、紹介したいのは、カスタムコンポーネントはPlaygroundに配置しておきます。

SFDX：Create Lightning Web Component

BikeCord

path

自動生成三つファイル

コードを入れて、Playground環境ログインして

SFDX：Authorize an Org

Playground環境にリリースする

SFDX: Deploy This Source to Org

リリース成功する

Playground環境に移動する

SFDX：Open Default Org

ログイン終わった後

Lightning App Builderを作成する、そのコンポーネントは配置する

Home画面に配置する

bikeCard.js-meta.xml


<?xml version="1.0" encoding="UTF-8" ?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>48.0</apiVersion>

<isExposed>true</isExposed>

<masterLabel>Product Card</masterLabel> //コンポーネントの名前

<targets>

<target>lightning__AppPage</target>

<target>lightning__RecordPage</target>

<target>lightning__HomePage</target>

<target>lightningCommunity__Page</target>

</targets>

<targetConfigs>

<targetConfig targets="lightning__RecordPage">

<objects>

<object>Product2</object>

</objects>

</targetConfig>

</targetConfigs>

</LightningComponentBundle>

説明：

①<masterLabel>Product Card</masterLabel> //コンポーネントの名前

<targetConfigs>
<targetConfig targets=”lightning__RecordPage”>
<objects>
<object>Product2</object>
</objects>
</targetConfig>
</targetConfigs>

<targetConfigs>Lightning App Builderの中に設定できる

targets=”lightning__RecordPage”：<target>lightning__RecordPage</target>の制限

必須: apiVersion は、コンポーネントを Salesforce API バージョンにバインドします。

isExposed (true または false) は、コンポーネントを他の名前空間から使用できるようにします。これを true に設定するのは、コンポーネントを管理パッケージか、別の組織の Lightning アプリケーションビルダーで使用できるようにする場合のみです。
省略可能: targets は、Lightning アプリケーションビルダーでコンポーネントを追加可能な Lightning ページの種別を指定します。

targetConfigs は、Lightning ページの種別ごとに固有の動作を指定します。これには、コンポーネントをサポートするオブジェクトなどがあります。

サポートされる構文すべてのリストは、このドキュメントを参照してください。

Configuration File Tags：

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_configuration_tags

Product Card

新規RecordPageの場合、Object：Product

Product Cardを表示される

Object：Accountとかの場合

Product Cardを表示されていない

新規AppPage

Product Cardを表示される

新規HomePage、上のHome画面に配置と同じ

２、紹介したいのは、カスタムコンポーネントはScrath Orgに配置しておきます。

SFDX: Create a Default Scrath Org

Authorize a Dev Hub

ログインして（先のPlayground環境）

path

Scrath Orgのalias MyFirstScrathOrg

スクラッチ組織の期間、つまりスクラッチ組織の有効期限がいつ切れるかを指定する (日数)

デフォルトは 7 日です。有効な値は 1 ～ 30 です。

作成できました、一番下にaliasも表示されること

alias⇒MyFirstScrathOrgをクリックする、MyFirstScrathOrg環境もユーザー名も表示

修正するコンポーネント（BikeCord）をScrath Orgにリリース

SFDX：Push Source to Default Scrath Org

（SFDX：Pull Source from Default Scrath Org）もできる

PUSH成功

このScrath Orgをログインして

SFDX：Open Default Org

新しいScrath Orgをログインできる

ユーザー名です、パスワードもリセットできる

簡単にパスワードの設定⇒

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

Playgroundと同じようにProduct Cardコンポーネントを画面に配置できる

これで完成です。

コマンド（CMD）も設定できます。

こちら⇒

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

スクラッチ組織を作成する：sfdx force:org:create -f project-scratch-def.json

スクラッチ組織定義値を指定する：sfdx force:org:create adminEmail=me@email.com edition=Developer \
username=admin_user@orgname.org

別名を持つスクラッチ組織を作成する：sfdx force:org:create -f project-scratch-def.json -a MyScratchOrg

スクラッチ組織の有効期限がいつ切れるかを指定する (日数)：sfdx force:org:create -f config/project-scratch-def.json -d 3

スクラッチ組織を開きます：sfdx force:org:open -u <username/alias>

productCardコード：

https://github.com/trailheadapps/ebikes-lwc/tree/master/force-app/main/default/lwc/productCard

Lightning Web コンポーネントの基本：

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

コードの詳細内容はまだ説明していないから、これから具体的な問題あり、一歩一歩で研究しましょう。

以上となります。

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