この記事の目次
SalesforceのLightning Web Components(LWC)とは?

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スタイル設定フックもサポートされています。実際にコーディングしてみよう

コンポーネントの開発
より知識を深めるため簡単に、コンポーネントの開発を解説していきます。 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を活用しよう!

この記事の監修者・著者

-
未経験からITエンジニアへのキャリアチェンジを支援するサイト「キャリアチェンジアカデミー」を運営。これまで4500人以上のITエンジニアを未経験から育成・排出してきました。
・AWS、salesforce、LPICの合計認定資格取得件数:2100以上(2023年6月時点)
・AWS Japan Certification Award 2020 ライジングスター of the Year 受賞