JavaScript でデータを変換する処理を書いていると、ネストが深くなったり、中間変数が増えたりして、コードが読みにくくなることはありませんか？

Lodash のflowとflowRightを使えば、複数の関数を組み合わせてデータパイプラインを構築し、可読性の高いコードを実現できます。本記事では、これらのメソッドを使ったデータ処理の設計パターンと、実務で役立つベストプラクティスを詳しく解説していきますね。

背景

データパイプラインの必要性

現代の Web アプリケーション開発では、API レスポンスの加工、フォームデータの検証、UI への表示用データの整形など、データ変換処理が頻繁に発生します。これらの処理は複数のステップを経て行われることが多く、コードの可読性と保守性が課題となるでしょう。

従来の JavaScript では、データ変換を以下のような方法で実装してきました。

中間変数を使った逐次処理では、各ステップごとに変数を定義していくため、変数名の命名に悩み、スコープが広がる問題があります。メソッドチェーンは流れるような記述ができますが、配列以外のデータ型では使いにくいですね。ネストした関数呼び出しは中間変数を減らせますが、読みにくく、処理の順序が直感的ではありません。

以下の図は、従来の 3 つのアプローチを比較したものです。

mermaidCopy codeflowchart TB
    input["元データ"]

    subgraph approach1["方法1: 中間変数"]
        step1a["変数A = 処理1"]
        step1b["変数B = 処理2"]
        step1c["結果 = 処理3"]
        step1a --> step1b --> step1c
    end

    subgraph approach2["方法2: メソッドチェーン"]
        step2["data.処理1().処理2().処理3()"]
    end

    subgraph approach3["方法3: ネスト"]
        step3["処理3(処理2(処理1(data)))"]
    end

    input --> approach1
    input --> approach2
    input --> approach3

    approach1 --> prob1["× スコープ拡大"]
    approach2 --> prob2["× 型制約あり"]
    approach3 --> prob3["× 読みにくい"]

関数型プログラミングの台頭

近年、JavaScript の世界では関数型プログラミングの考え方が広く受け入れられるようになりました。イミュータブルなデータ操作、純粋関数の組み合わせ、宣言的な記述といった関数型の原則は、バグを減らし、テストしやすいコードを生み出します。

Lodash は、こうした関数型プログラミングの思想を取り入れた実用的なユーティリティライブラリとして、多くの開発者に支持されてきました。特にflowとflowRightは、関数合成（Function Composition）のパターンを簡潔に実現するための強力なツールです。

課題

複雑なデータ変換処理の可読性問題

実際の開発現場では、以下のような複雑なデータ変換が必要になることがあります。

typescriptCopy code// APIレスポンスの加工例（従来の方法）
function processUserData(apiResponse) {
  const users = apiResponse.data.users;
  const activeUsers = users.filter(
    (user) => user.status === 'active'
  );
  const sortedUsers = activeUsers.sort(
    (a, b) => b.score - a.score
  );
  const topUsers = sortedUsers.slice(0, 10);
  const formattedUsers = topUsers.map((user) => ({
    id: user.id,
    name: user.name,
    displayScore: `${user.score}点`,
  }));
  return formattedUsers;
}

このコードには以下の問題点があります。

中間変数の氾濫により、users、activeUsers、sortedUsers、topUsersと変数が増え続け、命名に一貫性がなくなりがちです。処理の流れが不明瞭で、各変数がどの処理の結果なのか追いにくく、変更時の影響範囲が分かりにくいでしょう。テストの難しさも課題で、各ステップを個別にテストしようとすると、関数を細かく分割する必要があります。

#	課題	具体的な問題	影響
1	中間変数の氾濫	変数名が増加し命名が困難	可読性低下、バグ混入リスク
2	処理フローの不明瞭さ	データの流れを追いにくい	メンテナンス性低下
3	テストの困難さ	ステップごとのテストが難しい	品質担保が不十分
4	再利用性の欠如	処理をモジュール化しにくい	コード重複が発生

ネストした関数呼び出しの問題

中間変数を避けようとすると、今度はネストが深くなります。

javascriptCopy code// ネストした関数呼び出しの例
const result = formatUsers(
  sliceTop(
    sortByScore(filterActive(extractUsers(apiResponse))),
    10
  )
);

