Lightning コンポーネント開発者ガイド
jコンポーネント間の JavaScript コードの共有
<ltng:require> タグ では、外部 JavaScript ライブラリを静的リソースとしてアップロードした後で読み込むことができます。<ltng:require> を使用して、ユーティリティメソッドの独自の JavaScript ライブラリをインポートすることもできます。
カウンタの現在の値を返す getValue() メソッドと、カウンタの値を増分する increment() メソッドを提供する簡単なカウンタライブラリを見てみましょう。
JavaScript ライブラリの作成
- 開発者コンソールで、 をクリックします。
- [Name (名前)] 項目に「counter」と入力します。
- [MIME Type (MIME タイプ)] 項目で [text/javascript] を選択します。
- [登録] をクリックします。
- 次のコードを入力し、 をクリックします。
このコードでは、JavaScript モジュールパターンを使用しています。このクロージャベースのパターンを使用すると、value 変数はライブラリに非公開のままになります。ライブラリを使用するコンポーネントは、value には直接アクセスできません。
コードで最も重要なのは、次の行です。
LockerService で明示的に有効になっている JavaScript の厳格モードの要件として、_counter を window オブジェクトに関連付ける必要があります。window._counter はグローバル宣言のように見えますが、_counter が LockerService のセキュアな window オブジェクトに関連付けられているため、これはグローバル変数ではなく、名前空間変数です。
window._counter の代わりに _counter を使用すると、_counter は利用できません。アクセスしようとすると、次のようなエラーが表示されます。
JavaScript ライブラリの使用
シンプルな UI がある MyCounter コンポーネントのライブラリを使用して、counter メソッドを演習してみましょう。
<ltng:require> タグがカウンタライブラリを読み込み、ライブラリが読み込まれた後、コンポーネントのクライアント側コントローラで getValue アクションを呼び出します。
クライアント側コントローラを次に示します。
window. プレフィックスを入力しなくても、window オブジェクトのプロパティにアクセスできます。したがって、_counter.getValue() を window._counter.getValue() の短縮として使用できます。
ボタンをクリックして、値を取得または増分します。
カウンタ値はカウンタライブラリを使用するコンポーネント間で共有されます。各コンポーネントに個別のカウンタが必要な場合は、カウンタの実装を変更できます。コンポーネントごとのコードおよび詳細は、ブログ投稿「Modularizing Code in Lightning Components」を参照してください。