この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

コンポーネントのバンドル内の JavaScript コードの共有

再利用する関数をコンポーネントのヘルパーに配置します。ヘルパー関数により、データの処理やサーバ側のアクションの起動などのタスクを特化することもできます。

ヘルパー関数は、コンポーネントのバンドルの任意の JavaScript コード (クライアント側のコントローラまたはレンダラなど) からコールできます。

ヘルパー関数の形状は、クライアント側のコントローラ関数と似ており、名前-値ペアの対応付けが含まれるオブジェクトリテラル表記法の JavaScript オブジェクトであることを示すために括弧と中括弧で囲まれます。ヘルパー関数は、関数で要求される任意の引数 (属するコンポーネント、コールバック、またはその他のオブジェクトなど) を渡すことができます。

1({
2    helperMethod1 : function() {
3        // logic here
4    },
5
6    helperMethod2 : function(component) {
7        // logic here
8        this.helperMethod3(var1, var2);
9    },
10
11     helperMethod3 : function(var1, var2) {
12         // do something with var1 and var2 here
13    }
14})

同じヘルパーで別の関数をコールするには、this.methodName 構文を使用します。ここで、this はヘルパー自体への参照です。たとえば、helperMethod2 はこのコードを含む helperMethod3 をコールします。

1this.helperMethod3(var1, var2);

ヘルパーの作成

ヘルパーリソースは、コンポーネントのバンドルの一部で、<componentName>Helper.js という命名規則で自動的に結び付けられます。

開発者コンソールを使用してヘルパーを作成するには、コンポーネントのサイドバーで [HELPER (ヘルパー)] をクリックします。このヘルパーファイルは、自動的に結び付けられるコンポーネントの範囲で有効です。

コントローラでのヘルパーの使用

helper 引数をコントローラ関数に追加して、コントローラ関数でヘルパーを使用できるようにします。コントローラで (component, event, helper) を指定します。これらは標準パラメータで、関数でアクセスする必要はありません。また、createExpense: function(component, expense){...} などのインスタンス変数をパラメータとして渡すこともできます。ここで、expense は、コンポーネントで定義された変数です。

次のコードに、カスタムイベントハンドラで使用できる updateItem ヘルパー関数をコントローラでコールする方法を示します。

1/* controller */
2({
3    newItemEvent: function(component, event, helper) {
4        helper.updateItem(component, event.getParam("item"));
5    }
6})

ヘルパー関数はコンポーネントに対してローカルであり、コードの再利用が促進され、クライアント側のコントローラの JavaScript ロジックの複雑な作業が軽減されます (可能な場合)。次のコードに、コントローラで設定された value パラメータを item 引数を使用して取得するヘルパー関数を示します。このコードは、サーバ側のアクションをコールし、コールバックを返しますが、ヘルパー関数で他の処理を行うこともできます。

1/* helper */
2({
3    updateItem : function(component, item, callback) {
4        //Update the items via a server-side action
5        var action = component.get("c.saveItem");
6        action.setParams({"item" : item});
7        //Set any optional callback and enqueue the action
8        if (callback) {
9            action.setCallback(this, callback);
10        }
11        $A.enqueueAction(action);
12    }
13})

レンダラでのヘルパーの使用

helper 引数をレンダラ関数に追加して、レンダラ関数でヘルパーを使用できるようにします。レンダラで、関数の署名のパラメータとして (component, helper) を指定し、関数からコンポーネントのヘルパーにアクセスできるようにします。これらは標準パラメータで、関数でアクセスする必要はありません。次のコード例に、レンダラの afterRender() 関数を上書きして、ヘルパーメソッドの open をコールする方法を示します。

detailsRenderer.js

1({
2    afterRender : function(component, helper){
3        helper.open(component, null, "new");
4    }
5})

detailsHelper.js

1({
2    open : function(component, note, mode, sort){
3        if(mode === "new") {
4            //do something
5        }
6        // do something else, such as firing an event
7    }
8})

Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)

コンポーネントのバンドル内の JavaScript コードの共有

ヘルパーの作成

コントローラでのヘルパーの使用

レンダラでのヘルパーの使用

関連項目: