docs(Trees): finalize Symmetric Tree refinements and fix animation logic

Author: myoshi2891

DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README_react.html

@@ -1320,7 +1320,7 @@ <h1 class="outfit text-[2.4rem] font-extrabold text-teal-900 mb-1 leading-tight"
                                 class="text-slate-600 text-xs space-y-1 list-disc list-inside leading-6"
                             >
                                 <li>コードの読みやすさを優先したい</li>
-                                <li>ノード数が1000以内（デフォルトスタック上限内）</li>
+                                <li>バランスの取れた木（深さがスタック上限に達しない）</li>
                                 <li>「鏡写しの定義」をそのままコードに落としたい</li>
                             </ul>
                         </div>
@@ -1329,7 +1329,7 @@ <h1 class="outfit text-[2.4rem] font-extrabold text-teal-900 mb-1 leading-tight"
                             <ul
                                 class="text-slate-600 text-xs space-y-1 list-disc list-inside leading-6"
                             >
-                                <li>深い木（深さ &gt; 1000）で RecursionError が心配</li>
+                                <li>深さが約1000前後になる退化した木（深さ ≈ スタック上限）では再帰が危険になるため反復版を検討する</li>
                                 <li>スタックオーバーフローを完全に回避したい</li>
                                 <li>本番環境など安全性を最優先にしたい</li>
                             </ul>
@@ -1864,7 +1864,6 @@ <h1 class="outfit text-[2.4rem] font-extrabold text-teal-900 mb-1 leading-tight"
                     if (isPlaying) {
                         timerRef.current = setTimeout(() => {
                             if (activeStep === stepsData.length) {
-                                setActiveStep(1);
                                 setIsPlaying(false);
                             } else {
                                 setActiveStep((prev) => prev + 1);
@@ -1876,7 +1875,12 @@ <h1 class="outfit text-[2.4rem] font-extrabold text-teal-900 mb-1 leading-tight"
                     };
                 }, [isPlaying, activeStep]);
 
-                const handlePlay = () => setIsPlaying(true);
+                const handlePlay = () => {
+                    if (activeStep === stepsData.length) {
+                        setActiveStep(1);
+                    }
+                    setIsPlaying(true);
+                };
 
                 return (
                     <div className="grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-8 mt-2">

DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/Symmetric_Tree_Python.md

@@ -35,7 +35,7 @@
 ### 競技プログラミング視点
 
 - **制約分析**：ノード数1〜1000と小さいため、全ノードを1回訪問する O(n) で十分
-- **最速手法**：再帰DFS。Pythonの関数呼び出しコストはあるが、ノード数1000では問題なし
+- **最速手法**：再帰DFS。再帰は可読性が高いですが、退化した木（最悪ケース）では再帰深度がPythonの再帰制限（デフォルト1000）に近づく可能性があるため、安全性を重視するなら反復版を推奨します
 - **CPython最適化**：`and` の短絡評価（＝左辺がFalseなら右辺を評価しない仕組み）で無駄な再帰を早期カット
 
 ### 業務開発視点

DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/Symmetric_Tree_TypeScript.md

@@ -96,7 +96,7 @@
 - **選択したアプローチ**: **A（再帰）をメイン、B（反復）をフォローアップ** として両方実装
 - **理由**：
     - **方法C（シリアライズ）は選ばない**：実装コストが高く、null位置のエンコードが複雑になるため
-    - **方法A（再帰）を選ぶ**：「鏡写しの定義」がそのままコードになる直感的な構造。ノード数1000以下なのでスタックオーバーフローの心配なし（Nodeのデフォルトスタック深度は通常10,000以上）
+    - **方法A（再帰）を選ぶ**：「鏡写しの定義」がそのままコードになる直感的な構造。再帰は可読性が高いですが、非常に深い木（退化した木）ではコールスタックの上限に達するリスクがあります。そのため、極端な深さや異なる実行環境（ブラウザ/LeetCode/Node等）での安全性を考慮し、反復版（方法B）も代替案として用意します。
     - **方法B（反復）もフォローアップで実装**：深さが極端に大きいケースへの対応として有用
 
 - **TypeScript特有の最適化ポイント**：
@@ -338,7 +338,7 @@ function isSymmetric(root: TreeNode | null): boolean {
 
 ### コンパイル時最適化
 
-1. **型推論の活用**：`queue.shift()` の戻り値型は `[TreeNode|null, TreeNode|null] | undefined` とTypeScriptが自動推論するため、明示的な型注釈が不要
+1. **インデックスによるキュー操作の最適化**：`queue.shift()` による O(n) の配列再インデックスを避けるため、`head` インデックスを使用しています。`queue[head]` で要素を参照し、`head++` でポインタを進めることで、キューからの取り出しを O(1) で実現し、大量のノードがある場合でも高いパフォーマンスを維持できます。
 2. **readonly修飾子**：今回はLeetCodeの既存クラス定義を使うため追加はしないが、自前のデータ構造では `readonly` を付けてイミュータブルにするのが理想
 
 ### 計算量まとめ

public/DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README_react.html

@@ -1320,7 +1320,7 @@ <h1 class="outfit text-[2.4rem] font-extrabold text-teal-900 mb-1 leading-tight"
                                 class="text-slate-600 text-xs space-y-1 list-disc list-inside leading-6"
                             >
                                 <li>コードの読みやすさを優先したい</li>
-                                <li>ノード数が1000以内（デフォルトスタック上限内）</li>
+                                <li>バランスの取れた木（深さがスタック上限に達しない）</li>
                                 <li>「鏡写しの定義」をそのままコードに落としたい</li>
                             </ul>
                         </div>
@@ -1329,7 +1329,7 @@ <h1 class="outfit text-[2.4rem] font-extrabold text-teal-900 mb-1 leading-tight"
                             <ul
                                 class="text-slate-600 text-xs space-y-1 list-disc list-inside leading-6"
                             >
-                                <li>深い木（深さ &gt; 1000）で RecursionError が心配</li>
+                                <li>深さが約1000前後になる退化した木（深さ ≈ スタック上限）では再帰が危険になるため反復版を検討する</li>
                                 <li>スタックオーバーフローを完全に回避したい</li>
                                 <li>本番環境など安全性を最優先にしたい</li>
                             </ul>
@@ -1864,7 +1864,6 @@ <h1 class="outfit text-[2.4rem] font-extrabold text-teal-900 mb-1 leading-tight"
                     if (isPlaying) {
                         timerRef.current = setTimeout(() => {
                             if (activeStep === stepsData.length) {
-                                setActiveStep(1);
                                 setIsPlaying(false);
                             } else {
                                 setActiveStep((prev) => prev + 1);
@@ -1876,7 +1875,12 @@ <h1 class="outfit text-[2.4rem] font-extrabold text-teal-900 mb-1 leading-tight"
                     };
                 }, [isPlaying, activeStep]);
 
-                const handlePlay = () => setIsPlaying(true);
+                const handlePlay = () => {
+                    if (activeStep === stepsData.length) {
+                        setActiveStep(1);
+                    }
+                    setIsPlaying(true);
+                };
 
                 return (
                     <div className="grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-8 mt-2">