Summer '25 で認定 JavaScript デベロッパー資格を更新する

学習の目的

この単元を完了すると、次のことができるようになります。

• TypeScript を Lightning Web コンポーネントに統合する方法を説明する。
  
• ローカル開発を設定および使用して、Lightning Web コンポーネントをリアルタイムでプレビューする。
  
• 配列やオブジェクト構文を使用して、Lightning Web コンポーネントで CSS クラスを動的にバインドする方法を実践する。
  

認定資格を更新する

認定 JavaScript デベロッパー資格を保有している場合、その認定資格を維持するためには期日までにこのモジュールを修了する必要があります。

この資格の取得を検討している方は、「認定 JavaScript デベロッパー」資格を参照してください。

このバッジは誰でも取得できますが、このモジュールは認定 JavaScript デベロッパーの有資格者を対象としています。

認定資格の信頼性を守る

Salesforce は、質の高い認定試験と価値ある資格を提供することを最優先事項としています。試験のセキュリティと機密の保護は、業界をリードする評価の高い認定資格をお客様に提供するために不可欠です。

Salesforce 認定資格プログラムに参加する場合は、「Salesforce 認定資格プログラム同意書」に同意いただく必要があります。詳細は、Trailhead ヘルプ記事「Salesforce 認定資格プログラム同意書および行動規範」に記載の Salesforce 認定資格試験の受験ポリシーを確認してください。

この 1 年間にすばらしい機能強化が導入されています。その中で特に重要なものについて説明します。

TypeScript を使用して Lightning Web コンポーネントを開発する (開発者プレビュー)

Winter '25 以降、Salesforce の正式な TypeScript 型定義 (@salesforce/lightning-types) と TypeScript バージョン 5.4.5 を使用して、開発者プレビューで Lightning Web コンポーネントを構築できます。

TypeScript は JavaScript のスーパーセットで、ビルド時の型チェックのような機能で開発者の生産性やコードの品質を高めます。そのため、エラーを早期に特定して、コードの信頼性を向上させることができます。TypeScript を Visual Studio Code (VS Code) などの開発環境で使用すれば、型ベースのオートコンプリート機能や静的分析などの強力なツールも使用でき、コードの検出可能性が高まります。その他のメリットとして、型安全が強化されることや、長期的なコードメンテナンスが容易になることなどが挙げられます。

この機能は開発者プレビューで、まだ正式リリースされていません。コマンド、API、機能が通知なく変更または廃止されることがあります。TypeScript コードはローカルにのみ保存され、Trailhead のハンズオン Challenge で検証されません。

考慮事項

TypeScript を Lightning Web コンポーネント (LWC) プロジェクトに統合するときは、重要な考慮事項と制限に留意してください。

まず、プロジェクトの TypeScript のバージョンや設定 (必要に応じたコンパイラーの更新など) の管理はすべてお客様の責任です。リリース更新については、TypeScript のドキュメントを参照してください。TypeScript コードは Salesforce プラットフォームに保存またはリリースできないため、Git などのソース管理システムを使用してコードを管理することをお勧めします。

また、Salesforce VS Code 拡張機能にデフォルトで LWC の型が含まれていますが、experimentalDecorators 設定を無効にすると互換性がなくなります。この設定を有効にしておく必要がありますが、デコレーターを使用すると TypeScript エラーが発生します。この問題を回避するために、デコレーターを使用する行のすぐ上に // @ts-ignore または // @ts-expect-error を追加します。

LWC で TypeScript を使ってみる

始める前に、すでに Visual Studio (VS) Code Salesforce Extension Pack を使用していることを確認します。VS Code を使用していない場合は、次の Node Package Manager (npm) パッケージをプロジェクトに手動でインストールします。

• @salesforce/lightning-types
  
• lwc
  

各自の LWC プロジェクトで型定義を使用し始めるには、TypeScript サポートを有効にし、適切な TypeScript パッケージを追加して、TypeScript コンポーネントを JavaScript にコンパイルする必要があります。また、Salesforce Lightning Types パッケージを参照して、使用可能な Salesforce の型の完全リストを確認することもできます。

LWC では TypeScript がサポートされるため、コードの安全性、開発者の生産性、メンテナンス性が向上します。開発者プレビューの間は、このサポートを試してフィードバックを伝える絶好の機会ですが、Salesforce が正式リリースを発表するまで、本番レベルの重要なコードに使用しないでください。

LWC プロジェクトに TypeScript サポートを追加する

