はじめに
株式会社ネクストスケープ Chief Technology Office所属の小野塚です
昨年9月22日、まだまだ暑いと言っていた時期ですが、そのころに仕様駆動開発としてGitHub SpecKitを試した記事を書きました。
仕様駆動開発に関してはどのように進めるか、どのAIツールで行うか。。等々、色々と試行錯誤が行われているかと思います。
お客様からのご要望を自身が作るWebサイト等の成果物に正しく反映するには何らかの形でドキュメントを起こし、それをAIに共有しつつコードを書いていく必要があります。
GitHubのSpec Kitも仕様駆動開発のためのツールの１つとして高く評価されていますが、この進歩の早いAI界隈においてSpecKitも更に進化を遂げているようなので、再度試してみたいと思います。
設定及び概要説明
以前に記事を書いた際はWindowsは動作環境に含まれていなかったのですが（それでも一応動作はしていましたが）、今回改めて動作環境の１つとなっていましたので、今回もWindows上で動かしてみたいと思います。
まずは対象のプロジェクトに移動し、以下のコマンドで設定を行います。
uvx --from git+https://github.com/github/spec-kit.git specify init --here
以下のようにタイトルが表示され、初期設定を促されます（以降、スクリーンショットが度々表示されますが、文字が小さいかと思いますのであらかじめご了承ください。ブラウザの拡大機能等で見ていただければと思います）。
AIアシスタントの選択が必要になりますが、一番最初の公開時は３つ、そしてその１～２週間後には７つに増えまして約４カ月後の今は以下のように更に17個に増えています。ここだけでも進化が見てとれますね。
スクリプトのタイプは前回同様PowerShellでいきます。
初期化でエラーが出てますが、これは改行コードによるものなのでOKとします。
そうすると次にどうすれば良いか、英語でガイダンスが表示されます。
改めて説明しますと、前回は主に４つのコマンドで作業を進めていきました。
/specify
/plan
/tasks
/implement
そして最新のバージョンにおいてはコマンド名が変わり、「/speckit.～」のように必ず先頭に「/spectkit.」が付く形に統一されました。
他のコマンドと見分けやすくするためかと思いますが、わかりやすくて良いです。
簡単に説明しますと、主に使うコマンドは以下の通り。
- /speckit.constitution： プロジェクトの基本方針・原則を決める
- /speckit.specify ：要件定義・仕様を文章化
- /speckit.plan ：実装計画を作る
- /speckit.tasks ：具体的なタスクに分解
- /speckit.implement： 実装を進める
といったものでして、「設計 → 計画 → 実装」をAI主導で進めるための流れです。
以下はEnhancement Commands（任意・補助）ということで、 使わなくてもいいけど便利な追加コマンドです。
- /speckit.clarify ：曖昧な点を質問形式で洗い出す
- /speckit.analyze ：作った成果物の整合性チェック
- /speckit.checklist： 品質チェックリストを作る
いわば「設計ミス・認識ズレを減らす用」ですね。
実行
ちょっと上記の簡単な説明だけではわかりづらいかもですので実際にどういった内容で指示するかをお見せします。
今回もVSCode上のClaude Codeで実行しますのでVS Codeを立ち上げます。
次にスラッシュ「/」を打ち込んで、まずは上記SpecKitのコマンドが表示されることを確認してください。
まずはspeckit.constitutionコマンド。これはプロジェクトの原則を決めるためのもので、最初に1回だけ実行します。
例えば以下のとおり
「/speckit.constitution シンプルさ重視。過度な抽象化は避ける。TypeScriptで型安全に。テストは主要機能のみ。コメントは日本語」
そうするとプロジェクト内の.specify\memoryフォルダにconstitution.mdというファイルがあり、上記指示を盛り込んだ形で更新されます。
次に/speckit.specifyコマンド。何を作るか、WHATとWHYを書きます。技術スタックはまだ書きません。
具体的には以下の通り。
/speckit.specify シンプルなToDoアプリ。タスクの追加、完了チェック、削除ができる。完了したタスクは取り消し線で表示。データはブラウザのローカルストレージに保存し、リロードしても消えない。
すると仕様が生成され、specs\001-todo-appフォルダ配下のspec.mdが更新されます。
次に今回の新コマンド、/speckit.clarify。これでspecの曖昧な部分を質問形式で洗い出してもらいます。
最初に試した際には英語で出力されたため、以下のように日本語での質問を指示します。
「/speckit.clarify 日本語で質問してください」
すると以下のような仕様に関する質問が出てきますので回答してあげます。
例えば以下のようなものです。
「質問 1: タスクの表示順序
新しく追加されたタスクは、一覧のどこに表示されますか?
推奨: オプション A - 最新のタスクを上部に表示する方が、ユーザーは直近のタスクに素早くアクセスでき、完了チェックや削除などの操作が効率的です。多くのToDoアプリで採用されている標準的なパターンです。
| オプション | 説明 |
|-------|--------------------------|
| A | 最新のタスクが一覧の上部に表示される（新しい順） |
| B | 最新のタスクが一覧の下部に表示される（古い順） |
| C | ユーザーが並び替え可能（ドラッグ&ドロップなど） |
「A」「B」「C」のいずれか、または「推奨」「yes」と回答してください。独自の回答（5語以内）も可能です。」
と、このように選択肢で選んだり、別の回答を行うこともできます。
このように自身でチェックを行い、インタラクティブに仕様を詰めていってくれます。
次に/speckit.plan。これで技術スタックと設計方針を指定します。
「/speckit.plan React 18 + TypeScript + Vite。スタイリングはTailwind CSS。状態管理はuseStateのみでシンプルに。コンポーネントは最小限。」
これを実行するとspecs\001-todo-app配下に
`plan.md`, `data-model.md`, `research.md` などが生成されます。
そして/speckit.tasks コマンド。
タスクリストを生成し、実装タスクに分解してくれます。
ここでは`tasks.md` が生成されます（ユーザーストーリー単位でタスク化）。
そして実装の前に/speckit.analyzeを実行しましょう。これも新コマンドです。
spec、plan、constitution間の整合性をチェックしてくれて、矛盾や抜け漏れがあれば指摘してくれます。
例えばタスクと要件のマッピング。
チェック結果のメトリクス（細かい！）
「こういう改善点があるけどどうする？」的な提案。これもいいですねー。
そして、問題が無ければ/speckit.implementコマンドで実装してくれまして、最終的にToDoアプリが作成されます。
最後に
いかがでしょうか。
前回は仕様書を色々と作ってくれましたが、インタラクティブ性に乏しく（他のツールもそういうものが多かったので特に問題は無かったですが）、生成されたものに対するチェックもその分必要となっていました。
今回は単に指示を受けて成果物を作り続けるだけでなく、それをチェックし、更に問題があればユーザーに確認を取るという形で人間同士のやり取りを彷彿とさせるような形になっています。
更に「使える」ツールとなっておりますので、よろしければ皆さんも触ってみてください。
当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。
（以下当社お問合せフォーム）
当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。
