VSCodeから始まるWebデザイナー、Webエンジニア生活
■第８話：VSCodeでのGitの使い方（初学者用）
（最終更新日：2024.3.30）
(絵が小さい場合はスマホを横に）
「Gitが分からない！」
エンジニアの人は使えと言うが、実はGitって分からない。
そんなプログラミング初学者の声も少なくなかった。まずは基本中の基本の使い方を説明したいと思う。
まずは、今回紹介する内容を覚えれば大丈夫。取っ掛かりさえ出来てしまえば、案外簡単に使えてしまうものだ。
恐れずトライしてみよう。
１. Gitを使う目的
まずは、Gitを使う目的をおさえよう。 Gitを使う1番の目的は「コードの変更履歴を残す」ことである。 「いつ」「誰が」「どんな変更をしたか」を記録しないと、時間が経ったあとで下記のことができなくなる。
- 「変更箇所」と「変更理由」を確認すること
- 「変更は必要なかった」と判断し、前のバージョンに戻すこと
ファイル名にバージョンを付けて管理できるのではと思う人もいると思うが、 ソースコードのように変更が頻発するものは、ファイルが多くなりすぎて無理がある。 また、コード内に毎回毎回変更履歴をコメントで残すのも手間である。コードも見にくくなる。 そんな不満を解消し、便利にソースコードを管理できるツールとしてGitは多くの人に使われている。
２. Gitとその設定、拡張機能（GitGraph, GitLens）のインストール
Gitを使うには、まずはOSにGitをインストールしよう。
Windowsの場合はこちらからダウンロードしてインストールしよう。
Macの場合はターミナルで「brew install git」コマンドを入力すれば、インストールできる。
次にユーザー名とメールアドレスを設定する。
ターミナルで「git config --global user.name "ユーザー名"」
「git config --global user.email "メールアドレス"」とコマンド入力して、ユーザー名とメールアドレスを設定する。
これでGit本体の設定はOKだ。
最後にVSCodeでGit管理に必要な拡張機能をインストールする。
まずは「Git Graph」と「GitLens」をインストールしよう。
拡張機能の検索で調べれば、簡単にインストールできる。
拡張機能（Git GraphとGitLensのインストール）
拡張機能であるGit GraphとGitLensの使い方を簡単に紹介する。Git Graphは、①左端のActivity barにあるGitアイコンをクリックして、 ②ソース管理の上部にあるGit Graphボタンを押すことで実行できる。自分が行った変更を一覧で確認できる（下図右側）。
Git Graphの使い方、一覧表示
更に③の変更項目（コミット）をクリックすると（上図右）、変更の詳細画面が表示され、④ファイル名をクリックすると変更前後で変更箇所を確認できる（下図）。
変更前後のコードを表示
一方、GitLensは、下図の①TerminalウィンドウのGitLensタブをクリックすることで変更履歴を一覧することができる。 この一覧では、コミット履歴を見られるだけでなく、1日に何回コミットがあったかをWindow上部の折れ線グラフで確認できる。 また②のコミットをクリックし、③ファイル名をクリックすると、Git Graphと同様、変更箇所を確認することができる。 ④の変更行にマウスを合わせると、最後に誰がその行を変更したかを確認することができる。
GitLensの使い方
３. リポジトリの初期化と.gitignoreの設定
Gitを使うには、まずリポジトリを初期化しよう。 一番左のソース管理アイコンをクリックし、「リポジトリを初期化する」ボタンを押そう（下記参照）。 これで、今開いているフォルダ内のソースコード管理が初期化されたことになる。ここからGitで変更履歴を記録していく。
次にgitignoreを設定しよう。gitignoreとは、文字通りgitで管理しないファイルを指定するものである。
VSCodeでは、ソース管理でリポジトリを初期化した際に、作業用ディレクトリの中に.gitignoreファイルが作成される。
そのファイルに、下記の内容を書き込めば（下記のようなコメント（/* */) があると反映されないので、実際書くときは削除する）、
変更を無視するファイルを指定できる。node_modulesなどの設定ファイル、写真ファイル等の各種データやexeファイルなどは管理する必要はないだろう。
これでGitを使う準備は万端だ。
リポジトリの初期化（左）とgitignoreの設定（右）
４. ステージ、コミット、プッシュ
準備ができたら、Gitの基本操作である「ステージ」→「コミット」→「プッシュ」を順番に行おう。 ステージは変更したファイルの中からコミット（履歴を記録）するものを選ぶ操作だ。 変更の右側にある「＋」ボタンを押せば、変更したファイル全てをステージに乗せることができる。 ステージに乗せたら、どんな変更をしたかコメント（下図では「最初のコミット」というコメント）を残して、上にある「チェック」ボタンを押す。 これで、自分のPCにコミット（変更履歴を記録）することができるはずだ。
ステージ（左）とコミット（右）の方法
もし間違えてコミットしてしまっても大丈夫だ。 右上の「・・・」ボタンをクリックすると、コミットの項目の中に「前回のコミットを元に戻す（取り消す）」操作ができる。 目的のものを正しくコミットできたら、「変更の同期」ボタンを押そう。 GithubやBitbucketといった、メンバーでGitを共有するサーバーに変更をプッシュすることができる。 Githubへの登録方法は次に説明する。
コミットの取り消し（左）とプッシュ（右）の方法
自分のGithubアカウントへプッシュする方法が分からないという方がいるかもしれない。 その方法としては、Github Desktopを使うのが簡単だ。Github Desktopは各自でインストールしてほしい。 ダウンロード先は「こちら」である。 Github Desktopをインストールして、アプリを起動したら、まずは自分のアカウントでサインインする。 その後のGithub Desktopの最初の画面で、 今回共有したいソースコードとGitリポジトリの入っているフォルダを選べば、プッシュ元とプッシュ先を指定したことになる。 次から先ほど説明した「変更の同期」ボタンを押すだけで、そのアカウントへのプッシュが可能になる。 プッシュした結果やコードの変更内容はGithub Desktop上でも確認することができる。
Github Desktopでのプッシュ先の指定（左）とプッシュ結果（変更）の確認（右）
５. 部分的にコミット、取り消し（Hunkの使い方）
前項で間違えてコミットした場合の取り消し方法を説明したが、 コミットする前であれば部分的に変更を取り消したり、ステージすることもできる。それがHunk（変更箇所）の指定だ。 VSCodeでGitの変更箇所を確認すると、+と書かれて薄くマーキングされている部分がある。ここがHunk（変更箇所）にあたる。 マウスを合わせて右クリックをすると「選択した範囲をステージする」「選択した範囲のステージを解除」「選択範囲を元に戻す」という命令が現れる。 ここで元に戻すを選べば、変更を部分的に取消でき、選択した範囲をステージするを選べば、部分的にステージ、コミットすることができる。 変更が進んだ後で「ここだけ変更を取り消したい」という場合に便利である。ぜひ使ってみよう。
コミットの取り消し（左）とプッシュ（右）の方法
６. 1人情シスでブランチを切る場合（少人数で開発する場合）
例えば、1人情シスでブランチを切る場合を説明する。 普段使用しているソースコードでは、大きく分けて２種類の変更が存在する。
- 日常的に行っているメンテナンスとしての変更
- 仕様変更に伴う、大規模な変更
同じソースコードでも、これら２つは分けたい。
なぜなら、２の大規模な変更の途中段階で本番と同じソースに挙げてしまうと、現在運用しているシステムが狂ってしまうからだ。
しかしながら、通常のサイトのメンテナンスとして１も行わなくてはならない。
そこで、開発用はdevelopのブランチを切り、通常のメンテナンス（masterもしくはmain）と分けて記録、保存する。
具体的には以下の図のように保存される。
そして、動作確認等すべてが終わった段階でdevelopとmasterを結合（Merge）する。
ちなみに、複数人で開発を行う場合でも、そこまでやることは変わらない。
上記と同様にまずはmasterからdevelopで分岐させた後、developからさらに各人それぞれ異なるfeatureブランチを作成して開発を行う。
そして、コードをメンバーに確認してもらい、featureブランチをdevelopブランチにマージする。
そして、今回行う開発、実装が全て完了したらdevelopブランチをmasterブランチにマージする。
もう一つ分岐が増えるイメージで良い。
Git Graphによる変更履歴の表示。master（メンテナンス）とdevelop（仕様変更）で分ける
７. まとめ、今後のGitの活用
今回はごく基本的なVSCodeにおけるGitの使い方を説明した。
開発に携わるようになれば、今回説明しなかったcherry-pickやrevert、rebaseなども必要に迫られて使うようになるだろう。
しかし、まずはここで出てきたことをしっかり身に着けよう。＋αの使い方は現場で覚えられるので心配しなくても大丈夫だ。
最初にブランチを切っていれば、ブランチ側の変更を無かったことにすることもできるので、元のコードを壊す心配もない。
今回説明しなかった「プルリクエスト」は、開発者がコードを作成した後に、mergeするかを責任者が確認する作業である。
pushまで出来ていれば、Gitの作業自体はmergeするか、もう一回手直しするかだけなので、特に難しいことはない。
はじめは、覚えることが大変と思うかもしれないが、日常的に使っていれば自然と覚えてしまうものだ。
恐れず、トライしてみよう。
▼参考図書、サイト
「わかばちゃんと学ぶ Git使い方入門」 湊川 あい シーアンドアール研究所
「Software Design 2021年6月号 -VS CodeのGit操作もっと楽に」 技術評論社
VSCodeでgitを操作する(init, add, reset, commit)
日々報道
VSCodeでのGitの基本操作まとめ
Qiita
git push の取り消し方法
www CREATORS