数あるサービスの中からご覧いただきありがとうございます!
エンジニア歴30年・10言語を渡り歩いた私が、claude codeの最新ワークフローで“動くTodoアプリ”を一緒に完成させます。
★概要
claude codeの提案をフル活用しながら、next.jsをローカル環境で動作させる「バイブコーディング」を体験。コードが分からなくても動作するTodoアプリが作れます。UI更新からGitHubプッシュまでを体験できます。
注意)claude codeを自身で使いたい場合はclaude pro(月額約3000円)の登録が必要となります。
★サービスの強み
・30年の現場経験:大手〜スタートアップで培った実践ノウハウを凝縮
・個人開発経験:フロントからバックエンドからインフラまでフルスタック開発を経験
・バイブコーディング方式:書きながら即動作確認→学習効率が段違い
★こんな方にオススメ
・ claude codeIに触れたことがない完全初心者
・コードAIで“まず動くモノ”を作ってみたい社会人・学生
・webサービスの作り方を体験したみたい方
・IDEやGitに苦手意識があるけれど現場感を味わいたい方
★レッスン詳細
本レッスンではnext.jsの解説までは致しません。AIに指示するだけでどのようにWebサービスを作ることができるのかを体験するのが目的です。
・vscode/claude codeのインストール・設定
・node.js/next.jsのインストール
・git/github/vercelのアカウント設定
・バイブコーディングとは?流れとコツ
・要求仕様プロンプト:Todo要件をAIに伝える書き方
・next.jsでAPIエンドポイント作成
・自動テストによる動作確認
・GitHub新規リポジトリ作成&プッシュ手順
・vercelでweb公開
・質疑応答&次のステップ提案
★レッスンの流れ(例)完全カスタマイズ可能
・事前ヒアリング(ご希望・PC環境確認)
・画面共有で一緒にコーディング&動作確認
・GitHubプッシュ→完成!
・復習用資料&ソースコード一式をお渡し
「自分にもアプリ開発できた!」という達成感を今すぐ手に入れませんか?書籍5冊分ぐらいの内容をギュッと初心者向けに詰め込みました。
今回のレッスンは特にコーディングができなくても問題ありません。webサービスの作り方を体験することが目的であるため初心者でも大丈夫です。このため、本格的にコード内容についても学習したい思われる方には
※Claude code PROプラン($20)以上の契約が必要となります。
・使用OS:Windows/Mac
・VSCodeの使用経験:有無
・gitの使用経験:有無
・GitHubアカウント:有無
・プログラミングのご経験経験(完全初心者/HTML少しだけ…など)
・受講目的(作ってみたいサービスがあればお聞かせください)