【環境構築】GitHubでブランチを切って更新するまで
GitHubでブランチを切って更新するまで
はじめに
GitHubを利用してプロジェクトをリモートで管理する方法のご紹介です!
この方法でブランチの操作やコードの修正、差分管理ができます😎
開発を始めるときに自分が知りたかった情報をまとめました🔰
1. 事前準備
まずは以下の準備ができているか確認しましょう✅
必要なもの
-
GitHubアカウント
- GitHub公式サイトで無料アカウントを作成します。
👉 GitHub公式サイト
- GitHub公式サイトで無料アカウントを作成します。
-
GitHub Desktop
- GitHub Desktopをインストールし、Git操作をGUIで簡単に行えるようにします。
👉 GitHub Desktop公式サイト - インストール後、GitHubアカウントでログインします。
- GitHub Desktopをインストールし、Git操作をGUIで簡単に行えるようにします。
-
Visual Studio Code (VSCode)
- コードエディタとしてVSCodeをインストールします。
👉 VSCode公式サイト
- コードエディタとしてVSCodeをインストールします。
2. GitHubでリポジトリの作成
今回はGitHubとの連携を行うために、新たなリポジトリを作成します。
リポジトリとは?
リポジトリとは、コードやファイル、変更履歴などを保管する場所です。
この中には、よく耳にするブランチやコミットなどが含まれています。
環境構築の第一歩として、まずはリポジトリを作成しましょう!
リポジトリの作成手順
-
GitHubにログイン
GitHubにログインするとDashboardに飛ぶかと思います。
そのページ右上にある+
ボタンをクリックし、New repository
を選択します。
-
必要な情報を入力
次に、以下の情報を入力します:- Repository name: リポジトリの名前を入力します。ここでは例として「my-next-app」とします。
- Description (optional): 任意でリポジトリの説明を追加します。キャプチャでは空欄にしています。
-
PublicとPrivate: Public(公開)または Private(非公開)を選択します。個人的な利用に留まるのであれば、
Private(非公開)
で問題ありません。
-
その他の設定
- 他の設定(READMEの追加やライセンス設定)は必要に応じて行います。
「Add a README file」にチェックを入れると、mainがデフォルトのブランチに設定されます。
今回はmainブランチがあると理解しやすいので、Add a README file
にのみチェック☑️を入れます。
- 他の設定(READMEの追加やライセンス設定)は必要に応じて行います。
-
リポジトリの作成
最後に、Create repository
ボタンをクリックします。
この手順を踏むことで、GitHub上に新しいリポジトリが作成されます。
次のステップに進む準備が整いました!
3. GitHub Desktopと連携
GitHub Desktopを使うことで、GUIで簡単にGitHubリポジトリと連携し、バージョン管理を行うことができます。
以下の手順で連携してみましょう。
0. GitHub Desktopのインストールとセットアップ
事前準備にも記載しましたが、以下の準備ができているか確認してください!
-
GitHub Desktop公式サイトにアクセスし、OSに合ったバージョンをダウンロードしてインストールします。
-
インストール後、アプリを起動してGitHubアカウントでログインします。
画面左上の【GitHub Desktop > Settings > Accounts > Sign Into GitHub.com】から入ることができます。
1. リモートリポジトリのクローン
ここからは、先程GitHubで作成した「my-next-app」リポジトリと、GitHub Desktopを結びつけます!
何をするかというと、
リモートリポジトリをクローンして、ローカルリポジトリとして追加します!
イメージとしては、🛜GitHub上のコードを💻自分のパソコンにコピーする感覚です。
それを踏まえた上で、リモートリポジトリのクローンしてみましょう🚀
-
GitHubで作成したリモートリポジトリの画面から、クローンするためのURLをコピーします。
具体的には、<> Code
のHTTPS
タブのURLをコピーします。
(※「Open with GitHub Desktop」のボタンもありますが、各アプリの構造を理解するためにURLを利用します。)
-
GitHub Desktopを起動し、画面上部の「File」メニューから
Clone Repository...
を選択します。
-
「URL」タブを選択し、2つある入力欄のうちの上(
Repository URL or GitHub username and repository
)に、2.でコピーしたURLを貼り付けます。
-
すると、入力欄下の
Local Path
も新たに追加されるはずです。(入力されなかった場合は「Choose...」にて、Documents配下などに任意で指定しましょう。)
-
ここまでキャプチャと同様の挙動があれば、
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 request
→Confirm merge
を行えばマージまで完了です!!
ちゃんと、README.md
も更新されています🥳
素晴らしい!
これでGitHubを使ったブランチ操作の基本的な流れは完了です!
お疲れ様でした!
引き続きプロジェクト開発を楽しみましょう✨
Discussion