Skip to main content

サンプルアプリケーションツールについて学習する

メモ

メモ

日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語で受講していただく必要があります。英語の意味についてはかっこ内の翻訳をご参照ください。Trailhead Playground では (1) [Locale (地域)] を [United States (米国)] に、[Language (言語)] を [English (英語)] に切り替えて、(2) 英語の値のみをコピーして貼り付けてください。こちらの指示に従ってください。

翻訳版の Trailhead を活用する方法については、自分の言語の Trailhead バッジをご覧ください。

このステップでは、いろいろなツールや、ほとんどのサンプルアプリケーションに共通する設定を実際に試してみます。サンプルアプリケーションの LWC Recipes で使用されているツールを確認します。 

  1. ブラウザーで github.com/trailheadapps にアクセスします。
  2. LWC Recipes アプリケーションタイルのタイトル [LWC Recipes] をクリックして、lwc-recipes リポジトリに移動します。

Salesforce プロジェクトの設定

まず、sfdx-project.json 設定ファイルで Salesforce プロジェクトの設定を見てみましょう。

GitHub の sfdx-project.json ファイル

  1. リンクをクリックして sfdx-project.json の内容を表示します。
{
  "packageDirectories": [
    {
      "path": "force-app",
      "default": true,
      "package": "LWCRecipes",
      "versionName": "Summer '23",
      "versionNumber": "58.0.0.NEXT"
    }
  ],
  "namespace": "",
  "sourceApiVersion": "58.0",
  "sfdcLoginUrl": "https://login.salesforce.com",
  "packageAliases": {
    "LWCRecipes": "0Ho3t000000KywNCAS",
    "LWCRecipes@57.0.0-2": "04t3t000002wSUgAAM",
    "LWCRecipes@58.0.0-5": "04t3t0000037toQAAQ",
    "LWCRecipes@58.0.0-6": "04t3t0000037tozAAA",
    "LWCRecipes@58.0.0-7": "04t3t0000037tp9AAA",
    "LWCRecipes@58.0.0-8": "04t3t0000037tpEAAQ"
  }
}
  1. packageDirectories の設定では、このアプリケーション用にロック解除済みパッケージを設定しています。ここでは、パッケージ名、パッケージのメタデータのファイルパス、バージョン情報が設定されています。
  2. sourceApiVersion の設定にも注目してください。基本的には、設定ファイルとすべてのメタデータにおいて、現在のメジャーリリースの API バージョンでサンプルアプリケーションを更新します。そのため、sourceApiVersion の値が異なっていることがあります。
  3. ブラウザーの [Back (戻る)] ボタンをクリックします。

次はコード品質ツールの設定を見てみましょう。 

コード品質ツールの設定

Salesforce コマンドラインに含まれるツールに加えて、npm で実行するツールもいくつか使用しています。そのため、ほとんどのプロジェクトでは、どのランタイム Salesforce コードでも Node.js 使用しないにもかかわらず、npm で開発者ツールをインポートして設定するための package.json があります。  

メモ

npm は、Node.js のデフォルトのパッケージマネージャーです。npm は、パッケージレジストリ、コマンドラインインターフェース (CLI)、npmjs.com Web サイトで構成されます。開発者ツールや、Salesforce CLI やオープン CLI フレームワーク (OCLIF) といった汎用のコマンドラインツールを実装するためのアプリケーションの作成に広く利用されています。

サンプルアプリケーションでは、npm コマンドラインでいくつかの開発者ツールを実行し、コードのリンティングやフォーマット、単体テスト、アプリケーションライフサイクル管理 (ALM) を行っています。npm をインストールするのに最も簡単な方法は、npm がバンドルされている Node.js をインストールすることです。npm の詳細は npmjs.com を参照してください。 

  1. リンクをクリックして package.json の内容を表示します。
  2. 開発者ツールを使用するだけなので、dependencies はありません。
  3. devDependencies 設定を見ると、ツールの一部として使用するパッケージが指定されています。
  4. 使用するハイレベルパッケージは次のとおりです。
    • prettier: コードのフォーマット
    • eslint: コードのリンティング
    • @salesforce/sfdx-lwc-jest: Lightning Web コンポーネントをテストするための Jest 拡張機能
    • husky: バージョン管理にコミットする前にコードを検証するアクションの実行
  5. また、scripts 設定には、よく使用するコマンドをカプセル化してあります。各ケースでは、コマンドは npm run を使用して実行されます。たとえば、test:unit スクリプトキーに着目してください。コマンドラインから npm run test:unit を実行することで、Lightning Web コンポーネントの単体テストを実行できます。出力は次のようになります。

