数独ソルバー (Sudoku Solver)

Next.js と TypeScript で実装した数独ソルバーアプリケーションです。バックトラッキングアルゴリズムを使用して数独を解き、解答過程をアニメーションで表示します。

機能

• 9x9 のマス目をグリッドとして表示
• 各マスは編集可能（ユーザーが初期問題を入力できる）
• TailwindCSS を使用したシンプルで見やすい UI
• 「解答」ボタンをクリックすると、バックトラッキングアルゴリズムが動作を開始
• 解法アルゴリズムは TypeScript でバックトラッキング方式で実装
• 回答の数字は解法アルゴリズムで導き出された順番で、1マスずつ一定間隔でアニメーション表示
• アニメーション速度の調整が可能

技術スタック

• Next.js (App Router)
• React Hooks (useState / useEffect / useRef)
• TypeScript
• TailwindCSS

使い方

1. 空のマスに1〜9の数字を入力して問題を作成します
2. 「解答」ボタンをクリックすると、バックトラッキングアルゴリズムで解答します
3. 解答過程がアニメーションで表示されます
4. 「リセット」ボタンで問題をクリアできます
5. スライダーでアニメーション速度を調整できます

インストールと実行

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev

# ビルド
npm run build

# 本番サーバーの起動
npm run start

プロジェクト構成

sudoku-solver/
├── app/                  # Next.js App Router
│   ├── globals.css       # グローバルスタイル
│   ├── layout.tsx        # レイアウトコンポーネント
│   └── page.tsx          # メインページコンポーネント
├── components/           # Reactコンポーネント
│   ├── SudokuCell.tsx    # 数独のセルコンポーネント
│   └── SudokuGrid.tsx    # 数独のグリッドコンポーネント
├── utils/                # ユーティリティ関数
│   └── solver.ts         # 数独ソルバーアルゴリズム
├── package.json          # プロジェクト設定
├── tsconfig.json         # TypeScript設定
├── postcss.config.js     # PostCSS設定
└── tailwind.config.js    # TailwindCSS設定

アルゴリズムの説明

このアプリケーションでは、バックトラッキングアルゴリズムを使用して数独を解いています。

1. 空のマスを見つける
2. そのマスに1〜9の数字を試す
3. 数字が有効であれば、次の空のマスに進む
4. すべてのマスが埋まれば解答完了
5. 行き詰まったら前のステップに戻り、別の数字を試す

このプロセスを繰り返すことで、数独の解答を見つけます。