【AI×Tauri】第一回：アプリの仕様を検討する（前編）

今の時点で知っていることとやりたいことを整理

まずはブレーンストーミング*1から始めます。今の時点で自分が知っていること・気になっていること・やりたいことを、思いつくままにどんどん書き出していきます。

• Second Best のコアロジックができたので活用したい
• Tauri を使ってアプリを作っていきたい
• バックエンドは Rust、フロントエンドは React (TypeScript) で書きたい
• バックエンドでどのようなAPIが必要かは一度整理しておきたい
• React でどのように書いていけるかわからないので、AI と一緒にゆっくり進めたい
• 画面構成は事前に整理しておきたい
• あまり画面を多くしすぎると大変なので、2,3画面ぐらいのシンプルな構成にしたい
• コンピューターとの対戦ができるようにしたい
• AI に渡すために、ゲームのルールの資料が必要

新しい観点が出てこなくなってきたので、ChatGPT に以下のように投げてみます。

これからアプリケーションを開発しようとしており、仕様の検討のためにブレーンストーミングを行いました。その結果、以下が出ました。
(上記の箇条書き)
これらの内容から

• 現時点で決まっていること
• これから詳しく決める必要があること
• 事前に調べておいたほうがよいこと

の項目ごとに情報を整理してください。必要に応じてあなたの知識を追加しても構いません。

以下が ChatGPT から返ってきた回答です。

さらに付け加えて以下のように返ってきました。

必要であれば、次のステップとして：

• APIの一覧案の作成
• 画面構成のワイヤーフレーム案のラフスケッチ
• Second Bestのルール仕様書の構成案

なども一緒に考えていけます。進めたいものがあれば教えてください。

提案に乗って進めていくことも可能ですが、今回はあくまで自分で進め方を考えながら進めていく方針にします。経験上、そのほうが納得のいく出来になりがちだからです。

次に検討することの整理

ChatGPT でまとめてもらった要素のうち、実装の詳細に入る前に検討しておいたほうが良いものを抽出してみます。とりあえず、それぞれの項目を見てみましょう。

• バックエンドAPIの設計
  この部分はフロントエンドの設計が決まらないと見えてこないと思います。よって、他の項目を先に検討してみます。
• フロントエンドの構成
  React コンポーネントの分け方や状態管理の話ですが、正直勘所がないので、よくわかりません。ユーザーインターフェースが固まってきたあたりで、改めてAIと相談することにします。
• 画面構成の詳細
  体験に関わる部分の設計です。まずここを検討したいです。
• コンピューターの強さ設定
  ここはおそらく後でいくらでも変えられると思うので、最初はシンプルに強さ固定で作るようにします。
• ユーザーインターフェース
  これも体験設計の一部なので、画面構成と合わせて検討します。

ということで、以下の順序で検討していこうと思います。

1. 画面設計・ユーザーインターフェースの検討
2. フロントエンドの構成の検討
3. バックエンドAPIの設計

追加で調査することの整理

「事前に調べておいたほうがよいこと」の内容も確認しておきます。

• Tauri の IPC (invoke) 連携
  Rust と TypeScript の連携の仕方の話のようです。これはこの記事の範囲というよりも、実際の実装の方針を決めるタイミングで検討することですね。そのタイミングで詳しく調査してみます。
• React でのゲームUIの作り方
  ここはあえて作りながら考える方針にします。
• Second Best の仕様資料の整備
  これは Second Best の Rust クレートを作るときに作った資料があるので、流用したいと思います。
• ゲームAIの基礎知識
  このあたりは経験がたくさんあるので、事前になにか調べておく必要はなさそうです。
• フロントエンドとバックエンドの通信モデル
  残念ながら質問の意味を理解できない状態なので、AI に聞いてみます。

最後の内容について、ChatGPT に追加質問してみます。

「事前に調べておいたほうがよいこと」に挙げられていた「フロントエンドとバックエンドの通信モデル」について質問です。「内容・補足」を見てもピンと来なかったので、初心者でもわかりやすいように、どのようなものがあるか教えてください。

即座に返答がありました。

もちろんです！「フロントエンドとバックエンドの通信モデル」は、ざっくり言えば「フロント（React）がバックエンド（Rust）とどうやって情報をやり取りするか」を決める方法のことです。

Tauri のようなデスクトップアプリでは、Webアプリとはちょっと違う通信のしかたが可能で、その点も含めて、初心者にもわかるように代表的なモデルを4つ紹介します。

なるほど、いろんな方法があるようですね。ご丁寧に初心者におすすめのシンプルな方法を提案してくれているので、逆らわずこの方針を採用することにします。

第一回まとめ

そこそこの分量になってきたので、一旦締めたいと思います。ノープランに近いところから、AIとの相談を経て、少しずつ方向性が見えてきました。

次回は「次に検討すること」で挙げていた、画面設計から取り掛かりたいと思います。きっとより具体的にイメージが湧いてくると思います。また、多少 React のお勉強的な内容にも踏み込めたら嬉しいです。まあ、今回のシリーズは手を動かしながら同時並行で執筆しているので、私にもどうなるか分かりません。一緒に楽しんでいきましょう。

ではまた。

続き↓
smooth-pudding.hatenablog.com