事前セットアップ完全ガイド(4期・受講生向け)

このガイドは、AIでの開発が初めての大学生向けです。 1on1キックオフまでに開発環境を整えます。エディタ(WebStorm)は学生ライセンスで無料、AIツールは有料プラン(各自契約)前提です。

自分のPCに AI開発環境(WebStorm + AIコーディングツール) をつくる
AIコーディングツールの有料プランを契約する(→ AI_TOOL_PLAN_GUIDE.md)
Web公開の土台になる Node.js と Cloudflare アカウント を用意する
キックオフで配布する 教材リポジトリ をクローンして開ける状態にする

上から順番どおりに進めてください(後の手順が前の手順に依存しています)。

💡 GitHub Student Pack について(任意・後追いでOK)

GitHub Student Developer Pack の承認には数時間〜数日かかることがあります。承認を待っていると準備が進まないため、このコースでは Student Pack の承認を受講条件にしません。

申請しておくと、承認後に GitHub Copilot Pro が無料になります
承認後は JetBrains の学生認証を「GitHub」連携で通すこともできます
申請自体はおすすめですが、承認を待たずに有料プランで環境構築を始めてください(下記 Step ③ で申請できます)

全体の流れ

① GitHubアカウントを作成する
  ↓
② AIコーディングツールの有料プランを契約する   ★AI_TOOL_PLAN_GUIDE.md で選ぶ(教材標準: GitHub Copilot Pro)
  ↓
③ (任意) GitHub Student Developer Pack を申請する   ※承認を待たずに次に進んでOK
  ↓
④ JetBrains 学生ライセンスを申請する(大学メールで申請。GitHub連携はStudent Pack承認後のみ)
  ↓
⑤ WebStorm をインストールする
  ↓
⑥ Copilot プラグインを導入し、Customizations を有効化する
  ↓
⑦ Node.js(LTS)をインストールする
  ↓
⑧ Cloudflare アカウントを作成する(メール認証まで)
  ↓
⑨ Git を使って教材リポジトリをクローンする
  ↓
⑩ 動作確認(Agentモード + prompt が使える状態か確認)
  ↓
1on1キックオフ(9/5〜9/7、各自の日時)では、企画→AIとの対話→モック作成→公開まで一緒に進めます 🎉

所要時間の目安: 作業自体は合計 1.5〜2 時間程度です。

💡 JetBrains(WebStorm)と Cloudflare は学生・個人向けに無料で使えます。AIコーディングツールだけは有料プランの契約が必要です。

① GitHub アカウントを作成する

https://github.com にアクセス
「Sign up」からアカウントを作成
メールアドレスの確認を完了する
すでにアカウントがある方はそのままでOK

💡 GitHub アカウントのメールには、大学のメールアドレスを追加しておくと Step ③(Student Pack申請)の認証がスムーズです(Settings → Emails → Add email address)。

② AIコーディングツールの有料プランを契約する ★

このコースでは、AIコーディングツールの有料プランを各自で契約していただきます。無料プランでの参加自体は禁止しませんが、無料枠には利用回数やクレジットの上限があり、仕様変更も頻繁なため、運営として「無料で十分なアウトプットが出る」ことを保証できません。無料で進める場合、サポートは「やり方をお伝えするまで」となります。詳しい理由・料金比較は AI_TOOL_PLAN_GUIDE.md にまとめています。

教材の標準ツールは GitHub Copilot Pro です。迷ったらこれを選んでください。

https://github.com/features/copilot/plans にアクセス
Copilot Pro(月 $10)のプランでサインアップ
支払い情報を登録する
https://github.com/settings/copilot にアクセスし、Copilot Pro が有効になっていることを確認する

💡 利用上限について: Copilot Pro にもチャット・Agent の利用量に上限(クレジット制)があります。具体的な数値や仕様は変わることがあるため、最新情報は https://github.com/settings/copilot と GitHub 公式ドキュメントで確認してください。節約のコツは COPILOT_PROMPTS_SETUP.md にまとめています。

Copilot 以外(Claude Pro / ChatGPT Plus / Cursor Pro 等)を選んだ場合

