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 を使用する必要があります。このすべてについて学習するには、「クイックスタート: Lightning Web コンポーネント」を修了してください。

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 の基本となるビルディングブロックです。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 コンポーネントと 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://<MyDomainName>.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 コンポーネントの世界へようこそ

eBikes のデモを使用して、HTML ファイルと JavaScript ファイルで何ができるかを確認しましょう。