TECH

【2022年版】はじめてのGitHub - 運用操作編

2022年8月17日

はじめてのGitHub - 運用操作編

初期設定はひと段落。

ですが、「実際にどうやって使っていけばいいかわからない!」と思っていませんか?
今回はGitHubのIssue機能を活用した運用操作手順をまとめてみました!

サイト修正があったら実際にこの流れで進めています。

最初は取っ付きにくいかもしれませんが、流れさえおさえらればすぐにできます!
まずはIssue機能の概要から始めましょう!

Issue機能を活用しよう!

サイトを修正・開発する際、こんなことを思ったことはありませんか?

「いままでやったことを振り返りたい」

「これからやることを整理したい」

個人で作業するとしても、やることが増えてくるとどうしても収拾がつかなくなってしまいます。
そうした時に使える機能がIssueです。

IssueはTODOリストとして使用でき、コミットした修正コードを関連づけることができます。
タスク管理と修正コードの振り返りがIssueでできちゃうわけです!

Issueを活用してgit操作を行なっていきましょう!

手順は区切りがいいところで分けて前編・中編・後編の3構成でまとめています。

【前編】Issue作成〜ローカルリポジトリ操作

Issue作成

まずはGitHubのリポジトリ画面を開きましょう。
Issueタブ>New Issueを押下するとIssueを作成できます。

Issue作成

Issue画面が表示されたら必要情報を入力します。

Issue名は必須(赤点線)、下のコメントは任意(青点線)です。
入力したらSubmit new issueを押しましょう。

ちなみにコメントにはテキスト以外にチェックボックスも使うことができます。
サブタスクとして何個終わっているかIssueが数えてくれるので、作業前のタスク整理に使っています。
(マークダウン記法でかけるのも地味に便利です)

Issue作成2

番号が表示されたら#も含めてコピーしておきましょう!(赤点線)
この番号で、ローカルリポジトリでコミットした内容とIssueを紐付けます。

後ほど再登場しますので、番号は一旦頭の片隅に置いておいてください。

Issue作成3

作業ブランチ作成

Issueの準備が完了したところで、ここからはコマンド操作に入ります!
Macはターミナル、WindowsはPowerShellを開きましょう。

作業フォルダへ移動

まずは作業フォルダへ移動します。

初期設定編に引き続き今回もフォルダを仮に
本サイトドメイン(capybara-notebook_com)としています。

■作業フォルダ(ディレクトリ)へ移動

cd ~/Documents/capybara-notebook_com

%の左隣が打ち込んだフォルダ名に変更されていればOKです。

ユーザー名 capybara-notebook_com % 

リモートリポジトリからプル

次にリモートリポジトリ(GitHub)からローカルリポジトリへプルします。

■プル(リモートリポジトリ→ローカルリポジトリ)

git pull origin master

プルすることで、ローカルリポジトリ上でリモートのデータが上書きされ、格納されているデータは全く同じになります。これはデータのロールバック(先祖返り)を防ぐための操作になるので非常に大事です!

データは最新状態だよ(ローカル=リモート)と返ってくるか、データ更新の処理が始まります。

Already up to date.

作業ブランチ作成

ローカルリポジトリのデータが最新化されたら、作業ブランチを作成しましょう。
まずは今いるブランチを確認してみます。

■参照しているブランチを確認

git branch

ブランチを作っていなければ、masterにいるよと返ってきます。
アスタリスク「*」が今いるブランチを指します。

* master

ブランチを作成します。

ブランチ名は何でもOKです。
今回はIssueと紐付けたいので、冒頭でコピーしておいたIssue番号は必ずいれましょう。

仮に「feature-#1」ブランチを作成します。

■ブランチ作成

git branch feature-#1

ブランチを作成しましたね。

よし!作業開始!といきたいとのところですが、
最初に確認した通り、今「master」ブランチにいるので「feature-#1」ブランチへ切り替えが必要です。

■参照するブランチを切り替え

git checkout feature-#1

「feature-#1」に切り替えたよと返ってくるかと思いますが、念には念を入れて今いるブランチを確認しましょう。(ターミナルがうんざりするぐらい確認しています)

■参照しているブランチを確認(再掲)

git branch

