Chapter 04

2-1. GitHub リポジトリ設定

Masuyama
Masuyama
2022.10.15に更新

GitHub リポジトリ設定

ここからの作業については、変更内容を後ほど追えるようにするために
Git、そして GitHub で管理していきましょう。

なお、人によっては SSH 設定など、一部については済んでいる場合があるので適宜飛ばしていただいて構いません。
その場合、techlog-app 用のリモートリポジトリ作成だけ実施してください。

Git とは

Git はファイルのバージョン(履歴)を管理するシステムのです。

ソースコードを変更する開発を進めている時、変更をしすぎて正常に動作しなくなってしまうことがあると思います。
こういった時に役立つのが、正常に動作していた途中の状態を
一つのバージョンとして保存しておき、後で復元できる機能を持つ Git です。

Git は個人で開発する際に役立つのはもちろん、
ソースコードのバージョンを細かく他の人に共有することができるため、チームでの開発をする時に活躍します。

今やどの現場においても Git を使うことは当たり前のようになっていますが、
未経験からエンジニアとなった方がつまずきやすいポイントでもあります。
この機会にしっかりと使いこなし、エンジニアの一歩を踏み出していきましょう。

GitHub とは

GitHub は、Git を用いてバージョン管理されたソースコードを共有するためのプラットフォームです。

Git ではリポジトリと呼ばれる箱のようなものでソースコードを管理していきます。

自分のパソコン上で作成したリポジトリ(=ローカルリポジトリ) を、
GitHub というオンライン上のリポジトリ (=リモートリポジトリ) にあげておくことで、
チームメンバーが閲覧したり、さらには AWS や Slack といった
外部サービスと連携して外部に公開したりといったことまで出来ます。

本カリキュラムにおける設定方法はこの後ご紹介しますが、
事前に全体的な流れや、基本的な使い方は以下の参考サイトで事前に把握しておいてください。

初期設定・リモートリポジトリ作成

まずは以下サイトの手順に沿って GitHub にリモートリポジトリ作成、および SSH の設定までを完了させましょう。
※1: [GitHub に SSH の設定をする] まで完了させ、[GitHub にプッシュをする]には進まないでください。
※2: リポジトリは Private ではなく Public に設定してください。

Mac の方はこちら

Windows の方はこちら

※上記サイトの手順 [GitHub の設定] > [リモートリポジトリの作成] で
リモートリポジトリを作成する際、リポジトリ名は techlog-app にしておきましょう。

<img width="611" alt="image" src="https://user-images.githubusercontent.com/68495563/184139823-238805bb-1fbc-4376-981d-1ed801114e99.png">

リモートリポジトリを作成した後は、以下のような画面が GitHub では表示されているはずです。

<img width="1163" alt="image" src="https://user-images.githubusercontent.com/68495563/184139946-31503863-8a71-456d-8fa0-6945d8119009.png">

techlog-app を GitHub で管理

それでは、前章で作成した Rails プロジェクト techlog-app を、
GitHub のリモートリポジトリにプッシュ(アップロード)するための準備をします。

リモートリポジトリ設定

まずターミナルで techlog-app ディレクトリに移動しましょう。

$ cd ~/workspace/techlog-app
$ pwd # 場所の確認
/Users/YourName/workspace/techlog-app

techlog-app ディレクトリ内に移動できたことを確認したら、techlog-app のアップロード先であるリモートリポジトリの場所を指定します。
(xxxxxxには GitHub のアカウント名を指定してください。)

$ git remote add origin git@github.com:xxxxxx/techlog-app.git

なお、上記コマンドは GitHub でリモートリポジトリを作成した時に表示されたコマンドの一部です。

image

リモートリポジトリを正常に設定できたら、
りモートリポジトリ確認用コマンド git remote -vを叩いた時に表示されます。

$ git remote -v
origin  git@github.com:tmasuyama1114/techlog-app.git (fetch)
origin  git@github.com:tmasuyama1114/techlog-app.git (push)

ブランチ設定

Git ではブランチというもので、作業状況を分けて(分岐して)管理することができます。

