lwc recipes
1.0.0
Lightning Web コンポーネントのわかりやすいコード例のコレクション。各レシピでは、ベスト プラクティスに従って、特定のタスクを可能な限り少ないコード行でコーディングする方法を示します。 「ソースを表示」リンクをクリックすると、GitHub 上のコードに直接アクセスできます。 「Hello World」からデータ アクセス、サードパーティ ライブラリまで、そのためのレシピがあります。
このアプリの詳細については、「クイック スタート: LWC Recipes サンプル アプリの探索」Trailhead プロジェクトを完了するか、この短いプレゼンテーション ビデオをご覧ください。
このサンプル アプリケーションは、Salesforce プラットフォーム上で実行するように設計されています。任意のプラットフォームで Lightning Web コンポーネントを体験したい場合は、https://lwc.dev にアクセスし、Lightning Web コンポーネントのサンプル アプリケーション LWC Recipes OSS を試してください。
Scratch Org を使用したアプリのインストール: これは推奨されるインストール オプションです。アプリとコードを体験したい開発者の場合は、このオプションを使用してください。
ロック解除されたパッケージを使用してアプリをインストールする: このオプションを使用すると、ローカル開発環境をインストールせずに、誰でもサンプル アプリを体験できます。
Developer Edition 組織または Trailhead Playground を使用したアプリのインストール: Trailhead バッジに取り組む場合、または Scratch 組織よりも永続的な環境にアプリをデプロイする場合に便利です。
オプションの取り付け手順
コードツアー
環境をセットアップします。 「クイックスタート: Lightning Web Components Trailhead プロジェクト」の手順に従います。手順には次のものが含まれます。
Trailhead Playground で Dev Hub を有効にする
Salesforce CLI をインストールする
Visual Studio コードをインストールする
Lightning Web Components 拡張機能を含む、Visual Studio Code Salesforce 拡張機能をインストールします。
まだ行っていない場合は、ハブ組織を承認し、エイリアス (以下のコマンドではmyhuborg ) を指定します。
sf org login web -d -a myhuborg
lwc-recipes リポジトリのクローンを作成します。
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
スクラッチ組織を作成し、エイリアス (以下のコマンドのlwc-recipes ) を指定します。
sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes
アプリをスクラッチ組織にプッシュします。
sf project deploy start
レシピ権限セットをデフォルトのユーザーに割り当てます。
sf org assign permset -n recipes
サンプルデータをインポートします。
sf data tree import -p ./data/data-plan.json
スクラッチ組織を開きます。
sf org open
[設定]の[テーマとブランディング]で、 Recipes LiteテーマまたはRecipes Blueテーマをアクティブにします。
アプリ ランチャーで、 「すべて表示」をクリックし、 LWCアプリを選択します。
Scratch 組織よりも永続的な環境にアプリをデプロイする場合、またはローカル開発ツールをインストールしたくない場合は、この一連の手順に従ってください。無料の Developer Edition 組織や Trailhead Playground など、ソース追跡されていない組織を使用できます。
以前に行った作業との競合を避けるために、必ず新しい環境から開始してください。
組織にログインします
このリンクをクリックして、レシピのロック解除済みパッケージを組織にインストールします。
「すべてのユーザーにインストール」を選択します
アカウントと連絡先のデータをインポートします。
ここをクリックして、 Accounts-Contacts.csvファイルにアクセスします。ブラウザ ウィンドウを右クリックし、ファイルをAccounts-Contacts.csvとして保存します。
[設定]の [クイック検索] ボックスに「データ インポート」と入力し、 [データ インポート ウィザード]をクリックします。
[ウィザードの起動]をクリックします。
[アカウントと連絡先]をクリックし、 [新しいレコードの追加]をクリックします。
保存したAccounts-Contacts.csvファイルをアップロード領域にドラッグします。
「次へ」 、 「次へ」 、 「インポートの開始」をクリックします。
Trailhead でクイックスタートを試みている場合、このステップは必須ですが、それ以外の場合はスキップしてください。
[設定] > [ユーザー] > [権限セット]に移動します。
「レシピ」をクリックします。
[割り当ての管理]をクリックします。
ユーザーを確認し、 「割り当ての追加」をクリックします。
[設定]の[テーマとブランディング]で、 Recipes LiteテーマまたはRecipes Blueテーマをアクティブにします。
アプリ ランチャーで、 「すべて表示」をクリックし、 LWC Recipesアプリを選択します。
Scratch 組織よりも永続的な環境にアプリをデプロイする場合は、この一連の手順に従ってください。これには、無料の Developer Edition 組織や Trailhead Playground など、ソース追跡されていない組織が含まれます。
以前に行った作業との競合を避けるために、必ず新しい環境から開始してください。
このリポジトリのクローンを作成します。
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
Trailhead Playground または Developer 組織を認証し、エイリアス (以下のコマンドではmydevorg ) を指定します。
sf org login web -s -a mydevorg
ターミナルでこのコマンドを実行して、アプリをデプロイします。
sf project deploy start -d force-app
recipes権限セットをデフォルトのユーザーに割り当てます。
sf org assign permset -n recipes
いくつかのサンプル データをインポートします。
sf data tree import -p ./data/data-plan.json
組織がまだ開いていない場合は、今すぐ開きます。
sf org open -o mydevorg
[設定]の[テーマとブランディング]で、 Recipes LiteテーマまたはRecipes Blueテーマをアクティブにします。
アプリ ランチャーで、 LWCアプリを選択します。
このリポジトリには、最新の Web 開発ツールを Salesforce 開発プロセスまたは継続的統合/継続的デプロイメント プロセスに統合する場合に関連するファイルがいくつか含まれています。
Prettier は、コード ベース全体で一貫したフォーマットを保証するために使用されるコード フォーマッタです。 Visual Studio Code で Prettier を使用するには、Visual Studio Code Marketplace からこの拡張機能をインストールします。 .prettierignore および .prettierrc ファイルは、Prettier フォーマッタの動作を制御するためにこのリポジトリの一部として提供されています。
警告現在の Apex Prettier プラグインのバージョンでは、Java 11 以降をインストールする必要があります。
ESLint は、スタイル上のエラーや誤った構成を特定するために使用される人気のある JavaScript lint ツールです。 Visual Studio Code で ESLint を使用するには、Visual Studio Code Marketplace からこの拡張機能をインストールします。 .eslintignore ファイルは、Lightning Web コンポーネント開発のコンテキストで lint プロセスから特定のファイルを除外するために、このリポジトリの一部として提供されます。
このリポジトリには package.json ファイルも付属しており、変更をgit commitたびに Prettier と ESLint を実行することでコードのフォーマットと lint を強制するコミット前フックを簡単にセットアップできます。
フォーマットおよびリンティングのコミット前フックを設定するには、次の手順を実行します。
Node.js をまだインストールしていない場合はインストールします
プロジェクトのルート フォルダーでnpm install実行して、ESLint および Prettier モジュールをインストールします (注: Mac ユーザーは、このコマンドを実行する前に Xcode コマンド ライン ツールがインストールされていることを確認する必要があります)。
Prettier と ESLint は、変更をコミットするたびに自動的に実行されるようになります。 lint エラーが検出された場合、コミットは失敗します。次のコマンドを使用して、コマンド ラインからフォーマットとリンティングを実行することもできます (完全なリストについては package.json を確認してください)。
npm run lint npm run prettier
コード ツアーは、アプリのコードをより深く理解するのに役立つガイド付きのウォークスルーです。これらを実行できるようにするには、CodeTour VSCode 拡張機能をインストールします。
