LS-Finder

AI開発事情

  • 開発
  • AI
AI開発事情

こんにちは、開発担当です。

先日、LS-Finderの作り方という記事で、このサイトがどんな構成で 動いているのかを図入りでご紹介しました。今日はその続きというか、もっと踏み込んだ 「舞台裏」の話をさせてください。

実はこの LS-Finder、システムのほぼ100%を AI に書いてもらっています。 しかも開発を担当している私、本職はバックエンドエンジニアではあるものの、 このサイトで使っている TypeScript や React には、これまで一度も触ったことが ありませんでした。 それでも、こうしてちゃんと動くサイトが出来上がっています。 今日は「どうやって作っているのか」を、正直にお話しします。

未経験の言語でも作れてしまう

TypeScript も React も未経験。普通なら「まず入門書を一冊……」となるところですが、 今回はほとんど教科書を開いていません。代わりにやったことは、AI に相談しながら 作る ことだけです。

使っているツールは Claude Code。ターミナルの中で対話しながら、 コードを読ませたり書かせたり修正させたりできる、AI 開発のための道具です。 私がやるのは「何を作りたいか」を日本語で伝えることと、出来上がったものを 実際に触って「ここはこうしたい」と注文をつけること。細かい書き方は AI に任せます。

とはいえ、ただ「いい感じに作って」と丸投げしているわけではありません。 私なりの進め方があるので、順番にご紹介します。

① まずドキュメントを書かせる

いきなりコードを書かせるのではなく、最初に設計ドキュメントを書かせる のが 私のこだわりです。AI に「何をしたいか・どんなものを作りたいか」をじっくり話し、 それを次のような .md ファイルにまとめてもらいます。

  • project-structure.md：プロジェクト全体の構成
  • doc/web-spec.md：どんな画面があり、どんな入力項目があるか。ボタンを押すと何が表示されるか
  • doc/api-spec.md：web-spec を実現するための API 定義
  • doc/worker-spec.md：API が必要とするデータをどう取得するか
  • doc/db-spec.md：取得したデータを格納する DB の構成

画面の仕様から順にブレイクダウンして、最終的にデータの取得方法と保存先まで 一気通貫でドキュメントに落とす。ここが決まっていれば、あとの実装は驚くほど スムーズに進みます。逆に言うと、ここが曖昧だと AI も迷子になります。

② ドキュメント通りに実装させる

設計が固まったら、次は「このドキュメントに従って実装して」とお願いします。 すると AI が、画面・API・データ取得・DB を、ドキュメントに沿って コードに起こしてくれます。私はその間、コーヒーを淹れて待っているだけ…… というと言い過ぎですが、細かい構文で悩む時間はほとんどありません。

③ 動かしながらドキュメントを直す

出来上がったアプリを実際に動かしてみると、「あ、この項目も欲しいな」 「ここの表示順はこうしたい」と、必ず直したくなる箇所が出てきます。

ここで大事なのは、いきなりコードを直させないこと。 まず AI に ドキュメントの方を修正させます。 「web-spec のこの画面に、こういう項目を追加して」 という具合です。設計図を先に更新するイメージですね。

④ 直したドキュメントを実装に反映させる

ドキュメントが最新の状態になったら、最後に「この変更を実装に反映して」とお願いします。 これで、直したい内容がちゃんとコードにも反映される、というわけです。

③→④の順番を守ることで、「思いつきでコードだけ変わって、設計書は置いてけぼり」 という、開発でありがちな悲劇を防げます。

重要なのは「ドキュメントと実装を常に同期させる」こと

ここまでの流れで一番大事なのは、ドキュメントと実装が常に一致している ことです。 どちらか片方だけが新しい、という状態になると、途端に AI も人間も混乱します。

そこで私は、「常にドキュメントと実装を同期させる」というルールを CLAUDE.md に 明記しています。 CLAUDE.md は Claude Code が毎回読んでくれる、いわば プロジェクトの憲法のようなファイルです。ここに書いておけば、AI は毎回そのルールを 意識して動いてくれます。実際、このサイトの CLAUDE.md にも 「コード修正時はドキュメントも修正、ドキュメント修正時はコードも修正」と しっかり書き込んであります。

人間が頑張って気をつけるのではなく、仕組みで守らせる。 これが未経験の私でも 破綻せずに開発を続けられている、いちばんの秘訣かもしれません。

おわりに

今日は、LS-Finder がどんなふうに AI と一緒に作られているのか、その舞台裏を ご紹介しました。ドキュメントを書かせて、実装させて、動かして、また直す。 その全部を AI に相談しながら進める──開発経験がなくても、ここまで作れてしまう。

AI がここまで発達して、誰でも簡単にシステム開発ができる時代 が来たのだなあと、 毎日ワクワクしながらキーボードを叩いています。いやはや、本当に楽しい時代ですね。 みなさんも、何か作りたいものがあれば、ぜひ AI に話しかけてみてください。

【それではよい旅を！】