【AI×Tauri】第三回：動くハリボテを作る

Tauri プロジェクトの作成

まずは環境構築します。この部分は公式の説明がかなり詳しいので、説明は省略します。以下の Prerequisites のページを見てトライしてください。
v2.tauri.app

プロジェクトの作成についても、公式が詳しいです。私は cargo に create-tauri-app をインストールした上で、cargo create-tauri-app しました。なお cargo create-tauri-app を実行したディレクトリ以下にプロジェクトのディレクトリが作成されます。
v2.tauri.app

プロジェクトの設定は以下のようにしました。

• プロジェクト名: secondbest-tauri
• 識別子: デフォルト
• フロントエンドの言語: TypeScript / JavaScript
• パッケージマネージャ: npm
• UIテンプレート: React
• UIフレーバー: TypeScript

ツールの指示にしたがって以下を実行すると・・・

cd secondbest-tauri
npm install
npm run tauri dev

長い Rust のビルドの末、デフォルトで生成されるサンプル画面が表示されました。

作ったものは GitHub で公開したいので、以下のリポジトリを作成し、生成されたコードを push しました。
github.com

早速コードを書いていく！・・・その前に？

仕様の方針もできたし、Tauri のプロジェクトも作った。では早速AIに命令！・・・と行きたいところですが、今の時点のものをAIに投げてもきっとうまくいきません。

残念ながら、現在のAIのレベルは「命令すればなんでも完璧に作ってくれる」というレベルにはありません。ある程度のサイズのものを生成したら、必ず人間が確認する必要があります。でも、人間が確認できるサイズはそれほど大きくありません。したがって、人間の確認できるサイズに合わせて、AIに命令する内容も分解する必要があります。

今回作るゲームも、いきなり「これを作って！」と全部AIにお願いしても、できたものすべてを人間は確認しきれないでしょう。仮にうまく動くものが作れたとしても、それはただのブラックボックスであり、「作りながら React を学びたい」という目的から外れてしまいます。また、ブラックボックスということは「制御不能」と紙一重なので、極めて危うい状態にあるコードと言えます。

また、もし仮に頑張って生成されたコードの全容を把握できたとしても、それが人間にとって読みやすいコードとなっている可能性はあまり高くありません。経験上、規模の大きいコードを生成させると、すごくネストの深いコードを作ったり、すごく行数の長い関数を作ったりして、どうやって管理可能なコードにすればよいのか頭を抱えることになりがちです。そういった部分を選択して「ここを読みやすいようにリファクタして」と命令することもできますが、この作業で機能が壊れてしまうことも多いです。つまり、今のコードを把握できるかどうかに関わらず、事実上管理の困難な状態になる可能性が高いということです。

ということで、まずやるべきは、延長線上のはるか先に目的の実装があるような、最初の地点の “ハリボテの仕様” を決めるということです。小さな仕様からスタートし、少しずつ追加の仕様を盛り込みながら、最終的に目標の実装を目指す、という戦略です。

ハリボテ仕様の策定

ではハリボテ仕様を決めていきます。

• ホーム画面
  ここは元からシンプルなので、このままで行きます。
• 設定画面
  設定変更を省略します。中央には何もなく、右上の戻るボタンのみ残してみます。
• ゲーム画面
  セカンドベストボタン・ボード・ステータス表示は以下のようにコンポーネント化します。
  • セカンドベストボタン: 機能のないボタン
  • ボード: 機能のないキャンバス
  • ステータス表示: ダミー文字を表示するラベル

この仕様であれば、バックエンドは特に追加実装なしで大丈夫そうです。

配置を言葉にして Markdown にまとめていきます。たたき台として、以下の Markdown を作成しました。

# 画面仕様案

## 画面の種類

- ホーム画面: 最初に表示される画面
- 設定画面: 種々の設定を行う画面
- ゲーム画面: ゲームを遊ぶメインの画面

## 各画面の構成

### ホーム画面

