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

Lightning Web コンポーネントの概要

学習の目的

この単元を完了すると、次のことができるようになります。

  • Lightning Web コンポーネントプログラミングモデルについて説明する。
  • Lightning Web コンポーネントを使用することの利点を挙げる。
  • Lightning Web コンポーネントの開発を始めるために必要なものを見つける。

Web 標準を使用したプログラミングへの道

Salesforce に関する知識と、HTML、JavaScript、CSS など標準テクノロジに関する経験を結集して、次世代の Salesforce アプリケーションを作成するときが来ました。よく使用されるこれらの標準を使用して、Salesforce 組織向けのコンポーネントを作成すると共に、既存の Aura コンポーネントとの互換性を維持します。

Lightning Web コンポーネントは、開発者とユーザエクスペリエンスの両方に重点を置いています。既存のテクノロジを利用できるため、Salesforce 以外で培ったスキルを活かして Lightning Web コンポーネントを作成できます。これらすべては、Aura コンポーネントですでに実現したものを手放さずに使用できます。

メモ

メモ

前の段落で大文字と小文字の表記に違いがあることに気付かれましたか? もしそうなら、鋭い眼力をお持ちです。「Lightning Web コンポーネント」というプログラミングモデルを表す場合と、「Lightning Web コンポーネント」というコンポーネント自体を表す場合があります。

また、これまで使用していた Lightning コンポーネントプログラミングモデルは Aura コンポーネントモデルという名前になりした。コンポーネント自体は Aura コンポーネントと呼ばれます。

先へ進む前に

Salesforce DX プロジェクトと Salesforce CLI に関する基本的な知識が必要です。また、Trailhead アカウントで適切に設定された組織と、Salesforce 拡張機能パックを含む VS Code を使用する必要があります。このすべてについて学習するには、「Quick Start: Lightning Web Components」(クイックスタート: Lightning Web コンポーネント) を修了してください。

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

Lightning Web コンポーネントを使用する理由

最新のブラウザは Web 標準に基づいており、標準が進化することでブラウザがユーザに提供できる機能も絶えず改良されています。そして、ユーザがこれらのイノベーションを利用できるようにしています。

Lightning Web コンポーネントは、コア Web コンポーネント標準を使用し、Salesforce でサポート対象のブラウザで適切に動作するために必要な機能のみを提供します。Lightning Web コンポーネントは、ブラウザでネイティブに実行されるコード上に構築されるため、軽量で卓越したパフォーマンスを発揮します。記述するコードの大部分は、標準の JavaScript および HTML です。

次のことが容易になります。

  • Web 上の一般的な場所でソリューションを見つける。
  • 必要なスキルと経験を持つ開発者を見つける。
  • 他の開発者の経験を活用する (他のプラットフォームの経験も含む)。
  • 開発を加速する。
  • 完全なカプセル化を利用してコンポーネントを多用途にする。

しかも、Web コンポーネントは新しいものではありません。実際、ブラウザでは数年前から作成されています。たとえば、<select><video><input> など、単なるコンテナ以上の機能を持つタグがあります。これらの要素は実質的に Web コンポーネントと同じです。目標は、Salesforce 開発でそのレベルのインテグレーションを実現することです。

シンプルなコンポーネントの作成

Web 標準に準拠することでシンプルさという利点が得られます。特定のフレームワークの予期しない動作に備える必要はありません。HTML、JavaScript、CSS を使用してコンポーネントを作成するだけです。Lightning Web コンポーネントは、3 ステップで作成できます。冗談ではありません。本当にそれほどシンプルです。(1) JavaScript ファイルを作成し、(2) HTML ファイルを作成し、必要に応じて (3) CSS ファイルを作成します。

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

これらは、コンポーネントに必須の部分です。

以下は、入力項目に「Hello World」と表示する、非常にシンプルな Web コンポーネントです。

HTML

<template>
    <input value={message}></input>
</template>

template タグは、コンポーネントの基本となる構成要素です。HTML コードを保存できるようにします。

JavaScript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  message = 'Hello World';
}

import ステートメントとクラス宣言については、後ほど詳しく説明します。

CSS

input {
   color: blue;
}

最小限必要なのは、同じ名前を持つ同じフォルダ内にある、同じ名前を持つ HTML ファイルと JavaScript ファイルだけです。これらをメタデータと一緒に組織にリリースすれば完了です。Salesforce がユーザに代わって自動的にファイルをコンパイルし、定型のコンポーネント構築を行います。

Lightning Web Components Playground

