進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

Lightning Web コンポーネントファイルのプッシュとリリース

学習の目的

この単元を完了すると、次のことができるようになります。
  • サンプルをスクラッチ組織にプッシュする。
  • 組織で表示する Lightning Web コンポーネントファイルを設定する。
  • ファイルを組織にリリースする。
  • 組織環境でコンポーネントの動作を確認する。

組織にステップアップ

Lightning Web Components Playground とはしばらくお別れですが、非常に便利に利用できる場所であることがわかるでしょう。この単元では、スクラッチ組織、Salesforce 拡張機能を含む VS Code、および GitHub を使用して Lightning Web コンポーネントを開発します。

Salesforce が提供する開発ツールによってプロセスは簡略化され、GitHub にあるデモプロジェクトを参考にして開発プロセスを迅速化できます。こうしたデモで、Lightning Web コンポーネントプロジェクトの全体を把握することができます。

必要なもの

最初の単元で説明したように、続行するには Salesforce DX に習熟している必要があります。コマンドライン (デスクトップクライアント、VS Code のコマンドパレット、またはその他の使い慣れたツールを使用することも可能) と Salesforce CLI から git を使用します。特に、この単元を完了するのには次のものが必要です。

  • GitHub アカウント
  • IDE (Visual Studio Code など)
  • Salesforce CLI
  • Dev Hub 対応組織
  • Dev Hub 対応組織のユーザにリリースされた [私のドメイン]

    (Trailhead 内に作成された Playground 組織には [私のドメイン] がリリースされていますが、Trailhead アカウントに関連付けた Developer Edition 組織の場合は、手動で [私のドメイン] を有効にしてリリースする必要があります)。

GitHub アカウントが用意できたら、「Quick Start: Lightning Web Components」(クイックスタート: Lightning Web コンポーネント) プロジェクトを完了し、組織の [設定] メニューから Dev Hub を有効にして、残りの要件を満たすことができます。

E-Bikes デモのコピーとプッシュ

E-Bikes Lightning Web コンポーネントサンプルアプリケーションと Salesforce CLI を使用してファイルをスクラッチ組織にプッシュします。

  1. ファイルシステムで、ローカルプロジェクトフォルダ (trail-comp など) を作成します。
  2. プロジェクトディレクトリで、Salesforce DX を使用する E-Bikes のインストール手順に従います。
メモ

メモ

クイックスタートで Trailhead に関連付けた DE 組織のスクラッチ組織を使用してインストールします。組織では、すでに [私のドメイン] が有効で、すべてのユーザにリリースされている必要があります。[設定] で、組織で Dev Hub が有効になっていることも確認します。

スクラッチ組織で、アプリケーションランチャー。 をクリックしてアプリケーションランチャーを開き、E-Bikes アプリケーションを選択します(スクラッチ組織が Salesforce Classic で開いた場合は、Lightning Experience に切り替えます)。

E-Bikes アプリケーションタイル。

[Product Explorer (製品エクスプローラ)] タブをクリックして、Lightning Web コンポーネントによってリストが絞り込まれ、詳細がタイルに表示されるのを確認します (ページの更新が必要になる場合があります)。

E-Bikes アプリケーションコンポーネントパーツ。
  1. productFilter: productTileList の値を設定します。
  2. productTileList: productFilter の値に基づいてタイルを配置します。
  3. productTile: 購入可能な品目の概要情報が表示され、クリック可能です。
  4. productCard: タイルがクリックされると品目の詳細を表示します (作成した bikeCard に類似)。

コンポーネント設定ファイル

まだ説明していないファイルは、コンポーネント設定ファイルです。このファイルは、Lightning アプリケーションビルダーでの使用を目的とするコンポーネント用の設計設定を含む、Salesforce のメタデータを提供します。

設定ファイルを含む、コンポーネントを構成するファイル。

Playground で試していたので、設定ファイルについてはまだ取り上げていませんでした。これから組織内のコンテンツを使用し始めるので、設定ファイルを含める必要があります。このファイルの拡張子は .js-meta.xml です。

ebikes リポジトリのすべてのコンポーネントにはこの設定ファイルがあります。以下は、ebikes リポジトリからの例です。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>false</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Product__c</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
必須
apiVersion は、コンポーネントを Salesforce API バージョンにバインドします。

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

省略可能
targets は、Lightning アプリケーションビルダーでコンポーネントを追加可能な Lightning ページの種別を指定します。

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

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

組織にコンポーネントを表示

Lightning Web コンポーネントを UI に表示するには 2 つのオプションがあります。

  1. さまざまな flexipage 型 (home、record home など) をサポートするようにコンポーネントを設定してから、Lightning アプリケーションビルダーを使用して flexipage に追加します。これが最もシンプルなアプローチで、この単元でも使用します。
  2. Lightning Web コンポーネントが含まれる Aura コンポーネントを参照するタブを作成することもできます。Lightning Web コンポーネントレシピリポジトリでは、このアプローチを使用しています。何が必要かは、リポジトリで確認できます。

組織で使用するための Lightning Web コンポーネントファイルの設定

ここでは、前の単元の例を ebikes プロジェクトに追加します。bikeCard コンポーネントという名前を付けて、スクラッチ組織にプッシュします。