- 中央上部に「Second Best」と書かれたラベルを配置する。
- 中央下部に「Start」と書かれたボタンを配置する。このボタンを押すとゲーム画面に遷移する。
- 右上の隅に、歯車のアイコンの書かれた正方形のボタンを配置する。このボタンを押すと設定画面に遷移する。

### 設定画面

- 右上の隅に、家のアイコンの書かれた正方形のボタンを配置する。このボタンを押すとホーム画面に遷移する。

### ゲーム画面

- 中央上部に SecondBestButton コンポーネントを配置する。
- 中央に Board コンポーネントを配置する。
- 中央下部に StatusDisplay コンポーネントを配置する。
- 右上の隅に、家のアイコンの書かれた正方形のボタンを配置する。このボタンを押すとホーム画面に遷移する。
- 家のアイコンのボタンの下に、ぐるっと回る矢印のアイコンの書かれた正方形のボタンを配置する。特に機能はない。

## コンポーネント

- **SecondBestButton コンポーネント**: ボタンを配置するコンポーネント。ボタン上には「Second Best!」と表示する。その他の機能は無し。
- **Board コンポーネント**: キャンバスを配置するコンポーネント。特に機能はなし。
- **StatusDisplay コンポーネント**: ラベルを配置するコンポーネント。「Dummy Status」と表示する。

## 配色

- 背景: #D7CCC8
- 文字色: #3E2723

@haribote_base.md はこのプロジェクトの画面の仕様を記述したものです。これは後ほどAIに渡して画面の実装を行ってもらう予定のものです。
@haribote_base.md の内容を確認し、画面設計を効果的に伝えられる Markdown を生成してください。結果のファイルは docs/haribote.md として出力してください。画面の実装に着手してはいけません。

例によって @haribote_base.md のところはファイルへのリンクを貼っておきます。出力されたものは以下です。

# Second Best - 画面設計仕様書

## 概要

Second Best は 3 つの主要画面から構成されるアプリケーションです。

## 画面構成

### 1. ホーム画面（初期画面）

**レイアウト構成:**

```
┌─────────────────────────────────────┐
│                                  [⚙️] │
│                                     │
│           Second Best               │
│                                     │
│                                     │
│                                     │
│             [Start]                 │
│                                     │
└─────────────────────────────────────┘
```

**要素詳細:**

- **タイトル**: 中央上部に「Second Best」ラベル
- **開始ボタン**: 中央下部に「Start」ボタン
  - 機能: クリックでゲーム画面に遷移
- **設定ボタン**: 右上隅に歯車アイコン（正方形ボタン）
  - 機能: クリックで設定画面に遷移

### 2. 設定画面

**レイアウト構成:**

```
┌─────────────────────────────────────┐
│                                  [🏠] │
│                                     │
│          設定項目エリア              │
│                                     │
│                                     │
│                                     │
│                                     │
│                                     │
└─────────────────────────────────────┘
```

**要素詳細:**

- **ホームボタン**: 右上隅に家アイコン（正方形ボタン）
  - 機能: クリックでホーム画面に遷移

### 3. ゲーム画面（メイン画面）

**レイアウト構成:**

```
┌─────────────────────────────────────┐
│                                  [🏠] │
│        [Second Best!]            [🔄] │
│                                     │
│                                     │
│           ┌─────────┐               │
│           │ Board   │               │
│           │ Canvas  │               │
│           └─────────┘               │
│                                     │
│         [Dummy Status]              │
└─────────────────────────────────────┘
```

**要素詳細:**

- **SecondBestButton**: 中央上部に配置
  - 表示テキスト: 「Second Best!」
  - 機能: なし（表示のみ）
- **Board**: 中央に配置
  - キャンバス要素
  - 機能: なし（表示のみ）
- **StatusDisplay**: 中央下部に配置
  - 表示テキスト: 「Dummy Status」
  - 機能: なし（表示のみ）