npm run test:unit を使用した単体テストの実行。

  1. ブラウザーの [Back (戻る)] ボタンをクリックして package.json のツアーを終了します。

プロジェクトにインストールされている各ツールをそれぞれのスクリプトでどのように実行できるのかを見ることができます。 

単体テストの設定

では、スクリプトがどのように設定されているのかを見てみましょう。Lightning Web コンポーネントの単体テストは、Jest テストライブラリを使用して実行します。ここでは、LWC に合わせて sfdx-lwc-jest という拡張機能が作成されています。 

  1. リンクをクリックして jest.config.js の内容を表示します。
  2. moduleNameMapper JavaScript オブジェクトを使用して、sfdx-lwc-jest に付属しているデフォルトモックを拡張できます。これらのモック拡張は次のように定義されます。
moduleNameMapper: {
  /* CSS library import fix in test context. See:
  https://github.com/salesforce/sfdx-lwc-jest/issues/288) */
  '^c/cssLibrary$':
      '/force-app/main/default/lwc/cssLibrary/cssLibrary.css',
  // Jest mocks
  '^@salesforce/apex$': '/force-app/test/jest-mocks/apex',
  '^@salesforce/schema$': '/force-app/test/jest-mocks/schema',
  '^lightning/navigation$':
      '/force-app/test/jest-mocks/lightning/navigation',
  '^lightning/platformShowToastEvent$':
      '/force-app/test/jest-mocks/lightning/platformShowToastEvent',
  '^lightning/uiRecordApi$':
      '/force-app/test/jest-mocks/lightning/uiRecordApi',
  '^lightning/messageService$':
      '/force-app/test/jest-mocks/lightning/messageService',
  '^lightning/actions$':
      '/force-app/test/jest-mocks/lightning/actions',
  '^lightning/alert$':
      '/force-app/test/jest-mocks/lightning/alert',
  '^lightning/confirm$':
      '/force-app/test/jest-mocks/lightning/confirm',
  '^lightning/prompt$':
      '/force-app/test/jest-mocks/lightning/prompt',
  '^lightning/modal*':
      '/force-app/test/jest-mocks/lightning/modal'
},
  1. ^lightning/navigation$ キーは、モックの場所を <rootDir>/force-app/test/jest-mocks/lightning/navigation として定義しています。このモック JS コードを GitHub リポジトリで探しましょう。
  2. ブラウザーの [Back (戻る)] ボタンをクリックします。
  3. force-app、test/jest-mocks、lightningのリンクをクリックして、すべての Lightning Web コンポーネントサービスを探します。
  4. リンクをクリックして navigation.js ファイルの内容を表示します。
  5. Lightning NavigationMixin で提供されるエクスポートされた関数のいくつかが、Jest テストで使用するためにモックされています。
  6. ブラウザーの [Back (戻る)] ボタンを 4 回クリックして、プロジェクトのルートディレクトリに戻ります。

自動コードフォーマット設定

sfdx-lwc-jest ツールの設定方法を確認しましたので、次はコードのフォーマットツールである Prettier の設定を見てみましょう。sfdx-lwc-jest は LWC のテストにしか使用しませんが、Prettier は多くの異なるファイルでコードのフォーマットに使用します。また、XML と Apex 用のプラグインも追加してあります。LWC 特有のフォーマットルールは、Prettier にバンドルされています。

package.json をもう一度見ると、scripts の次の行で、Prettier スクリプトを多くの異なるファイルタイプに対して実行するように設定されています。 

"prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\""

では、Prettier ツールの設定方法を見てみましょう。これらの設定の詳細は、Prettier のドキュメントを参照してください。 

  1. リンクをクリックして .prettierrc ファイルの内容を表示します。
  2. Prettier でコードのフォーマットがどのように設定されているか (例: 末尾のカンマの強制、一重引用符の許可、タブ幅など) を確認します。
  3. overrides キーを使用してカスタム解析ルールを作成することもできます。たとえば、lwc パーサーを使用して、中括弧で囲まれた HTML 属性を処理します。
