シンプルなTODOアプリを、Claude Codeを使って5分で作って30分で公開する

「Claude Code」は、CLI上で動くLLMによるAI開発支援ツールです。本連載は全4回を予定しています。これからClaude Codeを初めて触ってみる初級から中級のエンジニア向けに、概要と歴史的な背景の説明、料金プラン等の紹介、インストールとセットアップのやり方を解説し、最後にClaude Codeを使った新しい開発スタイルをハンズオンで体験します。なお本連載は2025年12月5日刊行予定の『Claude CodeによるAI駆動開発入門』から一部、抜粋・編集してお届けします。

第3回目は、Claude Codeにプロンプトを指示して、たったの5分でシンプルなTODOアプリケーションを作ってみます。その後、アプリケーションをGitHub PagesとVercelの両方にデプロイするところまで、Claude Codeと対話しながら行っていきます。

5分でアプリケーションを作る

アプリケーション開発の基本といえば「TODOアプリ」を作ることでしょう。
ここではClaude Codeに簡単なプロンプトを出し、5分でアプリケーションを作り上げてもらいます。

まずはClaude Codeを実際に試運転してみて、その威力を体感してください。

ファーストプロンプト

まずはプロジェクトディレクトリを作り、Gitを初期化するところまではご自身で行ってください。以下のコマンドをターミナルで実行します。

# 「todo」というディレクトリの作成
mkdir todo
# 「todo」ディレクトリに移動
cd todo
# Gitの初期化
git init

それでは早速Claude Codeに指示してみましょう。ここからターミナルでclaudeと入力して対話モードに入り、以下のプロンプトを指示します。

> TODOアプリを作ってください。 ultrathink

なお、「⁠ultrathink」とは、アプリケーションの初期段階のコンテキストが大きく、広範囲になりそうな際に使えるキーワードです。詳しくは書籍で解説しているのでぜひ購入して参考にしてください。

以下は筆者の環境でのClaude Codeのレスポンスです。なおLLMの特性上、お手元の実装と異なる場合があります。

  TODOアプリの基本的な機能：
  1. TODOの追加
  2. TODOの削除
  3. TODOの完了/未完了の切り替え
  4. TODOの一覧表示
  5. データの永続化

  技術スタックの選択肢：
  - フロントエンド: React, Vue, Angular, バニラJS
  - バックエンド: Node.js/Express, Python/Flask, Ruby/Rails
  - データベース: SQLite, PostgreSQL, MongoDB, ローカルストレージ

  シンプルに始めるなら、HTML/CSS/JavaScriptでローカルストレージを使うのが良いでしょう。

  まず、現在のディレクトリの状況を確認して、TodoWriteツールでタスクを計画します。

⏺ TODOアプリを作成します。まず現在のディレクトリを確認してから、タスクを計画します。

⏺ List(.)
  ⎿  Listed 2 paths (ctrl+r to expand)

  ディレクトリは空のようです。では、TodoWriteツールを使ってタスクを計画し、シンプルなHTML/CSS/JavaScriptのTODOアプリを作成します。

  TodoWriteでタスクリストを作成しました。では、最初のタスクから始めます。HTMLファイルの作成です。

⏺ Update Todos
  ⎿ ☐ HTMLファイルの作成（基本構造とUI要素）
     ☐ JavaScriptファイルの作成（機能実装）
     ☐ TODOアプリの動作確認とテスト
     ☐ CSSファイルの作成（スタイリング）

✻ Thinking…

  では、HTMLファイルを作成します。シンプルなTODOアプリのHTMLを作成しましょう。

⏺ Write(index.html)
  ⎿  Wrote 28 lines to index.html                                              
     <!DOCTYPE html>
     <html lang="ja">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>TODOアプリ</title>
         <link rel="stylesheet" href="style.css">
     </head>
     <body>
         <div class="container">
     … +18 lines (ctrl+r to expand)

✻ Thinking…

  HTMLファイルが作成できました。次はCSSファイルを作成します。

⏺ Update Todos
  ⎿  ☒ HTMLファイルの作成（基本構造とUI要素）
     ☐ CSSファイルの作成（スタイリング）
     ☐ JavaScriptファイルの作成（機能実装）
     ☐ TODOアプリの動作確認とテスト

✻ Thinking…

  CSSファイルを作成します。モダンで見やすい（以下、省略）

さて、最初のプロンプトを指示してからものの30秒ほどで結果が返ってきました。

⏺ TODOアプリを作成しました。

  機能：
  - タスクの追加・削除
  - 完了/未完了の切り替え
  - フィルタリング（すべて/未完了/完了）
  - ローカルストレージでのデータ保存

こちらが丁寧に指示しなくても基本的に自分で実装計画を立てて、以下の画面のようにいくつかのファイルを作成しアプリの実装をしてくれました。

ローカルサーバーを起動する

次に実際にアプリケーションを起動してみましょう。なお、ローカルサーバーの起動はご自身で行う必要があります。

今回は静的ファイルとしてindex.htmlが生成されました、静的ファイルを配信する簡易サーバーを立ち上げるためにはいくつか方法があります。

VS Codeをお使いの場合は「Live Server」という拡張機能が便利です。拡張機能をインストール後、HTMLファイルを右クリックして「Open with Live Server」を選ぶだけで、自動リロード機能付きのローカルサーバーが起動します。

それ以外の環境の場合、ターミナルで以下のコマンドを入力します。

npx http-server

# または
npx serve

そうするとローカルサーバーが立ち上がり、ブラウザのURLバーに「http://localhost:8000」などのURLを打ち込むと表示を確認できるようになります。

以下が今回作成したTODOアプリの画面です。

無事にアプリが動作しました。

アプリをデプロイして公開する

作成したTODOアプリケーションを本番でも使える環境にデプロイしてみましょう。