- **ホームボタン**: 右上隅に家アイコン（正方形ボタン）
  - 機能: クリックでホーム画面に遷移
- **リフレッシュボタン**: ホームボタンの下に回転矢印アイコン（正方形ボタン）
  - 機能: なし（装飾のみ）

## コンポーネント仕様

### SecondBestButton

- **種類**: ボタンコンポーネント
- **表示内容**: 「Second Best!」
- **機能**: なし（表示のみ）

### Board

- **種類**: キャンバスコンポーネント
- **表示内容**: キャンバス要素
- **機能**: なし（表示のみ）

### StatusDisplay

- **種類**: ラベルコンポーネント
- **表示内容**: 「Dummy Status」
- **機能**: なし（表示のみ）

## デザイン仕様

### カラーパレット

- **背景色**: `#D7CCC8` (ベージュ系)
- **文字色**: `#3E2723` (ダークブラウン)

### アイコン仕様

- **設定アイコン**: ⚙️ (歯車)
- **ホームアイコン**: 🏠 (家)
- **リフレッシュアイコン**: 🔄 (回転矢印)

## 画面遷移フロー

```
ホーム画面 ←→ 設定画面
    ↓
ゲーム画面 → ホーム画面
```

**遷移詳細:**

1. ホーム画面 → ゲーム画面: 「Start」ボタンクリック
2. ホーム画面 → 設定画面: 歯車アイコンクリック
3. 設定画面 → ホーム画面: 家アイコンクリック
4. ゲーム画面 → ホーム画面: 家アイコンクリック

## 実装上の注意点

1. **レスポンシブ対応**: 各画面は様々な画面サイズに対応する必要があります
2. **アイコンボタン**: 正方形のボタンとして実装し、適切なサイズを確保してください
3. **中央配置**: 各要素の中央配置は正確に行ってください
4. **コンポーネント分離**: SecondBestButton、Board、StatusDisplay は独立したコンポーネントとして実装してください
5. **状態管理**: 画面遷移の状態管理を適切に行ってください

ハリボテ実装の生成

十分実装内容を絞れたので、早速実装させてみます。Agent で新しい窓を開いて、以下を命令します。新しい窓にすることで、先程までの記憶を消すことが出来ます。

@haribote.md はこのアプリの画面の仕様を記述したファイルです。このファイルに基づいて、画面の実装を生成してください。

その結果、src 以下の下記のファイルが作成・更新されました。

pages ディレクトリには各画面が、components には各コンポーネントが入っているようです。同名の .tsx ファイルと .css ファイルをセットにしていて、jsx の定義と css をペアにして管理するようですね。

テスト実行してみると・・・残念ながら真っ黒の画面になっています。

ここで Cursor で「ちょっと💢画面が真っ黒なんだけど💢💢」と命令することもできますが、一旦自力で状況を調べてみることにします。

まず、npm run tauri dev を実行したときにターミナルに表示されるURLを Chrome で開いてみます。

  ➜  Local:   http://localhost:1420/

すると、表示自体はされました。ということは WebView の問題が疑われます。見た目の修正は後回しにして、ひとまずこの部分の修正に調整してみます。

修正の仕方のアイディアが出てこないので、ChatGPT に質問してみます。

Tauri でアプリを開発しています。npm run tauri dev でアプリを起動したところ、真っ黒の画面しか出ません。ビルド中に表示される URL に Chrome でアクセスすると問題なく表示されます。原因として考えられるものと、それらの修正方法を箇条書きでいくつか示してください。なお私の環境は Ubuntu 24.04.2 LTS です。

ChatGPT の見立ては、やはり WebView の表示や設定が原因でしょう、とのことでした。提案してもらった方法を順番に試しましたが、うまく解消できません。いろいろ試行錯誤して「あれ？もしかして Cursor がリソース食いすぎているのでは？」と思い当たり、Cursor を閉じた状態で起動したところ・・・なんと起動しました！

