Articles /

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

Salesforceでは、Lightning Webコンポーネント(LWC)は、lightningプラットフォームのプログラミングパラダイムの革新的な変更です。 Lightning Platformを初めて使用し、HtmlとJavaScriptの助けを借りてSalesforce外でソリューションを開発している場合、LWCはケーキの一部です。 このブログでは、次の側面をカバーします:

  • LWCとは何ですか？
  • なぜLWCなのか？
  • オーラはどうですか？
  • どこから始めるのですか？
  • Lwc構造

Lightning Webコンポーネントとは何ですか？

Lwcは、Salesforce lightningコンポーネントを開発するための新しいプログラミングモデルです。 これは、ネイティブHTMLと最新のJavaScriptを使用して構築されたUIフレームワークです。 コアwebコンポーネント標準を使用し、カスタム要素、テンプレート、デコレータ、モジュール、shadow DOM、およびECMAScript7以降で利用可能な他の新しい言語構成を活用します。

Lwc

図1:2019web stack

Lightningコンポーネントは、以前はauraコンポーネントフレームワークを使用して開発できました。 これで、同じlightningコンポーネントを開発するための新しいフレームワークができました。

なぜLWCなのか？

SalesforceがすでにAuraコンポーネントフレームワークを持っていたLWCを導入した理由を理解する必要があります。 このためには、2014年に戻って、この2014年のwebスタックを見る必要があります。

2014年、Lightning Components frameworkがAuraプログラミングモデルとともに立ち上げられたとき、web標準は、開発者が大規模なwebアプリケーションを構築するために必要な完全なスタッ レンダリングエンジン、標準要素、イベント、およびコア言語(ECMAScript5)。

コンポーネントモデル、テンプレート、モジュール、shadow DOMなどの重要な要素はすべてweb標準に欠けています。

Lwc2

図2:2014web stack

これは、2014年のweb標準またはweb stackがUIコンポーネントの作成に役立つほど強力ではなかったことを意味します。 同時に、Angular、React、Auraのような多くの異なるフレームワークが登場しました。 これらのフレームワークには、UIコンポーネントを作成するために必要な重要な要素が欠けてい

2014年から2019年にかけて、webスタックやネイティブwebブラウザエンジンに多くの改善が行われました。

Lwc3

図3:web stack transformation

テンプレート、カスタム要素、およびshadow DOMモジュールを見ることができます。 それらはすべてwebスタック自体の一部です。 これは、最新のwebスタックが、これらのUIコンポーネントの作成に役立つほど強力であることを意味します。 コンポーネントのパフォーマンスを損なう可能性のある厚いフレームワークレイヤーは必要ありません。 それがLWCフレームワークの導入の背後にある理由です。 LWCの機能のほとんどはwebスタック自体の一部であり、現在はフレームワークに依存しているものはほとんどありません。 Auraコンポーネントフレームワークの一部である70以上の基本コンポーネントはすべてLightning Webコンポーネントに変換されており、すべてLWCフレームワークの一部です。 これらの基本コンポーネントを使用して、UIコンポーネントを設計できます。

