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

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

学習の目的

この単元を完了すると、次のことができるようになります。
  • Lightning Web コンポーネントプログラミングモデルについて説明する。
  • Lightning Web コンポーネントを使用することの利点を挙げる。
  • Lightning Web コンポーネントの開発を始めるために必要なものを見つける。

より適応性の高いプログラミングモデルへの道

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

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

メモ

メモ

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

また、これまで使用していた Lightning コンポーネントモデルは Aura コンポーネントモデルという名前になり、Aura コンポーネントを作成します。

このモジュールを進める前の重要な手順

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

    組織の [設定] メニューから Dev Hub を有効にすることも必要です。

  2. GitHub アカウントを取得します。

Lightning Web コンポーネントモデルを導入する理由

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

その取り組みの一環として、World Wide Web Consortium (W3C) は Web コンポーネントの新しい標準を進化させました。Salesforce のコンポーネントはその新しい標準に準拠しており、Lightning Web コンポーネントも W3C Web コンポーネント標準の実装です。Web コンポーネント標準の成熟に合わせて、Salesforce は今後も、モデルがそれらの標準に沿って下位互換性と先進的な機能強化の両方を提供できるようにしていきます。Salesforce のコンポーネントは比較的ネイティブなブラウザ機能を使用しているため、非常に高速で移植性があります。身に付けた HTML や JavaScript のスキルをそのままコンポーネント開発で活かすことができます。

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

  • 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. [Run (実行)] をクリックします。

    おめでとうございます! コンポーネントが作成されました。

  5. [Save (保存)] をクリックして、Playground プロジェクトの一意の URL を生成します。

    Playground コンポーネントに戻るときに備えて、毎回 URL を記録しておきましょう。Playground では、作成した例は管理されませんが、プロジェクトを保存するたびに、一意の URL が生成されます。

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 では、Visual Studio を中心的な開発ツールとし、コンポーネントを作成するための統合環境を提供しています。Visual Studio への Salesforce 拡張機能により、コードヒント、Lint 警告、組み込みコマンドを提供しています (https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-lwc)。
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 ファイルで何ができるかを確認しましょう。