ONBOARDING GUIDE

開発環境
セットアップガイド

penguin-claude-platform で開発を始めるための
環境構築・開発フロー・Git の基礎知識

2026年7月｜社内資料
CONTENTS

この資料の構成

PART 1

セットアップ

GitHub と Claude のアカウントを準備し、
開発ツールを入れて
接続する手順。

p.3 - 7

PART 2

開発の手順

自分で開発して internal で試し、
本番反映のときだけ
hori に承認をもらう流れ。

p.8 - 11

PART 3

用語と概念

Git・GitHub・CI の仕組みと
Cloudflare の構成を
図解でやさしく。

p.12 - 19

開発環境セットアップガイド
PART 1

セットアップ

GitHub と Claude Code を接続して
開発に必要な最低限のツールを揃える

STEP 01

アカウントを準備する

GitHub を用意する

コードを保管・共有するサービス

アカウント作成

github.com/signup で
アカウントを作る

堀之内に招待を依頼

作成した GitHub の
ユーザー名を堀之内に伝える

招待メールを承認

GitHub から届くメールの
Accept invitation を押せば完了

Claude を用意する

AI で開発を進めるツール

アプリをダウンロード

claude.ai/download から
Mac 版をインストール

会社のメアドでログイン

penguintrade.co.jp のメアドで
ログインすると Team プランに自動参加

開発環境セットアップガイド
STEP 02

Claude Code で開発を始める

Claude アプリの Code モードを開いて、日本語で指示するだけで開発できる。

1

Code モードに切り替え

🔍 Chat
⚙
</>
+ 新規チャット
📁 プロジェクト
🏗 アーティファクト
⚙ カスタマイズ
最近の項目
業務時間の提出期限確認
契約書送付の依頼
登記簿から所有者を確認
✺

こんにちは、penguinさん

本日はどのようなお手伝いを... Opus 4.8
</>
ここをクリック

Chat の右にある </> で Code モードに切り替わる

→
2

「ローカル」を確認してメッセージ送信

🔍
⚙
</> Code
+ 新規セッション
⚡ ルーチン
⚙ カスタマイズ
こんにちは！
✺

こんにちは！何かお手伝いできることはありますか？

メッセージを入力...
🖥 ローカル
📁 my-project
なんでもいいので一言送信してください
「ローカル」になっていればOK

左下が「ローカル」であることを確認して、「こんにちは」など何でも送ればセッション開始

開発環境セットアップガイド
STEP 03

開発ツールをインストール

右上の >_ ボタンを押すとターミナルが開く。ここにコマンドを貼り付けて開発ツールを入れる。

Untitled penguin-claude-platform
>_
□
▷
⋮
💬
⚙
</> Code
+ 新規セッション
⚡ ルーチン
📁 カスタマイズ
∨ もっと見る
最近の項目
General coding session
Japanese greeting
>_
↑ ここをクリック!
まだメッセージがありません
コマンドは / を入力
自動 Opus 4.6
ターミナル +
×
[shell reconnected]
user@mac project %
① ターミナルに貼り付けて Enter
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
② パスワードが聞かれる
Password: ●●●●●●
PC のロック解除と同じパスワードを入力
画面に何も表示されないのは正常です
⏳
2〜3分 かかります
そのままお待ちください
③ 終わったら貼り付けて Enter
brew install node git gh
開発環境セットアップガイド
STEP 04

フォルダを作ってリポジトリを接続

作業フォルダを選び、GitHub のリポジトリを接続する。以降このフォルダに開発コードが溜まる。

1

フォルダ名をクリック

🔍
⚙
</>
+ 新規セッション
最近の項目
環境セットアップ
PR merge設定
Box番号管理
✺

こんにちは

タスクを説明するか、質問を…
🖥 ローカル
📁 my-project
ここをクリック ↓
🔀 main

左下のフォルダ名を押すと
フォルダ選択画面が開く

→
2

新規フォルダを作って選択

+ 新規セッション
環境セットアップ
✺
フォルダを選択
📁 デスクトップ
📁 書類
📁 ダウンロード

新規フォルダ

新規フォルダの名前:

my-project
キャンセル
作成
新規フォルダ
キャンセル 開く

適当な場所に新しいフォルダを作成
（ここに今後コードが溜まる）

→
3

チャットでリポジトリを接続

🖥 ローカル
📁 my-project
リポジトリをクローンしてセットアップしますね。
✓ git clone 完了
✓ 依存パッケージのインストール完了

このフォルダで https://github.com/
hori0926/penguin-claude-platform
を繋いでgitのセットアップしてください。

⏎
💬 これを送信!

Claude が自動でセットアップ実行

