仕様書を作ってから実開発を進めよう ゼロから始めるAIコーディング(3)

プロンプトでアプリ作成を指示してみたものの、見た目や操作性、それにプログラム自体の作り方にも不満のある仕上がりになってしまった第1回。続く第2回では見た目と操作性の改善のために「Claude Design」を使用しました。

次はそのデザインをもとに再度アプリ作成にトライします。「ちゃんとした」Windowsネイティブのアプリになるように、指示の仕方も少し工夫してみることにしましょう。

プロンプトだけに頼らない方法で開発する

大規模なアプリではないにしても、ある程度まとまった量の要件を盛り込みたいときには、「プロンプト一発」で指示するのには限界があります。たとえば前回のClaude Designで作成したデザインも、文言だけで表現するのは困難でしょう。

前回「Claude Design」で作成したデザインの最終版

また、作ったデザインに沿ってアプリ開発していく際には、それを実現するのに適切な技術や検討すべき課題などもイメージできていなければならず、言語化するのは容易ではありません。プロンプトにできたところで、指示にあいまいな部分があると以前と同じように「なんか違う」ものができあがってしまいます。

とはいえアプリ開発経験の少ない人が、必要な指示を網羅してプロンプトに入れ込むことができるかというと、おそらく不可能と言っていいと思います。

そこで、「そもそも開発にあたって何が必要なのか」もAIに考えてもらうことにします。つまり、アプリの「設計書」や「仕様書」と呼ばれるものに近い資料を初めに作成してもらい、その情報をもとに実開発を行なうのです。

というわけで、ここからはClaude Codeを使って進めます。第1回のプロンプトをベースに、仕様を決めるところから始めること、前回作成したデザインデータを参考にすることを指示します。

加えて、一気に要件を詰め込んで完成させるのではなく、いくつかのフェーズに分けて段階的に開発する形にします。フェーズごとにユーザー側で動作確認しながら進めることで、意図しないものができあがることを防げますし、途中段階であれば軌道修正するのも難しくないはずです。

ClaudeアプリでClaude Codeを立ち上げ

仕様書が完成したらいよいよ実装……の前にやっておきたいこと

Claude Codeで作業フォルダを指定し、「プランモード」にしてプロンプトを入力します。すると、場合によってはAIが不足していると判断した情報を補うために追加の確認事項が表示されます。

追加の確認事項が表示されたら選択肢のなかから良さそうなものをチョイス

いくつかの選択肢から決めていくことになりますが、ユーザー側に技術的な知見が十分にないとしても、この段階である程度カバーしてくれるのはありがたいところです。

回答すると数分で「仕様書作成プラン」が提案されます。仕組みや用語などに分からないところがあれば、1つ1つClaude Codeに質問したり、Web検索したりしながら把握していくと良いでしょう。

提案されたプランをしっかり確認し「承認」します

問題なければ「承認」することで、実際の設計・仕様書ファイル「spec.md」が作成されます。今後はこのドキュメントを元に実装を進めていくことになるわけですが、焦ってはいけません。いったん「/clear」コマンドを実行しましょう。

Claude Codeにおける「/clear」コマンドは、ざっくりと言えばAIに「忘れてもらう」命令です。ここまでチャット(セッション)でやり取りした内容をリセットし、新たにまっさらな状態からスタートするときに使います。

せっかく仕様書を作って中身も把握してもらっているのに、リセットしてしまうのはもったいない！ と思うかもしれません。ですが、AIが一度に覚えておける記憶量(コンテキスト)には上限があります。上限に近づいたり、超えたりすると、満足のいく結果が得にくくなるのです。

「コンテキスト」が残り少なくなるとAIの作業に不安定さが出てくることがあります

「/clear」と入力して送信し、リセット

まっさらにして再スタート

何より、ここからは大量のコーディング作業が待ち受けているので、少しでも記憶できる量に余裕をもたせておきたいところ。リセットしても、すでに「spec.md」という十分な資料があります。これを読み込ませて開発をスタートさせれば何も問題はありません。

なお、こうしたタイミングに限らず、直前の作業とは直接的に関係しない作業に切り替えたいときは、そのたびに/clearすることが推奨されています。連続的に作業を進めるより、合間に/clearを入れた方が結果的にスムーズに開発が進むので、ぜひ活用してみてください。

開発環境など必要なツール類も確認しよう

さて、/clearも行なってspec.mdを読みつつ実装を開始してもらいました。ただ、今回はWindowsのネイティブアプリの開発なので、Claude Codeに書いてもらったソースコードを実際に動くアプリにするのに、Visual Studioのような開発環境が必要になります。

改めてプランモードでセッション開始。spec.mdを読んでもらい、フェーズ1から実装へ

そのため、別途ツール類のインストールが必要になる場合もあるでしょう。何をインストールしてどう設定すればいいのかなど、分からないことがあればそのあたりもClaudeに聞いて進めてみてください。

そんなこんなで、次回は仕様書から作り上げたPDFツールの完成度がどんなものになっているかを確認しながら、さらなるブラッシュアップを図るための効率の良い進め方なども合わせて紹介したいと思います。