AALC 一期
STEP 03GH
CF
WG
ALC 一期  ／  ESSENTIAL TOOLS

必 須 三 種

ALC 期間中、全員に入れてほしい必須ツールです。「自分はサイトを作らないから関係ない」と思っても、 講師がフォローするとき・班員と協力するときに必ず使うので、入れておいてください。

具

3 つのツール

  • GitHub — コードの保管庫 (これがないと始まらない、マジで必須)
  • Cloudflare — サイト公開 + 裏側 API + データベースの全部入り
  • wrangler — Cloudflare を CC から操作する CLI

全部、各 STEP のプロンプトを Claude Code にコピペするだけで CC が全部やってくれます。

GitHub をセットアップ (10 分)

GitHub はコードを保存・公開・共有する場所。Google ドライブのコード版だと思ってください。 ALC では、自分が作ったものを GitHub に置いて、Cloudflare に自動デプロイする流れが基本です。マジで必須。

Claude Code に以下をコピペしてください。

GitHub のアカウントを作って、自分の PC から push できる状態にしてください。
- GitHub アカウントがまだなら、作成手順を案内してください (https://github.com/signup)。
- git が PC に入っていなければインストールしてください (Mac は brew install git、Windows は https://git-scm.com/downloads/win)。
- git の user.name / user.email を設定してください (僕の GitHub アカウントの ユーザー名 / メール で)。
- GitHub CLI (gh) もインストールして、gh auth login で GitHub にログインしてください。
- 完了したら、テスト用に「alc-test」という名前のプライベートリポジトリを作って、README.md だけ入った状態で push してみてください。

注意: GitHub アカウント作成はブラウザ操作が必要なので、CC の案内に沿って自分で登録してください。CC は手順を教えてくれます。

確認: ブラウザで github.com/(自分のユーザー名)/alc-test を開いて、README.md が見えたら OK。

Cloudflare アカウントを作る (5 分)

Cloudflare は「サイトを公開する場所」「裏側の API を動かす場所」「データベースを置く場所」の全部入り。 ALC のサイト (alc-1.pages.dev) も Cloudflare で動いています。無料枠が大きいので個人利用ならほぼお金かかりません。

Claude Code に以下をコピペしてください。

Cloudflare アカウントを作ってください。
- まだなら https://dash.cloudflare.com/sign-up でメール登録の手順を案内してください。
- 確認メールで認証してログインできる状態にしてください。
- 課金プランは無料 (Free) で OK です。クレカ登録もまだ不要です。

確認: dash.cloudflare.com にログインできて、ダッシュボード画面が見えたら OK。

wrangler をインストール (5 分)

wrangler は Cloudflare を Claude Code から直接操作する CLI ツール。 これを入れると CC が「Cloudflare にデプロイして」「データベース作って」を全部やってくれます。

Claude Code に以下をコピペしてください。

wrangler (Cloudflare の CLI) をインストールして、自分の Cloudflare アカウントにログインしてください。
- Mac / Windows どちらでも、npm install -g wrangler でインストールしてください (Node.js が無ければ先に入れてください)。
- wrangler login で認証 → ブラウザが開いて Cloudflare アカウントを Authorize する流れです。
- 認証完了したら wrangler whoami で自分のメールアドレスが表示されるか確認してください。

Node.js が無いと言われたら: CC に「Node.js もインストールして」と追加で言えば、Mac は brew、Windows は公式インストーラで入れてくれます。

確認: wrangler whoami で自分のメールアドレスが出たら OK。

動作テスト (任意 / 10 分)

不安な人は、GitHub → Cloudflare の流れを一度試しておくと当日安心です。

Claude Code に以下をコピペしてください。

今 GitHub にある alc-test リポジトリを Cloudflare Pages にデプロイしてみてください。
- リポジトリに簡単な index.html (「Hello from ALC」だけ書かれたやつ) を追加して push。
- wrangler pages deploy で Cloudflare Pages にデプロイ。プロジェクト名は alc-test で OK。
- デプロイ完了したら、発行された https://alc-test-xxxx.pages.dev みたいな URL をブラウザで開いて「Hello from ALC」が表示されるか確認してください。

ここまで動いたら、当日「Cloudflare にデプロイしたい」とすぐ動ける状態です。

必須ツール チェックリスト

  • GitHub アカウント作成 + git / gh CLI セットアップ済み
  • テスト用に alc-test リポジトリを GitHub に push 済み
  • Cloudflare アカウント作成 + ダッシュボードにログイン済み
  • wrangler インストール済み + wrangler whoami でメール表示
  • (任意) alc-test を Cloudflare Pages にデプロイして URL で表示確認

困ったとき

エラーが出たら、エラーメッセージをそのまま Claude Code に貼り付けてください。CC が原因を特定して直してくれます。

こういうエラーが出た。直して。

[ここにエラーメッセージを貼る]

それでも詰まったら、Slack #1期_setup に スクショ +「必須ツール STEP ◯ で詰まった」と書いて投げてください。講師が拾います。

なぜ Vercel / Supabase じゃないの？

ALC では Cloudflare 一本に統一しています。理由は:

もちろん個人で Vercel や Supabase を使うのは自由ですが、ALC の共通教材は Cloudflare で揃えています。

セットアップは 事前準備 (Claude Code Desktop) → gog → このページ の順がオススメ。