TypeScript を使用して Lightning Web コンポーネントを記述できるようになったため、静的型付け、優れたエディターツール、開発者の生産性の向上といったメリットを得ることができます。TypeScript を使って構築し始める前に、プロジェクトで TypeScript サポートを有効にして、正しく設定する必要があります。

ステップ 1: VS Code で TypeScript サポートを有効にする

最初に、Visual Studio Code でワークスペース設定を更新します。

1. プロジェクトで .vscode/settings.json ファイルを開くか作成します。
   
2. 以下の設定を追加して、TypeScript サポートのプレビューを有効にします。
   

{
  "salesforcedx-vscode-lwc.preview.typeScriptSupport": true
}

ファイルを保存すると、lwc フォルダー (またはコンポーネントが保存されているフォルダー) に tsconfig.json ファイルが自動的に作成されます。すぐに表示されない場合は、VS Code を再起動します。

LWC プロジェクトで、TypeScript の experimentalDecorators 設定がサポートされなくなりました。この設定を false にするか、tsconfig.json からオプションを完全に削除します。

ステップ 2: TypeScript コンパイラーを設定する

生成された tsconfig.json ファイルで、compilerOptions セクションの設定が正しいことを確認します。

{
  "extends": "../../../../.sfdx/tsconfig.sfdx.json",
  "include": [
    "**/*.ts",
    "../../../../.sfdx/typings/lwc/**/*.d.ts"
  ],
  "exclude": [
    "**/__tests__/**"
  ],
  "compilerOptions": {
    "experimentalDecorators": false
  }
}

ステップ 3: TypeScript と Lightning の型をインストールする

TypeScript コンパイラーと Lightning の型定義をプロジェクトに追加します。

npm install typescript --save-dev
npm install --save-dev @salesforce/lightning-types

@salesforce/lightning-types パッケージの型定義を使用する場合は、プロジェクトの types/ フォルダーに salesforce.d.ts ファイルを作成します。

// types/salesforce.d.ts
import "@salesforce/lightning-types";

次に、tsconfig.json でこのファイルを参照します。

"include": [
  "**/*.ts",
  "../../../../.sfdx/typings/lwc/**/*.d.ts",
  "../../../../types/salesforce.d.ts",
  "**/*.d.ts"
],
"compilerOptions": {
  "paths": {
    "c/myComponent": ["./src/modules/myComponent/myComponent.ts"]
  }
}

ステップ 4: コンポーネントを変換してコンパイルする

JavaScript コンポーネントを TypeScript に変換する手順は、次のとおりです。

1. コンポーネントの .js ファイルの名前を .ts に変更します。
   
2. コマンドラインから TypeScript コンパイラーを実行します。
   

npx tsc --project ./path/to/lwc

コンパイラーが、Salesforce Platform にリリースできる .js ファイルを生成します。.ts ファイルは、ローカルプロジェクトまたはソース管理に維持されます。

これで、TypeScript を使用して、安全でスケーラブルな Lightning Web コンポーネントを構築できます。後続のセクションでは、Lightning 基本コンポーネントの型定義と TypeScript のベストプラクティスを使用して、強く型付けされたコンポーネントを記述する方法を説明します。

リアルタイムプレビューで Lightning Web コンポーネントを迅速に開発する (Lightning Experience アプリケーションで正式リリース)

ローカル開発を使用すると、変更を保存するたびにブラウザーで Lightning Web コンポーネントをすぐさまプレビューでき、ページのリリースや更新を行う必要がありません。このリアルタイムプレビューにより、Lightning アプリケーションや Experience Cloud Lightning Web Runtime (LWR) サイトの開発プロセスが加速します。

組織でローカル開発を有効にするには、必ず「設定を参照」権限と「アプリケーションのカスタマイズ」権限を有効にします。

ローカル開発がサポートされる場所

ローカル開発は次の環境でサポートされます。

制限と考慮事項

Lightning Web コンポーネントのローカル開発は、LWC のみをサポートし、Aura コンポーネントはサポートしていません。また、ランディングページはプレビューできません。

1 つのコンポーネントのプレビューは、ワイヤーアダプターやプラットフォームモジュールを使用しないシンプルなコンポーネントに限られます。このプラス面は、ローカル開発でビルドが静的リソースとして保存されなくなったため、今後は組織の静的リソース制限に影響しないことです。

Lightning アプリケーションをモバイル環境でテストする場合は、ローカル開発を iOS シミュレーターまたは Android エミュレーターで実行できます。Mac ユーザーは Xcode をインストールして、iOS シミュレーターをダウンロードする必要があります。Android のテストには Android Studio が必要です。ツールを設定したら、CLI コマンドの sf lightning dev app --device-type ios または --device-type android を実行して、適切な環境を立ち上げます。

