コードレビューの現場から：なぜ「その関数宣言」はバグを生むのか
コードレビューをしていて、いまだに次のようなコードを見かけるたびに私は頭を抱えたくなる。
// レビュー対象のコード
initializeDashboard();
const initializeDashboard = function() {
// ダッシュボードの初期化処理
console.log(‘Initialized’);
};
「あれ、このコードはなぜ動かないんですか？ `var` なら動くのに、`const` にしたら `TypeError: initializeDashboard is not a function` や `ReferenceError` になるんです」
もし君のチームメンバーからこんな質問が出たら、あるいは君自身がこの挙動の理由を「そういう仕様だから」とフワッと理解しているなら、今回の解説はまさに君のためのものだ。
ネット上の浅い入門書には「関数宣言は巻き上げられるが、関数式は巻き上げられない」と呪文のように書かれている。だが、V8エンジンやJavaScriptパーサーが頭の中でどう動いているかを理解していなければ、複雑な非同期処理やモジュールバンドル環境で足元をすくわれる。
今回は、AST（抽象構文木）の解析フェーズからランタイムのメモリ空間に至るまでの全貌を解き明かし、実務で絶対にバグを生まない堅牢な関数定義のプラクティスを叩き込む。
—
1. 脳内トレースの限界：ASTから読み解く「巻き上げ」の正体
まず大前提を訂正しよう。JavaScriptにおいて、「コードが物理的に上に移動する（Hoisting）」という現象は一切起きていない。
エンジンが実行ファイルを読み込む時、コードは一瞬で実行されるわけではない。大きく分けて以下の2つのフェーズを踏む。
1. 解析・生成フェーズ（Creation Phase / 構文解析）: コードをAST（抽象構文木）へ変換し、スコープ（Lexical Environment）を構築。変数や関数の識別子をメモリに登録する。
2. 実行フェーズ（Execution Phase）: 上から順にコードを評価していく。
この「解析フェーズ」において、エンジンがどのように識別子を処理するかで、関数宣言と関数式の運命が決定的に分かれる。
関数宣言（Function Declaration）のAST解析
関数宣言 `function foo() {}` に出会ったパーサーは、「識別子名」と「関数オブジェクトそのもの」を紐付けて、現在のLexical Environmentの環境レコードに直接書き込む。
だからこそ、作成フェーズの時点でポインタが実体を指しているため、実行フェーズのどこから（定義の行より上から）呼び出しても実行できるのだ。
関数式（Function Expression）のAST解析
一方、`const f = function() {}` やアロー関数 `const f = () => {}` はどうか。
ここで主役は関数ではなく、変数宣言（`const` / `let` / `var`）である。
`const` や `let` で宣言された変数は、解析フェーズにおいて「宣言の登録」は行われるものの、初期化（Initialization）は行われない。これが、いわゆる Temporal Dead Zone (TDZ: 一時的死域) の発生源だ。
識別子はメモリ上に確保されるが、値（この場合は関数オブジェクト）が代入されるのは、実行フェーズでその行に到達した瞬間のみ。したがって、到達する前にアクセスしようものなら、JavaScriptエンジンは容赦なくエラーを叩きつける。
—
2. ランタイムの裏側：V8エンジンのメモリ空間とTDZ
V8エンジンのヒープメモリ上での振る舞いをイメージしてみよう。
// 【ケースA】関数宣言：安全地帯
greet(); // “Hello” が出力される
function greet() {
console.log(‘Hello’);
}
- 解析フェーズ: `greet` という名前の関数オブジェクトがメモリ上に即座に構築される。
- 実行フェーズ: どの行からでも `greet` を引ける。
// 【ケースB】関数式 (const)：TDZの罠
run(); // TypeError または ReferenceError
const run = () => {
console.log(‘Running…’);
};
- 解析フェーズ: `run` という変数名がスコープに登録されるが、値は未初期化（`
`）。この状態の領域が TDZ。 - 実行フェーズ: 宣言行に到達する前に `run()` を実行しようとすると、TDZ内でのアクセスとみなされ、エンジンが実行をブロックする。
ここで `const` を `var` に変えた場合はどうなるか？
`var` の場合は初期化時に `undefined` が代入されるため、エラーではなく `TypeError: run is not a function`（`undefined` を関数として呼び出そうとしたエラー）になる。どちらにせよバグであることに変わりはない。
—
3. プロダクションコードにおける実践的設計パターン
テクニカルリードとして、私はプロジェクトのコードベースにおいて「関数宣言」と「関数式（アロー関数）」の使い分けに明確なルールラインを設けている。
泥臭いハックや、巻き上げの挙動に依存したコードは、チームの認知負荷を上げ、保守性を致命的に低下させる。以下の原則をチームの共通認識としてほしい。
原則1: 原則として「const + アロー関数」で統一し、上から順に記述する
モダンなフロントエンド開発（React, Vue, Node.js）において、グローバルスコープやモジュールスコープの関数は、すべて `const` による関数式で定義し、必ず使用する前に記述するべきだ。
これにより、コードの依存関係が上から下へと自然に流れ、可読性が劇的に向上する。
// ———————————————————————-
// 良い設計例：依存関係が上から下へ流れる（クリーンアーキテクチャの精神）
// ———————————————————————-
/
- ユーザーのバリデーションを行う
- @param {Object} user
- @returns {boolean}
/
const validateUser = (user) => {
return user !== null && typeof user.id === ‘string’;
};
/
- APIから取得したユーザーデータを処理してレンダリング用データを返す
- @param {Object} rawData
- @returns {Object}
/
const processUserData = (rawData) => {
if (!validateUser(rawData)) {
throw new Error(‘Invalid user data structure’);
}
return {
id: rawData.id,
displayName: rawData.toUpperCaseName ? rawData.name.toUpperCase() : rawData.name,
updatedAt: new Date().toISOString()
};
};
// メインの実行エントリポイント
export const initializeApp = (userData) => {
const processed = processUserData(userData);
console.log(‘Processed:’, processed);
};
原則2: 再帰処理や、意図的な巻き上げが必要な場合の例外
唯一、関数宣言（`function` キーワード）のメリットが生きるのは、「ファイル内のどこからでも参照したい純粋なヘルパー関数群」や、「相互再帰（Mutually Recursive）を行う複雑なアルゴリズム」を記述する場合だ。
しかし、これもモジュール化が進んだ現代のフロントエンドにおいては、別ファイル（Utils層）に切り出すべきであり、同一ファイル内で巻き上げに依存しなければならないケースは極めて稀である。
—
4. パフォーマンスとメモリ効率の観点
「関数宣言と関数式で、メモリ効率やV8の最適化（JITコンパイル）に差はあるのか？」という疑問を持つシニアエンジニアもいるだろう。
結論から言えば、ランタイムの実行速度において、両者に本質的な差はない。V8のJITコンパイラ（Sparkplug / Maglev / TurboFan）は、どちらの形式であってもインラインキャッシュ（Inline Caches）を効かせ、適切に最適化コードへコンパイルする。
ただし、メモリとスコープチェーンの観点では注意が必要だ。
関数式としてアロー関数を使う場合、`this` や `arguments` オブジェクトを新しくバインドしないという特性がある。これが不要なコンテキスト生成を防ぎ、メモリ消費の抑制とGC（ガベージコレクション）の負荷軽減に寄与する。
特に、配列のメソッドチェーン内で関数をその場で定義する場合など：
// 非効率かつ冗長な書き方（function式）
const activeUsers = users.filter(function(user) {
return user.isActive; // このスコープの this や arguments が生成・保持される
});
// 高効率で美しい書き方（アロー関数式）
const activeUsers = users.filter(user => user.isActive);
V8の内部挙動を知る者であれば、アロー関数によるレキシカルな `this` の保持が、余計なコンテキスト生成コストをいかに削減しているかが即座に理解できるはずだ。
—
5. チーフアーキテクトからの提言
JavaScriptの「巻き上げ」という挙動は、言語の歴史的背景が生んだ仕様の産物であり、初心者を迷わせる悪習の温床になりやすい。
関数宣言の巻き上げに依存したコードを書くことは、「本を読むときに、結末のページを最初に読んでいるようなもの」であり、コードのリーダビリティを損なう。
1. すべての関数・変数は `const`（必要なら `let`）を使い、使用する前に宣言・定義する。
2. AST解析とTDZのメカニズムを脳内にインプットし、巻き上げに依存したコードを書かない。
3. アロー関数を活用して、不要なコンテキスト生成を抑え、V8のメモリ効率とコードの堅牢性を最大化する。
この規律をチーム全体に徹底できたとき、君たちのプロダクトから「謎の `undefined` エラー」や「初期化順序に起因するバグ」は完全に駆逐される。
さあ、今日のコードレビューから、この知見をさっそく役立ててほしい。