1
vibe coding実践の順路｜作りながら学ぶ6本【2026】
実践記事6本を「どの順でやれば挫折しないか」で並べ直した順路。HTML1枚→ToDoアプリ→ポートフォリオ→ブログ公開→天気APIの5走と、各回の完了条件・つまずく場所・詰まったときに開く1本までまとめた。
実践
実際にアプリやサイトを作るハンズオンガイド
入門を読み終えたら、実践編に挑戦しましょう。
2
【Lv.1】HTMLだけで自己紹介ページを作る ── バイブコーディング最初の一歩
最も簡単なプロジェクト。AIに指示を出してHTMLファイル1つで自己紹介ページを作り、ブラウザで表示するまで。
3
【実践】ToDoアプリを30分で作る ── AIと一緒にJavaScript入門
バイブコーディングでToDoアプリを作りながら、HTML・CSS・JavaScriptの基本を自然に学ぶハンズオン。
4
【実践】ポートフォリオサイトをAIで作る ── 0からデプロイまで完全ハンズオン
Claude Codeを使って、プロフィールサイトをゼロから作り、インターネットに公開するまでの全工程をハンズオン形式で解説。
5
【実践】ブログサイトを作ってCloudflareで公開する ── Astro + AIで本格Webサイト
Astroで本格的なブログサイトを構築し、Cloudflare Pagesで世界に公開するまでの全工程。バイブコーディングの集大成。
6
エラーが出た！── バイブコーディングで困ったときの対処法
AIが生成したコードが動かない、エラーが出た、デザインが崩れた。よくあるトラブルと解決パターンを初心者向けに解説。
7
【Lv.5】天気APIダッシュボードを作る ── 外部データを取得して表示するアプリ
無料の天気APIからデータを取得し、ダッシュボードに表示するアプリを作る。API連携の基本を学ぶハンズオン。