このコードは、処理の順序が逆順になっており、実際の処理は内側から外側へ実行されるため、読む順序と実行順序が逆です。括弧の対応が分かりにくく、ネストが深いと対応する括弧を見失いやすくなりますね。中間結果の確認が困難で、デバッグ時に途中経過を見たい場合、大幅な書き換えが必要になってしまいます。

下図は、ネストした関数呼び出しの実行順序と読む順序の乖離を示しています。

mermaidCopy codeflowchart LR
    read_order["読む順序<br/>（外→内）"]
    exec_order["実行順序<br/>（内→外）"]

    read_order -.->|1| outer["formatUsers"]
    read_order -.->|2| mid1["sliceTop"]
    read_order -.->|3| mid2["sortByScore"]
    read_order -.->|4| mid3["filterActive"]
    read_order -.->|5| inner["extractUsers"]

    exec_order ==>|1| inner
    exec_order ==>|2| mid3
    exec_order ==>|3| mid2
    exec_order ==>|4| mid1
    exec_order ==>|5| outer

    style read_order fill:#ffcccc
    style exec_order fill:#ccffcc

解決策

Lodash flow によるパイプライン構築

flowは、複数の関数を左から右へ順番に実行する新しい関数を作成します。これにより、データ変換の流れを自然な順序で記述できるようになります。

以下はflowの基本的な使い方です。

javascriptCopy codeimport { flow } from 'lodash';

// 個別の関数を定義
const add5 = (n) => n + 5;
const multiply3 = (n) => n * 3;
const subtract2 = (n) => n - 2;

これらの関数を組み合わせてパイプラインを構築します。

javascriptCopy code// flowで関数を合成
const calculate = flow([
  add5, // 1. まず5を足す
  multiply3, // 2. 次に3倍する
  subtract2, // 3. 最後に2を引く
]);

// 実行
const result = calculate(10);
// 10 → 15 → 45 → 43
console.log(result); // 43

flowを使うことで、処理の順序が明確になり、左から右へ読むだけで処理の流れが分かります。関数の再利用が容易で、各ステップを独立した関数として定義できるため、別の場所でも使い回せますね。テストが簡単になり、各関数を個別にテストでき、パイプライン全体のテストも書きやすくなります。

flowRight による逆順パイプライン

flowRightはflowの逆で、右から左へ関数を実行します。数学の関数合成 (f ∘ g)(x) = f(g(x)) の順序に対応しています。

javascriptCopy codeimport { flowRight } from 'lodash';

// flowRightで関数を合成（右から左へ実行）
const calculateReverse = flowRight([
  subtract2, // 3. 最後に実行
  multiply3, // 2. 次に実行
  add5, // 1. 最初に実行
]);

const result = calculateReverse(10);
// 10 → 15 → 45 → 43
console.log(result); // 43（flowと同じ結果）

flowRightは、数学的な表記に慣れている場合や、既存のネストした関数呼び出しを置き換える場合に便利です。ただし、一般的にはflowの方が読みやすいため、特別な理由がない限りflowの使用を推奨します。

データパイプラインの設計パターン

実務では、以下のような設計パターンでパイプラインを構築すると効果的です。

ステップごとに純粋関数を作成することで、各関数は入力を受け取り、新しい値を返すだけで、副作用を持ちません。

javascriptCopy code// 純粋関数の例
const extractUsers = (response) => response.data.users;
const filterActive = (users) =>
  users.filter((u) => u.status === 'active');
const sortByScore = (users) =>
  [...users].sort((a, b) => b.score - a.score);

配列のコピーを作ってからソートすることで、元の配列を変更しない純粋関数になっています。

関数に明確な名前を付けることで、処理の内容が一目で分かるようにします。

javascriptCopy codeconst takeTop10 = (users) => users.slice(0, 10);
const formatForDisplay = (users) =>
  users.map((user) => ({
    id: user.id,
    name: user.name,
    displayScore: `${user.score}点`,
  }));

flow で組み合わせることで、読みやすいパイプラインが完成します。

javascriptCopy code// パイプラインの構築
const processUserData = flow([
  extractUsers, // 1. ユーザーデータを抽出
  filterActive, // 2. アクティブユーザーのみフィルタ
  sortByScore, // 3. スコア順にソート
  takeTop10, // 4. 上位10件を取得
  formatForDisplay, // 5. 表示用にフォーマット
]);

// 使用
const result = processUserData(apiResponse);

この設計により、各ステップが独立してテスト可能になり、処理の流れが宣言的で分かりやすくなります。関数の追加・削除・入れ替えが容易になるでしょう。

