Advanced Level 1

上級 Lv. 1

1 つのコンポーネントをさらに部品ごとに分割してみましょう。この考え方によって、さらにコンポーネントの再利用化が可能となります。

問題

• 中級 Lv. 3 のコンポーネント opportunitySearch を、検索条件コンポーネントと検索結果コンポーネントに分割してください。
  • 検索条件コンポーネント: opportunitySearchBar
  • 検索条件コンポーネント: opportunitySearchResult
• opportunitySearch が親コンポーネントで、opportunitySearchBar と opportunitySearchResult が子コンポーネントとなるイメージです。

Hints

• LWC Recipes の pubsubSearchBar および pubsubContactList が参考になります。

解答

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

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

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

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

• 次のコードを書く。

  opportunitySearchBar.html

  opportunitySearchBar.js

  opportunitySearchBar.js-meta.xml

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

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

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

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

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

• 次のコードを書く。

  opportunitySearchResult.html

  opportunitySearchResult.js

  opportunitySearchResult.js-meta.xml

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

• opportunitySearch のコードを書き直す。

  opportunitySearch.html

  opportunitySearch.js

  opportunitySearch.js-meta.xml

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

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

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

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

• 何か文字列を入力して「検索」ボタンをクリックし、商談レコードが検索されることを確認する。

Open Questions

• 表示結果の商談名をクリックするとそのレコードの詳細ページへ遷移するようにしたい場合、どのようなコードを書けばよいでしょうか。

Hints

• LWC Recipes > Navigation タブからサンプルが見られます。

---

👈 前に戻る | 次に進む 👉