概要
関数とは「処理のまとまり」ではない。
それは**“意味の定義、責務の抽出、再利用の契約”**である。
JavaScriptは柔軟な言語であるがゆえに、関数が無秩序になりやすい。
この柔軟さを制御し、壊れず・読めて・使える関数を設計するには戦略が必要である。
本稿では、副作用の管理、引数と戻り値の構造、関数粒度の分離、テスト性と再利用性の担保まで、関数設計の実践原則を体系的に解説する。
1. 副作用のない「純粋関数」が基本原則
function sum(a, b) {
return a + b;
}
- ✅ 副作用なし
- ✅ 同じ入力 → 必ず同じ出力
- ✅ テストが容易 / 予測可能
2. 副作用は外部で注入・分離する
function saveData(data, saveFn) {
return saveFn(data);
}
- ✅ 副作用（保存・API通信など）は関数の外から依存注入
- ✅ 副作用 = I/O / DOM操作 / ネットワーク / 日付取得 / Math.random
3. 引数設計は「構造と意味」で整理する
❌ 曖昧な引数列
createUser('Toto', 25, true);
✅ 意図が明確なオブジェクト引数
createUser({ name: 'Toto', age: 25, isActive: true });
- ✅ 順番のバグ防止 / 意図の明示 / 拡張性あり
4. 戻り値は構造で返し、例外は明示的に扱う
function parseJSON(str) {
try {
return { ok: true, data: JSON.parse(str) };
} catch (e) {
return { ok: false, error: e };
}
}
- ✅ 失敗も含めて戻り値の構造に含める
- ✅ 例外をthrowせず、UI層で明示的に分岐可能
5. 高階関数で共通処理を抽象化
function withLogging(fn) {
return (...args) => {
console.log('call', fn.name);
return fn(...args);
};
}
const loggedSum = withLogging(sum);
- ✅ 関数を関数として扱う設計（ファーストクラス関数）
- ✅ ロジックの共通化 + クロスカッティング処理に有効
6. 関数粒度と命名設計
- ✅ 関数は**「1つの責任」だけを持つ**
- ✅ 長くなる場合は内部処理を小関数に分割
- ✅ 命名は「動詞 + 意図」
fetchUser → getUserDataFromAPI
calculate → calculateFinalScore
設計判断フロー
① この関数に副作用はあるか？ → 分離 or 注入可能にする
② 同じ入力で出力が変わるか？ → 純粋性を見直す
③ 引数が多すぎないか？ → オブジェクト化して構造化
④ 失敗時の戻り値が曖昧では？ → エラー構造を含める
⑤ 関数名に責務が表れているか？ → 動詞 + 意図ベースに再設計
よくあるミスと対策
❌ 関数内でDOM操作・API呼び出し・ロジックを全部含めている
→ ✅ 副作用・ロジック・表示を分離し、責務を限定する
❌ 引数の順番を間違えてバグ発生
→ ✅ オブジェクト引数に変えて安全性と意図を明示
❌ テストで毎回APIを叩いてしまう
→ ✅ API呼び出しは引数として注入可能にしてテスト分離
結語
関数とは「やること」ではない。
それは**“何を渡せば何が返ってくるか”を明示する契約構造**である。
- 副作用は外に出し
- 引数と戻り値に意味を持たせ
- 小さく、予測可能に、再利用可能に
JavaScriptにおける関数設計とは、
“拡張と修正に強く、テスト可能で、安全な構造の最小単位”である。