WebStorm + Copilot プラグインの構成が絶対必須というわけではありません。教材の /course-mvp-step1-hypothesis などのプロンプトは、.github/prompts/*.prompt.md の中身をコピーして、選んだツールのチャットに貼り付ければ同じ流れで進められます。この場合、以降の Step ⑥・⑩ の Copilot 固有の手順は読み飛ばしてOKです(1on1キックオフで一緒に調整します)。

③ (任意) GitHub Student Developer Pack を申請する

GitHub Copilot や JetBrains の学生ライセンスを無料で使うための学生認証です。承認を待つ必要はないので、申請だけ済ませて次のステップに進んでください。

https://education.github.com/pack にアクセス
「Sign up for Student Developer Pack」をクリック
GitHub アカウントでログイン
案内に従って入力する
- 大学のメールアドレスを選択(未登録なら追加する)
- 学校名を入力
- 求められたら学生証の写真をアップロード
申請完了後は承認を待つ(メールで通知が来ます)

⚠️ 申請時の注意

スマホやPCの位置情報を許可するよう求められることがあります(大学の近くだと通りやすいという報告もあります)
一度で通らなくても、書類を変えて再申請できます。落ちても焦らなくてOK
一部の大学メールでは、大学メール宛の確認メールが迷惑メールフォルダに入ることがあります

承認確認のしかた

https://education.github.com にアクセス
ステータスが「Approved」「Active」等になっていれば承認完了
承認メールが届いたら、念のため https://github.com/settings/education/benefits も開いて特典一覧が表示されるか確認する

承認後: Copilot Pro に無料切替できます

Student Pack が承認されたら、GitHub Copilot Pro の特典を無料で有効化できます(すでに自腹で Copilot Pro を契約している場合は、月の途中の返金はできないため、次の請求サイクルの前に切り替えるのがおすすめです)。

https://github.com/settings/education/benefits にアクセス
GitHub Copilot の特典を有効にする
https://github.com/settings/copilot で Copilot Pro が有効になっていることを確認

④ JetBrains 学生ライセンスを申請する

WebStorm(開発エディタ)を無料で使うための学生認証です。大学メールでの申請が基本です。GitHub連携での申請は、Step ③ の Student Pack が承認済みの人のみ使えます。

https://www.jetbrains.com/student/ にアクセス
「今すぐ申し込む(Apply now)」をクリック
認証方法を選ぶ
- 基本: 大学のメールアドレスで申請(確認メールが届きます)
- Student Pack が承認済みの人は「GitHub」を選んでもOK(連携してすぐ通ります)
JetBrains アカウントを作成(メールアドレスとパスワードを設定)
承認されると、JetBrains の全製品が在学中ずっと無料で使えます

⑤ WebStorm をインストールする

WebStorm は JetBrains 製の Web 開発用エディタです。これが開発の「作業場」になります。

🪟 Windows の場合

https://www.jetbrains.com/webstorm/download/ にアクセス
「ダウンロード(.exe)」をクリック
インストーラーを実行(設定は基本的にデフォルトのまま「Next」でOK)
インストール後、WebStorm を起動

🍎 Mac の場合

https://www.jetbrains.com/webstorm/download/ にアクセス
お使いのチップに合わせてダウンロード
- Apple シリコン(M1/M2/M3/M4): .dmg (Apple Silicon)
- Intel: .dmg (Intel)
- どちらか分からない場合: 左上の → 「このMacについて」で確認
.dmg を開いて、WebStorm をアプリケーションフォルダにドラッグ
WebStorm を起動

ライセンス認証

初回起動時にライセンス画面が出ます
「Log in to JetBrains Account」を選び、Step ④ で作った JetBrains アカウントでログイン
学生ライセンスが認識されて、そのまま使えるようになります

💡 ライセンス画面が出ない/後から認証したい場合は、メニューの Help → Register から同じ操作ができます。

【スクショ】WebStormライセンス認証画面

⑥ Copilot プラグインを導入し、Customizations を有効化する

💡 Step ② で Copilot 以外のツールを選んだ方は、このステップは読み飛ばしてOKです(1on1キックオフで一緒に調整します)。

WebStorm の中から Copilot(AI)を使えるようにし、教材リポジトリのカスタム指示を読み込む設定をONにします。

6-1. プラグインのインストール

WebStorm を起動
設定を開く(Windows: File → Settings / Mac: WebStorm → Settings)
左のメニューから Plugins を選ぶ
「Marketplace」タブで GitHub Copilot を検索してインストール
WebStorm を再起動
再起動後、右下などに出る案内から GitHub アカウントでサインイン
- 出てこない場合: 右側の Copilot Chat アイコン(吹き出しマーク)を開くとサインイン案内が出ます

⚠️ プラグインは必ず最新版にしてください。Agent モードや prompt 機能は古いバージョンだと使えません。

6-2. Customizations を有効化する

設定を開く → Tools → GitHub Copilot → Customizations
ワークスペースの Custom Instructions(カスタム指示)が有効になっていることを確認する
まだ何も表示されなくてOK(教材リポジトリを開く Step ⑨ の後に反映されます)

【スクショ】Settings → Tools → GitHub Copilot → Customizations 画面

⑦ Node.js(LTS)をインストールする

キックオフ以降、Vite(フロントエンドのビルド)や Wrangler(Cloudflare のコマンドツール)を使うために Node.js が必要です。

🪟 Windows の場合

https://nodejs.org にアクセス
LTS(Long Term Support / 推奨版)と書かれたインストーラーをダウンロード
インストーラーを実行(設定は基本的にデフォルトのまま「Next」でOK)
インストール完了後、WebStorm 下部の「Terminal」タブを開く(View → Tool Windows → Terminal)
node -v と入力して Enter → バージョン番号(例: v22.x.x)が表示されればOK

🍎 Mac の場合

https://nodejs.org にアクセス
LTS(Long Term Support / 推奨版)の .pkg インストーラーをダウンロード
インストーラーを実行し、案内に従ってインストール
インストール完了後、WebStorm 下部の「Terminal」タブを開く(View → Tool Windows → Terminal)
node -v と入力して Enter → バージョン番号(例: v22.x.x)が表示されればOK

💡 npm -v でも動作確認できます(Node.js に同梱されているパッケージ管理ツールです)。今の時点でこれらのコマンドの意味が分からなくても大丈夫です。キックオフ以降、必要なタイミングで使い方を説明します。

⑧ Cloudflare アカウントを作成する(メール認証まで)

作った Web ページを無料で公開するための土台です。今の時点ではアカウント作成とメール認証まででOKです(実際の公開作業はキックオフ以降に一緒に行います)。

https://dash.cloudflare.com/sign-up にアクセス
メールアドレスとパスワードで無料アカウントを作成
確認メールが届くので、リンクをクリックして認証を完了する

💡 プロジェクトの作成やドメインの公開作業は 1on1キックオフで一緒にやります。ここでは「ログインできる状態」まで整えれば十分です。

⑨ Git を使って教材リポジトリをクローンする

「クローン」とは、GitHub 上にあるプロジェクト一式を自分のPCにコピーすることです。 WebStorm の機能を使うので、コマンド入力は不要です。

WebStorm を起動(プロジェクトを開いている場合は File → Close Project で起動画面に戻る)
起動画面の 「Get from VCS」(または「Clone Repository」)をクリック
URL に、運営から共有される教材リポジトリの URL を貼り付ける(このガイドでは仮に次のように表記します):
```
https://github.com/oya-ui/ai-course-starter-webstorm
```
Directory(保存先)はそのままでOK →「Clone」をクリック
GitHub へのログインを求められたら、案内に従ってログイン
「Trust Project」のダイアログが出たら Trust を選ぶ

💡 Git が入っていないと言われた場合は、WebStorm が表示する「Download and Install」を押せば自動でインストールされます。

確認方法

左のファイルツリーに .github/prompts/ フォルダが見えていればOKです。

⑩ 動作確認(Agentモード + prompt が使える状態か)

💡 Step ② で Copilot 以外のツールを選んだ方は、このステップは読み飛ばしてOKです(1on1キックオフで一緒に調整します)。

キックオフ本番でつまずかないよう、ここで動くことだけを確認します(実際に AI と対話して作り始めるのはキックオフ当日です)。

右側の Copilot Chat アイコン(吹き出しマーク)をクリックしてチャットを開く
チャット入力欄の下にあるモード選択で Agent を選ぶ
- ⚠️ Ask モードのままだとファイルが保存されません。 必ず Agent モードにしてください
チャット入力欄に / と入力する
候補の中に course-mvp-step1-hypothesis が表示されればOK(選ばなくて大丈夫です。表示されることだけ確認してください)

【スクショ】Copilot Chat の / 補完に course-mvp-step1-hypothesis が表示されている画面

💡 ここで実際に prompt を実行する必要はありません。企画・モック作成・公開は1on1キックオフでみんなで一緒に進めます。 今日のゴールは「準備が整っていること」の確認だけです。

✅ 完了チェックリスト

1on1キックオフまでに、以下すべてにチェックが付く状態にしてください。

GitHub アカウントを作成した
AIツールの有料プランを契約した(Copilot Proなら https://github.com/settings/copilot で確認)
(任意)Student Packを申請した
JetBrains 学生ライセンスを取得した
WebStorm をインストールし、ライセンス認証した
WebStorm に GitHub Copilot プラグインを入れてサインインした(Copilot以外を選んだ人は不要)
Settings → Tools → GitHub Copilot → Customizations を有効化した(Copilot以外を選んだ人は不要)
Node.js をインストールし、node -v でバージョンが表示された
Cloudflare アカウントを作成し、メール認証を完了した
教材リポジトリをクローンした(.github/prompts/ が見える)
Copilot Chat を Agent モードにできた(Copilot以外を選んだ人は不要)
/ を打つと course-mvp-step1-hypothesis が候補に表示された(Copilot以外を選んだ人は不要)

全部にチェックが付いたら、事前セットアップは完了です。 LINE(大谷との個別トーク)で「セットアップ完了しました」と一言送っておいてください。何か1つでも詰まっている場合は、そのまま質問として投げてもらって構いません。

🔧 うまくいかないとき

症状	対処
AIツールの有料プランをまだ契約していない	`AI_TOOL_PLAN_GUIDE.md` を確認して契約してください。迷ったら Copilot Pro が無難です
Student Pack の承認が来ない	任意の手続きなので、承認前でもコースは進められます。1週間以上来なければ、書類(学生証など)を変えて再申請してください
Copilot が有効にならない	有料プランの契約が完了しているか確認 → https://github.com/settings/copilot(Student Pack経由の場合は https://github.com/settings/education/benefits も確認)
JetBrains の学生認証が通らない	大学メールでの申請を試す。GitHub連携を使う場合はStudent Pack承認後に。大学メールの場合は確認メールの迷惑メールフォルダも確認
WebStorm でプラグインを入れても Agent モードが出ない	Copilot プラグインを最新版に更新 → WebStorm を再起動 → Copilot Chat を開き直す
`node -v` が動かない/コマンドが見つからないと言われる	Node.js のインストーラーを再実行 → インストール後に WebStorm(またはターミナル)を再起動してから再度試す
`/` で prompt(`course-mvp-step1-hypothesis`)が出ない	Copilot プラグインを最新版に更新 → WebStorm 再起動 → 新しいチャットで再試行。詳しい手順は `COPILOT_PROMPTS_SETUP.md` 参照
`.github/prompts/` が見えない	正しいフォルダ(教材リポジトリのルート)を開いているか確認。クローンし直してもOK
クローンできない	GitHub にログインできているか確認。Step ① のアカウントでサインインしているか確認
Cloudflare の確認メールが届かない	迷惑メールフォルダを確認。届かない場合はメールアドレスを変えて再登録

詰まったら、ひとりで悩まず LINE(大谷との個別トーク)で質問してください。 その際、エラー画面のスクリーンショットを付けてもらえると、すぐに解決できます。

1on1キックオフで会いましょう。準備、お疲れさまでした!

① 事前セットアップガイド ② AIツール有料プランガイド