🔀

自然言語だけでプログラミング！Vibecodingをはじめよう③ ブランチ→PR→マージ完全ガイド

に公開
AI
GitHub
Zenn
Vibe Coding
Codex
tech

ブランチを切って、デザインや機能を自由に切り替えよう！

前回の掲示板アプリを改良する際、元のプログラム（mainブランチ）を直接変更せず、デザインや機能ごとにブランチを切って開発する方法について学びましょう！

Codex CLIに自然言語で指示して、この一連のブランチ運用方法について解説します。

手順 1 — ブランチを切る

現在のブランチ名(main)は画面の下部で確認できます。
alt text

ブランチを切って

または目的をしっかりいうとブランチ名を明確にしてくれます。

カラフルな掲示板を開発したいのでブランチを切って

画面の下の赤線の部分がmainからブランチ名（colorful-board）に代わります。
alt text

ブランチの名前の付け方（一般的には）

  • 命名例：feature/<要約>-<日付>、fix/<Issue番号>-<要約>
  • 作業の単位は小さく。1PR＝1目的が読みやすい。

手順 2 — Vibecoding！掲示板のデザインや新機能を追加してみよう！

Codes CLIに下記を入力して実行してみましょう

めちゃカラフルでクールなデザインの掲示板にして

手順 3 — 変更をコミットしてプッシュ

コミットして

この後はじめての場合はブランチを発行しないとだめ
alt text

プッシュして

裏側でおこること（イメージ）

  • git add（梱包）→ git commit（宛名＋封）→ git push（配送してリモートへ）

手順 4 — 🌈 GitHub Pages を main から colorful-board ブランチに切り替えてデプロイ（Webに公開）する手順

alt text

  1. GitHub → 対象リポジトリを開く

  2. 右上メニューから「Settings」 をクリック。

  3. 左サイドバーのメニューから 「Pages」 を選択。

  4. 「Build and deployment」セクションの
    Source を「Deploy from a branch」に設定。

  5. その下の Branch 項目で
    main → colorful-board に切り替え、
    Folder は / (root) を選択して Save をクリック。

  6. 数分待つと、上部に 公開URL が表示されます。
    そのURLにアクセスして、colorful-board ブランチで公開された内容を確認します。

💡この手順により、「main」ブランチは保護されたまま、
「colorful-board」ブランチの内容を GitHub Pages で安全に公開できます。
ブランチを切り替えることで、デザインや機能を差し替えてテスト公開できます。

手順1～手順4までを繰り返しいろいろなバージョン（ブランチ）の掲示板をつくろう！

mainブランチに戻って

↓

ブランチ切って

↓

掲示板に〇〇の新機能をつけて

↓

コミットして

↓
はじめての場合はブランチを発行する
alt text
↓

プッシュして

↓

GitHub Pagesでデプロイ（Webに公開）

手順 5 — プルリクエスト・レビュー・マージ

プルリクエストして、レビューしてマージして

いくつか作ったブランチで、「このブランチの掲示板気に入ったので。これ本番環境mainにしたいよね！」と思ったものがあるかもしれません。
このブランチから本番環境に移すのがプルリクエスト・レビュー・マージです。

流れのイメージ

  • 気に入った仕上がりのブランチで PR（プルリクエスト） を作成し、背景や動作確認を添えて伝える
  • レビューとは差分を見ながらの最終調整（気になる点は修正して再プッシュ）
  • 問題なければマージして main を更新し、本番環境にも反映

開発用ブランチで試していた内容を「本番レーン」に昇格させるための入場ゲートが PR → レビュー → マージの流れだと捉えるとイメージしやすいはずです。

よくある質問（初心者向け）

  • 直接 main にコミットしてはダメ？
    • 小さな個人検証なら可。ただし共有リポジトリでは事故や衝突の原因。ブランチ＋PR が安全。
  • PR を出す相手がいないときは？
    • 自分レビューでも価値あり。差分の見える記録と自動チェックの足場になります。
  • コンフリクトが出たら？
    • Codex に「コンフリクトを解消して再コミットして」と依頼。無理なら「どのファイルのどの行が衝突？」と聞くと道筋が明確になります。

まとめ

  • ブランチは安全な作業用レーン、PR は説明可能な変更の入場券、マージで本線（main）に合流。
  • Codex CLI には自然言語で十分。小さく速く回し、履歴を読みやすく保つのがコツ。
GitHubで編集を提案

Discussion