はじめに

こんにちは！
皆さんハンター×ハンターという漫画は知っていますでしょうか。
私は大好きで定期的に読み返します。
最新刊らへんは小説呼んでるみたいで大変ですが。

そんなハンター×ハンターの作中に「軍儀」というボードゲームが登場します。
こちらはもともと空想上の盤上競技だったのですが、
数年前に公式としてグッズが出され世間を賑わせていました。

しかし出遅れた私は買えず、現在も実物は持っていません。(今なら買えるかも...?)

「でもちょっと軍儀やってみたい...！」

という気持ちが最近また再燃したので、それならばWebアプリで作ってやるぜ！！と思い立ったのが作成した動機です。

今回はバイブコーディングでどのくらい出来るのか確かめるため、出来るだけAIに任せてやってみよう！という検証も兼ねております。

アプリ概要

▼作成したWebアプリ「軍儀」

ルールは基本的に公式準拠です。
ですが、やりやすいように一部改変して採用しております。

今回はCPU戦の機能はなく、対人戦として交互に実施する想定で作成しております。
ルールの細かい説明等は本アプリではしていないため、お手数ですが各自確認をお願いします...

こちらの記事でルールについて詳しく説明していたため参考にさせていただきました。
▼参考記事

※PCでのプレイのみ想定しており、スマホ等では想定していないため画面がうまく表示されないと思われます。
こちらは後日修正するかも。

▼サンプル画像

言語：Typescript
フレームワーク：Next.js
UIライブラリ：react
スタイリング：TailwindCSS
デプロイ：Vercel

基本的にはほぼ全てバイブコーディングで進めていきました。
ツールは「GeminiCLI」です。

こちらの指示に対し、勝手にコードを書き換えてそれなりにいいものを作成してくれるためすごく助かります。

実装したい処理を指示→修正した内容からまた新たに実装したい処理を指示...
というような繰り返しで序盤はほぼコードに触ってすらいませんでした。
その他の駒の動きだったりの細かい部分を自分で書いていたぐらいです。
序盤は。

後半になってくると、修正してほしい内容を指示しても同じような結果を出したり、
ファイルの内容を正しく認識せず無駄だったり冗長なコードを書いたりすることがままあったため結局ちょくちょくコードを修正する必要がありました。

地味にめんどくさかったのは、細かいレイアウトやちょっとした処理の修正を行った後に再度指示出しをすると、修正前にまた自動で戻してしまうことでした。

その部分の修正はいらない指示出しを行うか再度また修正しなきゃいけない...みたいな一手間がちょっとストレスでしたね。(うまいやり方あるんですかね？)

あとこれは完全に私が悪いんですが...
途中チャットのセーブをし忘れてしまい、現在のファイルとGeminiCLIの間でうまく噛み合わずに苦労する一幕もありました。そりゃ悪手じゃろ蟻ンコ...

それと個人的に気になった点として、
コンポーネント化したものを別のファイルに作成する等の指示を行わないとほぼひたすら同じpageファイルに書き連ねるのでめちゃ長い１ファイルが出来ることになります。
うーん見づらい

自分の指示出しが悪いこともあって手間取った場面もありましたが、うまく扱えればこのくらいのアプリは人間が一切手を加えなくても作れるような気がしました。

まぁ私はうまく扱えずちょくちょく手を加えたんですけどね。

今回でバイブコーディングの長所と短所のようなものを少し理解できたような気がします。
このまま目指せAI駆動開発マスター！

ということで最後まで読んでいただきありがとうございます。
また次もよろしくお願いいたします。

待て次号！