未ログイン状態で閲覧中
  • 投稿日:2026/04/03
【第1回】AIにコードを書いてもらう仕組みとは?非エンジニアがVercelにデプロイするまでの全体像

【第1回】AIにコードを書いてもらう仕組みとは?非エンジニアがVercelにデプロイするまでの全体像

  • 2
  • -
ポテヒロ🥔ほくうまっポテト🍟AI開発

ポテヒロ🥔ほくうまっポテト🍟AI開発

この記事は約6分で読めます
要約
「簡単」とは言いません。でも手順通りにやれば必ずURLが発行できます。プログラミング基礎は学んだがコードは書けない著者が、Claude Code・Cursor・Vercelを使って資産管理ダッシュボードをネット公開するまでの全6回シリーズ。第1回は全体像と使うツールの紹介です。

まず最初に、今回の完成イメージです

この連載で最終的に作るのは、自分専用の個人資産管理ダッシュボードです。

実際の公開例はこちらです。

成果物URL: https://asset-dashboard-two.vercel.app/

(現在はデモです)

日本株・米国株・現金・不動産・暗号資産などをまとめて入力し、

資産全体の構成や推移をひと目で確認できるWebアプリです。

スマホからでも確認できて、URLをブックマークしておけば、

自分専用の「資産の見える化ページ」として使えます。

最初に正直に言います

「AIを使えばプログラミング未経験でもアプリが作れる」

こういう記事、よく見かけますよね。半分本当で、半分語弊があります。

✅ 本当のこと:コードを自分で書かなくてもWebアプリは作れます。AIがほぼ全部書いてくれます。

⚠️ 語弊があること:「誰でも簡単に」ではないです。黒い画面(ターミナル)を開くこともあるし、英語のエラーと向き合うこともあります。

この連載はそこを誤魔化しません。

私自身、プログラミングの基礎はオンライン教材で一通り学びました。変数とか関数とか、概念はわかる。でもゼロからコードを書いてアプリを作るのは無理でした。そこにAIが来た。

「書く」のはAIの仕事。「何を作るか指示する」のが私の仕事。

この分担で、自分の資産状況を可視化するダッシュボードをネット上に公開することができました。この連載では、その手順をそのまま公開します。

Claudeって何? ChatGPTと何が違うの?

「AIといえばChatGPT」という方も多いと思います。Claudeも同じように日本語で会話できるAIです。この連載でClaudeを選ぶ理由は一つ。「長くて複雑なコードの生成と修正」がとても得意だからです。

特に「何がわからないのかもわからない」状態になったとき、画面に表示されているものを丸ごとコピーして投げるだけで、状況を読み取って次の手を教えてくれます。

たとえるなら、何でも知っているエンジニアの部下が24時間つきあってくれる。そんなイメージです。質問の仕方がわからなくても、状況をそのまま伝えれば動いてくれます。

AIはどうやってコードを書くのか

「日本語で頼んだらコードが出てくる」と聞いても、最初は半信半疑でした。仕組みを農業にたとえるとこうなります。

「長崎県雲仙市の畑でメークインを作りたい。12月植えを考えている」と伝えるだけで、催芽のタイミングから霜対策・収穫時期まで、具体的な栽培スケジュールが返ってきます。

コードへの指示も全く同じです。「株価を自動で取得してグラフで表示するページを作りたい」と伝えると、Claudeがコードを書いてくれます。あなたはそのコードを確認するだけ。

「何を作りたいか」を日本語で伝えること。これだけがあなたの仕事です。

この連載でつくるもの

今回の連載でつくるのは「個人資産管理ダッシュボード」です。日本株・米国株・現金・不動産・暗号資産の残高を入力すると、グラフで資産全体を可視化できるWebアプリです。自分専用のURLが発行されるので、スマホのブックマークに入れていつでも確認できます。

全体の流れはこうなります。

① Cursor + Claude Code

 AIと会話しながらコードを作る

 → 「こういうアプリを作って」と日本語で指示するだけ

② Claude Cowork

 エラー調査・手順確認をAIに任せる

 → 困ったことをそのままコピペして「これ何ですか?」と聞く

③ GitHub

 コードを保存・管理する

 → Googleドライブのコード版。Claude Codeが自動で保存してくれる

④ Vercel

 GitHubと連携してネットに公開する

 → ボタンを押すだけで自分専用URLが発行される

⑤ 完成:自分専用URLで資産管理ダッシュボードが動く

必要なものリスト

Claude CodeはAnthropicのProプラン(月額$20、約3,000円)に含まれています。使った分だけ課金される従量課金ではないので、使いすぎて高額になる心配はありません。Proプランの契約方法は第2回で説明します。

よくある不安に先に答えます

Q. 基礎知識ゼロでもついていけますか?

ついていけます。ただし「意味を理解しながら進む」より「手順通りにやってみて、後から理解する」というスタンスのほうが挫折しません。わからない言葉が出てきたらClaudeに聞けば日本語で教えてくれます。

Q. 何がわからないのかもわからなくなりそうで不安です。

これがAI開発の一番リアルなつまずきです。そういうときの対処法はシンプルで、画面に表示されているものを全部コピーして、Claudeに投げる。それだけです。「何を聞けばいいかわからない」ときこそ、全部丸投げするのが正解です。第5回ではこの「丸投げの作法」をパターン別にまとめます。

Q. Proプラン $20/月は高くないですか?

Claude CodeはProプランに含まれており、従量課金ではありません。月$20の固定費で、この連載の全工程を進められます。不要になれば解約もシンプルです。

Q. 英語が読めなくても使えますか?

使えます。操作自体は画面のボタンを押すだけです。英語のエラーが出たときはそのままClaudeに貼れば日本語で説明してくれます。

まとめ

・この連載は「完全未経験」の人に向けて書いています

・語り手の私は「基礎は学んだがコードは書けない」ポジションから、AIで壁を突破しました

・使うツールはCursor・Claude Code・Claude Cowork・GitHub・Vercelの5つ

・Claude Codeだけ月額$20のProプランが必要です(従量課金ではありません)

・「簡単」とは言いません。でも手順通りにやれば必ずURLが発行できます

次回は環境構築です。Cursorのインストール、AnthropicアカウントとProプランの設定、Claude Codeの起動をやります。黒い画面を初めて開くところから一緒にやります。

連載一覧

【第1回】そもそもClaudeって何?← 今回

【第2回】環境構築:Cursor・Claude Code・GitHubをセットアップする

【第3回】Claude Codeに指示してコードを生成する

【第4回】GitHubにコードを保存してVercelでデプロイする

【第5回】エラーが出た!そのときClaudeに何を聞けばいい?

【第6回】カスタマイズ編 — 自分のデータで育てよう

ブックマークに追加した記事は、ブックマーク一覧ページで確認することができます。
あとから読み返したい時に便利です。

ポテヒロ🥔ほくうまっポテト🍟AI開発

投稿者情報

ポテヒロ🥔ほくうまっポテト🍟AI開発

トラ会員

この記事に、いいねを送ろう! 参考になった記事に、
気軽にいいねを送れるようになりました!
この記事のレビュー(0

まだレビューはありません