Beginner Level 1

初級 Lv. 1

さきほど作成したコンポーネントを修正してみましょう。

問題

• コンポーネント名: helloWorld

• lightning-card にヘッダーを追加してください。

  • タイトル: HelloWorld
  • アイコン名: custom:custom14

• 「Hello, World!」の周りに余白を追加してください。

  • 余白: slds-m-around_medium

• 「Hello, World!」の下に入力フォームを追加してください。

  • 利用するタグ: lightning-input
  • ラベル: Name

• 「Hello, World!」の「World」部分を変数にしてください。

  • 変数名: greeting

• 入力フォームに文字列を入力するたびにリアルタイムで画面に文字列が表示されるようにしてください。

  • イベント名: onchange
  • 関数名: changeHandler

解答

• 次のようにコードを修正する。

  helloWorld.html

  helloWorld.js

  helloWorld.js-meta.xml

• ファイルに対して右クリック > 「SFDX: Deploy This Source to Org」をクリックする。

• コマンドパレットから「SFDX: Open Default Org」を実行する。

• アプリケーションランチャー > ホーム をクリックする。

• 期待通りの動きになっていることを確認する。

出典

今回の演習問題は、以下のモジュールを題材としています。バッジも獲得できますので、今度ぜひ挑戦してみてください。

• Hello World Lightning Web コンポーネントの作成

---

👈 前に戻る | 次に進む 👉