01まず全体像：アプリは「3つの場所」を行き来する
私たちのアプリ（勤怠アプリ・CRMなど）は、次の3つの場所を行き来しながら作られています。この図が頭に入れば、あとの手順は全部つながります。
実際に作業する場所
（上げる）
常に最新の状態を保つ
（公開）
Web上に公開する場所
GitHubは「みんなのGoogleドライブ」のようなもの
GitHubはプログラムを置いておく共有の場所です。Googleドライブでファイルを共有するのと同じ感覚ですが、大事な違いが1つあります。それは「GitHubが常に最新でなければならない」ということです。
GitHubを使わない人は、進捗を共有せず自分のPC（ローカル）の中だけで作業していることになります。「ローカルでやってました」は、チーム開発ではNGです。自分しか最新版を持っていない状態になり、他の人が古いものをもとに作業してしまうからです。
技術的には、GitHubを経由せずローカルから直接Vercelに公開することもできてしまいます。しかしそれをやると、GitHubに置いてあるものが古いまま取り残され、「中古品」のようになってしまいます。次に誰かがGitHubからクローンしたとき、古いアプリを渡してしまうことになるので、必ずGitHubを経由してください。
02最低限おぼえる用語（7つだけ）
| 用語 | 意味 |
|---|---|
| リポジトリrepository | GitHub上の「アプリ1つ分の保管フォルダ」。勤怠アプリならリポジトリ1つ、CRMならまた別のリポジトリ1つ。 |
| クローンclone | GitHubのリポジトリを、自分のPCに丸ごとコピーして落としてくること。開発に参加する最初の一歩。 |
| プルpull | GitHub上の最新の変更を、自分のローカルに引っ張ってくること。作業を始める前に行う。 |
| プッシュpush | 自分のローカルでの変更を、GitHubに上げること。作業したら必ずプッシュ。 |
| デプロイdeploy | GitHubの内容をもとに、VercelでアプリをWeb上に公開・反映すること。 |
| .env（エンブ）environment file | データベースの接続URLやパスワードなど、秘密の接続情報を書いておくファイル。GitHubには含まれない（ここが最重要。第4章で詳しく）。 |
| 環境変数Environment Variables | .envに書く中身のこと。Vercelの設定画面では「Environment Variables」というメニューで管理されている。 |
03手順A：既存アプリの開発環境を自分のPCに作る
「僕が作ったアプリを、今度はあなたが開発してください」と言われたときの手順です。
リポジトリにメンバーとして招待されていないと、クローンはできません。招待メールが届いているはずなので、承認しておきます。招待が見当たらなければ管理者に依頼してください。
クローンする前に、アプリをどこに保存するかを決めます。ここで重要な注意があります。
ドライブの同期フォルダにアプリを入れると、開発がうまく動きません。同期処理がファイルの読み書きと衝突するためです。必ず純粋なローカルフォルダ（例：デスクトップや書類直下の開発用フォルダ）に保存してください。すでにドライブ内に入れてしまった場合は、別の場所に保存し直します。
GitHubのリポジトリページのURLをコピーし、Claude Codeに貼り付けて指示します。
https://github.com/（組織名）/（リポジトリ名）Claude Codeがクローン（＝GitHub上のものを全部ローカルに落としてくる作業）と、必要なセットアップを進めてくれます。
クローンが終わっても、そのままではアプリは正しく動きません。画面（ガワ）はあるのに、データベースにログインできない・中身のデータがカラッポという状態になります。
なぜなら、GitHubにはデータベースの接続URLやパスワードといった秘密情報が入っていないからです。次の章で、その情報を揃えます。
04手順B：.env（接続情報）を揃える — ここが最大の山場
なぜGitHubに.envが入っていないのか
GitHubのリポジトリはチームに共有される場所です。もしそこにデータベースのパスワードや接続URLを置いてしまうと、アクセスできる人全員に秘密情報が渡ってしまいます。だから秘密情報は意図的にGitHubから除外されています。
代わりにリポジトリには .env.example（エグザンプル）という「どんな項目が必要かの見本」だけが入っています。中身はダミーです。見た目にはユーザー名やパスワードらしきものが書いてあっても、それは本物ではありません。
.env.example をお手本に、本物の値が入った .env ファイルを自分のローカルに作る。本物の値は「①Vercelから拾う」か「②作った人のローカル環境からもらう」のどちらかで入手します。
入手ルート①：Vercelの環境変数から拾う（基本はこれが一番早い）
Vercelもメンバー招待制です。招待メールから参加した自分のアカウントでログインし、対象のアプリ（プロジェクト）を選びます。どのアプリの.envを作ろうとしているのか（勤怠？CRM？）を間違えないよう、プロジェクト名を必ず確認してください。
プロジェクトの設定画面に「Environment Variables（環境変数）」という項目があります。ここにデータベースURLなどの必要な情報が登録されています。
画面を日本語に翻訳すると、Claudeに指示するときやスクショを共有するときに用語がズレてバグの原因になります。開発関連の画面は基本すべて英語のまま使ってください。スクショも英語画面で撮ります。
各変数の「Edit」を押すと、Value（値）を確認・コピーできます。
- Sensitive（機密）設定になっている変数は、Vercel上でも再表示できません。この場合はルート②（作成者からもらう）しかありません。
- iPhoneで確認する場合は「クリップボードにコピー」できる形で受け渡してもらってください。写真だけだと転記ミスのもとです。
接続URLやパスワードはチャット上に流してはいけません。流出リスクがあるためです。受け渡しは口頭・画面共有・パスワード管理ツールなど、記録に残りにくい安全な方法で行います。
入手ルート②：作った人のローカル環境からもらう
元のアプリを作った人のPCには、必ず本物の .env が残っています。VS Codeなどでそのプロジェクトフォルダを開けば .env の中身が確認できるので、そこから安全な方法で受け取ります。
ただし、作った本人がプロジェクトフォルダを消してしまっていると、この方法は使えません（実際にそういうケースがありました）。だからこそ——
アプリを新しく作って.envを設定したら、その場で内容をチームの安全な保管場所（パスワード管理ツール等）に記録しておくルールにします。あとから「Vercelで再表示できない」「本人のPCにもう残っていない」となると、毎回大騒ぎになります。作った瞬間に控える。これが一番の時短です。
ローカルに.envを作って貼り付ける
クローンしてきたプロジェクトフォルダをVS Codeで開き、.env.example を確認します。これが「必要な項目のリスト」です。
.env.example と同じ項目名で .env ファイルを作り、Vercelや作成者から入手した本物の値を貼り付けます。
Googleドキュメントと違い、VS Codeは保存操作をしないと反映されません。貼り付けたら必ず保存。「設定したのに動かない」の原因の多くは保存忘れです。
.env.example の中に、例えば「CRMのデータベースURL」のような別アプリの接続情報が書かれていることがあります。これはアプリ同士が連動しているサインです（例：勤怠アプリがキャリアアップ助成金の申請書のためにCRMと接続している、など）。
その場合、メインの接続情報だけ入れても動きません。連動先の接続情報も同じように入手して.envに入れる必要があります。
05手順C：日々の開発サイクル
環境ができたら、あとは毎回このサイクルの繰り返しです。
他の人が先に更新しているかもしれません。作業を始める前にGitHubから最新を取り込みます。Claude Codeに「最新をpullして」と伝えればOKです。
Claude Codeはローカルのファイルを指定して操作し、アプリを最新の状態に作り込んでいきます。修正内容は日本語で具体的に伝えて構いませんが、画面用語やスクショは英語のまま使います。
「作業したら常にpush」が鉄則です。pushして初めて、チームの全員があなたの成果を受け取れます。ローカルに置いたままにしない。
GitHubにpushすると、Vercelが自動でデプロイを行い、Web上のアプリに反映されます。デプロイ結果はVercelの画面で確認できます。
ついでに直したい習慣
タブを開きっぱなしにするとPCのメモリ（RAM）が圧迫され、開発ツールの動作が重くなります。使い終わったタブはこまめに閉じる癖をつけましょう。
06最終チェックリスト
開発に参加する前・作業を終える前に、これだけ確認してください。
- GitHubとVercelの両方に、メンバーとして招待されている
- プロジェクトはGoogleドライブの外（純粋なローカルフォルダ）に保存した
- .envに本物の値を入れ、Cmd + S で保存した
- 連動している別アプリ（CRM等）の接続情報も入れた
- 環境変数の値をチャットに貼っていない
- 開発関連の画面は英語のまま使っている（日本語翻訳OFF）
- 作業前に pull した／作業後に push した
- 新しく.envを設定したら、中身を安全な場所に控えた
07よくあるつまずき Q&A
Q. クローンしたのにログインできない／データが空っぽ
正常です。GitHubには接続情報（.env）が入っていないため、クローン直後は「ガワ」だけの状態です。第4章の手順で.envを揃えてください。
Q. Vercelで環境変数の値が「再表示できない」と出る
その変数がSensitive（機密）設定になっています。Vercelからは取れないので、作成者のローカル環境から安全な方法で受け取ってください。
Q. .env.exampleにパスワードらしきものが書いてあるけど、これでいい？
それはダミー（見本）です。本物の値に差し替えないと動きません。
Q. GitHubを通さず直接Vercelに上げたほうが早くない？
できてしまいますが禁止です。GitHubが古いまま取り残され、次にクローンする人が古いアプリを受け取ってしまいます。GitHub＝常に最新、が全員の共通土台です。
Q. 設定したはずなのに反映されない
まずVS Codeの保存忘れ（Cmd + S）を疑ってください。次に、Googleドライブ内のフォルダで作業していないかを確認してください。