その後いろいろ試したところ、Cursor 内で開いたターミナルからだと黒い画面になり、通常のターミナルから起動すれば正常に起動することが分かりました。正直原因は不明ですが、起動できる方法がわかったのでひとまずよしとします。

プチトラブルが解決できたので、見た目の修正に入ります。

まず、ゲーム画面の右上のボタンが重なっているので、そこから解消します。編集対象は pages/GamePage.tsx または pages/GamePage.css あたりでしょう。pages/GamePage.tsx を開いてみます。jsx を作っている部分を抜粋すると、以下の通りでした。

const GamePage: React.FC<GamePageProps> = ({ onHomeClick }) => {
  return (
    <div className="game-page">
      <div className="game-header">
        <div className="game-buttons">
          <button className="home-button" onClick={onHomeClick}>
            🏠
          </button>
          <button className="refresh-button">
            🔄
          </button>
        </div>
      </div>
      
      <div className="game-content">
        <SecondBestButton />
        <Board />
        <StatusDisplay />
      </div>
    </div>
  );
};

pages/GamePage.css を開いて、game-buttons や home-button や refresh-button に貼り付けられている CSS も見てみます。

.game-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-button,
.refresh-button {
  width: 50px;
  height: 50px;
  background-color: #EFEBE9;
  border: 2px solid #3E2723;
  border-radius: 8px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.home-button:hover,
.refresh-button:hover {
  background-color: #E0D7D3;
  transform: scale(1.05);
}

.refresh-button {
  cursor: default;
  opacity: 0.8;
}

う〜〜〜〜〜〜ん、わからん！ということで、2つのファイルを Cursor に参照させて編集してもらいます。Agent を開いて、以下のように命令してみます。

@GamePage.tsx @GamePage.css 右上に配置しているホームボタンとリフレッシュボタンが重なっています。ホームボタンのすぐ下にリフレッシュボタンを配置するようにしてください。

...残念ながら問題が解消されませんでした。もう一度お願いしてみます。

修正されず、依然として同じ場所で重なって表示されています。再度実行してください。

今度こそ修正されました！

CSS の方に以下の修正を行ったようです。

  .game-buttons {
    display: flex;
    flex-direction: column;
+   align-items: flex-end;
    gap: 10px;
+   width: auto;
+   height: auto;
  }

  .home-button,
  .refresh-button {
    // (中略)
    transition: all 0.3s ease;
+   position: static;
+   margin: 0;
  }

しかし今度は画面中央のコンポーネントが下にずれてしまいました。tsx ファイルをよく見てみると、右上のボタンをヘッダーとして配置して、その下に中央のコンポーネント群を配置しているようです。そのため、ボタンの配置が縦長になったのに伴って、中央のコンポーネントも下に下がったということですね。

Cursor に改めて注文してみます。

@GamePage.tsx @GamePage.css 現在、右上のボタンよりも下の部分に中央の SecondBestButton, Board, StatusDisplay が表示されています。そうではなく、SecondBestButton, Board, StatusDisplay の配置は画面の上下に対して中央揃えするようにしてください。右上のボタンの配置は変えないでください。

Cursor による修正後に起動してみると、問題なく修正されていることが確認できました！

変更点は以下のようです。

  .game-page {
    height: 100vh;
    background-color: #D7CCC8;
    display: flex;
    flex-direction: column;
+   position: relative;
  }

  .game-header {
-   display: flex;
-   justify-content: flex-end;
-   padding: 20px;
+   position: absolute;
+   top: 20px;
+   right: 20px;
+   z-index: 10;
  }
  // (中略)
  .game-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 20px;
+   height: 100vh;
  } 

ヘッダーは固定位置になったようです。またページ全体に position: relative を適用し、中央のコンポーネント群全体に height: 100vh を適用したようです。ちなみに 100vh というのはざっくり「親の高さ比100%」という意味のようです。質問がはっきりしているときは、AIに尋ねるより検索するほうが早いですね。
web-camp.io