Salesforce モバイルアプリケーションを手動でインストールする必要はありません。必要があれば、ローカル開発でインストールするよう指示されます。設定手順については、『Mobile and Offline Developer Guide (モバイルおよびオフライン開発者ガイド)』を参照するか、Trailhead の「Lightning Web コンポーネント用のモバイル開発者ツールを設定する」プロジェクトを受講してください。

始めましょう

アプリケーションまたはサイトのリアルタイムプレビューを実行するためには、事前にローカル開発の設定手順を実行する必要があります。

1. 最初に、Salesforce コマンドラインインターフェース (CLI) をインストールします。現在、ローカル開発を使用するためには CLI が必要です。
   
2. 次に、ローカル開発プラグインをインストールします。
   
3. 続いて、プロジェクトでローカル開発を有効にします。
   

詳しい設定手順とコマンドの例については、Salesforce の公式ドキュメントを参照してください。

ローカル開発を使用すると、開発者がデスクトップ環境とモバイル環境の全体で Lightning Web コンポーネントを迅速かつ柔軟に構築してテストできます。作業しているのが Lightning Experience アプリケーションでも、Experience Cloud LWR サイトでも、リアルタイムプレビューによってワークフローが効率化し、何度もリリースし直す必要がなくなります。ローカル開発を最大限活用するために、詳しい設定手順、サポートされている環境、既知の制限を必ず確認してください。開発プロセスを加速する準備ができたら、Salesforce ドキュメントで詳細を確認して開始します。

オブジェクトまたは配列構文を使用して HTML クラスをバインドする

class 属性を使用すると、コンポーネントまたは要素の CSS クラスを簡単に管理できます。文字列のクラス名を手動で連結する代わりに、クラスのオブジェクトや配列のバインディングを使用すれば、複雑なスタイルをクリーンに適用できます。

条件に基づく動的なスタイル設定が可能な配列またはオブジェクトを使用して、複数のクラスをバインドする例を見てみましょう。LWC API v62.0 (LWC OSS v7.0.0) 以降では、配列とオブジェクトのいずれかを使用して複数のクラスを要素にバインドできます。

• 配列バインディング: 各項目が個々のクラス名として処理されます。たとえば、["highlight", "yellow"] は class="highlight yellow" になります。
  
• オブジェクトバインディング: 真値のあるキーがクラス名として適用されます。たとえば、{ highlight: true, hidden: false } は class="highlight" になります。
  

このバージョンでは、Boolean、数値、関数などの値は、文字列に変換されずに削除されます。たとえば、true、false、10 を直接渡すと、空のクラス文字列が返されます。これらの値をクラス名 ("false" や "1" など) として含めると、String(value) を使用して値が変換されます。

クラスのバインディングの例

次の例は、LWC API v62.0 と以前のバージョンの違いを示しています。

v62.0 より前は動作が異なります。つまり、Boolean、数値など文字列以外のデータ型は異なる方法で処理されていました。

例

<template>
  <div class={computedClassNames}>Evaluate some classes here</div>
</template>

export default class extends LightningElement {
  position = "left";
  fullWidth = true;
  hidden = false;


  get computedClassNames() {
    return [
      "div__block",
      this.position && `div_${this.position}`,
      {
        "div_full-width": this.fullWidth,
        hidden: this.hidden
      }
    ];
  }
}

これは次のように表示されます。

<div class="div__block div_left div_full-width">Evaluate some classes here</div>

まとめ

TypeScript の統合方法、ローカル開発を使用したリアルタイムプレビュー、オブジェクトや配列構文を使用した動的クラスバインディングの適用方法など、Lightning Web コンポーネントの開発の主な更新を確認しました。こうした機能強化により、安全でメンテナンス性の高いコードを作成して、開発ワークフローを加速することができます。設定手順とさらに詳しい情報については、「リソース」セクションに記載されている Salesforce の公式ドキュメントを参照してください。

次は、HTML クラスのバインディングを実際に行っていただきます。

リソース

• Salesforce Developer: TypeScript Type Definitions for LWC (LWC の TypeScript 型定義) (開発者プレビュー)
• Salesforce Developer: Preview Components with Local Dev (ローカル開発を使用したコンポーネントのプレビュー)
• Salesforce Developer: Bind HTML Classes (HTML クラスのバインド)