2021/03/2

SalesforceのLWCとは？実際のコーディング方法も併せて紹介！

この記事の目次

SalesforceのLightning Web Components（LWC）とは？
- LWCができた背景について
- LWCとAura Componentsはどう違うの？
実際にコーディングしてみよう
- コンポーネントの開発
SalesforceでLWCを活用しよう！

SalesforceのLightning Web Components（LWC）とは？

SalesforceのLWCとはHTMLとJavaScriptを使用したカスタムHTML要素（テンプレートシステム）です。 LWCとAura Components（元のモデル）は1つのページで共存および相互運用できるようになっていて、どちらもLightningコンポーネントとしてシステム管理者やエンドユーザに表示されるようになっています。記述するコードのほとんどがJavaScriptとHTMLになっていて、ブラウザでネイティブに実行されるコード上に構築されるので軽量でスムーズな動作が可能です。

LWCができた背景について

SalesforceのLWCの前身であるLight Compornentが世の中に発表されたのは2015年のSpring’15でした。 2015年当時はWeb標準でできることが限られていたので、共通的な技術の実装であってもSalesforce独自の技術として改良されていました。現在はWeb標準でできることも多く、共通の開発モデルでも実装が可能になるようにLWCはWebに寄せた技術として発表され、Webスキル（JavaScript）を持っていれば簡単に利用できるようになりました。 Light CompornentはLWCと共存できていますが、今後はLWCが優先的な改良が進むと言われているので、LWCを習得していく方がスムーズに開発できるでしょう。

LWCとAura Componentsはどう違うの？

基本的なLWCにはAuraに相当する同じ機能や属性があります。では、違いを紹介していきます。 LWCはグローバルhtml属性とイベントを受け継ぐため、Auraよりも機能性とパフォーマンスが高くなっているのが特徴です。 コンポーネントのスタイル設定は、基本的にAuraコンポーネントとLWCの両方で設計バリエーションと、SLDSユーティリティクラスがサポートされています。（SLDSとは、Lightning ExperienceのUIにマッチしたアプリケーションを開発する場合に利用できるCSSフレームワーク） Auraコンポーネントは、独自のクラスでカスタムスタイルを設定することもできますが、LWCは、Shadow DOM標準に準拠するので、独自のクラスでカスタムスタイルを設定できないようになっています。しかし、カスタムスタイル設定のSLDSスタイル設定フックもサポートされています。

実際にコーディングしてみよう

LWC Playgroundで「Hello World」コンポーネントを作成してみましょう。 コーディングはコードエディターのLightning Web Components Playgroundを使用しています。

コンポーネントの開発

より知識を深めるため簡単に、コンポーネントの開発を解説していきます。 1. Playgroundを開き「新規」から新規作成します。 2. プロジェクトファイルの隣にあるフォルダアイコンをクリック「helloworld.html」と入力して下記のコードを入力します。 (helloWorld.html) 例:

<template>
    Hello, {firstName}!
</template>

3. helloWorldの隣にあるファイルアイコンをクリック。helloWorld.js と入力して、以下のコードをコピーします。 (helloWorld.js) 例:

import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
    firstName = 'World';
}

4. これだけでは表示されないので、表示させるためapp.htmlにコンポーネントを追加します。注意:終了タグが必要なので忘れないようにしましょう。 (app.html) 例:

<template>
     <c-hello-world></c-hello-world>
</template>

デフォルトは””c””なので、コンポーネントのhtmlタグ名は””<c-hello-world>””となります。 5. 次に、コンポーネント””c-hello-world””にプロパティを追加。 apiをインポートして””firstName””を付け足す。 (helloWorld.js) 例:

import { LightningElement, api } from 'lwc';

export default class App extends LightningElement {
    @api firstName;
}

6. 次に、appコンポーネントでプロパティを設定していきます。 app.htmlで、first-name属性を””c-hello-world””タグに追加します。キャメルケースなどのJavaScriptプロパティ（firstName）は、htmlでは””first-name””に変換されます。（ハイフン付き。ケバブケースと呼ばれる） (app.html) 例:

<template>
  <c-hello-world first-name=""World""></c-hello-world>
</template>

7. 出力は同じで、コンポーネントは再利用可能になります。複数の””c-hello-world””コンポーネントを「app.html」に追加。それぞれに違う値を設定できます。 (app.html) 例:

<template>
    <c-hello-world first-name=""World""></c-hello-world>
    <c-hello-world first-name=""Planet""></c-hello-world>
    <c-hello-world first-name=""Universe""></c-hello-world>
</template>

8. 見た目があまり良くないので、少し改善してみましょう！「helloWorld.html」テンプレートで、””lightning-card””コンポーネントを追加してみます。 (helloWorld.html) 例:

<template>
    <lightning-card title=""Hello World"">
        Hello, {firstName}!
    </lightning-card>
</template>

Playgroundの3つのHello World コンポーネント。テキストは青い背景ではなく、白いカードで表示されます。以上解説でした。皆さんできましたか。

SalesforceでLWCを活用しよう！

今回は、SalesforceのLWCについて紹介しました。 SalesforceのLWCはweb標準の開発モデルをベースとしています。アプリ、Webなどと同じような共通の開発モデルで制作が可能なのでより身近で開発しやすいものになっています。ぜひSalesforceでの開発にLWCを活用していきましょう。注意: Spring’20時点で、LWCがサポートする機能はlightコンポーネントと同じではなく制限があるので注意してください。]]>