アスタリスクが「feature-#1」に付いていれば作業OKです!
がしがし開発、改修していきましょう〜

* feature-#1
  master

【中編】コミット〜リモートリポジトリへ反映

作業が終わったら、中編に入ります!

中編は初期設定編と操作はほとんど同じです。
復習がてら進めていきます!

リポジトリ内の変更ファイルを確認

ローカルリポジトリで変更したファイルが表示されるかチェックしましょう。

■リポジトリ状態チェック

git status

チェックすると以下のように、「feature-#1」ブランチで変更ファイルがあるからインデックスするかどうか決めてねと返ってきます。

On branch feature-#1
Changes not staged for commit:
 (use "git add <file>..." to update what will be committed)
 (use "git restore <file>..." to discard changes in working directory)
      modified:   css/style.css

no changes added to commit (use "git add" and/or "git commit -a")

返ってきた記述にあるファイルが、実際さわったファイルか確認しましょう。

変更ファイルをgitのインデックスに追加

次に変更ファイルをインデックスへ追加します。

名前を直打ちしてもいいのですが、すべてのファイルをインデックスするならばドット「.」をつかって一括追加してしまいましょう。

修正となるとhtmlやcssファイルなど複数同時に変えることが大半なので、
基本はドット「.」でインデックスに追加しています。

■すべての変更ファイルをインデックスへ追加

git add .

なにも返ってこないので、不安であれば状態をチェックしましょう!

■リポジトリ状態チェック(再掲)

git status

すると、コミット前の変更ファイルがあるよと表示されていればOKです。

On branch feature-#1
Changes to be committed:
 (use "git restore --staged <file>..." to unstage)
      modified:   css/style.css

インデックスした変更ファイルをコミット

インデックスへの追加がおわったら、コミットを行います。

コミット内容は何を作業したのか簡単な概要を記載します。
今回は概要に加えて、Issue番号をいれましょう!

■コミットする

git commit -m "#1 modified CSS"

コミット内容は日本語でも大丈夫です。
Issue番号は頭に入れても最後に入れてもどこでもOKです。

Issue番号を入れることでGitHubで作成したIssueとコミットが紐づきます。
紐づくとGitHub上で修正内容の参照が楽ちんになります!

作業ブランチの変更内容をリモートリポジトリへ反映

中編ラストの工程です!
リモートリポジトリであるGitHubへ作業ブランチ「feature-#1」をプッシュしましょう。

■作業ブランチの変更内容をリモートリポジトリへプッシュ

git push origin feature-#1

反映処理がおわったら、GitHub画面を開いてください。
プルリクエストを作成していきます!

【後編】プルリクエスト作成〜完了

ついに後編!あともうちょっと!
リモートリポジトリ(GitHub)へプッシュしたコミット内容の登録操作と
Issue完了、ブランチ削除などといった完了に向けての後かたづけに入っていきます。

コミット内容がGitHubのIssueと紐づいているか確認

GitHub>Issueタブ>該当のIssueを開いてください。
先程プッシュしたコミット内容がIssueと関連づけられているか確認しましょう。

下の赤点線のようにコミットしたテキストが出ていればOKです。
(クリックすると何を変更したのかbefore/afterで確認することができます!)

コミット内容がGitHubのIssueと紐づいているか確認

プルリクエスト作成〜マージ

Issueとコミット内容の関連づけの確認ができたら、プルリクエストを作成します。
Issueタブ隣のPull requestsタブを開きましょう。

プルリクエスト作成

これから説明する手順は手動で作業ブランチを選択してプルリクエストを作成するパターンです。
大半はPull requestsタブを開くと作業ブランチが選択された状態で、プルリクエストをつくるかと聞いてきます。
そのままクリックして進めていってOKです(手順1がスキップされます)。

プルリクエストとは

第三者にコードレビューをしてもらうための機能です。
本来は作業者以外の人に内容をチェックしマージしてもらいます。

Compareを作業ブランチへ変更

New pull requestボタンを押すと「Compare changes」へ画面が変わります。

ドロップダウンのCompareをmasterからプッシュした作業ブランチ「feature-#1」に変更しましょう。(赤点線)

下のようにコミット詳細内容が表示されたら、Create pull requestボタンを押します。(赤線)

プルリクエスト作成2

