Intermediate Level 2

中級 Lv. 2

Recipes のコードを参考にして、複数の入力値をもとに結果を出力するコンポーネントを作成してみましょう。

問題

• コンポーネント名: bmiCalcurator
• 身長(cm) と体重(kg) を入力して「計算」ボタンをクリックすると、BMI 値を表示する LWC を作成してください。
• ホームページの右上に配置してください。
• 参考にする Recipes コンポーネント: Misc タブ > MiscSharedJavaScript コンポーネント

解答

• force-app > main > default > lwc フォルダを右クリックする。

• 「SFDX: Create Lightning Web Component」をクリックする。

• 名前として「bmiCalcurator」を入力して Enter を押下する。

• 格納場所として「force-app/main/default/lwc」を選択して Enter を押下する。

• 次のコードを書く。

  bmiCalcurator.html

  bmiCalcurator.js

  bmiCalcurator.js-meta.xml

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

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

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

• 歯車アイコン > 編集ページ をクリックする。

• 左のペインから「bmiCalcurator」を右上にドラッグする。

• 「保存」 > 「有効化」 > 「組織のデフォルトとして割り当て」 > 「保存」をクリックする。

• 「戻る」をクリックする。

• 右上に当該のコンポーネントがと表示されていることを確認する。

• 身長と体重から BMI が正しく計算されることを確認する。

  • 身長: 160.0、体重: 60.0 → BMI: 23.4
  • 身長: 160.0、体重: 0.0 → BMI: 0

Open Questions

• 身長が 0cm の場合、BMI の表示はどうなりますか。それに対して、あなたならどのようなロジックを追加しますか？可能であれば、そのロジックを実装してみましょう。

Hints

いろいろなソリューションが考えられるでしょう。たとえば、

• 0 を入力できないようにする。
• 正数を入力しないと「計算」ボタンをクリックできないようにする。
• 0 を入力して「計算」ボタンをクリックすると、ユーザフレンドリーなエラーメッセージを表示する。
• 【参考】 https://developer.salesforce.com/docs/component-library/bundle/lightning-input/documentation

---

👈 前に戻る | 次に進む 👉