メモ

メモ

独自のスタイルを設定していないため、CSS ファイルは必要ありません。

コンポーネントを組織にプッシュするには、次のファイルが必要です。

bikeCard.html

<template>
    <div>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <lightning-badge label={material}></lightning-badge>
        <lightning-badge label={category}></lightning-badge>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

bikeCard.js

import { LightningElement } from 'lwc';
export default class BikeCard extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
 }
メモ

メモ

name のような値は、このコンテキストでは 1 回しか使用しないので、@track デコレータなしで機能します。一度設定すれば、値の変更に応じてコンポーネントを再表示する必要はありません。通常、コンポーネントで動的な値が読み込まれた場合に @track が必要です。

bikeCard.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <!-- The apiVersion may need to be increased for the current release -->
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
  1. これらすべてを ebikes-lwc\force-app\main\default\lwc に保存すると、次のように (VS Code から) 表示されます。 bikeCard コンポーネントファイル構造。

    Lightning Web コンポーネントは Web 標準に準拠しています。HTML 標準では、カスタム要素名にハイフンを含めることを推奨しています。ただし、Salesforce Platform では、コンポーネントのフォルダ名やファイル名にハイフンの使用は許可されません。そのため、ここではキャメルケースの命名規則を使用します。

  2. ebikes-lwc ディレクトリから、新しいファイルを E-Bikes デモアプリケーション用に作成した同じスクラッチ組織にプッシュします。
    sfdx force:source:push
  3. スクラッチ組織を開きます。
    sfdx force:org:open

コンポーネントの新しいページの作成

コンポーネント設定ファイルを設定して Lightning アプリケーションビルダーでのコンポーネントの使用を有効にしたので、UI を使用してアプリケーションを作成し、コンポーネントをアプリケーションに追加できます。

  1. [設定] で、[クイック検索] ボックスに「Lightning アプリケーションビルダー」と入力し、[Lightning アプリケーションビルダー] を選択します。
  2. [新規] をクリックします。
  3. [アプリケーションページ] を選択し、[次へ] をクリックします。
  4. ページに表示ラベル「Bike Card」(自転車カード) を設定し、[次へ] をクリックします。
  5. [1 つの範囲] を選択し、[完了] をクリックします。
  6. Lightning アプリケーションビルダーで、左側の Lightning コンポーネントリストを bikeCard コンポーネントが表示されるまでスクロールダウンします。 Lightning アプリケーションビルダーの [カスタム] コンポーネントメニューの bikeCard コンポーネントオプション。

これで、ページにドラッグできます。ページを保存し、有効化すると、bikeCard コンポーネントが割り当てられたページに表示されます。

  1. bikeCard コンポーネントを、自転車が表示されるまでページレイアウトの上部へドラッグします。
  2. [保存] をクリックします。
  3. [有効化] をクリックします。
  4. [すべてのユーザを対象に有効化] は選択されたままにします。必要に応じて、アプリケーションの名前やアイコンを変更します。
  5. [保存] をクリックします。

    ページをナビゲーションメニューに追加するか尋ねられますが、その必要はありません。この環境では引き続きページにアクセスできます。

  6. [完了] をクリックします。
  7. 右上の [戻る] ボタンをクリックして、Lightning アプリケーションビルダーを終了します。
  8. アプリケーションランチャー。 をクリックしてアプリケーションランチャーを起動し、「Bike Card」ページを検索します。
  9. ページを開き、コンポーネントが UI で動作することを確認します。 Lightning Experience での Bike Card アプリケーション。

ぴかぴかの新しい自転車が表示されました。コンポーネントを組織にプッシュし、ページに表示して、UI で確認できました。

ファイルのリリース

すばらしい! コンポーネントがスクラッチ組織で動作しています。スクラッチ組織は、試行と開発に便利です。この単元の課題を完了するには、コンポーネントファイルを Dev Hub 対応組織にリリースする必要があります。たとえば、次のような方法で E-Bikes デモファイルを組織にリリースできます。

  1. Dev Hub 組織で認証します (スクラッチ組織ではありません)。最初にスクラッチ組織からのログアウトが必要になる場合があります。
    sfdx force:auth:web:login -d -a myhuborg
  2. Dev Hub 組織にログインする (スクラッチ組織ではありません) ユーザ名で、プロジェクトファイルを ebikes-lwc ディレクトリからリリースします。
    sfdx force:source:deploy -p force-app -u <username>
  3. 組織に権限を設定します。
    sfdx force:user:permset:assign -n ebikes -u <username>
ヒント

ヒント

スクラッチ組織と本番組織で作業をしている場合、スクラッチ組織からファイルを取得してスクラッチ組織で加えた変更を収集することがあります。その後で、それらのファイルを本番組織にリリースできます。ここでは、スクラッチ組織での変更は必要ありません。ソースは完全にローカルです。ローカルにあるものだけを Dev Hub 組織にリリースします。推奨されるリリースプロセスについての詳細は、「Org Development Model」(組織開発モデル) モジュールを参照してください。この単元の最後にある「リリース」セクションにリンクがあります。

次の単元では、イベント処理を含むインタラクティブなコンポーネントを作成し、組織にリリースしてテストします。