GitHub Pagesにデプロイする

今回は公開リポジトリであれば無料でデプロイできるGitHub Pagesを選んでみましょう。

まず、GitHub上にリモートリポジトリを作りデプロイするところまでClaude Codeに実行してもらいましょう。もちろんプロジェクトの最初にユーザー自身で行っても構いません。

アカウント連携されたghコマンドさえ入っていればリモートリポジトリが無くても、ターミナルから作成が可能です。

以下のようにClaude Codeに指示を出します。

> ghコマンドを使って、リモートリポジトリを作成し、コミットしてプッシュしてください。

ローカルにghコマンドが入っているかどうかClaude Codeが認識していないことも多いため、「⁠ghコマンドを使って」と指示する方が確実です。

⏺ 完了しました！

リポジトリが作成されました: https://github.com/sutefu23/todo
すべてのファイルがコミットされ、リモートリポジトリにプッシュされました。

次にGitHub Pagesにデプロイしましょう。以下のように指示します。

> GitHub Pagesにデプロイしてください。

しばらく待つとGitHub Pagesにデプロイされました。

GitHub Pagesへのデプロイが完了しました！

現在ビルド中です。数分後にアクセス可能になります。

ここまで、プロジェクトの立ち上げからデプロイまで約30分で完了しました。

このようにGitHub PagesはClaude CodeがghコマンドでGitと連携できれば、ゼロコンフィグで公開できるのが魅力です。

Vercelにデプロイする

先ほど紹介したGitHub Pagesは公開リポジトリに対しては無料ですが、プライベートリポジトリは有料版（GitHub Pro）でしか活用できず、Basic認証などをかけたい場合なども有料となります。

これらがいずれも無料なのはVercel[1]です。プロジェクトによってはVercelの方が都合が良い場合もあります。

Vercelはサーバーレスなクラウド環境、いわゆるPaaS（Platform as a Service）のサービスです。AWSやGoogle Cloudなどのクラウドサービスでアプリケーションをデプロイしようと思ったら、複雑な設定とインフラ知識が基本的には必要ですが、VercelなどのPaaSはインフラの知識がなくても比較的簡単にデプロイして、保守性と冗長性に優れた環境でホストすることができます。

Vercelへの新規登録

Vercelは登録が必要なので、まだの方は以下の手順で登録してください。

Vercelのサイトのトップページの「Sign Up」ボタンから登録できます。

最初は「I'm working on personal projects」を選べばよいでしょう。

どのログイン方法でも構いませんが、VercelはGitからそのままビルドコマンドを設定するだけでデプロイできるので、GitHubとのアカウント連携が一番便利です。もちろん他の選択肢を選んでも、後からGitHub連携することは可能です。

なお、GoogleアカウントやメールアドレスでVercelアカウントを作ったことがあって、Git アカウントを連携されてない場合は、ログイン後の画面の左側「Import Git Repository」の下部にある「Manage Login Connections」をクリックします。

次の画面で「Sign-in Methods」の中から「GitHub」を選んで連携してください。

これでVercelのアカウントとGitHubのアカウントが紐づくことになり、Claude CodeにVercelにデプロイするように指示するだけでVercel CLIを使ってプロジェクトの作成、ビルドコマンドの設定等を行い、アプリケーションをリリースすることができます。

Vercelへのデプロイ

Vercelにデプロイするには以下のように、

> Vercelにデプロイしたいです。

と一言Claude Codeに伝えるだけでデプロイ可能です。

本来、ターミナルからはVercelの公式CLIからコマンドを実行してVercelにデプロイしますが、もし環境にCLIがない場合は必要なCLIツールをインストールした後、実行してくれます。

GitHub連携ができている場合、

GitHubでログインを選択します。

と自動でGitHubログインを選択してくれます。

GitHub連携ができていない場合はブラウザが立ち上がり、以下のようなログイン画面が出てきます。

これによりVercelのプロジェクトをClaude CodeがCLIから操作できます。

⏺ Bash(npx vercel --yes)
⎿ https://todo-av1fkyxpd-sutefu23s-projects.vercel.app
	Vercel CLI 46.0.2
	Loading scopes…

… +19 lines (ctrl+r to expand)
⏺ Vercelへのデプロイが成功しました！
	本番URL: https://todo-av1fkyxpd-sutefu23s-projects.vercel.app
	プロジェクトの管理画面: https://vercel.com/sutefu23s-projects/todo/settings

こちらで問題なくVercelにデプロイできました。

以上の手順のように、VercelにアカウントがありGitHubが紐づいてさえすれば、Claude Codeに指示するとゼロコンフィグでデプロイできます。

プライベートリポジトリであっても無料枠でデプロイできます。

なお、今回作成したTODOアプリは以下のURLから確認できます。

URL: https://sutefu23.github.io/todo/

まとめ

今回は、Claude Codeにワンプロンプトでたったの5分でシンプルなTODOアプリケーションを作ってもらいました。

その後、GitHub PagesとVercelの両方にデプロイするところまで、Claude Codeと対話しながら行ってきました。

最終回となる次回は、今回作成したTODOアプリをフレームワークを使ってClaude Codeに再び作成してもらいます。その際に発生するエラーへの対処法についてもあわせて解説します。

イベント⁠：著者と深掘るClaude Code×AI駆動開発の最前線　Lancers TechBook#1

11月19日（水）に、Lancers様主催で著者の平川さんが登壇するオンラインイベントが開催されます。

Claude Codeを使ったAI駆動開発の基礎から、実務での応用テクニック、さらには書籍執筆後の最新アップデート情報まで、著者ならではの深い知見を直接伺える無料イベントです。なお、参加には事前にconnpassでの登録が必要です。皆様、ぜひご参加ください。