AIを使うと、プログラミング経験が少なくてもWebアプリを作れるようになりました。一方で、「作れた」ことと「安全に公開できる」ことは別です。
この研修では、個別の製品やコードの書き方を覚えるのではなく、Webアプリを次の役割に分けて捉えます。
利用者
↓
ブラウザ（フロントエンドを実行）
↓ APIで通信
バックエンド
↓ 読み書き
データベース
AIが作ったWebアプリを見たときに、次の質問を持てるようになることを目指します。
- 何がブラウザで動いているか
- 何がバックエンドで動いているか
- ブラウザへ何のコードやデータを渡しているか
- APIを直接呼ばれても問題ないか
- 認証と認可をどこで行っているか
- データをどこに保存し、誰が見られるようにしているか
- フロントエンド、バックエンド、DBをどこへデプロイしているか
コードをすべて読めなくても構いません。危険かもしれない場所に気づき、AIや詳しい人へ適切な質問ができることがゴールです。
- CodePenなどでHTML / CSS / JavaScriptに触れたことがある人
- AIを使ってWebアプリやサービスを作ってみたい人
- Webエンジニアではないが、Webアプリの全体像を理解したい人
60〜90分
| 章 | 内容 | 60分版 | 90分版 |
|---|---|---|---|
| 1 | AI時代にWebアプリの構造を学ぶ意味 | 4分 | 5分 |
| 2 | Webアプリを構成する3つの役割 | 6分 | 8分 |
| 3 | フロントエンド、ブラウザ、開発者ツール | 13分 | 15分 |
| 4 | バックエンド、API、認証と認可 | 17分 | 20分 |
| 5 | データベースとアクセス制御 | 8分 | 10分 |
| 6 | デプロイとCloudflareでの配置例 | 8分 | 22分 |
| 7 | AI生成アプリの確認チェックリスト | 4分 | 10分 |
| 合計 | 60分 | 90分 |
- 60分版：第6章は、講師が事前にデプロイしたサンプルを使い、Static Assets・Worker・D1の配置とNetwork通信を確認します。CLI操作は行いません。
- 90分版：事前に作成済みのプロジェクトを使ってローカル実行まで体験します。Cloudflareへの公開操作は、アカウント・組織ルール・進行時間に問題がない場合だけ行います。
- 各章は授業後にも参照できるハンドアウトです。授業中に本文をすべて読み上げたり、すべてのワークを実施したりする想定ではありません。
3. フロントエンドとブラウザ
この研修はWeb技術やセキュリティを網羅するものではありません。HTTP、OAuth、暗号、SQL、XSS、CSRFなどの詳細には立ち入りません。
また、CloudflareはWebアプリの役割を実物と対応付けるための一例です。特定のクラウド製品を使いこなすことが目的ではありません。
ブラウザへ送ったものは、基本的に利用者から確認できる。
APIは、URLや呼び出し方を知られる前提で作る。
データを返す側で、「その人へ返してよいか」を判断する。
製品名を覚える前に、フロントエンド・バックエンド・データベースのどの役割かを考える。