JBS 中級コース案1 — 受講者ポータル

3日間のハンズオン教材

本ページから本日扱う研修教材と公開デモ環境にアクセスできます。お手元に PDF を保存しておくと、研修中も後日復習時も便利です。

Day1 環境設定

環境設定の3手順（講師と一緒に実施します）

配布済みのハンズオンガイドには載っていない3手順です。研修開始後の環境設定で講師と一緒に確認します。研修前の実施は不要です。

GitHub Actions の Workflow permissions を変更する

EMU 上のご自分のリポジトリで、GitHub Actions が PR を作れる権限に切り替えます。

ブラウザで https://github.com/<自分のEMUアカウント>/jbs-ci-26 を開く
上部メニュー Settings → 左サイドバー Actions → General をクリック
下にスクロールして「Workflow permissions」セクションを探す
Read and write permissions を選択（下の画像はデフォルトの選択状態。これを上に切り替える）
「Allow GitHub Actions to create and approve pull requests」にチェック
「Save」をクリック

GitHub Settings → Actions → General → Workflow permissions の画面

↑ デフォルトは下の選択肢(Read permissions)。これを上の Read and write に切り替え、その下のチェックボックスもONにする

Claude Code の OAuth トークンを取得する

Day3 で @claude メンションから自動 PR を立てる演習があります。そのためのトークンを発行します。

claude setup-token

ローカルターミナルで上記コマンドを実行（リポジトリ内でも外でもOK）
ブラウザが自動で開くので、「Claude Codeさんが Claude chat account への接続を希望しています」画面で 承認する をクリック
ターミナルに sk-ant-oat01-... で始まる長い文字列が表示される → 丸ごとコピー
このトークンは次の手順3で貼り付けます。一旦テキストエディタなどに保存しておくと安全

↑ 左がターミナルで claude setup-token を実行している画面、右がブラウザに表示される承認画面。「承認する」を押すとターミナル側にトークンが返ってくる

研修で配布されている Teams プランの席を使ってトークンが発行されます。@jbs.jp アカウントで claude コマンドにログイン済みであることが前提です。

取得したトークンを Secret に登録する

手順2でコピーしたトークンを、GitHub リポジトリの Secret として保存します。

ブラウザで https://github.com/<自分のEMUアカウント>/jbs-ci-26/settings/secrets/actions/new を開く
Name 欄に CLAUDE_CODE_OAUTH_TOKEN と入力（大文字小文字含めて完全一致、タイプミスNG）
Secret 欄に手順2でコピーしたトークンを貼り付け
「Add secret」（緑のボタン）をクリック

New repository secret の登録画面 (CLAUDE_CODE_OAUTH_TOKEN を入力した状態)

↑ Name に CLAUDE_CODE_OAUTH_TOKEN、Secret 欄に手順2のトークン(sk-ant-oat01-...)を貼り付け、緑の Add secret ボタンを押す

登録後の Secret は二度と中身を確認できません(値はマスクされます)。研修中に「動かない」場合は、最初からトークンを取り直して登録し直してください。

EMU 環境のリポジトリは別途事務局から共有されます。clone してから研修にご参加ください。
clone 先フォルダ名は 0514-<EMUアカウント名> です。

公開デモ環境（Day1 で観察）

本物のアプリ

社内ヘルプデスクチケット管理（デモ）

意図的に改善余地を含む実装です。Day1 で触って改善箇所を洗い出し、Day2 で正しく実装し直します。

左サイドバーで絞り込み・チケット起票、右側でチケット一覧。SLA違反 や状態遷移のおかしさを Day1 でメモしておきます。

管理画面 Swagger UI /api/health /api/sla/violations

オリエンテーション資料

事前読書

コース全体オリエンテーション

3日間の到達目標、題材アプリ概要、受講者の立場設定、事前セットアップ、進め方の前提。研修開始前に一読をお願いします。

HTML で読む PDF ダウンロード

ハンズオンガイド

5/14（木）Day1

顧客ヒアリングから要件定義・設計を生成

公開デモを観察し、ヒアリングメモから要件定義書・ER図・API仕様・シーケンス図を Claude Code で起こす。

HTML PDF

5/21（木）Day2

設計書からの実装とテスト

FastAPI + SQLAlchemy 2.0 で実装、pytest でカバレッジ80%以上、CI 緑を維持しながら積み上げる。

HTML PDF

5/28（木）Day3

Docker 化と CI/CD パイプライン構築

マルチステージ build、docker-compose、Actions 全ジョブ緑、trivy セキュリティスキャン、@claude 自動 PR。

HTML PDF

3日間のブランチ運用早見表

配布ガイドでは触れていない、各 Day の作業ブランチと push タイミングです。これを守ると Day3 の CI/CD 演習がスムーズに回ります。

Day	作業ブランチを切る	章末で push & PR
Day1 5/14	`git switch main && git pull` `git switch -c feature/day1-design`	`git add docs/design` `git commit -m "Day1: 要件定義・設計"` `git push -u origin feature/day1-design` → GitHub で PR 作成 → CI 緑確認 → Merge
Day2 5/21	`git switch main && git pull` `git switch -c feature/day2-impl`	`git add app/ tests/` `git commit -m "Day2: 実装＋テスト"` `git push -u origin feature/day2-impl` → PR → 4ジョブ緑 → Merge
Day3 5/28	`git switch main && git pull` `git switch -c feature/day3-cicd`	`git add Dockerfile docker-compose.yml .github/workflows/` `git commit -m "Day3: Docker + CI/CD"` `git push -u origin feature/day3-cicd` → PR → 6ジョブ緑 → `@claude` メンション → Merge

Claude Code 公式ドキュメント

事前にインストール手順とログイン方法を確認しておいてください。

claude-code-action リポジトリ

Day3 で扱う @claude メンション機能の元となる Action。