同じような問題がホーム画面と設定画面でも起きていそうなので、同じ編集を適用してもらいましょう。

同様の編集を @HomePage.css と @SettingsPage.css にも適用してください。

・・・残念ながら、むしろレイアウトが崩壊してしまいました。作戦を変えましょう。

まず pages/SettingsPage.tsx を見てみます。どうやら GamePage.tsx と違い、右上のボタンをヘッダーとして扱っていないようです。

const SettingsPage: React.FC<SettingsPageProps> = ({ onHomeClick }) => {
  return (
    <div className="settings-page">
      <button className="home-button" onClick={onHomeClick}>
        🏠
      </button>
      
      <div className="settings-content">
        <h2 className="settings-title">設定</h2>
        <div className="settings-area">
          <p className="settings-placeholder">設定項目はここに表示されます</p>
        </div>
      </div>
    </div>
  );
};

形式を合わせたほうが管理しやすそうなので、合わせるように命令してみます。

@GamePage.tsx に倣って、 @SettingsPage.tsx の右上のボタンも settings-header という div 要素で管理するようにしてください。 @SettingsPage.css も同様に @GamePage.css に倣って修正してください。

今度こそ正常に修正してくれました (詳細は割愛します)。似た編集を HomePage に対しても適用してもらいます。

@HomePage.tsx と @HomePage.css についても同様の編集を行ってください。

今度はちゃんと意図を汲み取って適用してくれました！以下が修正後の画面です。

全体レビュー

一旦形になったので、試しに全体をレビューしてもらいましょう。Agent で以下を命令します。

現在のプロジェクト全体の実装を確認して、改善したほうが良い点があれば列挙してください。

かなりしっかりとしたフィードバックが返ってきました。Markdown に出力してもらったものが以下です。

# プロジェクト改善提案書

## 🔍 プロジェクト全体の改善点

### 1. **アーキテクチャ・設計面**

#### 状態管理の改善

- **問題**: 現在は`App.tsx`でのみ`useState`を使用した簡単なページ遷移管理
- **改善案**:
  - React Router の導入でより適切なルーティング管理
  - ゲーム状態管理のための Context API または Zustand の導入
  - グローバル状態とローカル状態の明確な分離

#### コンポーネント設計

- **問題**: コンポーネントが機能的でない（例：`SecondBestButton`、`StatusDisplay`）
- **改善案**:
  - 実際のゲームロジックの実装
  - プロップスの型定義の強化
  - コンポーネントの責任分離

### 2. **フロントエンド実装**

#### ゲーム機能の不足

```typescript
// 現在の実装（src/components/SecondBestButton.tsx）
const SecondBestButton: React.FC = () => {
  return <button className="second-best-button">Second Best!</button>;
};
```

- **問題**: ボタンにクリックハンドラーがない
- **改善案**: 実際のゲームロジックとイベントハンドリングの実装

#### Canvas 実装の改善

```typescript
// 現在の実装（src/components/Board.tsx）
useEffect(() => {
  const canvas = canvasRef.current;
  if (canvas) {
    const ctx = canvas.getContext("2d");
    if (ctx) {
      // キャンバスの背景を設定
      ctx.fillStyle = "#F5F5DC";
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // 簡単な装飾を追加
      ctx.strokeStyle = "#3E2723";
      ctx.lineWidth = 2;
      ctx.strokeRect(10, 10, canvas.width - 20, canvas.height - 20);
    }
  }
}, []);
```

- **問題**: 静的な描画のみで、インタラクティブな要素がない
- **改善案**:
  - ゲームボードとしての機能実装
  - マウスイベントハンドリング
  - アニメーション機能

### 3. **バックエンド（Tauri）実装**

#### Rust コマンドの活用不足

```rust
// 現在の実装（src-tauri/src/lib.rs）
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}
```

- **問題**: デフォルトの`greet`コマンドのみで、実際のゲームロジックがない
- **改善案**:
  - ゲーム状態管理のための Rust コマンド実装
  - ファイル I/O 機能（設定保存など）
  - ゲームスコア計算ロジック

