fix(Trees): optimize TS BFS performance and restructure documentation to 5-section format

Author: myoshi2891

Algorithm/BinaryTree/claude sonnet 4.6 extended/102. Binary Tree Level Order Traversal/Binary_Tree_Level_Order_Traversal_Typescript.md

@@ -5,18 +5,24 @@
 
 ---
 
-# LeetCode 102 · Binary Tree Level Order Traversal
+# LeetCode 102 · Binary Tree Level Order Traversal — TypeScript版
 
 ---
 
-## 1. 問題の分析
+## 目次（Table of Contents）
 
-> 💡 **この問題は一言で言うと「木を上から下へ、同じ高さのノードをまとめてグループ化する問題」です。**
-> 木の「同じ深さ（階層）」にあるすべての値をひとつの配列にまとめ、その配列を深さ順に並べた2次元配列を返します。
+- [1. Overview](#overview)
+- [2. Algorithm](#algorithm)
+- [3. Complexity](#complexity)
+- [4. Implementation](#implementation)
+- [5. Optimization](#optimization)
 
 ---
 
-### 🌳 問題が要求していること（視覚的確認）
+<h2 id="overview">1. Overview</h2>
+
+> 💡 **この問題は一言で言うと「木を上から下へ、同じ高さのノードをまとめてグループ化する問題」です。**
+> 木の「同じ深さ（階層）」にあるすべての値をひとつの配列にまとめ、その配列を深さ順に並べた2次元配列を返します。
 
 ```
         3          ← 深さ0: [3]
@@ -28,24 +34,11 @@
 出力: [[3], [9, 20], [15, 7]]
 ```
 
----
-
-### 競技プログラミング視点での分析
-
-- ノード数は最大 2000 なので、O(n) のアルゴリズムで十分に余裕がある
-- 各ノードを **ちょうど1回だけ** 訪問する手法が理想
-- 追加メモリは出力配列のみに抑えたい
-
-### 業務開発視点での分析
+### 競技プログラミング・業務開発視点
 
-- `TreeNode | null` という **Union型（＝複数の型のうちどれかを表す型）** を安全に扱う必要がある
-- `null` チェックを怠ると実行時エラーになるため、型ガード（＝実行時に型を絞り込む条件分岐）が必須
-- 結果配列はイミュータブル（＝変更不可）に構築して副作用を防ぐ
-
-### TypeScript特有の考慮点
-
-- `TreeNode | null` の null 安全性を TypeScript のコンパイラに保証させる
-- キュー（後述）の要素型を明示することで、取り出した要素が必ず `TreeNode` 型であると保証できる
+- **ノード数**: 最大 2000 なので O(n) が必須。
+- **型安全性**: `TreeNode | null` という **Union型** を安全に扱う必要がある。
+- **JSの特性**: `Array.shift()` は $O(n)$ のため、キューとして使う場合はポインタ管理（$O(1)$）を行う必要がある。
 
 > 📖 **このセクションで登場した用語**
 >
@@ -55,237 +48,99 @@
 
 ---
 
-## 2. アルゴリズムアプローチ比較
+<h2 id="algorithm">2. Algorithm</h2>
 
-> 💡 同じ問題でも解き方は複数あります。「速さ（時間計算量）」と「メモリの使い方（空間計算量）」を比べて最適なものを選びます。
+### アプローチ比較
 
-| アプローチ                 | 時間計算量 | 空間計算量 | TS実装コスト | 型安全性 | 可読性 | 備考                             |
-| -------------------------- | ---------- | ---------- | ------------ | -------- | ------ | -------------------------------- |
-| **BFS（幅優先探索）**      | O(n)       | O(n)       | 低           | 高       | 高     | ✅ 今回の選択                    |
-| DFS（深さ優先探索）        | O(n)       | O(n)       | 中           | 高       | 中     | 再帰でも実装可能だが直感的でない |
-| 総当たり（各深さでループ） | O(n²)      | O(n)       | 高           | 中       | 低     | 非推奨                           |
+| アプローチ                 | 時間計算量 | 空間計算量 | 備考                             |
+| -------------------------- | ---------- | ---------- | -------------------------------- |
+| **BFS（幅優先探索）**      | O(n)       | O(n)       | ✅ 今回の選択                    |
+| DFS（深さ優先探索）        | O(n)       | O(n)       | 再帰でも実装可能だが直感的でない |
+| 総当たり（各深さでループ） | O(n²)      | O(n)       | 非推奨                           |
 
-> 💡 **BFS（幅優先探索）を例え話で理解する**
-> BFS は「同じ階のすべての部屋を開けてから、次の階に進むエレベーター」のようなものです。
-> 木でいえば「同じ深さのノードをすべて処理してから、次の深さへ進む」動き方です。
-> これを実現するのが **キュー（＝先に入れたものを先に出す「行列」のデータ構造）** です。
-> 📖 **このセクションで登場した用語**
->
-> - **BFS（幅優先探索）**：グラフや木を「横方向に広がりながら」探索する方法
-> - **DFS（深さ優先探索）**：グラフや木を「縦方向に深く潜りながら」探索する方法
-> - **キュー**：先に入れたものを先に出す（FIFO: First In, First Out）データ構造。銀行の窓口の行列と同じ
+### BFS（幅優先探索）の仕組み
 
----
+BFS は「同じ階のすべての部屋を開けてから、次の階に進むエレベーター」のようなものです。
+これを実現するのが **キュー（FIFO: First In, First Out）** です。
 
-## 3. 選択したアルゴリズムと理由
+- **核心テクニック**: キューから「今の階のノード数分だけ」取り出すことで、自然に「1階ぶんのグループ」が作れる。
+- **TypeScript特有の工夫**: キューの型を `TreeNode[]` と明示することで、取り出した要素が必ず `TreeNode` 型になりコンパイル時に安全を保証。
 
-- **選択したアプローチ**: **BFS（幅優先探索）+ キュー**
-- **理由**:
-    - **DFS を選ばなかった理由**: DFS は縦に深く潜るため、「同じ階のノードをまとめる」処理と相性が悪く、深さ情報を別途管理する手間が増える
-    - **総当たりを選ばなかった理由**: ノードを重複して走査するため O(n²) になり、ノード数 2000 でも無駄が大きい
-    - **BFS を選んだ理由**: キューから「今の階のノード数分だけ」取り出すことで、自然に「1階ぶんのグループ」が作れる
+---
 
-- **TypeScript特有の最適化ポイント**:
-    - キューの型を `TreeNode[]` と明示することで、取り出した要素が必ず `TreeNode` 型になりコンパイル時に安全を保証
-    - `node.left` / `node.right` は `TreeNode | null` なので、`!== null` チェックで null を排除してからキューに追加する
+<h2 id="complexity">3. Complexity</h2>
 
-> 📖 **このセクションで登場した用語**
->
-> - **コンパイル時保証**：TypeScript がコードを変換する段階でエラーを検出すること。実行前にバグを防げる
-> - **FIFO**：First In, First Out。最初に入れたものを最初に取り出す順序
+| 項目           | 値   | 理由                                                                                         |
+| -------------- | ---- | -------------------------------------------------------------------------------------------- |
+| **時間計算量** | O(n) | 各ノードをキューへの追加・取り出しでちょうど1回ずつ処理するため（ポインタ管理で各操作 O(1)） |
+| **空間計算量** | O(n) | キューに最大で「木の最も広い階のノード数」が入る。最悪ケースは全ノード数 n に比例            |
 
 ---
 
-## 4. 実装コード
+<h2 id="implementation">4. Implementation</h2>
 
-> 💡 **コードの大まかな骨格**（コードを読む前にこの構造を頭に入れてください）
->
-> 1. `root` が `null` なら即座に空配列 `[]` を返す
-> 2. `root` をキューに入れて探索開始
-> 3. キューが空になるまで繰り返す
->     - 今の階のノード数（`levelSize`）を記録する
->     - ちょうど `levelSize` 個のノードを取り出し、その値を今の階の配列に追加
->     - 取り出したノードの左・右の子があればキューに追加（次の階の準備）
-> 4. 各階の配列を `result` に追加して返す
+### 業務開発版（型安全・パフォーマンス最適化）
 
 ```typescript
-// Runtime 2 ms
-// Beats 39.72%
-// Memory 60.20 MB
-// Beats 57.23%
-
 function levelOrder(root: TreeNode | null): number[][] {
-    // ─────────────────────────────────────────────────────────
-    // ① root が null（木が空）の場合は空配列を返す
-    //    後続でキューにアクセスするため、ここで弾かないと
-    //    null に対して .left などへアクセスしてクラッシュする
-    // ─────────────────────────────────────────────────────────
     if (root === null) return [];
 
-    // ─────────────────────────────────────────────────────────
-    // ② 結果を格納する2次元配列を用意する
-    //    result[0] = 深さ0のノード値の配列、
-    //    result[1] = 深さ1のノード値の配列、... となる
-    // ─────────────────────────────────────────────────────────
     const result: number[][] = [];
-
-    // ─────────────────────────────────────────────────────────
-    // ③ キュー（行列）を用意し、root を最初の要素として入れる
-    //    型を TreeNode[] と明示することで、取り出した要素が
-    //    null でないことをコンパイラが保証してくれる
-    //    （null をキューに入れないよう、後続の追加時にチェックする）
-    // ─────────────────────────────────────────────────────────
     const queue: TreeNode[] = [root];
+    let head = 0; // shift() の O(n) を避けるための先頭ポインタ
 
-    // ─────────────────────────────────────────────────────────
-    // ④ キューが空になるまでループ（= 全ノードを処理し終えるまで）
-    // ─────────────────────────────────────────────────────────
-    while (queue.length > 0) {
+    while (head < queue.length) {
         // ── 今この瞬間のキューの長さ = 「現在の階のノード数」 ──
-        // この値を先に固定するのが BFS の核心。
-        // ループ中に queue.length は変化するため、
-        // 先に変数に保存しておかないと「今の階」の範囲がズレる。
-        const levelSize: number = queue.length;
-
-        // 今の階のノード値を格納する一時配列
+        // 未処理分（queue.length - head）を変数に保存して固定する。
+        const levelSize: number = queue.length - head;
         const levelValues: number[] = [];
 
-        // 今の階のノードを「levelSize 個分」だけ取り出す
         for (let i = 0; i < levelSize; i++) {
-            // shift() でキューの先頭からノードを取り出す（FIFO）
-            // queue の要素は TreeNode[] なので null にならない（③で保証）
-            const node = queue.shift()!; // ! は「nullでないことをここで断言」
-
-            // 取り出したノードの値を今の階の配列に追加
+            // head インデックスでポインタを進めることで O(1) で取り出す
+            const node = queue[head++]!;
             levelValues.push(node.val);
 
-            // ── 次の階の準備：子ノードをキューの末尾に追加する ──
-            // null でない場合だけ追加する（null をキューに入れないルール）
-            if (node.left !== null) {
-                queue.push(node.left);
-            }
-            if (node.right !== null) {
-                queue.push(node.right);
-            }
+            // 次の階の準備
+            if (node.left !== null) queue.push(node.left);
+            if (node.right !== null) queue.push(node.right);
         }
 
-        // 今の階分の値配列を結果に追加
         result.push(levelValues);
     }
 
     return result;
 }
 ```
 
----
-
-### 🔍 動作トレース（具体的な入力例での変数変化）
-
-**入力**: `root = [3, 9, 20, null, null, 15, 7]`（ツリー構造は下記）
-
-```
-    3
-   / \
-  9  20
-     / \
-    15   7
-```
+### 🔍 動作トレース（`root = [3, 9, 20, null, null, 15, 7]`）
 
 ```
-初期状態:
-  queue   = [Node(3)]
-  result  = []
-
 ━━━━━━━━━━ while ループ 1回目（深さ0） ━━━━━━━━━━
-  levelSize  = 1          ← 今の階のノード数は1
-  levelValues = []
-
-  i=0: node = queue.shift() → Node(3)  queue = []
-       levelValues.push(3)  → [3]
-       node.left  = Node(9)  → queue.push(Node(9))   queue = [Node(9)]
-       node.right = Node(20) → queue.push(Node(20))  queue = [Node(9), Node(20)]
-
-  result.push([3]) → result = [[3]]
+  levelSize  = 1          ← queue.length(1) - head(0) = 1
+  i=0: node = queue[head++] → Node(3)   queue = [3], head = 1
+       node.left = 9, node.right = 20 を queue に追加
+  result.push([3])
 
 ━━━━━━━━━━ while ループ 2回目（深さ1） ━━━━━━━━━━
-  levelSize  = 2          ← 今の階のノード数は2
-  levelValues = []
-
-  i=0: node = queue.shift() → Node(9)   queue = [Node(20)]
-       levelValues.push(9)  → [9]
-       node.left  = null → スキップ
-       node.right = null → スキップ
-
-  i=1: node = queue.shift() → Node(20)  queue = []
-       levelValues.push(20) → [9, 20]
-       node.left  = Node(15) → queue.push(Node(15))  queue = [Node(15)]
-       node.right = Node(7)  → queue.push(Node(7))   queue = [Node(15), Node(7)]
-
-  result.push([9,20]) → result = [[3], [9, 20]]
-
-━━━━━━━━━━ while ループ 3回目（深さ2） ━━━━━━━━━━
-  levelSize  = 2          ← 今の階のノード数は2
-  levelValues = []
-
-  i=0: node = queue.shift() → Node(15)  queue = [Node(7)]
-       levelValues.push(15) → [15]
-       node.left  = null → スキップ
-       node.right = null → スキップ
-
-  i=1: node = queue.shift() → Node(7)   queue = []
-       levelValues.push(7)  → [15, 7]
-       node.left  = null → スキップ
-       node.right = null → スキップ
-
-  result.push([15,7]) → result = [[3], [9, 20], [15, 7]]
-
-━━━━━━━━━━ queue が空 → ループ終了 ━━━━━━━━━━
-戻り値: [[3], [9, 20], [15, 7]] ✅
+  levelSize  = 2          ← queue.length(3) - head(1) = 2
+  i=0, 1: Node(9), Node(20) を処理
+  result.push([9, 20])
 ```
 
 ---
 
-### ✅ LeetCode 提出フォーマット（そのままコピー可）
-
-```typescript
-function levelOrder(root: TreeNode | null): number[][] {
-    if (root === null) return [];
-
-    const result: number[][] = [];
-    const queue: TreeNode[] = [root];
-
-    while (queue.length > 0) {
-        const levelSize: number = queue.length;
-        const levelValues: number[] = [];
-
-        for (let i = 0; i < levelSize; i++) {
-            const node = queue.shift()!;
-            levelValues.push(node.val);
+<h2 id="optimization">5. Optimization</h2>
 
-            if (node.left !== null) queue.push(node.left);
-            if (node.right !== null) queue.push(node.right);
-        }
+### パフォーマンス最適化：`Array.shift()` の回避
 
-        result.push(levelValues);
-    }
+JavaScript の `Array.shift()` は、先頭要素を削除した後に残り全要素のインデックスを 1 つずつ前にずらすため、**$O(n)$ の計算量**がかかります。
+キュー操作を伴う BFS で `shift()` をループ内で使用すると、全体の計算量が **$O(n^2)$** に悪化してしまいます。
 
-    return result;
-}
-```
+**解決策：**
+`head` 変数を用いて現在の先頭位置を指し示し、要素を取り出すたびに `head++` する方式を採用します。これにより、実質的な削除操作を伴わずに $O(1)$ で先頭要素を取得できます。
 
 > 📖 **このセクションで登場した用語**
 >
-> - **`shift()`**：配列の先頭要素を取り出して返すメソッド。キューの「取り出し」操作に使う
-> - **`push()`**：配列の末尾に要素を追加するメソッド。キューの「追加」操作に使う
-> - **`!`（非null断言）**：TypeScriptに「この値は絶対 null でない」と伝える記号。型チェックを強制的に通す代わりに、間違えると実行時エラーになるため、確信がある箇所にのみ使う
-> - **FIFO**：First In First Out。先に入れたものを先に取り出す順序。キューはこの性質を持つ
-> - **`readonly`（今回不使用だが参考）**：変数を変更不可にする TypeScript の修飾子。JavaScript には存在せず、コンパイル時の書き換えを防ぐために使う
-
----
-
-## 5. 計算量まとめ
-
-| 項目           | 値   | 理由                                                                              |
-| -------------- | ---- | --------------------------------------------------------------------------------- |
-| **時間計算量** | O(n) | 各ノードをキューへの追加・取り出しでちょうど1回ずつ処理するため                   |
-| **空間計算量** | O(n) | キューに最大で「木の最も広い階のノード数」が入る。最悪ケースは全ノード数 n に比例 |
+> - **`head` インデックス**：配列の先頭を指すポインタ。
+> - **FIFO**：First In First Out。先に入れたものを先に取り出す順序。
+> - **`!`（非null断言）**：TypeScriptに「この値は絶対 null でない」と伝える記号。