【Git基礎】インストールから使い方まで

この記事では、初心者の方が「Git（ギット）」の概要から、チーム体制で使えるようになるまでを分かりやすく解説しています。

Gitとは？

Gitとは、ファイルの変更履歴を記録できるバージョン管理システムです。

HTMLのほか、様々なプログラムコードの編集や変更履歴を管理するシステムとして、また、チーム体制による複数人による開発のためのシステムとして広く使われています。

例えば、あなたが以下のような流れで作業をしたとします。

初日	HTMLファイルを作成
2日目	半分程度HTMLコーディング
3日目	HTMLコーディングを完了

しかし、4日目にあなたは大きなバグがあることに気づきました。

修正するには、かなり時間がかかる。

2日目の状態に戻して、そこから修正した方が早い。

こんなことって、ありますよね？

Gitはバージョン管理システムなので、変更履歴を管理することができます。

つまり、Gitを使っていれば、カンタンに2日目の状態にHTMLファイルを戻すことができるのです。

Gitのメリットって？

複数人の修正・変更をまとめることができる

チームで制作、開発をするときは、同じファイルに複数人が手を加えることもあります。

例えば、同じHTMLファイルに対し、以下のような変更を同時に行ったとします。

• Aさんがお知らせを追加した
• Bさんがバナーを追加した
• Cさんがフッターの構成を変えた

Gitが無い場合、ひとりひとりのファイル変更箇所を確認し、手動で変更を反映しなければなりません。

ところがgitなら、それぞれの作業者が変更したソースコードをひとつにまとめてくれるのです。

変更したときにコメントを残すことができる

Gitを使ってバージョン変更を保存するとき、コメントを残すことができます。

コメントを残すと

• どういう意図でHTMLに変更を加えたのか
• どういうところを変更したのか

など、後任者にとって参考になる情報を残せます。

Gitをはじめよう！

アカウントを作ろう

Githubアカウントの作り方

1. まず、Githubの公式サイトにアクセスします。
2. 画面右側にあるフォームにあるUsername、Email、Passwordを入力します。

   

   Sign up for GitHubをクリックします。

3. 実在の人物であることを証明するための簡単な質問に答えて「Next: Select a plan」をクリックします。

   

4. 左側のFreeと書かれた無料プランを選択して「Choose Free」をクリックします。

   

5. 任意の質問に回答して「Submit」を押すか、「skip this step」をクリックすると、アカウントが作成されます。

   

6. 登録時に入力したメールアドレス宛にメールが届いているので、メール内にある「Verify email addrress」をクリックすると、アカウント登録完了です。

Bitbucketアカウントの作り方 

1. bitbucketのアカウント作成ページにアクセスします。
   ※Githubアカウントを作った人は、飛ばしてOKです。

   

2. Eメールを入力して「Continue」をクリックすると、登録したメールアドレスにメールが届いているので、「Verify my email address」をクリックします。
3. リンク先のページでユーザー名を入力して「続行」をクリックします。
4. アカウント登録完了です。

リポジトリを作ろう

リポジトリとは、ひとことでいうなら過去の状態を記録できる貯蔵庫です。

例えば、

• A：10/1 バナーデザイン修正
• B：10/5 バナー追加
• C：10/7 バナーカラー変更

という履歴があって「やっぱり前のバナーの方が良かったな～」となった時に、リポジトリからBの状態を引っ張ってくることができるのです。

Githubのリポジトリの作り方

1. GitHubにログインし、ページの右上にある「＋」の隣にあるドロップダウンメニューから「New repository」を選択します。

   

2. リポジトリに好きな名前を付けます。（Repository name）また、必要であればリポジトリの説明を追加（Description）します。

   

3. リポジトリの公開・非公開の設定をします。
   Privateに設定すると、外部からソースコードを閲覧することができなくなります。
   公開する必要がなければ、Privateで良いでしょう。

   

4. Add a README fileにチェックを入れます。

   

5. 「Create repository」ボタンを押すとリポジトリの作成完了です。

Bitbucketのリポジトリの作り方

1. Bitbucketにログインし、左サイドにあるメニューから「＋」を押し、「リポジトリ」を選択します。

   

2. リポジトリ名にお好きな名前を入力して、「リポジトリの作成」をクリックします。

   

   ※リポジトリを非公開（Private）にしたい場合は、「これは非公開リポジトリです」にチェックを入れてリポジトリの作成完了です。

ローカルリポジトリを作ろう

ローカルにリポジトリを作成する方法は色々あります。