※本カリキュラムでは main というブランチだけで作業していきますが、
実際の現場では新機能追加や、何らかの設定を行うごとにブランチを一つ作成するのが普通です。

以下のコマンドを techlog-app ディレクトリでそのまま実行します。

$ git branch -M main

これでブランチとして main が設定されました。

変更内容をステージングへ登録

Git では、ファイルの変更をしただけではバージョン管理対象になりません。

ステージングという場所に変更内容を登録することで
初めて「これらをこれからバージョン管理します」と宣言することになります。

現在の状態でgit statusコマンドを実行してみてください。
Untrackad files:という欄に表示されているのが、
まだステージングに登録されていない変更内容(ファイル)です。

$ git status
On branch main

No commits yet

Untracked files:
(use "git add <file>..." to include in what will be committed)
.gitattributes
.gitignore
.ruby-version
Gemfile
Gemfile.lock
...

nothing added to commit but untracked files present (use "git add" to track)

それでは、Rails プロジェクトを作成したというここまでの変更内容をステージングに登録しましょう。
変更内容をまとめてステージングに登録するには git add .コマンドを実行します。

$ git add .

これで変更内容がステージングに登録されたので
git statusコマンドを実行すると表示が少し変わっています。

$ git status
On branch main

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   .gitattributes
        new file:   .gitignore
        new file:   .ruby-version
        new file:   Gemfile
        new file:   Gemfile.lock
        ...

変更内容をコミット

さて、ステージングに登録した変更内容は**コミット(commit)**することで初めて、変更内容が記録されます。
(このコミット 1 回につき、一つのバージョンが作られて後から遡ることが出来るようになります。)

先ほどステージングに登録した変更内容について、メッセージ付きでコミットしてみましょう。

$ git commit -m "プロジェクト開始"
[main (root-commit) c5600b7] プロジェクト開始
 80 files changed, 1400 insertions(+)
 create mode 100644 .gitattributes
 create mode 100644 .gitignore
 create mode 100644 .ruby-version
 create mode 100644 Gemfile
 create mode 100644 Gemfile.lock
 ...

コミットをリモートリポジトリにプッシュ

コミットしたことで、変更内容を一つのバージョン(スナップショット)として記録できました。
この記録を GitHub のリモートリポジトリに共有し、
リモートリポジトリとローカルリポジトリを同じ状態に同期するにはプッシュを実行します。

プッシュについてはイメージ図があると理解しやすいので、こちらの参考サイトを一度ご覧ください。

$ git push -u origin main
Enter passphrase for key '/Users/YourName/.ssh/id_rsa':
...

- [new branch] main -> main
  Branch 'main' set up to track remote branch 'main' from 'origin'.

途中、GitHub の設定時に作成した SSH 鍵のパスワードを求められるので、ターミナル上で入力してください。

リモートリポジトリの確認

git push を実行したことで、GitHub にこれまでの変更内容が同期されています。
GitHub の画面を更新し、techlog-app リポジトリの状況を確認してみましょう。

先ほどのコミットが反映されているはずです。

<img width="600" alt="スクリーンショット 2022-06-18 9 10 31" src="https://user-images.githubusercontent.com/68495563/174414342-03f6beec-2850-413f-be38-209053f14ca0.png"></img>

今後の作業ではこのように、区切り毎にコミットしていくようにします。

自分の作業管理に役立つのはもちろん、
トラブルシューティングで他の人のサポートを受ける時にコードを共有することで出来るので役立ちます。

宿題

git の基本操作と概念

git では複数の操作を一気に行うため、その意味を理解していないと混乱しやすいところです。
今回のカリキュラムで一旦操作の流れはなんとなく掴めたと思うので、
リポジトリの種類や処理のイメージについてこちらの参考サイトで掴んでおきましょう。

イラスト付きなのでイメージしやすいですよ。

ブランチについて

git を使った開発では、ブランチという分岐を頻繁に作成しながら開発を進めていきます。
そのため、このタイミングでしっかりとブランチの概念と、操作方法について理解しておきましょう。