#### フロントエンド-バックエンド連携

- **問題**: Tauri の API が全く使用されていない
- **改善案**:
  - `invoke`を使用した Rust 関数の呼び出し
  - イベントシステムの活用
  - ネイティブ機能の活用

### 4. **開発環境・品質管理**

#### テストの不足

- **問題**: テストファイルが存在しない
- **改善案**:
  - Jest + React Testing Library の導入
  - Rust ユニットテストの追加
  - E2E テストの実装

#### リンター・フォーマッター

- **問題**: ESLint、Prettier の設定がない
- **改善案**:
  - ESLint 設定の追加
  - Prettier 設定の追加
  - pre-commit フックの設定

#### エラーハンドリング

- **問題**: エラーハンドリングが不十分
- **改善案**:
  - Error Boundary の実装
  - Tauri コマンドのエラーハンドリング
  - ユーザーフレンドリーなエラー表示

### 5. **パフォーマンス・UX**

#### レスポンシブデザイン

```css
/* 現在の実装（src/App.css） */
@media (max-width: 768px) {
  :root {
    font-size: 14px;
  }

  .app-title {
    font-size: 36px !important;
  }

  .start-button {
    font-size: 20px !important;
    padding: 12px 32px !important;
  }
}
```

- **問題**: 基本的なレスポンシブ対応のみ
- **改善案**: より詳細なブレークポイント設定

#### アクセシビリティ

- **問題**: アクセシビリティ対応が不十分
- **改善案**:
  - ARIA 属性の追加
  - キーボードナビゲーション対応
  - スクリーンリーダー対応

### 6. **ドキュメント・保守性**

#### README 改善

```markdown
# 現在の実装（README.md）

# Tauri + React + Typescript

This template should help get you started developing with Tauri, React and Typescript in Vite.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
```

- **問題**: テンプレートのデフォルト内容のまま
- **改善案**: プロジェクト固有の説明、セットアップ手順、使用方法の追加

#### コメント・型定義

- **問題**: コードコメントが少ない、型定義が不十分
- **改善案**: JSDoc コメントの追加、より厳密な型定義

## 📋 実装優先度

### 高優先度

1. **ゲーム機能の実装** - 基本的なゲームロジックとインタラクション
2. **状態管理の改善** - Context API または状態管理ライブラリの導入
3. **Tauri 連携の実装** - フロントエンド-バックエンド間の通信

### 中優先度

4. **テスト環境の構築** - 基本的なテストフレームワークの導入
5. **エラーハンドリング** - ユーザビリティの向上
6. **リンター・フォーマッター** - コード品質の向上

### 低優先度

7. **アクセシビリティ対応** - より幅広いユーザーへの対応
8. **パフォーマンス最適化** - 必要に応じて実装
9. **ドキュメント整備** - 保守性の向上

## 🚀 次のステップ

これらの改善を段階的に実装することで、より堅牢で保守性の高いアプリケーションになります。まずは高優先度の項目から着手することをお勧めします。

状態管理の改善の項目について詳しく教えてください。改善の具体的な方法について Markdown にまとめて出力してください。コードは修正しないでください。

するとかなり詳しく返してくれました。どこかで役に立つかもしれないので、docs/ 以下に保存しておきます。読みたい方はこちらのリンクからどうぞ。指摘内容については、今後必要になったタイミングで検討することにします。

第三回まとめ

今回はグッと仕様を絞ったハリボテ仕様を作って、それを実装していきました。現状は画面遷移しか実装できていませんが、それでも少し動くことは嬉しいですね。

今回生成したコード達は "v3-haribote" というタグをつけています。確認したい方は以下からどうぞ。
github.com

次回はフロントエンド側のボードの実装に取り組んでいけたらいいなと思います。さらに雰囲気が出てくると嬉しいです。

ではまた。

続き↓
smooth-pudding.hatenablog.com