プルリクエストを作成

Create pull requestボタンを押すと、タイトルにコミット内容が入力された状態でコメント入力画面が表示されます。
Issueで入力したコメント画面と同じですね。

ここでは、何をしたのか箇条書きでいれるようにしています。

コメントを入力したらCreate pull requestボタンを押しましょう。(赤線)

プルリクエスト作成3

プルリクエストをマージ

プルリクエストを作成したら、マージを行います。

Merge pull requestを押しましょう。(赤線)
すると、確認が求められるのでconfirm mergeを押してください。

プルリクエスト作成4

作業ブランチを削除

無事マージが完了したら、プルリクエストは自動的に完了となります。

同時に作業ブランチ「feature-#1」を安全に削除できますよと表示されます。
Delete branchを押して作業ブランチを削除しましょう。(赤線)

プルリクエスト作成5

Issueを完了

プルリクエストが終わりましたね。
GitHub画面最後の操作です!

Issue画面に移ってClose issueを押してIssueを完了にしましょう(赤線)。
GitHubはもう使わないので閉じてしまってOKです。

Issue完了

ローカルリポジトリの後かたづけ

大事な操作があともう2つ残っています!
もう忘れかけていたローカルリポジトリ側をきれいにしましょう!

先程削除した作業ブランチは、リモートリポジトリにプッシュしたものですので、最初にローカルリポジトリで作成したものは残っています。
また、忘れてはいけないのが、ローカルリポジトリのmasterは未だ修正前の状態であることです。

作業ブランチを削除して、masterを最新にします。

作業ブランチを削除

まずは念の為、今みているブランチを確認しましょう。
恐らく作業ブランチ「feature-1」を参照しているはずです。

■参照しているブランチを確認(再掲)

git branch

作業ブランチ「feature-1」にいると削除ができないので、masterへ切り替えます。

■参照するブランチを切り替え(再掲)

git checkout master

master切り替えたよと返ってきたら、準備OKです。
変更されたか心配であれば、参照しているブランチを確認してみましょう。
masterになっていれば大丈夫です。

Switched to branch 'master'

作業ブランチを削除しましょう!

■ブランチを削除

git branch -D feature-#1

削除したよと返ってきたら完了です。
参照ブランチを確認するとmasterのみになっているはずです!

Deleted branch feature-#1 (was 番号)

リモートリポジトリからプル

少し前に書いた通り、ローカルリポジトリのmasterは修正前の状態です。
リモートリポジトリ(GitHub)からデータをとってきて更新しましょう。プルの操作をします。

■プル(リモートリポジトリ→ローカルリポジトリ)(再掲)

git pull origin master

「あれ?これ冒頭にした?」と思った方、仰る通りです!

冒頭でプルした操作は正直やらなくてOKです。
ただ、今の後かたづけのときにプルをし忘れると、次回は修正前の状態で作業ブランチをつくることになります。
万が一修正ファイルが同じだと、今回修正した内容が消えてしまいます(先祖返り)・・・。

せっかく作業したのにもったいないですよね?
操作がなれてくるとプルし忘れそうなので、念には念を入れて最初と最後にプルするようにしています。

ローカルリポジトリの更新が完了したら、後かたづけ完了です!

さいごに

作業お疲れさまでした!

はじめてやるときは「長い、、、」と感じるかもしれないです。
ただ各操作は難しくないので、まずは流れを掴んで慣れていきましょう。

Issueは事前に登録しておいたり、確認コマンドのgit statusやgit branchを少なくしたりと
やりやすい方法に変えていっていただければと思います。

本記事で使用したgitコマンド一覧

作業フォルダ(ディレクトリ)へ移動

cd ~/Documents/capybara-notebook_com

プル(リモートリポジトリ→ローカルリポジトリ)

git pull origin master

参照しているブランチを確認

git branch

ブランチ作成

git branch feature-#1

参照するブランチを切り替え

git checkout feature-#1

リポジトリ状態チェック

git status

すべての変更ファイルをインデックスへ追加

git add .

コミットする

git commit -m "#1 modified CSS"

作業ブランチの変更内容をリモートリポジトリへプッシュ

git push origin feature-#1

ブランチを削除

git branch -D feature-#1

-TECH
-, ,