JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの関数チェーン（メソッドチェーン）とは？仕組みと実装方法を解説

関数チェーン（Function Chaining）とは

関数チェーン（メソッドチェーン）とは、ドット記法（.）を使って複数の関数やメソッドを1行に連結して呼び出すプログラミング技法のことです。この手法を活用すると、コードが非常に簡潔になり、可読性の向上やパフォーマンス改善にもつながります。

本記事では、通常のオブジェクトを使って、関数チェーンがどのように動作するのかを具体例とともに解説します。

a) 関数チェーンを使わない場合

まずは、関数チェーンができないケースを見てみましょう。以下の例では、オブジェクト「obj」を作成し、キーワードthisを使ってパブリックプロパティ「i」を定義し、初期値として 0 を代入しています。さらに、同じオブジェクト内に add()・subtract()・print() というユーザー定義関数を作成しています。このときオブジェクト「obj」はクラスのように振る舞い、そのプロパティは他のオブジェクトからも共有できます。

続いて、キーワード new を使って新しいオブジェクト「x」を生成し、「obj」のプロパティを利用できるようにします。しかし、「obj」内で宣言された各関数には return 文がないため、メソッドの戻り値は undefined になります。その結果、x.add(5).subtract(2).print() のような連結呼び出しは失敗し、undefined が出力されます。一方、個別に（チェーンせずに）呼び出した場合は、5 - 2 = 3 が正しく表示されます。

サンプルコード

<html>
<body>
<script>
    var obj = function(){
        this.i = 0;
        this.add = function(i){
            this.i += i;
        };
        this.subtract = function(i){
            this.i -= i;
        };
        this.print = function(){
            document.write(this.i);
            document.write("</br>");
            document.write(x.add(3));  // undefined を返す
        }
    }
    var x = new obj();
    x.add(5);
    x.subtract(2);
    x.print(); // 5 - 2 = 3 なので 3 を出力
    x.add(5).subtract(2).print();  // チェーン不可のため undefined
</script>
</body>
</html>

実行結果

3
undefined

b) 関数チェーンを実現する場合

次に、上記の例を改良して関数チェーンを可能にする方法を紹介します。ポイントは、各メソッドの末尾で return this を返すことです。「this」は現在のオブジェクト自身を指すため、メソッドの処理後に自分自身を戻り値として返すことで、次のメソッドをドットでつなげて呼び出せるようになります。

この変更により、x.add(5).subtract(2).print() という1行の連結呼び出しが正しく動作し、結果として 3 が出力されます。

サンプルコード

<html>
<body>
<script>
    var obj = function(){
        this.i = 0;
        this.add = function(i){
            this.i += i;
            return this;   // 自身を返してチェーン可能に
        };
        this.subtract = function(i){
            this.i -= i;
            return this;   // 自身を返してチェーン可能に
        };
        this.print = function(){
            document.write(this.i);
        }
    }
    var x = new obj();
    x.add(5).subtract(2).print();
</script>
</body>
</html>

実行結果

3

まとめ

関数チェーンを実現する鍵は、各メソッドが return this によってオブジェクト自身を返すことです。この設計パターンは jQuery をはじめ多くのJavaScriptライブラリでも採用されており、流れるようなインターフェース（Fluent Interface）と呼ばれることもあります。メソッドを連結できるようにしておくことで、コードの簡潔さと可読性が大幅に向上します。

  1. JavaScriptの関数式（Function Expression）とは？特徴と使い方を解説

    JavaScriptにおける関数式（Function Expression）とは、関数を変数に代入して定義する方法のことです。代入された関数は、その変数名を使って後から呼び出すことができます。 関数式の主な特徴 関数を変数に格納し、変数名を指定して呼び出せる 通常の関数宣言（function declaration）と異なり、ホイスティング（巻き上げ）が行われないため、定義よりも前に呼び出すことはできない 多くの場合、名前を持たない「無名関数（匿名関数）」として定義される コールバック関数や即時実行関数（IIFE）など、さまざまな場面で活用できる この「ホイスティングされない」という点が重

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2