🔰

【環境構築】GitHubでブランチを切って更新するまで

2025/01/28に公開

GitHubでブランチを切って更新するまで

はじめに

GitHubを利用してプロジェクトをリモートで管理する方法のご紹介です!
この方法でブランチの操作やコードの修正、差分管理ができます😎
開発を始めるときに自分が知りたかった情報をまとめました🔰


1. 事前準備

まずは以下の準備ができているか確認しましょう✅

必要なもの

  1. GitHubアカウント

  2. GitHub Desktop

    • GitHub Desktopをインストールし、Git操作をGUIで簡単に行えるようにします。
      👉 GitHub Desktop公式サイト
    • インストール後、GitHubアカウントでログインします。
  3. Visual Studio Code (VSCode)


2. GitHubでリポジトリの作成

今回はGitHubとの連携を行うために、新たなリポジトリを作成します。

リポジトリとは?

リポジトリとは、コードやファイル、変更履歴などを保管する場所です。
この中には、よく耳にするブランチコミットなどが含まれています。

環境構築の第一歩として、まずはリポジトリを作成しましょう!

リポジトリの作成手順

  1. GitHubにログイン
    GitHubにログインするとDashboardに飛ぶかと思います。
    そのページ右上にある+ボタンをクリックし、New repositoryを選択します。

  2. 必要な情報を入力
    次に、以下の情報を入力します:

    • Repository name: リポジトリの名前を入力します。ここでは例として「my-next-app」とします。
    • Description (optional): 任意でリポジトリの説明を追加します。キャプチャでは空欄にしています。
    • PublicとPrivate: Public(公開)または Private(非公開)を選択します。個人的な利用に留まるのであれば、Private(非公開)で問題ありません。
  3. その他の設定

    • 他の設定(READMEの追加やライセンス設定)は必要に応じて行います。
      「Add a README file」にチェックを入れると、mainがデフォルトのブランチに設定されます。
      今回はmainブランチがあると理解しやすいので、Add a README fileにのみチェック☑️を入れます。
  4. リポジトリの作成
    最後に、Create repositoryボタンをクリックします。


この手順を踏むことで、GitHub上に新しいリポジトリが作成されます。
次のステップに進む準備が整いました!

3. GitHub Desktopと連携

GitHub Desktopを使うことで、GUIで簡単にGitHubリポジトリと連携し、バージョン管理を行うことができます。
以下の手順で連携してみましょう。

0. GitHub Desktopのインストールとセットアップ

事前準備にも記載しましたが、以下の準備ができているか確認してください!

  1. GitHub Desktop公式サイトにアクセスし、OSに合ったバージョンをダウンロードしてインストールします。

  2. インストール後、アプリを起動してGitHubアカウントでログインします。
    画面左上の【GitHub Desktop > Settings > Accounts > Sign Into GitHub.com】から入ることができます。

1. リモートリポジトリのクローン

ここからは、先程GitHubで作成した「my-next-app」リポジトリと、GitHub Desktopを結びつけます!
何をするかというと、
リモートリポジトリをクローンして、ローカルリポジトリとして追加します!
イメージとしては、🛜GitHub上のコードを💻自分のパソコンにコピーする感覚です。

それを踏まえた上で、リモートリポジトリのクローンしてみましょう🚀

  1. GitHubで作成したリモートリポジトリの画面から、クローンするためのURLをコピーします。
    具体的には、<> CodeHTTPSタブのURLをコピーします。
    (※「Open with GitHub Desktop」のボタンもありますが、各アプリの構造を理解するためにURLを利用します。)

  2. GitHub Desktopを起動し、画面上部の「File」メニューからClone Repository...を選択します。

  3. 「URL」タブを選択し、2つある入力欄のうちの上(Repository URL or GitHub username and repository)に、2.でコピーしたURLを貼り付けます

  4. すると、入力欄下のLocal Pathも新たに追加されるはずです。(入力されなかった場合は「Choose...」にて、Documents配下などに任意で指定しましょう。)

  5. ここまでキャプチャと同様の挙動があれば、Cloneボタンを押します。
    左上にリモート上で作成したリポジトリと同じ名前があれば、クローン成功です👏

これで、ローカルリポジトリがGitHub Desktopに追加されました!

4. VSCodeと連携

リモートリポジトリをローカルリポジトリとしてクローンすることができました!
続いて、ローカルリポジトリのコードをVSCodeを使って修正できるように準備しましょう📝

ここまで準備したGitHub DesktopからVSCodeを直接開くことができます。

0. Current Branchの確認

まずは、現在のブランチを確認しましょう👀
これまでの手順通りであれば、Current Branchはmainになっています。
※ここは自分が修正したいブランチであれば問題ありません。

1. GitHub Desktop から VSCode を開く

現在のブランチを確認できたら、
画面中央のOpen in Visual Studio Codeを押下します。
(※もしなければ、SettingsリンクからExternal EditorをVisual Studio Codeに変更してください。)

すると、VSCodeが起動します。
そして、画面左下にはなんと書いてあるでしょうか?
現在のブランチ名であるmainが出力されているはずです。

2. ブランチを切り替える

せっかくなので、ブランチを切り替えてみましょう。
GitHub Desktop左上の、Current Branchを押下しましょう。
ここでブランチを切り替えるのですが、まだmainブランチしかありません。
新たにブランチを作成するためにNew Branchボタンを押します。

今回はstagingという名前で新しいブランチを作成します。
Create Branchを押しましょう。

すると、Publish branchというボタンが出てきました。
これを押すことで、ローカルで作成した今のブランチをリモートブランチとして作ることができます。
Publish branchを押して、リモートブランチを作成しましょう。

GitHubに戻ってみると、stagingブランチが作成されているのが確認できます。

さらに、GitHub Desktopでは、Current Branchがstagingになっています。

では、VSCodeはどうなっているでしょうか?
GitHub Desktopから開いたVSCodeの左下を確認してみてください。
ちゃんと現在のブランチである、stagingに変更されています。

これでVSCodeとの連携は完璧ですね👍

5. コードの修正とGitHubへの更新

最後に、コードを修正してGitHubに更新するまでを行ってみましょう!

1. VSCodeからコードの修正

VSCodeからREADME.mdを選択し、自由に書いてみましょう。
書き終わったら、⌘+s/ctrl+s などで保存し、ファイル名の右側が×になることを確認します。

2. GitHub Desktopからコミット&プッシュ

次に、GitHub Desktopに行ってみてください。
どこを修正したのかが、一目で分かるようになっています。

左下にコミットに必要な情報を記載し、stagingに対してコミットを行います。

コミットを行ったら続いてはプッシュです。
Pushを押下します。

そのまま、Create Pull Requestを押下してプルリクエストを作成しましょう。
※「Preview Pull Request」となっている場合、ボタン右の「▼」を押したり、もしくはそのまま進むと「Create Pull Request」が押せます。

すると、GitHubのページに遷移するはずです。
必要な情報を入力したら、緑色ボタンのCreate pull requestを押下し、

Merge pull requestConfirm mergeを行えばマージまで完了です!!

ちゃんと、README.mdも更新されています🥳
素晴らしい!


これでGitHubを使ったブランチ操作の基本的な流れは完了です!
お疲れ様でした!
引き続きプロジェクト開発を楽しみましょう✨

Discussion