概要
AIツールでのアプリ開発を志す未経験者に向け、AIへの指示精度を高めるためのWeb技術の全体像と「作る・公開する・覚える」の3つの発展段階を体系的に解説しています。
詳細内容
### AI時代のWeb開発の新しい学習順序
AI（Claude CodeやCodex）の登場により、「仕組みを学んでから作る」のではなく「作ってから仕組みを知る」というリバースエンジニアリング的なアプローチが可能になりました。本書は、コードを書けなくてもAIを使いこなすために不可欠な「知識の地図」を提供します。
### Webアプリの構造と主要概念
- **ソースコードとファイル**: コードは単なるテキストファイルであり、拡張子（.html, .js, .css, .sql等）によって画面の構造、見た目、動き、データ操作といった役割が分かれていることを理解するのが第一歩です。
- **フロントエンドとサーバーサイド**: ユーザーの目に触れる部分と裏側の処理を区別することで、AIへの指示の解像度が上がります。ブラウザはサーバーからファイルを「ダウンロード」して描画しているという基本原則を抑えます。
### 3つの発展段階と活用ツール
1. **ローカル段階**: 自分のPC内での試作。AIによる高速な試行錯誤に最適です。
2. **世界公開段階（Vercel）**: 24時間稼働するサーバーにデプロイし、不特定多数がアクセス可能な状態。ここではセキュリティや多人数利用の考慮が必要になります。
3. **データ保持段階（Supabase）**: 認証やデータベースの導入。特にデータ構造の設計は後からの変更が困難なため、慎重な検討が求められます。
### 結論
「AI=作る、Vercel=公開する、Supabase=覚える」という役割分担を把握することが、AIを魔法の杖ではなく「技術的な道具」として使いこなすための鍵となります。