HTML クラスのバインディングを実践する

学習の目的:

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

• Lightning Web コンポーネントに HTML クラスのバインディングを実装する。
  
• JavaScript を使用して CSS クラスを動的に適用するように Lightning Web コンポーネントを変更する。
  

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

ハンズオンを始めるには

ではここで新しい Trailhead Playground を作成して、このモジュールの手順を実行してみましょう。ページの最下部までスクロールし、Playground 名をクリックして、[Create Playground (Playground を作成)] を選択します。Trailhead Playground が作成されるまで通常 3 ～ 4 分かかります。

注意: 必ず新しい Trailhead Playground を使用してください。既存の組織や Playground を使用すると、Challenge に取り組んでいるときに問題が発生することがあります。

Lightning Web コンポーネントを作成する

この単元では、Lightning Web コンポーネントで HTML クラスのバインディングを実践します。まず、Lightning Web コンポーネントを作成します。

1. Name (名前): helloWorld
2. helloWorld.js の内容を次のコードに置き換えます。ハンズオン Challenge でこのファイルを変更します。
   

import { LightningElement, api } from "lwc";


export default class extends LightningElement {
  @api objectApiName;


  get computedClassNames() {
    return [
    ];
  }
}

3. helloWorld.html の内容を次のコードに置き換えます。ハンズオン Challenge でこのファイルを変更します。
   

<template>
  <div class="slds-box slds-theme_alert-texture slds-theme_shade">Hello, World!</div>
</template>

4. helloWorld.js-meta.xml の内容を次のコードに置き換えます。
   

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>63.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
    <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

5. helloWorld コンポーネントを Trailhead Playground にリリースします。