二分木ビジュアライザー

二分木ビジュアライザーは、インタラクティブな可視化を通じて二分木を構築、探索、理解できる無料のブラウザベースツールです。データ構造を初めて学ぶ方、コーディング面接の準備をしている方、アルゴリズムを教えている方など、このツールはSVGベースのキャンバスで木の操作がリアルタイムでどのように動作するかを直感的に確認できます。

このツールは2つのモードをサポートしています。**二分探索木（BST）**モードは、すべての左の子が親より小さく、右の子が親より大きいというBST不変条件を強制します。一般二分木モードは幅優先の順序でレベルごとにノードを挿入します。BSTモードでは、挿入、削除（葉ノード、子が1つの場合、子が2つの場合をin-order successorで処理）、およびアニメーション付きパスハイライトによる探索が実行できます。

4つの古典的な走査アルゴリズムが利用可能です — 通りがけ順（In-order）、行きがけ順（Pre-order）、帰りがけ順（Post-order）、レベル順（BFS） — 各アルゴリズムはステップバイステップのノードハイライト付きで、アルゴリズムが各ノードを順番に訪問する様子を視覚的に追跡できます。走査結果の配列はコントロールの下に表示されます。また、AVL回転を使用して不均衡なBSTをワンクリックで自動平衡化できます。

すべての処理はブラウザ内で完全に行われます。サーバーへのデータ送信はなく、ネットワークリクエスト、入力に対する分析、アカウント登録は一切不要です。可視化はインラインSVGでレスポンシブにレンダリングされ、デスクトップ、タブレット、スマートフォンに対応しています。

木の統計情報がリアルタイムで表示されます：高さ、ノード数、平衡かどうか、現在の構造が有効なBSTかどうか。実験用にランダムな木を生成したり、カンマ区切りの値で一括挿入することもできます。

1. BST（二分探索木）または一般二分木をモードトグルで選択します。
2. 入力フィールドに数値（またはカンマ区切りリスト、例：5,3,7,1,4）を入力し、Insert をクリックまたは Enter を押します。
3. Random をクリックしてランダムな木を生成するか、Clear で最初からやり直します。
4. BSTモードでは、Delete フィールドで値を指定してノードを削除、Search フィールドでルートからターゲットまでの探索パスをハイライトします。
5. 走査ボタン（Inorder、Preorder、Postorder、Level-order）をクリックして走査をアニメーションし、結果配列を確認します。
6. Balance (AVL) をクリックしてAVL回転ロジックでBSTを自動平衡化します。
7. 統計パネルで高さ、ノード数、バランス状態、BST有効性を確認します。
8. Ctrl+Enter のキーボードショートカットで素早く値を挿入できます。