Intermediate Level 1

中級 Lv. 1

LWC のサンプルアプリの最高傑作といっても過言ではない「Recipes」について理解しましょう。

問題

Recipes を Trailhead Playground へインストールして、気になったコンポーネントを触ってみましょう。 その後、そのコードを読んで少し修正してみましょう。

https://trailhead.salesforce.com/sample-gallery

解答

ダウンロード準備

わかりやすい場所に trailheadapps フォルダを作成し、そこへ移動しましょう。

# 例
mkdir /Users/xxxxx/Documents/github/trailheadapps
cd /Users/xxxxx/Documents/github/trailheadapps

ダウンロード

GitHub からリポジトリをクローンします。

git clone https://github.com/trailheadapps/lwc-recipes.git

Git がない場合

もしも Git をインストールしていなくてこのコマンドを実行できない場合は、次のリンクから zip ファイルをダウンロードしてください。

https://github.com/trailheadapps/lwc-recipes/archive/master.zip

ダウンロードした zip ファイルを解凍し、中身の lwc-recipes-master フォルダをまるごとコピーして trailheadapps フォルダ配下にペーストします。 フォルダ名の lwc-recipes-master は lwc-recipes に変更しておいてください。

デプロイ

資源をデプロイし、アプリにアクセスするための権限セットを割り当て、テストデータをインポートしましょう。

cd lwc-recipes
sfdx force:source:deploy -p force-app -u <Trailhead Playground のエイリアス名>
sfdx force:user:permset:assign -n recipes
sfdx force:data:tree:import --plan ./data/data-plan.json

動作確認

Trailhead Playground にアクセスして、LWC Recipes アプリにアクセスできることを確認しましょう。

sfdx force:org:open -u <Trailhead Playground のエイリアス名>

• 左上のアプリケーションランチャーの LWC アプリをクリックします。
• 複数のタブをがあるので左から順番にクリックしていき、個人的に気になるコンポーネントを見つけます。
• そのコンポーネントを触って動作を確認します。
• 下部の「View Sorce」をクリックします。
• コンポーネントの名前をコピーし、VS Code 内で検索します。
• コードと Salesforce 画面を見比べながら、どの部分がどの部分に対応しているのかあたりをつけます。
• ラベルに当たる部分を 1 箇所変更して保存し、デプロイします。
• Salesforce 画面で変更内容が正しく反映されたことを確認します。

このアプリは汎用性が高いため、今後新たに LWC のコードを書こうと思ったときにはこのアプリを参考してください。 開発効率がアップします。

トラブルシュート

Beginner Lv.3 で作成した ContactController.cls と LWC Recipes の ContactController.cls の名前が同じだったため、上書きされてしました。 ContactController.clsを開き、一番下へBeginner Lv.3 で作成したメソッド getContacts を追加して、再デプロイしましょう。

---

👈 前に戻る | 次に進む 👉