最新のwebスタックのパワーにより、LWCには次のようなauraコンポーネントよりも多くの異なる利点があります:

  1. より良いパフォーマンス
  2. 現代のweb標準
  3. Auraコンポーネントとの互換性
  4. より高速なロードサイト
  5. より良いセキュリティ、より良いテスト、およ

    あなたはLWCがここにいるので、オーラで何が起こるのだろうと思っているに違いありませんか？ それは離れて行くのですか？

    LWCとAuraは完全に一致しているので、答えは”いいえ”です。 あなたのLwcとオーラコンポーネントを同じページに置くことができ、あなたのLwcはあなたのオーラコンポーネントと話すことができ、あなたのオーラコンポーネント Lwcである汎用フレームワーク内にカスタムフレームワークを含めたくないため、その逆が真ではないAuraコンポーネント内にLWCを含めることもできます。

    Lwc4

    図4: AuraとLWCの相互運用性

    この画像を見ると、LWCとAuraの両方が同じブラウザイベント、標準要素、レンダリングメカニズムを共有していることがわかります。 違いは、AuraがECMAScript5上に構築されたことです。 LWCは最新のECMAScriptバージョン、つまりECMAScript7上に構築されています。 どちらも、Lightning Locker、Lightning Data Services、Lightningの基本コンポーネントなどのSalesforceの重要な機能を共有しています。

    要約すると、lwcはlightningコンポーネントを開発するための新しい方法です。 これは、Aura Component frameworkがどこにでもあるという意味ではありません。 Auraコンポーネントフレームワークに精通している場合でも、AURAプログラミングモデルを使用してUIコンポーネントを作成できます。 しかし、今から始めている場合や、ここから新しいコンポーネントを作成している場合は、コンポーネントのパフォーマンスの向上など、さまざまな利点が 新しいコンポーネントには常にLwc over Auraを使用することをお勧めしますが、現在のところ既存のAuraコンポーネントをLWCに移行する必要はありません。

    どこから始めるのですか？

    Lwcを作成および開発し、その強力な機能とパフォーマンス上の利点を使用するには、Salesforce DXを設定する必要があります。 Auraコンポーネントとは異なり、開発者コンソールでLWCコンポーネントを開発することはできません。 あなたはそれをローカルに書いてからあなたの組織にプッシュする必要があります。 これを行うには、開発者環境を設定する必要があります。 Visual Studio Code、Salesforceコマンドラインインターフェイス、組織などの一連のツールが必要です。

    ここにいくつかの推奨手順があります:

    1. VS Codeをインストールし、Salesforce開発用に設定します。 このTrailheadモジュールに従うことができます。
    2. ここでは、ほぼすべてのユースケースのためのわかりやすいサンプルコードを取得します。
    3. より多くのサンプルのために、ここに訪問しなさい。
    4. 自分でLWCを開発し、ここで実行してコードを試してみてください。
    5. 最も重要なのは、LWC Trailmixの入門を完了することです。

    LWCコンポーネント構造

    LWCはどのように形成されていますか？

    Auraコンポーネントと同様に、LWCの主な内容もHTMLとJavaScriptです。 CSSのようなオプションのコンテンツがあります。 しかし、これらのLWCに加えて、コンポーネントのメタデータ値を定義するXML構成ファイルも含まれています。

    Lwc5

    図5:LWCファイル構造

    これらのファイル名はすべてコンポーネント名と一致する必要があります。 フォルダーとファイルは、次のようにいくつかの命名規則に従う必要があります:

    • は小文字で始まる必要があります
    • は英数字またはアンダースコア文字のみを含む必要があります
    • は名前空間で一意である必要があります
    • は空白を含めることはできません
    • はアンダースコアで終わることはできません
    • はハイフン(ダッシュ)を含むことはできません)

    LWCファイル構造は次のようになります:

    Lwc6

    さて、これらすべてのファイルを一つずつカバーしてみましょう:

    HTML

    • には、コンポーネントのHTML
    • を含むルートタグ<template>がありますレンダリング時に、<template>タグは<namespace-component-nameに置き換えられます>

    Lwc7

    ジャバスクリプト:

    • モジュールで宣言された機能をインポートするには、importステートメントを使用します。
    • 他のコードがモジュール内の機能を使用できるようにするには、exportステートメントを使用します。
    • LightningElementは、標準のHTML要素のカスタムラッパーであり、コンポーネントとエクスポートでそれを拡張します。

    Lwc8

    設定:

    • コンポーネント
    • のメタデータ構成値を定義するXMLファイル<ターゲット>を設定して、アプリケーションページ、レコードページなどの異なるページにコンポーネ

    Lwc9

    CSS:

    • コンポーネントのスタイルを設定します。
    • スタイルシートが自動的に適用されます。

    Lwc10

    私たちが議論したファイル–これらの外観でコンポーネントはどのように構築されますか？

    コンポーネントUI:

    11

    VS codeの設定でこのコンポーネントを構築して、組織に展開することができます。 VSコードをまだ設定していない場合は、心配しないでください。 SalesforceにはLWC用の遊び場も用意されています。

    これは、最新のweb標準のパワー、優れたパフォーマンス、Auraコンポーネントとの相互運用性を提供するLightning Webコンポーネントから始めるのに最適な時期です。

    Lightning Webコンポーネントの詳細については、以下のリンクを参照してください。

    1. https://developer.salesforce.com/docs/component-library/documentation/en/lwc
    2. https://developer.salesforce.com/docs/component-library/overview/components
    3. https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components
    4. https://trailhead.salesforce.com/en/users/strailhead/trailmixes/lightning-web-components
    5. https://www.lightningdesignsystem.com/
    6. https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web-components/set-up-visual-studio-code
    著者について

    Sagar ZadeはPerficientの準の技術的なコンサルタントである。 Salesforce認定管理者、アプリビルダー、プラットフォーム開発者、およびVlocity認定プラットフォーム開発者です。 彼はsalesforceで使用されている新しいテクノロジを学び、探求したいと熱望しており、知識を共有することに興奮しています。

    この著者からもっと

Leave a Reply