「みんなで読もう！三国志SNS」https://hyper-sangokushi.com/
というサイトを作って公開しました。夏季休暇中にclaude codeを使い込んでみようと、過去に作っていたWikiシステムをRails6(ruby2)からRails8(ruby3系）にアップグレードして動かすということをしてる中で、作ってみようと時間を決めて開発したというものです。
サイトの特徴
吉川英治の三国志を読みながらコメントを残すことができ、フォローすることで他の人のコメントも読めます。
また、Wikiの機能があるので登場人物や地名にリンクが貼られ「あれ？これって誰だっけ？」というのを防げます。
三国志は多数の登場人物や地名が出るのでそれが私は苦手だったのですが、こういう機能で読書をサポートします。
利用は無料ですのでぜひ登録して使ってみてください。
技術面
Vibe Coding感想・コツ
Claude codeで開発をしました。Claude codeがいき詰まったらGPT-5に質問を投げるということをしました。
うまく行ったこと
- 開発の流れとして、Github Issueを作り、スラッシュコマンドでブランチ作成から設計を開始するところまでやらせるという流れにした。コマンドは `/start-issue #{issue-id}` というもので、設計からブランチ作成までをやらせるようにしていた。スラッシュコマンド自体をClaude codeで作れるのが楽しかった
- 必ずテストは書かせるようにしていた。Capybaraを使ったE2Eテスト以外に、開発中はplaywrightというブラウザを扱うMPCを使うことでブラウザの確認を自分自身でさせていた。これで単純な500エラーとかを回避できる。
- VSCodeをべつで開いておき、そこでgit diffの内容を表示しておき、簡単な修正は自分でやるようにした（行の入れ替え、CSSの編集など）
- claude codeがわからなくなったら、GPT-5に質問を投げる。claude codeに「専門家に質問するので現状をまとめて」とまとめさせていた
- `/finish-issue` というスラッシュコマンドを作った。テストを実行し、コミットを適切な粒度にsquashして、不要なコードを削除してPRを作るというもの。楽だった。
- 「DBの列を増やす・減らす」といった、自分でやるとなると気が重い作業が苦ではなくなり本来どうあるべきかという点から考えられるようになった。同様にRailsのようなアプリだと、１ページ増やしたいだけなのだけど、そのためにコントローラーを増やして、Viewのフォルダを作って・・・という作業が発生することがあるがそういうのも苦ではないのがとても良かった
うまくいかなかったこと
- CSSをうまく当てるというのが苦手なようだった。無理やり指示をするとインラインでstyleを書くようになり、それでもうまくいかないとJSで書き込んで無理やり実現するということをやっており、後から戻すのがすごく大変だった
- コードを共通化すること。コンテクスト長に限界があるので、同じロジックを使い回すということは指示してやらないとできないことが度々あった
- 公式ドキュメントを当たったり検索を積極的にしてくれない。そのため必要に応じて「検索して」「公式ドキュメントを見て」と指示した。最終的にJSライブラリであるStimulusは特に苦手だったので公式ドキュメントをダウンロードしてローカルに配置しておいた
- 既存のライブラリ（gemなど）を軽視する傾向があった。設計を相談すると独自実装をしようとすることが多かった。確かに数百行程度の外部のコードを使うより独自で書いてしまった方がいいが、セキュリティが絡むようなものは既存のものを使って欲しい
- 「うまくいかないのでDocker imageを再構築します・・・消しました」みたいなのが最初は連発されて頭がおかしくなりそうになった。適切にやらないことリストを作るまでそれなりに大変だった。
それなりに使ってみての感想
- Rails6からRails8にする、Ruby2から3にするなど「手順が決まっていて、修正方法があり、ゴールが明確で、作業が大量にある」という作業はとても得意だと感じた。
- そのほか「Twitterぽいタイムライン」など既存の概念があるものも早い
今後LLMとのコーディングはどうなっていくのか
今後もLLMは想像できないような発展をしていく前提で、現状ではコードの共通化や一貫した設計という形での全体のメンテナンス性の担保、セキュリティの確保というのはある程度人間がみてやらないと難しく、全くシステム開発の経験がない人がLLMだけを使って中規模〜のシステムを作るのはできなさそうだというのがわかりました。
これぐらいの小規模なシステムでもやればやるほど全体の整合性が崩れていき新しく作ったページについて「トップページと同じデザインにして」、「この要素は別の場所にコードがあるはずなので共通化して」などの指示が増えていきました。やればやるほどこの負債のようなものは増えていき、ある時点で機能追加ができなくなるでしょう。
可能性としては、今回スラッシュコマンドで無駄なコードの自動排除をやらせたように、複数のエージェントが小さいタスクを背負って「コードの重複排除」「共通コードを作る」「セキュリティの担保」などをしていくのかもしれないし、Resendにメール送信を任せたように、複数のサービスを繋ぎ合わせてくだけのローコードだけの世界になるのかもしれません。
LLMの性能が上がり、全部まるっとやってくれるようになるとしても、人間が「よし、これなら安全だ」と安心できるためには何らかの責任を取る人かシステムが必要だし、そういうのがないのなら長い年月をかけて信頼関係を作らなないといけないでしょう。
引き続きLLMを使った開発をしていきますが、現状では自分の信頼できるスラッシュコマンドや CLAUDE.mdのような指示書などにコストをかけて整備することが重要で（PMBOKの書籍を読ませておけばいいわけではなく）、登山における酸素ボンベをもてば楽だが、酸素ボンベが重いというようなジレンマを感じます。
「みんなで読もう！三国志SNS」https://hyper-sangokushi.com/
