~/vibe-coding $ プログラム未経験の人のために
まず見える。だから分かる。図解でコーディングを理解する。
文法もAPIの暗記も不要。フローチャート・アーキテクチャ図・身近なたとえで、Web・SaaS・AIプロダクトの裏側で何が起きているかを、中学生でも分かるように解説します。
- 学習トピック
- 52+
- インタラクティブ図解
- 113+
- 対応言語
- 4
Why
ここが違う
多くの教材は「タイピング」を教えます。私たちは「システム全体を見る目」を育てます。
図解ファースト
すべての概念にアーキテクチャ図とフロー図。全体像を見てから細部へ。
やさしい言葉
専門用語をたとえに置き換えます。キャッシュは「コンビニ」、APIは「注文カウンター」。
システム思考
フロント・バック・DBがどうつながるかを教えます。特定の関数ではなく。
AIコーディング前提
Claude Code・Cursor・Codexと協働し、アイデアを出荷可能なプロダクトに変える方法を学びます。
Roadmap
あなたの学習ロードマップ
ゼロから、自分のプロダクトを企画して作れるまで。一歩ずつ。
- 01 /
世界を見る
Web・アプリ・SaaSがどんな部品で成り立つかの直感を養う。
- 02 /
選び方を学ぶ
多数のプラットフォーム・言語・ツールから要件と予算で選べる。
- 03 /
AIと協働
AIツールと確立した流れで、仕様を動くソフトに変える。
- 04 /
プロダクトを出す
SaaSとマルチテナント構成を理解し、デプロイして運用する。
Gallery
アーキテクチャ図鑑
最もよくある8種類のシステム構成を、1枚の図で理解。
- アーキテクチャ図鑑
単一ページサイト
静的ファイルをCDNに置き、世界中へ配信。最速・最安。
- アーキテクチャ図鑑
フロント/バック分離
フロントは画面、バックはAPIでデータ提供。独立してデプロイ。
- アーキテクチャ図鑑
SaaSアプリ
認証・課金・保存・通知を備えたサブスク型クラウドソフト。
- アーキテクチャ図鑑
マルチテナントSaaS
複数顧客が同一システムを共用しつつ、データは厳密に分離。
- アーキテクチャ図鑑
Cloudflare構成
すべてCloudflareエッジで: Pages・Workers・D1。
- アーキテクチャ図鑑
Fly.io構成
コンテナ化バックエンドを複数リージョンへ。DBは近接読み取り。
- アーキテクチャ図鑑
サーバーレス
常駐サーバーなし。リクエストごとに関数実行、従量課金。
- アーキテクチャ図鑑
マイクロサービス
大規模システムを小さなサービスに分割し、個別に開発・運用。
よくある質問
Vibe Codingと本サイトについて、知っておきたいこと。
全くコードが書けなくても理解できますか？
はい。文法は教えず、図解とたとえで仕組みを説明します。中学生でも分かる水準です。
Vibe Codingとは結局何ですか？
AIと作る開発スタイル。あなたは意図と方向を示し、AIが実装します。重要なのは入力より「システム思考」。
学ぶのにお金はかかりますか？
コンテンツは無料です。実装は$0スタート（Cloudflare無料枠など）を優先し、有料時は明示します。
どのAIツールを使うべき？
目的次第。企画・長タスク・セキュリティレビューならClaude Code、エディタ内編集ならCursorが直感的。比較ページ参照。
サイトは何語に対応していますか？
繁体字中国語・英語・日本語・韓国語。既定は繁体字中国語、右上で切替可能。