https://github.com/trailheadapps/lwc-recipes
Lightning Web Componentsの簡単なコードサンプル集を提供します。 それぞれのレシピは特定のタスクについて30行弱程度のコードで構築されています。ソースの表示リンクでGithubのコードを参照できます。Hello Worldからサードパーティのライブラリやデータアクセスまで、豊富なレシピがあります！
Lightning Web Components レシピには2種類のインストール方法があります。:
- Salesforce DXを利用: 推奨する手順です。開発者でアプリとコードを詳しく知りたい方はこちらを利用してください。
- ロック解除済みパッケージを利用: このオプションはローカルの開発環境のインストール無しに誰でもサンプルアプリを試すことができます。
- 環境をセットアップします。 Quick Start: Lightning Web Components Trailhead プロジェクトのステップに従います。このステップには以下が含まれます:
- Trailhead Playgroundで、Dev Hubを有効化する
- Salesforce CLI のインストール
- Visual Studio Codeのインストール
- Lightning Web Components extensionを含む、Visual Studio Code Salesforce extensionsのインストール
- まだ実施していない場合にはHub組織に認証しエイリアスを設定します(以下のコマンドでは myhuborg と設定):
sfdx force:auth:web:login -d -a myhuborg
- lwc-recipes-jp リポジトリをCloneします:
git clone https://github.com/trailheadapps-jp/lwc-recipes-jp
cd lwc-recipes-jp
- スクラッチ組織を生成し、エイリアスを設定します (lwc-recipes-jp を以下のコマンドラインでは使用):
sfdx force:org:create -s -f config/project-scratch-def.json -a lwc-recipes-jp
- アプリをスクラッチ組織にPushします:
sfdx force:source:push
- recipes 権限セットをデフォルトユーザにアサインします:
sfdx force:user:permset:assign -n recipes
- サンプルデータをロードします:
sfdx force:data:tree:import --plan ./data/data-plan.json
- スクラッチ組織を開きます:
sfdx force:org:open
-
設定 ページから, テーマおよびブランド設定 で Recipes Lite もしくは Recipes Blue テーマを有効にします。
-
アプリケーションランチャーより、 LWC アプリを選択します。
-
サインアップ からDeveloper Edition組織を取得します。
-
私のドメインをDEで有効化にします。この手順はの詳細はこちらにあります。
-
このリンク をクリックし、レシピのロック解除済みパッケージをDE組織にインストールします。
-
すべてのユーザのインストール を選択します。
-
取引先及び取引先責任者のデータをインポートします:
- こちら をクリックしAccounts-Contacts.csv ファイルにアクセスします。ブラウザウィンドウで右クリックし、ファイルを Accounts-Contacts.csv として保存します。
- 設定 ページよりデータインポート とクイック検索に入力し、データインポートウィザード をクリックします。
- ウィザードを起動 をクリックします
- 取引先 & 取引先責任者を選択し、新規レコードの追加をクリックします。
- 保存したAccounts-Contacts.csv ファイルをアップロードエリアにドラッグします。
- 次へ, 次へとクリックし、インポート開始 をクリックします。
-
設定 ページから, テーマおよびブランド設定 で Recipes Lite もしくは Recipes Blue テーマを有効にします。
-
アプリケーションランチャーより、 LWC アプリを選択します。
このリポジトリではモダンなWeb開発のツールをSalesforce開発プロセスに統合したり、継続的インテグレーション/継続的デプロイメントのプロセスを実現するのに関連するいくつかのファイルが含まれています。
Prettier はコードベースを一貫したフォーマットで保証するために使用されるコードフォーマッタです。PrettierをVisual Studio Codeと一緒に利用する場合、こちらの機能拡張 をVisual Studio Code Marketplaceからインストールしてください。このリポジトリの一部として提供される .prettierignore 及び .prettierrc ファイルはPrettierフォーマッタの挙動をコントロールします。
ESLint は構文エラーや誤った構成を見分けるためのポピュラーなJavaScript lintingツールです。ESLintをVisual Studio Codeと一緒に利用する場合、こちらの機能拡張 をVisual Studio Code Marketplaceからインストールしてください。このリポジトリの一部として提供される.eslintignore ファイルでLighning Web Components開発のコンテキストで特定のファイルをlintingプロセスから除外します。
このリポジトリには package.json ファイルも付属しています。git commit で変更をするたびにPrettierとESLintを実行してコードのフォーマットとlintingを強制するpre-commitフックを簡単に設定できます。
フォーマットとlintingのpre-commit hook 設定するには:
- Node.js がインストールされていない場合はインストールします
npm installをプロジェクトルートフォルダで実行し、ESLint及びPrettierモジュールをインストールします (メモ: MacユーザはXcode command line toolsがインストールされていることをこのコマンドの実行前に確認してください。)
Prettier 及び ESLint はcommit変更のたびに毎回自動的に実行されます。コミットはlintingエラーを検出した場合には失敗します。またフォーマット及びlintingをコマンドラインから以下のコマンドによって実行することも可能です( package.json で完全なリストを確認してください):
npm run lint:lwc
npm run prettier