下図は、flow を使ったパイプラインのデータフローを示しています。

mermaidCopy codeflowchart LR
    input["APIレスポンス"]
    step1["extractUsers<br/>ユーザー抽出"]
    step2["filterActive<br/>アクティブ<br/>フィルタ"]
    step3["sortByScore<br/>スコア順<br/>ソート"]
    step4["takeTop10<br/>上位10件"]
    step5["formatForDisplay<br/>フォーマット"]
    output["表示用データ"]

    input ==> step1 ==> step2 ==> step3 ==> step4 ==> step5 ==> output

    style input fill:#e1f5ff
    style output fill:#ffe1e1
    style step1 fill:#f0f0f0
    style step2 fill:#f0f0f0
    style step3 fill:#f0f0f0
    style step4 fill:#f0f0f0
    style step5 fill:#f0f0f0

図で理解できる要点：

• データは左から右へ一方向に流れる
• 各ステップは独立した処理単位
• 入力と出力の関係が明確

具体例

ユーザーデータの処理パイプライン

EC サイトでユーザーの購入履歴を分析し、優良顧客を抽出するパイプラインを構築してみましょう。

まず、必要な Lodash 関数をインポートします。

typescriptCopy codeimport { flow, sumBy, groupBy, mapValues } from 'lodash';

次に、型定義を行います。TypeScript を使うことで、各ステップの入出力が明確になりますね。

typescriptCopy code// 型定義
interface Order {
  userId: string;
  amount: number;
  date: string;
  status: 'completed' | 'pending' | 'cancelled';
}

interface UserStats {
  userId: string;
  totalAmount: number;
  orderCount: number;
  averageAmount: number;
}

各処理ステップを純粋関数として定義していきます。

typescriptCopy code// ステップ1: 完了した注文のみを抽出
const filterCompletedOrders = (
  orders: Order[]
): Order[] => {
  return orders.filter(
    (order) => order.status === 'completed'
  );
};

typescriptCopy code// ステップ2: ユーザーIDごとにグループ化
const groupByUser = (
  orders: Order[]
): Record<string, Order[]> => {
  return groupBy(orders, 'userId');
};

typescriptCopy code// ステップ3: ユーザーごとの統計を計算
const calculateUserStats = (
  groupedOrders: Record<string, Order[]>
): UserStats[] => {
  return Object.entries(groupedOrders).map(
    ([userId, userOrders]) => {
      const totalAmount = sumBy(userOrders, 'amount');
      const orderCount = userOrders.length;
      return {
        userId,
        totalAmount,
        orderCount,
        averageAmount: totalAmount / orderCount,
      };
    }
  );
};

typescriptCopy code// ステップ4: 優良顧客をフィルタ（総額10万円以上）
const filterVIPCustomers = (
  stats: UserStats[]
): UserStats[] => {
  return stats.filter((stat) => stat.totalAmount >= 100000);
};

typescriptCopy code// ステップ5: 総購入額でソート
const sortByTotalAmount = (
  stats: UserStats[]
): UserStats[] => {
  return [...stats].sort(
    (a, b) => b.totalAmount - a.totalAmount
  );
};

これらの関数をflowで組み合わせてパイプラインを構築します。

typescriptCopy code// パイプラインの構築
const analyzeVIPCustomers = flow([
  filterCompletedOrders, // 1. 完了注文のみ
  groupByUser, // 2. ユーザーごとにグループ化
  calculateUserStats, // 3. 統計計算
  filterVIPCustomers, // 4. VIP顧客を抽出
  sortByTotalAmount, // 5. 金額順にソート
]);

実際に使用する例です。

typescriptCopy code// 使用例
const orders: Order[] = [
  {
    userId: 'user1',
    amount: 50000,
    date: '2024-01-15',
    status: 'completed',
  },
  {
    userId: 'user2',
    amount: 30000,
    date: '2024-01-20',
    status: 'completed',
  },
  {
    userId: 'user1',
    amount: 60000,
    date: '2024-02-10',
    status: 'completed',
  },
  {
    userId: 'user3',
    amount: 120000,
    date: '2024-02-15',
    status: 'completed',
  },
  {
    userId: 'user2',
    amount: 25000,
    date: '2024-03-01',
    status: 'cancelled',
  },
];