このフォルダで https://github.com/hori0926/penguin-claude-platform を繋いでgitのセットアップしてください。
開発環境セットアップガイド
PART 2

開発の手順

開発からデプロイまでの流れと
承認が必要になるタイミングについて

WORKFLOW

開発から公開までの流れ

internal（社内確認用）環境までは自分で完結できる。本番デプロイのみ堀之内の承認が必要。

1

開発

本番に影響しない作業用ブランチで
Claude Code にコードを書かせる

2

PR を作成

変更内容を main に取り込むための
申請を出す（Claude が自動作成）

3

マージ

自動テスト通過後、自分で承認して
main に変更を反映する

4

開発サーバーへ反映

マージと同時に開発サーバーへ自動反映
自分でアクセスして動作を確認する

5

本番リリース

開発サーバーで問題なければ堀之内に連絡
ここだけ承認が必要

開発環境セットアップガイド
WORKFLOW

Claude Code への頼み方

機能ごとにチャットを分け、完成したら「開発サーバーに入れて」で公開フローへ進む。

委託販売の手数料変更 penguin-claude-platform
>_
▢
⋮
🔍
⚙
</> Code
+ 新規セッション
セッション履歴
委託販売の手数料変更
✓ 箱予約アプリを作る
✓ 面談スケジューラー
✓ 環境セットアップ
委託販売システムの手数料を 10% から 15% に変更して
変更しました。確認をお願いします。
http://localhost:8787 で開いて動作を確認してください。
OK。ではこの機能を開発サーバーに入れて
✓ PR #24 を作成し main にマージしました。
数分後に開発サーバーへ自動デプロイされます。
次の機能は新しいチャットで始めましょう
penguin-claude-platform feat/consignment-fee
PRを作成 ▾
1機能 = 1チャット
過去の機能開発は
それぞれ別のチャット。
サイドバーの ✓ が
完了した機能の証。
完成したらこれだけ
「開発サーバーに入れて」
で PR 作成・マージ・
デプロイまで自動で完了。
開発環境セットアップガイド
ENVIRONMENTS

3つの環境の使い分け

開発の段階に応じて 3 つの環境を順番に使う。データは環境ごとに完全に分離されている。

laptop_mac
LOCAL

ローカル

使い方

自分の PC 上でコードを書きながら
動作を確認する。他の人や環境には
一切影響しないため、自由に変更や
修正を繰り返すことができる。

groups
INTERNAL

開発サーバー

使い方

LINE 連携などローカルでは動かせない
機能がサーバー上で正しく動くか確認する。
他のメンバーの PC からもアクセスできる
ため、チームでの動作確認にも使う。

public
PRODUCTION

本番

使い方

お客様が実際の業務で使用する環境。
デバッグや動作検証は行わない。
本番への反映は堀之内が実施するため、
準備ができたらご連絡ください。

開発環境セットアップガイド
PART 3

用語と概念

Git・GitHub・CI の仕組みと
Cloudflare の構成について

OVERVIEW

Git・GitHub・GitHub Actions の関係

名前は似ているが、それぞれ役割が異なる。以下の図のような包含関係になっている。

bolt

GitHub Actions（自動化）

GitHub 上で自動処理を実行する仕組み。PR を出すと自動テスト、マージすると自動デプロイ。

cloud

GitHub（クラウド共有）

Git のデータをクラウドに保存して、みんなで共有する場所。PR やレビューもここ。

computer

Git（自分の PC）

ファイルの変更履歴を記録するツール。変更日時・作業者・変更内容がすべて記録される。
任意の時点の状態に戻すことも可能。Git がなければ GitHub も Actions も使えない。

開発環境セットアップガイド
GIT CONCEPT 01

リポジトリとは

penguintrade/penguin-claude-platformPrivate
Code
Issues
Pull requests
main ▾
59 Branches   10 Tags
<> Code ▾
🐧
hori0926 and claudecebff22 · 6 hours ago 368 Commits
.claude
.github/workflows
apps
plugins
docs

プロジェクトのコード・設定ファイル・変更履歴をまとめて保管する場所。
共有フォルダに似ているが、「誰がいつ何を変えたか」がすべて記録される点が異なる。
GitHub に置くことでチーム全員が同じコードにアクセスでき、過去の任意の時点に戻すこともできる。
うちでは penguin-claude-platform という1つのリポジトリに全アプリをまとめて管理している（モノレポ方式）。

開発環境セットアップガイド
GIT CONCEPT 02

コミットとは