Playground に進みましょう。コンポーネントを試し、修正し、すぐに結果を確認できるスペースがすでに作成されています。

  1. https://developer.salesforce.com/docs/component-library/tools/playground に移動します。最初にアクセスすると、探索できる例が表示されます。この例には、Lightning Design System の CSS フレームワークのスタイルが含まれています。これらのスタイルによって、Lightning Experience と一貫性のあるデザインが可能になります。また、lightning-combobox など、いくつかの標準 Lightning Web コンポーネントも含まれています。
  2. ここでは、ごく基本的な機能のみをテストします。Playground で、[New (新規)] をクリックします。
  3. 上記の HTML、JavaScript、および CSS の例を Playground の対応するアプリケーションファイルにコピーします。
  4. [実行] をクリックします。お疲れさまでした! コンポーネントが作成されました。

initial playground page に戻ると、再びデフォルトの例が表示され、新しいプロジェクトを開始できます。

Lightning Web コンポーネントと Aura コンポーネントの連携

既存の Aura コンポーネントを使い続けられるのか気になりませんか? できます! 既存のコンポーネントを手放さずに、Lightning Web コンポーネントを使用できます。おそらくいずれは既存のコンポーネントを Lightning Web コンポーネントモデルに移行することになりますが、Lightning Web コンポーネントの導入に際して、Aura コンポーネントの既存のサポートが低下することはありません。Aura コンポーネントと Lightning Web コンポーネントは問題なく共存できます。

実際、Aura コンポーネントに Lightning Web コンポーネントを含めることができます (その逆はできません)。ただし、純粋な Lightning Web コンポーネント実装では、完全なカプセル化と、進化し続ける一般的な標準への準拠が可能です。

使用できるもの

Lightning Web コンポーネントを効率的に開発するには、次のツールと環境を使用します。

Dev Hub とスクラッチ組織 スクラッチ組織は、開発とテストをサポートする、破棄可能な Salesforce 組織です。Dev Hub は、スクラッチ組織を管理する機能です。どちらも Salesforce DX ツールセットに含まれています。Salesforce DX は、Salesforce が構築してサポートしている統合開発ツールセットです。Salesforce コマンドラインインターフェース (CLI) Salesforce CLI では、スクラッチ組織の作成と設定やコンポーネントのリリースの操作をすばやく実行できます。これも Salesforce DX ツールセットに含まれています。Lightning コンポーネントライブラリ Aura コンポーネントと Lightning Web コンポーネントの両方のリファレンスと使用方法については、https://developer.salesforce.com/docs/component-library/overview/components を参照してください。

組織のインスタンスからライブラリを表示することもできます (http://<instance>.lightning.force.com/docs/component-library)。インスタンスからライブラリを表示することで、組織に適したバージョンのみを参照できます。さらに、独自のカスタムコンポーネントを作成すると、それもライブラリに表示されます。

GitHub 拡張機能、サンプルなどは GitHub リポジトリで共有しています。GitHub アカウントを取得して、これらを利用できることを確認してください。Visual Studio Code Salesforce 拡張機能パック Salesforce では、Visual Studio を中心的な開発ツールとし、コンポーネントを作成するための統合環境を提供しています。Visual Studio Code 向け Salesforce 拡張機能パックにより、コードヒント、Lint 警告、組み込みコマンドを提供しています (https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode)。Lightning Web コンポーネントレシピ Lightning Web コンポーネントがどう機能するかを確認できるように GitHub リポジトリを提供しています。このさまざまなサンプルを各自のスクラッチ組織にコピーし、修正し、公開して動作を確認できます。https://github.com/trailheadapps/lwc-recipes から入手できます。E-Bikes デモ この GitHub リポジトリも、Lightning Web コンポーネントがどう機能するか確認するのに適しています。E-Bikes デモには、アプリケーションを作成するための Lightning Web コンポーネントがエンドツーエンドで実装されています。各自のスクラッチ組織でこの例を試してみてください。https://github.com/trailheadapps/ebikes-lwc から入手できます。Lightning データサービス (LDS) Salesforce のデータとメタデータには、Lightning データサービスを介してアクセスします。データを操作する Lightning 基本コンポーネントは、LDS 上に構築されています。各自のコンポーネントをカスタマイズして、LDS キャッシュ、変更追跡、パフォーマンスなどを実現できます。Lightning Locker ある名前空間に属する Lightning Web コンポーネントは、Lightning Locker のセキュリティによって別の名前空間のコンポーネントから保護されています。また、Lightning Locker では、コードのサポート機能が向上するベストプラクティスが促進されます。これは、サポートされる API へのアクセスのみを許可し、公開されていないフレームワーク内部へのアクセスを排除することで実現します。

この後の進め方

Lightning Web コンポーネントの世界へようこそ

ファイルをスクラッチ組織にリリースする準備ができるまで、引き続き次の単元でも Lightning Web Components Playground を使用します。この Playground を使用して、HTML ファイルと JavaScript ファイルで何ができるかを確認しましょう。

リソース