const vipCustomers = analyzeVIPCustomers(orders);
console.log(vipCustomers);
// [
//   { userId: 'user3', totalAmount: 120000, orderCount: 1, averageAmount: 120000 },
//   { userId: 'user1', totalAmount: 110000, orderCount: 2, averageAmount: 55000 }
// ]

フォームデータのバリデーションパイプライン

Web アプリケーションでよくあるフォームバリデーションも、パイプラインとして設計できます。

typescriptCopy code// フォームデータの型定義
interface FormData {
  email: string;
  password: string;
  age: number;
  terms: boolean;
}

interface ValidationResult {
  isValid: boolean;
  errors: string[];
  data?: FormData;
}

各バリデーション関数を作成します。エラーがある場合はerrors配列に追加していきます。

typescriptCopy code// バリデーション関数の定義
const validateEmail = (
  result: ValidationResult
): ValidationResult => {
  if (!result.data) return result;

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(result.data.email)) {
    return {
      ...result,
      isValid: false,
      errors: [
        ...result.errors,
        'メールアドレスの形式が正しくありません',
      ],
    };
  }
  return result;
};

typescriptCopy codeconst validatePassword = (
  result: ValidationResult
): ValidationResult => {
  if (!result.data) return result;

  // 8文字以上、英数字を含む
  const hasMinLength = result.data.password.length >= 8;
  const hasNumber = /\d/.test(result.data.password);
  const hasLetter = /[a-zA-Z]/.test(result.data.password);

  if (!hasMinLength || !hasNumber || !hasLetter) {
    return {
      ...result,
      isValid: false,
      errors: [
        ...result.errors,
        'パスワードは8文字以上で英数字を含む必要があります',
      ],
    };
  }
  return result;
};

typescriptCopy codeconst validateAge = (
  result: ValidationResult
): ValidationResult => {
  if (!result.data) return result;

  if (result.data.age < 18 || result.data.age > 120) {
    return {
      ...result,
      isValid: false,
      errors: [
        ...result.errors,
        '年齢は18歳以上120歳以下で入力してください',
      ],
    };
  }
  return result;
};

typescriptCopy codeconst validateTerms = (
  result: ValidationResult
): ValidationResult => {
  if (!result.data) return result;

  if (!result.data.terms) {
    return {
      ...result,
      isValid: false,
      errors: [
        ...result.errors,
        '利用規約に同意する必要があります',
      ],
    };
  }
  return result;
};

初期状態を作成する関数とパイプラインを構築します。

typescriptCopy code// 初期状態を作成
const createInitialResult = (
  data: FormData
): ValidationResult => ({
  isValid: true,
  errors: [],
  data,
});

// バリデーションパイプラインの構築
const validateForm = flow([
  createInitialResult, // 1. 初期状態を作成
  validateEmail, // 2. メールアドレス検証
  validatePassword, // 3. パスワード検証
  validateAge, // 4. 年齢検証
  validateTerms, // 5. 利用規約検証
]);

実際の使用例です。

typescriptCopy code// 使用例
const formData: FormData = {
  email: 'test@example.com',
  password: 'pass123',
  age: 25,
  terms: true,
};

const validationResult = validateForm(formData);

if (validationResult.isValid) {
  console.log('バリデーション成功');
} else {
  console.log('エラー:', validationResult.errors);
  // エラー: ['パスワードは8文字以上で英数字を含む必要があります']
}

下図は、バリデーションパイプラインの処理フローを表しています。

mermaidCopy codestateDiagram-v2
    [*] --> InitialState: フォームデータ入力
    InitialState --> EmailCheck: createInitialResult
    EmailCheck --> PasswordCheck: validateEmail
    PasswordCheck --> AgeCheck: validatePassword
    AgeCheck --> TermsCheck: validateAge
    TermsCheck --> ValidationComplete: validateTerms

    EmailCheck --> ErrorState: エラー検出
    PasswordCheck --> ErrorState: エラー検出
    AgeCheck --> ErrorState: エラー検出
    TermsCheck --> ErrorState: エラー検出

    ValidationComplete --> [*]: 検証完了
    ErrorState --> [*]: エラーあり

    note right of InitialState
        isValid: true
        errors: []
    end note

    note right of ErrorState
        isValid: false
        errors: [エラーメッセージ]
    end note

図で理解できる要点：

• 各検証ステップは順次実行される
• エラーが発生しても処理は継続し、すべてのエラーを収集
• 最終的な結果として検証状態とエラーリストを返却

エラーハンドリングを含むパイプライン