penguintrade/penguin-claude-platformPrivate
Code
Issues
Pull requests
Commits
Commits on Jul 1, 2026
UI: 入社日（在籍期間）を削除 (#147)
3 people authored · ✓ 2/2
09157e5
UI: 組織図を縦インデント型ツリーに変更 (#146)
3 people authored · ✓ 2/2
2e8828a
UI: 組織図をトップダウンのロジックツリーに作り替え (#145)
3 people authored · ✓ 2/2
d4efd92
改善(委託販売): 再同意ゲートの告知文を変更 (#144)
3 people authored · ✓ 2/2
788de30

ファイルの変更を「いつ・誰が・何を変えたか」のセットで記録する操作。
ゲームのセーブポイントに近く、いつでも過去の状態に戻せる。
上の画面は過去のコミット一覧で、1行が1回の保存に相当する。
コミットメッセージ（タイトル部分）には変更の要約を書く。
うちでは Claude Code に「コミットして」と言うだけで、差分の要約・コミット実行まで自動で行われる。

開発環境セットアップガイド
GIT CONCEPT 03

ブランチとは

penguintrade/penguin-claude-platformPrivate
Code
Issues
Pull requests
main ▾
59 Branches   10 Tags
<> Code ▾
🐧
hori0926 and claudecebff22 · 6 hours ago 368 Commits
.claude
.github/workflows
apps
plugins
docs

本番（main）から分岐して作る作業用コピー。本番に影響を与えず開発でき、完成したら main に合流（マージ）させる。

main
feat/app
分岐
自由に開発
マージ
開発環境セットアップガイド
GIT CONCEPT 04

PR（プルリクエスト）とは

penguintrade/penguin-claude-platformPrivate
Code
Issues
Pull requests
6 Open   ✓ 140 Closed
機能: 人事評価をレイヤー別メニュー構成に ✓
#152 opened 21 min ago by yuichisato-stack
機能: システム開発管理アプリ ✓
#151 opened 1 hour ago by yuichisato-stack
機能: イッタク消費者向けLPを追加 ✓
#148 opened 2 hours ago by yuichisato-stack
機能(委託): ダッシュボードに預かり在庫の総額を追加 ✓
#128 opened yesterday by yuichisato-stack

ブランチで作った変更をmain に取り込む「申請」のこと。
「このコードを本番に反映していいですか？」というリクエストで、変更差分・変更理由・CI チェック結果がひとまとめに記録される。
上の画面は PR 一覧で、各行が1つの申請に対応する。
CI（後述）が通れば自分でマージ（=main に合流）できる。
うちでは Claude Code に「PR 出して」と言えば、タイトル・本文の作成から GitHub への投稿まで自動で行われる。

開発環境セットアップガイド
GIT CONCEPT 05

CI（継続的インテグレーション）とは

penguintrade/penguin-claude-platformPrivate
Code
Issues
Pull requests
機能: 査定アプリに通知機能を追加 #148
feat/notify → main
CI チェック結果
✓ pr-check / lint 12s
✓ pr-check / typecheck 18s
✓ pr-check / build 45s
Merge pull request

PR を出すと自動で走る「品質チェック」の仕組み。
GitHub Actions というサービスが、lint（コードの書き方ルール違反がないか）・typecheck（型の整合性に矛盾がないか）・build（アプリが正しくビルドできるか）の3つを順に実行する。
すべて通過（緑チェック）しないとマージできない。
人間が目視で確認する代わりに機械が自動判定するので、うっかりミスの混入を防げる。
失敗した場合は Claude Code に「CI 直して」と言えば、エラー内容を読み取って自動修正してくれる。

開発環境セットアップガイド
INFRASTRUCTURE

Cloudflare の構成

Cloudflare = 現在使用しているサーバー管理サービス。開発用・本番用でサーバーもデータベースも別々に存在する。

GitHub

コードの置き場所

apps/sales/
apps/assessment/
apps/accounting/
arrow_forward

マージで
自動反映

arrow_forward

堀之内が
承認して反映

開発サーバー

*-internal.workers.dev
dns

Worker

コードが動くサーバー

database

D1

データベース

vpn_key

環境変数

APIキー等の秘密情報

本番サーバー

penguintrade.app
dns

Worker

コードが動くサーバー

database

D1

データベース

vpn_key

環境変数

APIキー等の秘密情報

  • デプロイ = GitHub のコードで Worker を上書き。DB や環境変数は変わらない
  • 環境変数は Worker ごとに個別設定。追加・変更は hori に依頼
開発環境セットアップガイド
SUMMARY

まとめ

01

セットアップ

gh, wrangler, Claude Code を
インストールし GitHub に接続する。

02

internal へのデプロイ

開発 → PR → マージ → 動作確認。
承認不要で繰り返し実行できる。

03

本番デプロイ

internal で動作確認が取れたら
堀之内に承認を依頼する。

不明点は Claude Code に質問できる。解決しない場合は堀之内（hori0926）に連絡する。

1 / 18
← → キーで移動