Claude codeとGoogle Geminiを使って、自身ではプログラムも設計書も1行も書かずにアプリを作った所感

## ノーコード開発

### 筆者略歴

本題に入る前に、まずは筆者の自己紹介を。
いわゆる「コの業界」でそれなりの期間、禄を食んでいるエンジニアです。普段は企画・設計といった上流工程から、ゴリゴリと手を動かすコーディングまで一通りこなしています。

### 本当に1行もプログラミングコードを書かずにアプリが作れるのか？

最近、IT界隈で「ノーコード開発」という言葉を頻繁に耳にします。なんでも、プログラミングコードを一切書かずにアプリケーションが作れるとか。

長年キーボードを叩いてきた身としては「本当か？」と疑ってしまう話ですが、これは試してみる価値がありそうです。
そこで今回は、コーディングAIとして名高い **Claude code** と、設計の相棒として **Google Gemini** を使い、この命題が真実かどうかの検証に挑みました。

## 実際に作ったもの～Spotify Playlist Manager

### 選んだ理由

AIに「Hello World」を書かせても、その真の実力は測れません。
せっかくなので、ある程度実用的で、少し難易度の高いものに挑戦しようと考えました。そこで選んだのが、**Spotify APIと連携し、プレイリストを管理するWebアプリ**です。

まずは第1段階として、大量の曲が溜まったプレイリストから、不要な曲を効率的に削除する機能の実装を目指します。

### 開発環境

AIとの開発は場所を選びません。そこで、どんなマシンでも同じ環境をすぐに再現できるよう、開発環境はDockerで構築することにしました。正確には、VSCodeの**devcontainer機能**を利用しています。

これにより、Windows (WSL2)、Ubuntu、macOSのいずれの環境でも、リポジトリをクローンするだけで全く同じ開発環境が手に入ります。

開発環境は以下のリポジトリで公開しています。`devcontainer.json`で使用するユーザー名を変更するだけで、すぐに開発を開始できます。もちろん、Claude codeも自動でインストールされるように設定済みです。

*   [https://github.com/tokumeishatyo/Claudecodedev](https://github.com/tokumeishatyo/Claudecodedev)

### Maxプラン

ここで現実的な話を一つ。
**Claude codeを本格的に利用するには、Anthropic社の有償プラン（Maxプラン）が必須です。**

参考までに、今回のアプリ開発（約3日間）だけで発生したコストは **$81** でした。
これを従量課金で運用し続けていたら…と考えると、少し恐ろしくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588692/4c27c403-48ca-44a6-87a2-619fd0610912.png)


今回はひとまず$100分のクレジットを購入して臨みましたが、ヘビーなやり取りを続けた結果、しばしば `Claude  Opus 4` の利用回数制限に達しました。AIとの本格的な協業には、それなりの投資が必要だと心得ておきましょう。

### 設計

「非エンジニアの人は設計なんてするの？」という素朴な疑問はあるかもしれません。
しかし、私のようなエンジニアにとって、設計なしに開発を始めることなどあり得ません。それはAIがコーディングするとしても同じです。

そこで今回は、設計書を **Google Gemini** に作成してもらいました。

まず、作りたいものを考えて箇条書きにします。それをGeminiに渡して要件定義書を作ってもらいました。次にこの要件定義書をGeminiに渡して外部仕様書を作り、外部仕様書を元に詳細仕様書、画面仕様書、試験仕様書を作ってもらいました。生成された設計書は、かなり厳密でしっかりとしたものでした。さすがはAIです。

驚くべきはそのスピード。
設計全体に要した時間は約2時間でしたが、その内訳は、**私が要件定義を考えて実装したい内容を列挙するのに1時間50分、Geminiが設計書一式を出力するのにわずか10分**でした。

### 実装

Geminiが詳細設計書まで作ってくれましたが、蓋を開けてみれば、**Claude codeは外部仕様書（≒要件定義）を読み込ませただけで、ほぼ完璧なアプリケーションを実装してしまいました。**

もちろん、細かい修正依頼は何度か行いましたが、最初にしっかりとした設計（特に要件）を固めていたおかげで、手戻りなく、スムーズに動くものが出来上がりました。
今後は、AIへの指示の出し方を工夫することで、さらに効率化できるかもしれません。これは次なる課題です。

## できたものを見て

### 実作業時間と中身を見て驚愕

**コーディング（AIへの指示出し）、動作確認、READMEの作成まで含めて、実作業時間は4時間足らず。**
それでいて、出来上がったものはほぼ要求通り。ライトモード/ダークモードの切り替え機能もしっかり実装してくれました。

この品質のものを、自分の手で1行もコーディングせずに作れてしまったという事実に、ただただ驚愕するばかりです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588692/2f9c790f-faed-41aa-9334-4689e85dfb7f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588692/5077e0c3-0465-4908-af3f-f4106551f72d.png)


### 非エンジニアがこれを作れるか？

結論から言うと、**「条件付きで作れる」** と思います。
その条件とは、以下の2つです。

1.  **どんな物が欲しいのかを、具体的かつ明確に文章で表現できること。**
    *   つまり、しっかりとした「要件定義」を書ける能力が必須です。曖昧な指示では、AIも動きようがありません。
2.  **ポート番号、リダイレクトURL、APIトークンといった基本的なIT用語を理解し、自身でアカウント取得や設定作業を行えること。**
    *   これらはAIが代行できない、人間が行うべき作業です。

今回、プログラムコードには一切触れていません。
したがって、上記2つの条件をクリアできれば、非エンジニアの方でも同程度のアプリケーションを開発することは十分に可能だと感じました。

### 作成したもの

今回作成した開発環境とアプリケーションは、以下のリポジトリで公開しています。

*   **devcontainer開発環境**
    *   [https://github.com/tokumeishatyo/Claudecodedev](https://github.com/tokumeishatyo/Claudecodedev)
*   **Spotify Playlist Manager**
    *   [https://github.com/tokumeishatyo/spotifyplaylist](https://github.com/tokumeishatyo/spotifyplaylist)

#### この文章もGoogle Geminiが書きました