Githubやbitbucketに作ったリモートリポジトリをコピーしてしまうのがやりやすいでしょう。

クローンというコマンドを使うことで、リポジトリをローカルにコピーできます。

 

画像引用元：https://i2.wp.com/confrage.jp/wp-content/uploads/2015/12/2015-12-18_150901-10.png

Visual Studio codeでクローンしてみよう（git clone）！

Visual Studio code（VS Code）は多くのプログラム言語に対応したソースコードエディタです。

Gitを勉強しているあなたは、おそらくすでに何らかのテキストエディタをお使いかと思いますが、ここではVS Codeでのクローン方法をお教えします。

Gitをインストール

VS Code単体ではGitが使えないので、まずはあなたのPCにGitをインストールしましょう。

プロゲートのGit環境構築記事が参考になります。

VS Codeをインストール

ダウンロードページにて、VS Codeインストーラーをダウンロードしましょう。

VS Codeをインストール済みの方は、不要です。

ただ、Gitをインストールした時にVS Codeを開いていた場合、VS Codeを再起動しておきましょう。

でないと、VS Codeでgitを認識してくれません。

さぁ、git cloneだ

GithubのWebサイトにて、作ったリポジトリのURLを取得します。

Githubにログインして、あなたが作ったリポジトリをクリックしましょう。

リポジトリ画面に移動したら、緑色のボタン（Clone or download）をクリックします。

すると、あなたが作成したリポジトリのURLが表示されるのでコピーします。

以下の赤い四角で囲われているボタンを押すと、コピーした状態になります。

次にVS Codeを開いて、キーボードの「F1」を押します。

Git: クローンをクリックしましょう。

すると、リポジトリのURLを求められるのでペーストしてEnterを押します。

するとフォルダの選択を求められます。

ここで選択したフォルダにリポジトリが作られるので、あなたが保存したいフォルダを選びましょう。

（以下は、デスクトップにあるwebというフォルダを選択した時の例です）

「リポジトリの場所を選択」を押すと、ユーザー名とパスワード入力を求められます。

Githubに登録したアカウントのユーザー名・パスワードを入力しましょう。

これでGithubに作成したリポジトリが、あなたのPCにクローン（コピー）されました。

VS Code右下に以下のようなダイアログが出るので、「ワークスペースに追加」をクリックしておくと良いでしょう。

ワークスペースに追加しておくと、VS Codeでワークスペースにあるファイルをすぐに開けるようになります。

※間違えてダイアログを閉じても、後で追加することもできるので気にせずで大丈夫です。

SourceTreeでクローン！

SourceTreeとは、グラフィカルな画面でgitを直感的に操作できるソフトです。

どうしてもコマンド操作がやりたくない、わからないという人はSourceTreeを使ってみると良いでしょう。

SourceTreeのインストールや使い方は、以下が参考になります。

▼Gitクライアント! SourceTree の使い方 ～GUIでGitを使おう～▼
https://tracpath.com/bootcamp/learning_git_sourcetree.html

▼Gitなんて怖くない！超初心者向け、SourceTreeの使い方はじめの一歩！▼
https://prog-8.com/blogs/how_to_use_sourcetree

変更を記録しよう（git commit）

変更を記録するための流れは、以下の通りです。

1. 作業してファイルを保存する
2. ステージする
3. コミットする

ファイルを追加する

先ほどクローンしてきたフォルダの中にファイルを追加してみましょう。

まずは、VS Codeのサイドバーから「エクスプローラー」をクリックします。

リポジトリ名の所にマウスカーソルを合わせて右クリックを押します。

その中にある「新しいファイル」をクリックしましょう。

ファイル名入力が求められるので、入力しましょう。

ここでは、text.txtというファイル名にしました。

すると、ファイル名が緑色になります。

これは、VS Codeが「Git管理下にファイルが新規追加されているぜ！」と知らせてくれているのです。

ステージする

変更したファイルをステージしましょう。

サイドバーの「ソース管理」をクリックします。

更新ファイルの一覧が表示されます。

「▼変更」と書いてある右側の「＋」をクリックすると、ステージできます（「−」をクリックすると取り消すことができます）。

ステージする前に変更したファイルの保存を忘れないようにしましょう。

コミットできるのはステージされたファイルが対象となるので、バージョンを作りたいファイルは必ずステージする必要がある、ということを覚えておきましょう。

コミットする

次にコミットです。

コミットをすることで、新しいバージョンが作られます。

