Portfolioはじめに
コードを書いたあと、「これをどうやってサーバーにアップすればいいのか？」と悩む方は多いと思います。FTPでファイルをアップロードする方法もありますが、現代的なやり方としてGitHubを使う方法があります。
この記事では、Claude Codeを使ってGitHubにコードをプッシュする方法と、ブランチを使った安全な管理方法をご紹介します。
なぜGitHubを使うのか
| 方法 | メリット | デメリット |
|---|---|---|
| FTPアップロード | シンプル、昔からある | 変更履歴が残らない、ミスを戻しにくい |
| GitHub経由 | 変更履歴が残る、複数人で作業可能 | 最初の学習コストがある |
GitHubを使う最大のメリットは、変更履歴が残ることです。「昨日の状態に戻したい」「いつこの変更をしたか確認したい」といったときに助かります。
ブランチとは何か
ブランチは、「作業用の別ルート」のようなものです。
たとえば、本を書いているとします。原稿の「本番用」があって、それとは別に「実験的な書き直し用」を用意する。実験がうまくいったら本番用に反映する、失敗したら捨てる——そんなイメージです。
公開中のサイト
お問い合わせフォーム追加中
誤字修正中
このように、mainブランチは本番環境、作業用ブランチで開発という使い分けをすると、本番サイトを壊さずに新機能を試せます。
Claude Codeでのプッシュ方法
Claude Codeを使えば、gitコマンドを自分で覚えなくても、自然言語で指示できます。
新しいブランチを作ってプッシュ
Claude Codeに以下のように指示します。
「feature/contact-form」というブランチを作成して、
現在の変更をGitHubにプッシュしてください
Claude Codeは適切なgitコマンドを実行してくれます。
ブランチ名の付け方
ブランチ名は自由に決められますが、わかりやすい名前をつけると管理が楽になります。
| 種類 | 命名例 | 用途 |
|---|---|---|
| 機能追加 | feature/contact-form | 新しい機能を追加するとき |
| 修正 | fix/typo-homepage | バグや誤字を直すとき |
| 改善 | improve/page-speed | 既存機能を改善するとき |
実際の作業フロー
ステップ1: 作業開始
Claude Codeに「新しいブランチを作って作業を始めたい」と伝えます。
新しいブランチ「feature/about-page」を作成して、
会社概要ページを追加してください
ステップ2: 作業中
コードの修正や追加は、いつも通りClaude Codeに指示します。途中で「ここまでの変更をGitHubに保存しておいて」と指示すれば、コミットしてプッシュしてくれます。
ここまでの変更をコミットしてプッシュしてください。
コミットメッセージは「会社概要ページの基本構造を追加」で
ステップ3: 完成したら
作業が完了したら、mainブランチにマージする準備をします。これはGitHub上でPull Request（PR）を作成して行います。
詳しくは「プレビュー確認とPRマージ」をご覧ください。
よくある疑問
Q: ブランチを使わずに直接mainにプッシュしてもいい？
小さな修正であれば、直接mainにプッシュすることもあります。ただ、ある程度の規模の変更はブランチを分けたほうが安全です。
- 誤字修正1箇所 → mainに直接でもOK
- 新しいページ追加 → ブランチを分けたほうが安心
Q: ブランチが増えすぎたらどうする？
マージが完了したブランチは削除できます。Claude Codeに「マージ済みのブランチを削除して」と指示すれば対応してくれます。
Q: 間違えてプッシュしてしまったら？
GitHubには変更履歴が残っているので、過去の状態に戻すことができます。「さっきのプッシュを取り消したい」とClaude Codeに相談すれば、適切な方法を提案してくれます。
まとめ
- GitHubを使うと変更履歴が残り、安全に管理できる
- ブランチを使うと、本番環境を壊さずに開発できる
- Claude Codeに自然言語で指示すれば、gitコマンドを覚えなくても操作できる
最初は「mainブランチが本番、作業はブランチを分ける」という基本だけ覚えておけば十分です。慣れてきたら、より細かい使い分けを試してみてください。