"trailingComma": "none",
"singleQuote": true,
"tabWidth": 4,
"overrides": [
    {
        "files": "**/lwc/**/*.html",
        "options": { "parser": "lwc" }
    },
    {
        "files": "*.{cmp,page,component}",
        "options": { "parser": "html" }
    }
]
  1. ブラウザーの [Back (戻る)] ボタンをクリックして、ルートディレクトリに戻ります。

無視するファイル

多くのツールでは、実行対象のファイルを絞り込むための例外を作成できます。Git、Prettier、ESLint、Salesforce CLI などのツールに対しては、無視してもかまわないファイルを指定する必要があります。設定ファイルの 1 つを見てみましょう。 

Salesforce プロジェクトを開発する場合、一部の組織 (スクラッチ組織) はソースが追跡されます。つまり、ローカルに行われた変更と組織内で行われた変更が API によって追跡されます。sf project deploy start または sf project retrieve start を使用することで、組織からローカルへのプロジェクトの同期を自動的に行うことができます。自動的に同期させたくないプロジェクト部分は、.forceignore というファイルに指定します。 

  1. .forceignore、.gitignore、.prettierignore というファイルに注目してください。これらは、異なるツールの無視ルールを定義します。
  2. .forceignore をクリックして内容を表示します。
  3. SourceSync API は、.forceignore で定義されている項目を追跡または同期しません。
  4. プロジェクト設定の他の項目のうち、settings メタデータは同期されません。
  5. ブラウザーの [Back (戻る)] ボタンをクリックして、ルートディレクトリに戻ります。

GitHub アクション

使いやすいツールは、CI/CD プロセスで自動的に呼び出すことができます。サンプルアプリケーションでは、コードがマージされてブランチ間で移動する際に、GitHub アクションを使用してこれらのツールを自動的に使用します。これらのファイルがどこにあるかを探し、今確認したツールをどのように使用するかを見てみましょう。また、これらのアクションの実行履歴もリポジトリで確認します。 

GitHub アクションは、GitHub 内で CI/CD プロセス全体を定義するための組み込み機能です。ただし、Salesforce 開発者ツールは、CI/CD ツールには依存しません。他の CI/CD ツールを使用する場合は、ドキュメントを読んで、他のサンプルプロジェクトリポジトリへの参照を確認してください。 

  1. .github と workflows のディレクトリリンクをクリックして、github CI ワークフローが実行される YAML ファイルを表示します。
  2. ci-pr.yml のリンクをクリックしてファイルの内容を表示します。
  3. ファイルで run:npm run prettier:verify という行を探します。
  4. この行の時点で Prettier は、コードが Prettier の設定で指定されているフォーマットルールに準拠していることを確認します。
  5. GitHub UI の一番上で [Actions (アクション)] タブを選択します。

GitHub の [Actions (アクション)] タブ

  1. すべての GitHub アクションのワークフローは左側に表示されます。[CI] をクリックして、ワークフローが実行されたすべての時間を表示します。

lwc-recipes GitHub リポジトリのツール設定を見てきましたので、サンプルアプリケーションでツールを使用する準備ができました。ツールの設定はできる限り均一にしてあります。ただし、一部のアプリケーションでは異なる設定を使用している場合もあります。それらのアプリケーションについては、このトレイルの他のプロジェクトで学習してください。

Salesforce でのオープンソースの扱いについて

trailheadapps github 組織にあるサンプルは、Salesforce 開発者リレーションチームが開発および更新しています。これらのアプリケーションは、ベストプラクティスに従って作成されています。また、すべてのアプリケーションは、実際のプロジェクトで想定される内容に対応したツールのデモを提供しています。

これらのサンプルアプリケーションを調べたら、さらに詳しく学習し、Salesforce チームが提供している他のコードも調べてみましょう。オープンソースコードは、Code Samples and SDKs (サンプルコードと SDK) Web ページにあります。

このステップでは作業内容の確認は行いません。[Verify step to earn 100 points (ステップを確認して 100 ポイントを獲得)] をクリックして、プロジェクトを完了してください。

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップ ログイン
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる
今はしない