カリー化でコードがすっきり！よくある書き方との違いとメリットを解説

function add(a, b) {
  return a + b;
}
const result = add(2, 3); // 5

const add = a => b => a + b;
const result = add(2)(3); // 5

const multiply = (a, b, c) => a * b * c;

multiply(2, 3, 4); // 24

const multiply = a => b => c => a * b * c;

multiply(2)(3)(4); // 24

// 途中まで渡しておいて、あとから残りを渡すこともできる
const times2 = multiply(2);   // b => c => 2 * b * c
const times2And3 = times2(3); // c => 2 * 3 * c

times2And3(4); // 24

const add = (a, b) => a + b;

// a を 10 に固定した関数を作る(部分適用)
const add10 = b => add(10, b);

add10(5); // 15

const add = a => b => a + b;

// a を 10 に固定した関数(これも部分適用)
const add10 = add(10);

add10(5); // 15

function log(level, tag, message) {
  console.log(`[${level}] [${tag}] ${message}`);
}

log("INFO", "User", "ログインしました");
log("WARN", "User", "パスワード試行回数が多すぎます");

log("INFO", "User", "ログインしました");
log("INFO", "User", "プロフィールを更新しました");
log("INFO", "User", "ログアウトしました");

const log = level => tag => message => {
  console.log(`[${level}] [${tag}] ${message}`);
};

const infoLog = log("INFO");      // tag => message => ...
const infoUserLog = infoLog("User"); // message => ...

infoUserLog("ログインしました");
infoUserLog("プロフィールを更新しました");
infoUserLog("ログアウトしました");

// 2つの数を足す関数(カリー化)
const add = a => b => a + b;

add(1)(2); // 3

const calcPrice = taxRate => discount => price => {
  const taxed = price * (1 + taxRate);
  return Math.round(taxed - discount);
};

const calcWith10PercentTax = calcPrice(0.1);
const calcWith10PercentTaxAnd500Off = calcWith10PercentTax(500);

calcWith10PercentTaxAnd500Off(2000); // 税込み2200 - 500 = 1700

// 簡易バージョン(引数の数を f.length で取得)
const curry = f => {
  return function curried(...args) {
    if (args.length >= f.length) {
      return f(...args);
    } else {
      return (...nextArgs) => curried(...args, ...nextArgs);
    }
  };
};

const add = (a, b) => a + b;
const curriedAdd = curry(add);

curriedAdd(1)(2);   // 3
curriedAdd(1, 2);   // 3 (まとめて渡してもOK)
curriedAdd(1)(2, 3); // ここでは 1,2,3 が渡るので 3引数の add ではエラーになる仕様など、実装に応じて振る舞いが決まる

const calcPrice =
  (taxRate: number) =>
  (discount: number) =>
  (price: number): number => {
    const taxed = price * (1 + taxRate);
    return Math.round(taxed - discount);
  };

const calcWith10PercentTax = calcPrice(0.1); // (discount: number) => (price: number) => number

type Curry2<A, B, R> = (a: A) => (b: B) => R;

function curry2<A, B, R>(f: (a: A, b: B) => R): Curry2<A, B, R> {
  return (a: A) => (b: B) => f(a, b);
}

const add = (a: number, b: number) => a + b;
const curriedAdd = curry2(add);

const add10 = curriedAdd(10); // (b: number) => number
const result = add10(5);      // 15

type Curry3<A, B, C, R> = (a: A) => (b: B) => (c: C) => R;

// 配列の各要素に f を適用する高階関数
const map = (array, f) => array.map(f);

// 関数を返すが、カリー化ではない例
const createRange = (start, end) => () => {
  const result = [];
  for (let i = start; i <= end; i++) {
    result.push(i);
  }
  return result;
};

const map = f => array => array.map(f);

// 非カリー化
const request = (baseUrl, token, path) => {
  return fetch(`${baseUrl}${path}`, {
    headers: { Authorization: `Bearer ${token}` },
  });
};

// カリー化
const request = baseUrl => token => path =>
  fetch(`${baseUrl}${path}`, {
    headers: { Authorization: `Bearer ${token}` },
  });

const requestToApi = request("https://api.example.com");
const requestWithUserToken = requestToApi(userToken);

requestWithUserToken("/me");
requestWithUserToken("/orders");

const contains = (search: string) => (target: string) =>
  target.includes(search);

const containsError = contains("ERROR");
const containsWarn = contains("WARN");

containsError("INFO: ok");     // false
containsError("ERROR: fail");  // true

<button onClick={() => handleClick(userId, itemId)}>
  追加
</button>

const handleClick = userId => itemId => () => {
  // 実際の処理
};

<button onClick={handleClick(userId)(itemId)}>
  追加
</button>

// バリデーションルールを表す関数
const minLength =
  (min: number) =>
  (value: string): boolean =>
    value.length >= min;

const min3 = minLength(3);

expect(min3("ab")).toBe(false);
expect(min3("abc")).toBe(true);
expect(min3("abcd")).toBe(true);

// 悪い例: 意味のまとまりがないまま、なんでもかんでもカリー化
const f = a => b => c => d => e => /* ... */ ;

const users = [
  { id: 1, role: "admin" },
  { id: 2, role: "user" },
  { id: 3, role: "admin" },
];

const isAdmin = user => user.role === "admin";

const adminUsers = users.filter(isAdmin);

const hasRole = role => user => user.role === role;

const isAdmin = hasRole("admin");
const isUser = hasRole("user");

const adminUsers = users.filter(isAdmin);
const normalUsers = users.filter(isUser);

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

const request =
  (baseUrl: string) =>
  (method: HttpMethod) =>
  (path: string) =>
  (body?: unknown) => {
    return fetch(`${baseUrl}${path}`, {
      method,
      body: body ? JSON.stringify(body) : undefined,
      headers: { "Content-Type": "application/json" },
    });
  };

const api = request("https://api.example.com");

const get = api("GET");
const post = api("POST");

const getUser = (id: number) => get(`/users/${id}`)();
const createUser = (user: unknown) => post("/users")(user);

const minLength =
  (min: number) =>
  (value: string): boolean =>
    value.length >= min;

const maxLength =
  (max: number) =>
  (value: string): boolean =>
    value.length <= max;

const matches =
  (pattern: RegExp) =>
  (value: string): boolean =>
    pattern.test(value);

const usernameValidators = [
  minLength(3),
  maxLength(20),
  matches(/^[a-z0-9_]+$/),
];

const isValidUsername = (value: string) =>
  usernameValidators.every(validate => validate(value));

type LogLevel = "debug" | "info" | "warn" | "error";

const logger =
  (level: LogLevel) =>
  (tag: string) =>
  (...args: unknown[]) => {
    const prefix = `[${level.toUpperCase()}] [${tag}]`;
    console.log(prefix, ...args);
  };

const appInfo = logger("info")("App");
const userWarn = logger("warn")("User");
const httpError = logger("error")("HTTP");

appInfo("アプリを起動しました");
userWarn("不正な入力です", { value: "..." });
httpError("リクエスト失敗", { status: 500 });