実務では、各ステップでエラーが発生する可能性を考慮する必要があります。

typescriptCopy code// エラーハンドリング用の型定義
type Result<T, E = Error> =
  | { success: true; value: T }
  | { success: false; error: E };

typescriptCopy code// 安全な関数ラッパー
const safeFunction = <T, R>(
  fn: (input: T) => R,
  errorMessage: string
) => {
  return (input: T): Result<R> => {
    try {
      const value = fn(input);
      return { success: true, value };
    } catch (error) {
      return {
        success: false,
        error: new Error(`${errorMessage}: ${error}`),
      };
    }
  };
};

Result 型を扱う関数を連鎖させるためのヘルパーを作成します。

typescriptCopy code// Result型を扱うflowのラッパー
const safeFlow = <T>(
  steps: Array<(input: any) => Result<any>>
) => {
  return (initialValue: T): Result<any> => {
    let current: Result<any> = {
      success: true,
      value: initialValue,
    };

    for (const step of steps) {
      if (!current.success) {
        return current; // エラーが発生したら即座に返す
      }
      current = step(current.value);
    }

    return current;
  };
};

安全なパイプラインの使用例です。

typescriptCopy code// 使用例
const parseJSON = safeFunction(
  (str: string) => JSON.parse(str),
  'JSON解析エラー'
);

const extractData = safeFunction(
  (obj: any) => obj.data.users,
  'データ抽出エラー'
);

const processUsers = safeFlow([parseJSON, extractData]);

const result = processUsers('{"data":{"users":[...]}}');

if (result.success) {
  console.log('成功:', result.value);
} else {
  console.error('エラー:', result.error.message);
  // エラーログの送信、ユーザーへの通知など
}

パフォーマンス最適化のテクニック

大量のデータを扱う場合、パイプラインのパフォーマンスが重要になります。

typescriptCopy codeimport { flow, chunk } from 'lodash';

// 大量データを分割処理
const processBatch = <T, R>(
  batchSize: number,
  processor: (batch: T[]) => R[]
) => {
  return (items: T[]): R[] => {
    const batches = chunk(items, batchSize);
    return batches.flatMap(processor);
  };
};

typescriptCopy code// メモ化による最適化
const memoize = <T, R>(
  fn: (input: T) => R
): ((input: T) => R) => {
  const cache = new Map<T, R>();

  return (input: T): R => {
    if (cache.has(input)) {
      return cache.get(input)!;
    }
    const result = fn(input);
    cache.set(input, result);
    return result;
  };
};

// 使用例
const expensiveCalculation = memoize((n: number) => {
  // 重い計算処理
  return n * n * n;
});

パフォーマンスを意識したパイプラインの例です。

typescriptCopy code// パフォーマンスを考慮したパイプライン
const processLargeDataset = flow([
  filterCompletedOrders,
  processBatch(1000, groupByUser), // 1000件ずつ処理
  calculateUserStats,
  filterVIPCustomers,
  sortByTotalAmount,
]);

まとめ

Lodash のflowとflowRightを使ったデータパイプライン設計について解説してきました。これらのメソッドを活用することで、複雑なデータ変換処理を可読性高く、保守しやすい形で実装できます。

主要なポイントは以下の通りです。

flowを使うことで、処理の流れが明確になり、左から右へ読むだけでデータ変換の全体像が把握できます。各ステップを純粋関数として分離することで、テストが容易になり、再利用性が向上するでしょう。型定義と組み合わせることで、TypeScript の型チェックの恩恵を最大限に受けられますね。

実務で活用する際は、適切な粒度で関数を分割し、各関数は単一の責任を持つようにしましょう。エラーハンドリングを適切に行い、Result 型などを使って安全性を高めることが重要です。パフォーマンスを考慮し、大量データの場合はバッチ処理やメモ化を検討してください。

データパイプラインの設計は、関数型プログラミングの基本的なパターンです。この考え方を身につけることで、より宣言的で理解しやすいコードを書けるようになるでしょう。

ぜひ、既存のプロジェクトで中間変数が多用されている箇所や、ネストが深い処理を見つけたら、flowを使ったリファクタリングを試してみてください。コードの可読性が大きく向上することを実感できるはずです。

関連リンク

• Lodash 公式ドキュメント - flow
• Lodash 公式ドキュメント - flowRight
• 関数合成（Function Composition）について - MDN
• TypeScript 公式サイト
• 関数型プログラミングの基礎