はじめに
今回は Claude Code を使って簡単なアプリを作成し、デプロイするところまでやってみたいと思います！
前回の記事 ↓
Claude Codeを開始
とりあえず Claude コマンドで Claude Code を立ち上げるのですが、もし前回の終了時点から会話を再開したい場合は --continue オプションを使うといいです。
claude --continue
--continue オプションを付けると前回の会話から再開することができます！
コンテキストも復元されるため、スタート時点でコンテキストが占有されることになります。
アプリを作成 ・ 動作確認
1.アプリを作成
Claude Code が開始できたら早速プロンプトでアプリを作成してみましょう！
以下のプロンプトを実行してみます。
TODOアプリを作ってください。ultrathink
末尾の "ultrathink" は「※拡張思考モード（Extended Thinking Mode）」を発動させるために書いています。
※拡張思考モード
Claude Code が通常より時間をかけて精度の高い回答を行うモード。
発動させるためのキーワードによって使用するトークン数が異なる。
| 言語 | 最大予算 31,999トークン |
中予算 10,000トークン |
小予算 4,000トークン |
|---|---|---|---|
| English | ultrathink think harder |
think more think hard |
think |
| 日本語 | 熟考 深く考えて |
長考 よく考えて |
考えて |
プロンプトを実行すると、ターミナルで以下のように出力されました！Claude Code が作業してくれているのが見えて何だか面白いです笑
シンプルで使いやすいTODOアプリを作成します。
● Write(index.html)
⎿ Wrote 1 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 App</title>
<style>
* {
margin: 0;
padding: 0;
● TODOアプリを作成しました。index.html をブラウザで開いてください。
機能:
- タスクの追加: テキストを入力してEnterキーまたは「追加」ボタンをクリック
- 完了/未完了の切り替え: チェックボックスをクリック
- タスクの削除: 「削除」ボタンをクリック
- フィルタリング: 「すべて」「未完了」「完了」で表示を切り替え
- データの永続化: ブラウザのローカルストレージに自動保存（ブラウザを閉じても保持）
- 統計表示: タスク数を画面下部に表示
● ファイルを開くには:
start index.html
✻ Sautéed for 1m 21s
Claude Code の作業が終わると index.htmlが作成されていました！
内容としては、シンプルな TODO アプリを HTML と JavaScript で実装し、CSS で見た目もきれいに整えたものになってました。
2. 動作確認
実際にローカルで動かしてみると、想像以上にいい感じに動いてくれて驚きました。
シンプルなアプリですが、改めて Claude Code の便利さを実感できました！
作成したアプリをデプロイ
作成したアプリをVercelにデプロイしてみようと思います！
以下のプロンプトを実行します。
Vercelにデプロイしたいです。
プロンプトを実行すると、ターミナルで以下のように出力されました。が、最後の方でエラーが出てます。。
● Vercelにデプロイします。まずVercel CLIがインストールされているか確認します。
● Bash(vercel --version)
⎿ Error: Exit code 127
/usr/bin/bash: line 1: vercel: command not found
● Vercel CLIをインストールしてデプロイします。
● Bash(npm install -g vercel)
⎿ added 269 packages in 12s
31 packages are looking for funding
run `npm fund` for details
● Bash(cd /d/workspace/todo && vercel --yes)
⎿ Error: Exit code 1
Vercel CLI 50.4.1
> NOTE: The Vercel CLI now collects telemetry regarding usage of the CLI.
> This information is used to shape the CLI roadmap and prioritize features.
> You can learn more, including how to opt-out if you'd not like to participate in this program, by visiting the following URL:
> https://vercel.com/docs/cli/about-telemetry
Loading scopes…
Error: The specified token is not valid. Use `vercel login` to generate a new token.
● Vercelにログインが必要です。以下のコマンドを実行してください：
vercel login
ブラウザが開くのでVercelアカウントでログインしてください。ログイン完了後、再度デプロイします：
vercel --yes
または、GitHubにプッシュしてVercelダッシュボード（https://vercel.com）からインポートする方法もあります。
上から見ていくと、Vercel CLI の有無を確認し、存在しないためインストールしてくれてますね！親切！！
次に、Vercelのトークンが無効でデプロイ失敗になっています。
vercel login コマンドでトークンを取得してから再度デプロイしますと書いてあるので、コマンドを実行したところエラーでログインできず。
Vercelのページからトークン作成したらできるよ！と Claude Code に諭され、作成したトークンを入力し実行すると無事にデプロイできました。。
Bash(cd /d/workspace/todo && vercel --token xxxxxxxxxxxxx --yes)
⎿ https://todo-gx0gb106q-marys-projects-660cbf17.vercel.app
Vercel CLI 50.4.1
Loading scopes…
… +33 lines (ctrl+o to expand)
● デプロイ完了しました！
URL: https://todo-two-rosy-24.vercel.app
このURLでTODOアプリにアクセスできます。
セキュリティ上の注意: 提供いただいたトークンは漏洩した状態なので、https://vercel.com/account/tokens で削除して新しいものを作成することをお勧めします
トークン削除してね！と注意喚起してくれる Claude Code 君はきっとスパダリなのでしょう。
出力された URL にアクセスすると、TODO アプリが正しくデプロイされており、実際に操作できることも確認できました！
触ってみたい方はこちらから：TODO App
さいごに
今回はプロンプトのみでアプリを作成し、デプロイすることができました！
簡単なものでも、手を動かさずに指示だけ出して物が作れるのは感動してしまいました笑
デプロイではエラーが出て少し戸惑いましたが、Claude Code と相談してしっかり導いてもらえたのであまり気になってません！（？）
他にもいろいろ作って遊ぼうと思うので、その都度記事を書いていこうと思います！