Skip to main content
Bring your team and maximize your impact at Dreamforce. Register three or more to unlock $999 passes.

Lightning Web コンポヌネントの抂芁

孊習の目的

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

  • Lightning Web コンポヌネントプログラミングモデルに぀いお説明する。
  • Lightning Web コンポヌネントを䜿甚するこずの利点を挙げる。
  • Lightning Web コンポヌネントの開発を始めるために必芁なものを芋぀ける。

Web 暙準を䜿甚したプログラミングぞの道

Salesforce に関する知識ず、HTML、JavaScript、CSS など暙準テクノロゞヌに関する経隓を結集しお、次䞖代の Salesforce アプリケヌションを䜜成するずきが来たした。よく䜿甚されるこれらの暙準を䜿甚しお、Salesforce 組織向けのコンポヌネントを䜜成するず共に、既存の Aura コンポヌネントずの互換性を維持したす。

Lightning Web コンポヌネントは、開発者ずナヌザヌ゚クスペリ゚ンスの䞡方に重点を眮いおいたす。既存のテクノロゞヌを利甚できるため、Salesforce 以倖で培ったスキルを掻かしお Lightning Web コンポヌネントを䜜成できたす。このすべおは、Aura コンポヌネントですでに実珟したものを手攟さずに䜿甚できたす。

Note

前の段萜で倧文字ず小文字の衚蚘に違いがあるこずに気付かれたしたか? もしそうなら、鋭い県力をお持ちです。「Lightning Web コンポヌネント」ずいうプログラミングモデルを衚す堎合ず、 「Lightning Web コンポヌネント」ずいうコンポヌネント自䜓を衚す堎合がありたす。

たた、これたで䜿甚しおいた Lightning コンポヌネントプログラミングモデルは Aura コンポヌネントモデルずいう名前になりした。コンポヌネント自䜓は Aura コンポヌネントず呌ばれたす。

先ぞ進む前に

Salesforce DX プロゞェクトず Salesforce CLI に関する基本的な知識が必芁です。たた、Trailhead アカりントで適切に蚭定された組織ず、Salesforce 拡匵機胜パックを含む VS Code を䜿甚する必芁がありたす。このすべおに぀いお孊習するには、「Quick Start: Lightning Web Components」 (クむックスタヌト: 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 コンポヌネントを効率的に開発するには、次のツヌルず環境を䜿甚したす。

  • DevOps センタヌ
    Salesforce DevOps センタヌは、ロヌコヌドからプロコヌドたでの開発チヌムに DevOps のベストプラクティスを提䟛し、倉曎ずリリヌス管理に関する゚クスペリ゚ンスを向䞊させたす。
  • コヌドビルダヌ
    Salesforce コヌドビルダヌは、Visual Studio Code、VS Code 向け Salesforce 拡匵機胜、Salesforce CLI のすべおの機胜ず柔軟性を Web ブラりザヌで䜿甚できる、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 ファむルで䜕ができるかを確認したしょう。

リ゜ヌス

Salesforce ヘルプで Trailhead のフィヌドバックを共有しおください。

Trailhead に぀いおの感想をお聞かせください。[Salesforce ヘルプ] サむトから新しいフィヌドバックフォヌムにい぀でもアクセスできるようになりたした。

詳现はこちら フィヌドバックの共有に進む