メッセージ欄に「編集内容」や「編集した理由」などを入力して、Ctrl + Enterを押します。

これでコミット完了です！

変更内容をリモートリポジトリにも反映してみよう（git push）

ローカルリポジトリの変更内容をリモートリポジトリにアップロードして共有することをpush（プッシュ）と言います。

コミットした段階では、ソース管理プロバイダーは以下のように「1↑」と表示されている状態になっています。

サイドバーから「ソース管理」をクリックして、リポジトリ名の部分にカーソルを合わせます。

すると、以下画像のように「・・・」が表示されるので、クリックします。

クリックすると、様々な選択肢が表示されます。

「プッシュ」をクリックしましょう。

これでプッシュ完了です。

リモートリポジトリ（GithubのWebサイト）で見てみると、ローカルリポジトリでの変更が反映されているのが確認できます。

 

ブランチを作って作業してみよう

ブランチとは？

ブランチを作る

画面左下の「master」と書かれているところをクリックします。

（現在はmasterブランチが選択されているという意味です）

上部に表示されたウィンドウから、「新しい分岐の作成」をクリック。

任意のブランチ名を付けてEnterを押します。

これでmasterがコピーされたブランチが作成されました。

リモートリポジトリにも反映する

「master」と表記されていた部分が、入力したブランチ名に変わりましたよね。

今の段階だとローカルリポジトリにのみブランチが作成されている状態なので、以下の雲のマークをクリックしましょう。

これで、リモートリポジトリにもブランチが作成されます。

新しく作ったブランチでファイルを更新する

新しく作ったブランチで、何か変更を加えて保存、ステージしてコミット、プッシュしてみましょう。

ここでは、text.txtの内容を変更してプッシュしてみます。

ブランチを切り替える

ブランチを切り替えることをチェックアウトといいます。

用語が多くて大変ですが、チェックアウトという用語もよく出てくるので、覚えておくと良いでしょう。

チェックアウトしたい時は、同じように画面左下の、現在選択されているブランチ名をクリックします。

そうすると、ブランチの一覧がリストとして表示されるので、切り替えたいブランチを選択してクリックすれば、そのブランチの状態に切り替わります。

プル（git pull）してみよう

 

ダウンロードしたいブランチをチェックアウトしたら、ソース管理 → 「…」をクリックします（プッシュのときと同じです）。

クリックして表示されたプルダウンメニューの中から、「プル」をクリックしましょう。

これで、リモートリポジトリに保存されている最新バージョンを、ローカルリポジトリに反映することができます。

マージ（git merge）してみよう

マージとは？

 

例えば、AさんとBさんが共同で作業をしているとします。

Aさんがmasterブランチを、Bさんが途中のコミットから分岐したBブランチでそれぞれ開発を行っていたとします。

マージの方法

対象のブランチを選ぶ

どのブランチとどのブランチを合体させるのかを決めます。

今回はmasterにmatsuzaki_wataruをマージする例でお見せしていきます。

masterをチェックアウトしましょう。

コマンドパレットを開く

VS Codeの上部メニューから「表示」 ＞ 「コマンドパレット」をクリックするか、Ctrl+Shift+Pを押すと、コマンドパレットを開けます。

マージを選択する

コマンドパレットで「gitm」もしくは「m」と入力すると、「Git: ブランチをマージ…」というメニューが表示されるので、クリックします。

対象のリポジトリを選択後、マージしたいブランチ（ここではmatsuzaki_wataru）を選択します。

これでマージ完了です。

matsuzaki_wataruブランチでの編集内容がmasterにも反映されていることが、確認できるはずです。

マージした段階でコミットはされていますが、プッシュはされていません。

リモートリポジトリにも反映する際は、プッシュも忘れずにおこないましょう。

コンフリクトを解消しよう

コンフリクトとは？

コンフリクトが起こると、以下のようなエラーが表示されます。

コンフリクト解消のための作業

上記画面は、

• Aさんがdevelopブランチでtext.txtの文字を「愛してる」にした
• Bさんがmasterブランチでtext.txtの文字を「恋してる」にした

という条件下で、masterブランチをチェックアウトして、developブランチをマージした状態です。

現在の変更（masterの変更）部分が緑色に、入力側の変更（developの変更）が青色で表示されていますので、どちらを取り込むのか、あるいは全部を取り込むのか、選択して正しい状態にしましょう。

手動で編集することも可能です。

編集が終わったらファイルを保存してステージ、コミットすればコンフリクトが解消された状態でマージ・コミット完了です。

まとめ