メソッドチェーンの使い方

メソッドチェーンは、オブジェクト指向プログラミングや関数型プログラミングでよく使われる書き方です。コードの可読性が向上と複数の操作を連続して行う際に効率的に記述できます。特に配列操作などに標準搭載されています。今回はjavascriptを例にメソッドチェーンの使い方を紹介します。

JavaScriptでの例

JavaScript のarrayオブジェクトは以下のようなメソッドをはじめから持っています。そのメソッドをメソッドチェーンで呼び出す例です。1つずつ変数に入れていかなくてもシンプルに記述できています。

JavaScript
let array = [
    { id: 1, name: 'Item 1', isActive: true, value: 10 },
    { id: 2, name: 'Item 2', isActive: false, value: 20 },
    { id: 3, name: 'Item 3', isActive: true, value: 30 },
    { id: 4, name: 'Item 4', isActive: false, value: 40 },
    { id: 5, name: 'Item 5', isActive: true, value: 50 }
];

// メソッドチェーンの実行例
let result = array
    .filter(item => item.isActive)   // isActiveがtrueのアイテムをフィルタリング
    .map(item => item.value)         // 各アイテムのvalueだけを取り出す
    .reduce((sum, value) => sum + value, 0); // valueを1つずつ加算して合計を計算する。0は初期値

console.log(result); // 90

console.log(array.filter(item => item.isActive)) /**
[
    { id: 1, name: 'Item 1', isActive: true, value: 10 },
    { id: 3, name: 'Item 3', isActive: true, value: 30 },
    { id: 5, name: 'Item 5', isActive: true, value: 50 }
]*/

console.log(array.map(item => item.value)) // [ 10, 20, 30, 40, 50 ]

メソッドチェーンの副作用

メソッドチェーンはシンプルに記述できる一方で副作用もあります。以下のようなコードを見てます。

JavaScript
let data = [
    { firstName: 'John', lastName: 'Doe', age: 25, isActive: true, pay: 100, gender: 'male' },
    { firstName: 'Jane', lastName: 'Smith', age: 30, isActive: false, pay: 200, gender: 'female' },
    { firstName: 'Tom', lastName: 'Johnson', age: 35, isActive: true, pay: 150, gender: 'male' },
    { firstName: 'Lucy', lastName: 'Brown', age: 19, isActive: true, pay: 250, gender: 'female' },
    { firstName: 'Emily', lastName: 'Davis', age: 40, isActive: true, pay: 300, gender: 'female' },
    { firstName: 'Daniel', lastName: 'Miller', age: 50, isActive: true, pay: 400, gender: 'male' },
    { firstName: 'Laura', lastName: 'Wilson', age: 22, isActive: true, pay: 500, gender: 'female' },
    { firstName: 'David', lastName: 'Moore', age: 18, isActive: true, pay: 50, gender: 'male' },
    { firstName: 'Mark', lastName: 'Taylor', age: 28, isActive: true, pay: 600, gender: 'male' },
    { firstName: 'Sophia', lastName: 'White', age: 33, isActive: true, pay: 700, gender: 'female' }
];
  

const tax = 0.10

let result = data
    .filter(item => item.gender == 'male' && item.age > 18)  // 男性で18歳以上
    .map(item => ({
        name: item.firstName + " " + item.lastName,// フルネーム作成
        pay: item.pay + (item.pay * 0.10)// taxを計算
    }))
    .sort((a, b) => b.pay - a.pay)// payの降順にソート
    .slice(0, 5)// 上位5つを取得
    .reduce((acc, current) => {
        let initials = current.name.split(" ").map(n => n[0]).join("");
        acc[initials] = current.pay;
        return acc;
    }, {});// 名前の頭文字をキーにしてpayをオブジェクトにまとめる

console.log(result); //{ MT: 660, DM: 440, TJ: 165, JD: 110 }

メソッドチェーンが長すぎるとかえって何をしているかわかりづらいです。

また一つのメソッドの計算結果がすぐ次のメソッドに渡されてしまうため計算途中のデータを追いかけにくいです。

どのメソッドでエラーが起きているのも特定しにくいですね。

まとめ

プログラミングには様々な書き方があります。

今回はjavasriptに標準搭載されているarrayオブジェクトを使ってメソッドチェーンを紹介しました。

メソッドチェーンはシンプルに記述できます。しかし便利さゆえの不具合が起きる可能性もあります。

この書き方をするとこういう風に最適化できるけど、こういった副作用がある。現在のケースに当てはめてバランスを取るにはどうすればいいだろう。
私は分析と発見を繰り返すプロセスがとても好きです。

以上、お疲れ様でした。

タイトルとURLをコピーしました