Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jWinter '25 (API version 62.0)
Spring '24 (API version 60.0)
Winter '22 (API version 53.0)
Summer '21 (API version 52.0)
Summer '19 (API version 46.0)
Spring '19 (API version 45.0)
Winter '19 (API version 44.0)
Summer '18 (API version 43.0)
Spring '18 (API version 42.0)
Winter '18 (API version 41.0)
Summer '17 (API version 40.0)
Spring '17 (API version 39.0)
Winter '17 (API version 38.0)
Summer '16 (API version 37.0)
Spring '16 (API version 36.0)
Winter '16 (API version 35.0)
Summer '15 (API version 34.0)
Spring '15 (API version 33.0)
Winter '15 (API version 32.0)
サポートされる JavaScript
コンポーネントの初期化時のアクションの呼び出し
コンポーネントのバンドル内の JavaScript コードの共有
コンポーネント間の JavaScript コードの共有
外部 JavaScript ライブラリの使用
コンポーネントの動的な作成
変更ハンドラを使用したデータ変更の検出
ID によるコンポーネントの検索
JavaScript での属性値の操作
JavaScript でのコンポーネントのボディの操作
JavaScript でのイベントの操作
コンポーネントの有効性の確認
フレームワークのライフサイクル外のコンポーネントの変更
項目の検証
エラーの発生および処理
コンポーネントへのイベントハンドラの動的な追加
マークアップの動的な表示または非表示
スタイルの追加と削除
押下されたボタンの確認
JavaScript での日付の書式設定
JavaScript Promise の使用
コンポーネントからの API コールの実行
サードパーティ API にアクセスするための CSP 信頼済みサイトの作成
JavaScript の使用
クライアント側のコードには JavaScript を使用します。$A 名前空間は、JavaScript コードのフレームワークを使用するためのエントリポイントです。
$A で使用できるすべてのメソッドについては、https://<myDomain>.lightning.force.com/docs/component-library の JavaScript API (<myDomain> はカスタム Salesforce ドメインの名前) を参照してください。
コンポーネントのバンドルには、クライアント側のコントローラ、ヘルパー、またはレンダラの JavaScript コードを含めることができます。これらの JavaScript リソースで最も使用されるのは、クライアント側のコントローラです。
JavaScript コードの式
JavaScript では、文字列構文を使用して式を評価します。たとえば、次の式ではコンポーネントの label 属性を取得します。
1var theLabel = cmp.get("v.label");.app または .cmp リソースのマークアップでは、{! } の式の構文のみを使用します。
メモ
-
サポートされる JavaScript
Aura コンポーネントプログラミングモデルは、ES5 構文と ES6 Promise をサポートします。 -
コンポーネントの初期化時のアクションの呼び出し
init イベントを使用して、コンポーネントを構築してから表示するまでの間にコンポーネントを更新したり、イベントを起動したりできます。 -
コンポーネントのバンドル内の JavaScript コードの共有
再利用する関数をコンポーネントのヘルパーに配置します。ヘルパー関数により、データの処理やサーバ側のアクションの起動などのタスクを特化することもできます。 -
コンポーネント間の JavaScript コードの共有
完全に独立したシンプルな Lightning コンポーネントを作成できます。ただし、より複雑なアプリケーションを作成する場合は、コンポーネント間でコードやクライアント側データの共有が必要になることがあります。 -
外部 JavaScript ライブラリの使用
静的リソースとしてアップロードした JavaScript ライブラリを参照するには、.cmp または .app マークアップで <ltng:require> タグを使用します。 -
コンポーネントの動的な作成
$A.createComponent() メソッドを使用して、クライアント側の JavaScript コードでコンポーネントを動的に作成します。複数のコンポーネントを作成するには、$A.createComponents() を使用します。 -
変更ハンドラを使用したデータ変更の検出
コンポーネントのいずれかの属性の値が変更されたときに、変更ハンドラを自動的に呼び出す (クライアント側コントローラのアクション) ようにコンポーネントを設定します。 -
ID によるコンポーネントの検索
JavaScript コードに ID を使用してコンポーネントを取得します。 -
JavaScript での属性値の操作
JavaScript で属性値を操作するときに役に立つ、よく使用されるパターンを次に示します。 -
JavaScript でのコンポーネントのボディの操作
JavaScript でコンポーネントのボディを操作するときに役に立つ、よく使用されるパターンを次に示します。 -
JavaScript でのイベントの操作
JavaScript でイベントを操作するときに役に立つ、よく使用されるパターンを次に示します。 -
DOM の変更
ドキュメントオブジェクトモデル (DOM) は、HTML および XML ドキュメントのオブジェクトを表したり、操作したりする、言語に依存しないモデルです。重要なことは、DOM を安全に変更する方法を理解し、変更がフレームワークの表示サービスによって踏みつけられて予想外の結果にならないようにすることです。 -
コンポーネントの有効性の確認
非同期コードの実行中に UI で他の場所に移動すると、フレームワークは、非同期要求を実行したコンポーネントを非表示にして破棄します。そのコンポーネントを引き続き参照できますが、コンポーネントは無効になっています。cmp.isValid() コールは、無効なコンポーネントでは false を返します。 -
フレームワークのライフサイクル外のコンポーネントの変更
$A.getCallback() を使用して、setTimeout() コールの場合のように通常の表示ライフサイクル外のコンポーネントを変更するコードをラップします。$A.getCallback() コールは、フレームワークが変更されたコンポーネントを確実に表示し、すべてのエンキューされたアクションが処理されるようにします。 -
項目の検証
ユーザ入力を検証してエラーを処理し、入力項目にエラーメッセージを表示します。 -
エラーの発生および処理
このフレームワークでは、復旧できないアプリケーションエラーおよび復旧できるアプリケーションエラーを JavaScript コードで柔軟に対処できます。たとえば、サーバ側の応答のエラーを処理するときに、これらのエラーをコールバック内に発生させることができます。 -
コンポーネントメソッドのコール
<aura:method> を使用して、コンポーネントの API の一部としてメソッドを定義します。これにより、コンポーネントイベントを起動して処理する代わりに、コンポーネントのクライアント側コントローラからメソッドを直接コールできるようになります。<aura:method> を使用すると、親コンポーネントに含まれる子コンポーネントのメソッドをコールする場合に、親コンポーネントに必要なコードが簡略化されます。 -
コンポーネントへのイベントハンドラの動的な追加
コンポーネントから起動されるイベントのハンドラを動的に追加できます。 -
マークアップの動的な表示または非表示
マークアップの表示の切り替えに CSS を使用できます。ただし、<aura:if> は必要になるまで囲まれた要素ツリーを保留するため、この使用をお勧めします。 -
スタイルの追加と削除
実行時にコンポーネントまたは要素の CSS スタイルを追加または削除できます。 -
押下されたボタンの確認
複数のボタンがあるコンポーネントで押下されたボタンを確認するには、Component.getLocalId() を使用します。 -
JavaScript での日付の書式設定
AuraLocalizationService JavaScript API では、日付の書式設定とローカライズを処理するメソッドを使用できます。 -
JavaScript Promise の使用
JavaScript コードで ES6 Promise を使用できます。Promise により、非同期コールの成否を処理するコードや、複数の非同期コールをまとめてチェーニングするコードを簡素化できます。 -
コンポーネントからの API コールの実行
デフォルトでは、クライアント側のコードからサードパーティの API にコールを実行することはできません。リモートサイトを CSP 信頼済みサイトとして追加して、クライアント側のコードがアセットを読み込み、そのサイトのドメインに API 要求を実行できるようにします。 -
サードパーティ API にアクセスするための CSP 信頼済みサイトの作成
Lightning Component フレームワークは、Content Security Policy (CSP) を使用してコンテンツに制約を適用します。主な目的は、クロスサイトスクリプト (XSS) 攻撃や他のコードインジェクション攻撃を阻止することです。外部 (Salesforce 以外の) サーバに対する要求を実行するサードパーティ API や、WebSocket 接続を使用するには、CSP 信頼済みサイトを追加します。