はじめてのGit & GitHubハンズオン #5
アジアクエスト株式会社 デジタルインテグレーション部
五十嵐 翔吾
1
今日の予定
2
19:15～19:20 オープニング、進め方の説明�19:20～19:50 座学 バージョン管理の概要� Git概要� GitHub概要� 実際の運用について�19:50～20:20 ハンズオン�20:20～20:30 アンケート回答や雑談など予備時間�20:30 完全閉場
本日のハンズオンの概要
GitやGitHubに慣れていない方を対象とし、それぞれの概要を理解し
チーム開発が行える様になることを目指します。
3
Git
GitHub
本日の進め方
4
座学
ハンズオン
また質問用にSlackのワークスペースを用意しています。�上記のリンクを押下することでワークスペースに参加することが可能です。�ご不明点がございましたら #質問 チャンネルでご質問ください。
19:20～19:50
19:50～20:20
バージョン管理の概要
5
バージョン管理システムとは
ファイルをいつ、誰が、どのように変更したのかをバージョンとして記録するシステムです。VCS（Version Control System）と略されます。
6
集中型
分散型
主なバージョン管理システム
バージョン管理システムの特徴
■バージョニング� （履歴機能）
■ブランチング� （履歴を分岐して記録）
7
ver1
ver2
ver3
ver4
新規作成
A機能追加
バグFIX
B機能追加
ver3’
ver1
ver2
ver3
ver4
master / main
ver4’
ver5
ver6
機能追加
ver3’’
バグ修正
ver7
バージョン管理システムの変遷
8
集中型
分散型
ローカル・バージョン管理
Git概要
9
Gitとは
Gitは分散型のバージョンコントロールシステム（VCS）です。
2005年にLinuxのカーネルのバージョンを管理するために開発されました。�元々Linuxのカーネル開発には別のVCSが使われておりましたが、有料化に伴いGitが開発されることとなりました。
Linuxのカーネルを扱うために開発されたので、大容量のファイルを高速に処理できるという特徴があります。
10
Gitの特徴
・分散されたリポジトリ
・他のVCSより処理が早い
・ステージングエリアが存在する��詳細は次ページ以降で説明します
11
Git(VCS)で使用する用語
・リポジトリ� ファイルや変更履歴を保存する領域� （１つのディレクトリ）��・ローカルリポジトリ� 利用者の手元のPCに� 作成・複製されたリポジトリ
・リモートリポジトリ� ネットワーク上のサーバーで� 運用されるリポジトリ
・コミット� 保存された変更（履歴）��・ブランチ� 開発における経路の一つ��・メインブランチ� ブランチの中で、安定した� バージョンのブランチ
・チェックアウト� ブランチを切り替えること
・マージ� ブランチを統合すること��・コンフリクト� ブランチをマージする際に� 変更が競合すること
12
リポジトリについて
・ローカルリポジトリ� 利用者の手元のPCに� 作成・複製されたリポジトリ
・リモートリポジトリ� ネットワーク上のサーバーで� 運用されるリポジトリ
リポジトリとはファイルやディレクトリを保存する領域を指します。�リポジトリはローカルリポジトリとリモートリポジトリの２種類に分けられます。�このようにリポジトリを分散して持つことで障害に対して強いという特徴があります。
13
ローカルリポジトリ
リモートリポジトリ
AさんのPC
ローカルリポジトリ
BさんのPC
※複数人と共有
ローカルもリモートも
全て同一の内容を持っている
ブランチについて
ブランチは開発における経路の一つです。�ブランチには安定したバージョンのメインブランチとそれ以外のサブブランチが存在します。�メインブランチには通常、mainもしくはmasterブランチという名称をつけます。�本ハンズオンではmasterという名称で進めます。
14
ver3’
ver2
ver3
ver4
メインブランチ
ver4’
ver5
ver6
サブブランチ
ver1
ブランチは最終的に元のブランチに統合します
ブランチを統合する作業をマージと呼びます
ブランチを切り替えることをブランチをチェックアウトするといいます
コミットについて
コミットは変更を履歴に残したものを指します。�コミットにはファイルの追加/更新の情報、日時、コミットメッセージ、作業者などが記載されています。�
15
ver4’
ver2
ver3
ver4
メインブランチ
ver5’
ver5
ver6
サブブランチ
ver1
・hoge/memo1.txt 新規追加
・hoge/memo2.txt 新規追加� 2022/12/1 19:15:00
コミットメッセージ
コミット
管理対象ファイル
・hoge/memo1.txt
・hoge/memo2.txt
・hoge/images/img1.jpg
・hoge/images/img2.jpg
・hoge/images/img1.jpg 新規追加
・hoge/images/img2.jpg 新規追加� 2022/12/3 20:10:00
コミットメッセージ
コミット
コミットの流れについて
Gitには履歴、ステージングエリア、作業エリアの3種類が存在します。�ステージングエリアが存在することで、任意の変更をコミットすることが可能になります。�
16
履歴
ステージングエリア
(インデックス)
作業エリア
ver2
ver3
ver4
ver1
ver5
差分を比較
差分を比較
コミットしたいファイルや
ファイルの一部分を指定してステージングに追加
ステージングの内容を
コミット
コンフリクトについて
コンフリクトはマージを行う際にファイルの変更の競合によって発生します。�マージの際はGitが自動でマージを行いますが、Gitが判断できない場合はコンフリクトが発生します。��
17
ver4’
ver2
ver3
ver4
メインブランチ
ver5
ver6
サブブランチA
ver1
・hoge/memo1.txt 1行目を編集
例）タイトル
コミット
ver4’’
サブブランチB
・hoge/memo1.txt 1行目を編集
例）title
コミット
一連の流れについて
これまでの流れを図にまとめると以下のような形になります。�ローカルの変更をリモートに反映することをpush、リモートの変更をローカルに反映することをpullといいます。
18
ローカルリポジトリ
リモートリポジトリ
AさんのPC
ローカルリポジトリ
BさんのPC
push
リポジトリの中には
ブランチの情報が含まれています
push
pull
masterブランチ（メインブランチ）
hogeブランチ（サブブランチ）
hugaブランチ（サブブランチ）
pull
ブランチの中にはコミット情報が
含まれています
ステージングエリアの内容を履歴に反映したものがコミットです
作業ブランチの切り替えをcheckout
ブランチ同士の統合をmergeと呼ぶ
add
comimt
GitHub概要
19
GitHubの概要
GitHubはGitを利用した開発プラットフォームです。�主な利点は以下の3点です。��・リモートリポジトリとしての利用�・チーム開発に役立つ機能が豊富で、差分の比較やマージを画面上で行える� → プルリクエスト�・リポジトリを公開することができる
20
プルリクエスト
GitHub上で差分をGUIで確認しながら�マージ作業を行うことが可能です。
21
リポジトリを公開することができる
laravelで検索すると44万リポジトリ存在
他者が作成したソースコードを利用可能
Star(いいねのようなもの)の数によって�信頼性などを判断可能
22
Gitを利用したサービス
23
実際の運用について
24
実際のブランチ運用について
実際の運用は以下のようにmasterからdevelopを作成し、developから作業用ブランチを作成します。�機能の開発がひと段落したタイミングで作業用ブランチ→develop→masterの順でマージを行い、リリースを行います。
25
ver1
master
ver2
ver3
develop
ver1
ver2
機能Aの開発
ver2
機能Bの開発
ver3
ver4
ver3
ver
4
ver5
ver6
ver8
ver
7
ver2
ver3
ver4
ver5
ver6
ver8
ver
7
実際のマージの流れについて
実際の開発ではGitHubのようにGUI上で差分を確認できるツールを使う場合が多いです。�個人が勝手にマージを行うとバグが出やすいため、必ずレビュワーがレビューをしてからマージを行います。
26
ローカルリポジトリ
リモートリポジトリ
AさんのPC
merge�&push
ローカルリポジトリ
リモートリポジトリ
AさんのPC
push&
プルリクエスト
バグが起こり
やすい
レビュワー
レビュー
マージ
バグが起こり
にくい
Git-flowとGitHub Flowについて
Gitのワークフローの一つ。
→チームでGitを利用するときのルールのようなもの�
27
【図解】Git-flow、GitHub Flowを開発現場で使い始めるためにこれだけは覚えておこう
https://atmarkit.itmedia.co.jp/ait/articles/1708/01/news015.html
ハンズオン
28
ハンズオンの進め方
以降、Gitコマンドの実行はコマンドライン上で行い、GitHubの操作はgithub.comで行います。�GitHubへのログインやコマンドラインツール（windowsはgit bash macはterminalなど）の起動をお願いします。
GitやGitHubの準備がまだの人は以下の資料を参考に設定を進めてください。
また、ハンズオンではグレー枠内に実行してほしいコマンドが記載されています。�グレー枠内のコマンドをコピーして実行して下さい。
29
// ディレクトリの作成
$ mkdir git_handson
ハンズオンへの質問大歓迎です！slackでお待ちしております。
ハンズオンで触れる主なGitコマンド
・init�・clone�・add�・status�・diff�・commit�・branch�・checkout�・log�・push����������
gitの初期化、実行したディレクトリ配下をgitのリポジトリにする�リモートのリポジトリを参照し、ローカルリポジトリを作成する�ステージングへファイルを追加�現在のgitのステータスを確認、ステージングや作業エリアの差分一覧を表示�ステージングや作業エリアの差分をファイルの中身の比較など詳細に表示�ステージングエリアの内容を履歴に追加�ブランチの作成や一覧の表示などブランチの対する操作を行う�ブランチの切り替えを行う�履歴の一覧を表示する�ローカルの変更をリモートに対して反映する
30
※コマンドの一覧は日本語版リファレンスを参照
ハンズオンの目次
・ローカルにリポジトリを作成する�・新規ファイルの作成～コミットを行う�・GitHub上にリポジトリを作成しpushを行う�・新規でブランチを作成してGitHub上でPRを出してみる�・GitHub上でPRをマージする�・git cloneを利用してみる
31
ローカルにリポジトリを作成する
ディレクトリを作成し、作成したディレクトリ配下でコマンドを実行しましょう。�そのディレクトリ配下がgitの管理対象となります。
32
// ディレクトリの作成
$ mkdir git_handson
// ディレクトリの移動
$ cd git_handson
// Gitで管理対象のリポジトリ作成
$ git init
作成したディレクトリ配下に.gitディレクトリが作成されます。�このディレクトリにはGitのconfigファイルなどが配置されており、このファイルが存在するディレクトリがGitの管理対象と認識されます。
またリポジトリの作成方法は2種類存在します。
・git initでリポジトリをローカルに作成しリモートにpushする方法
・リモートに存在するリポジトリをcloneでローカルにコピーする方法
ハンズオンの目次
・ローカルにリポジトリを作成する�・新規ファイルの作成～コミット～ログの確認を行う�・GitHub上にリポジトリを作成しpushを行う�・新規でブランチを作成してGitHub上でPRを出してみる�・GitHub上でPRをマージする�・git cloneを利用してみる
33
Gitの状態を確認する
コマンドを実行し、Gitの状態を確認してみましょう
ファイル追加前
ファイル追加後
34
// gitの状態の確認
$ git status
// ファイルの作成
$ echo "# test" >> README.md
// 再度gitの状態の確認
$ git status
Git管理されていないファイルがUntracked filesとして表示されます。
ファイルをコミットする
コマンドを実行し、ファイルをコミットしてみましょう
ステージングエリアへの追加後
コミット後
コミット後のメッセージ
35
// ステージングエリアへの追加
$ git add README.md
// gitの状態の確認
$ git status
// ファイルのコミット
$ git commit -m "first commit"
// 再度gitの状態の確認
$ git status
commitするとステージングと履歴
との差分がなくなります。
コミットログを確認する
コマンドを実行し、コミットログを確認してみましょう
コミットログの内容
36
// コミットログの確認
$ git log
commitの後に続く文字列は一意なコミットのIDです。
Authorにはコミットしたユーザー名とメールアドレスが記載されています。
Dateにはコミットした日時が記載されています。
その下にはコミットメッセージが記載されています。
ハンズオンの目次
・ローカルにリポジトリを作成する�・新規ファイルの作成～コミット～ログの確認を行う�・GitHub上にリポジトリを作成しpushを行う�・新規でブランチを作成してGitHub上でPRを出してみる�・GitHub上でPRをマージする�・git cloneを利用してみる
37
GitHub上でリポジトリを作成する
GitHubにアクセスし、Create repositoryボタンを押してリポジトリを作成しましょう。�リポジトリ名はtest、公開範囲はPrivateでCreate repositoryを押下してください。
38
GitHub上でリポジトリを作成する
39
リポジトリが表示されれば成功です。
ちなみに今回はプライベートの設定でリポジトリを作成しました。
公開設定には2種類が存在します
・プライベートリポジトリ
・パブリックリポジトリ
パブリックリポジトリは世界中のすべてのユーザーに公開されてしまいます。
基本的に業務で作成する場合や個人でも公開を想定していない場合などは、情報漏洩が起きないようにプライベートにしましょう。
OSS等の世界中のユーザーが利用することを想定しているプロジェクトなどはパブリックで作成されています。
リモートリポジトリを設定する
以下のコマンドを実行しリモートリポジトリを設定しましょう。
40
// リモートリポジトリの設定
$ git remote add origin 先ほど作成したリポジトリのURL
// リモートリポジトリの確認
$ git remote -v
ブランチをPushする
以下のコマンドを実行しブランチをPushしましょう。
README.mdが反映されていたら完了です。
41
// 現在のブランチの確認
$ git branch
// pushするリモートの確認
$ git remote -v
// ブランチのPush
$ git push origin master
エラーが出た場合
以下のコマンドを実行しブランチをPushしましょう。
42
「Personal access tokens」へアクセス
→ 右上の「Generate new token」をクリックし「Generate new token（classic）」を選択し、Select scopesで「repo」にチェックをつけてアクセストークンを作成する。
トークンをコピーし、パスワードに使用してください。
参照：https://style.potepan.com/articles/34189.html#GitHubAccess_token
ハンズオンの目次
・ローカルにリポジトリを作成する�・新規ファイルの作成～コミット～ログの確認を行う�・GitHub上にリポジトリを作成しpushを行う�・新規でブランチを作成してGitHub上でPRを出してみる�・GitHub上でPRをマージする�・git cloneを利用してみる
43
ブランチを作成し、切り替える
以下のコマンドを実行してブランチの作成と切り替えを行いましょう。
44
// ブランチの作成
$ git branch test1
$ git branch
// ブランチの切り替え
$ git checkout test1
$ git branch
git checkout -b test1 を実行すると、test1ブランチの作成とtest1
ブランチのチェックアウトを同時に行うこともできます。
�今回はmasterからブランチを作成したので、masterへのコミット内容がtest1にも反映されています。
git logコマンドでコミット内容を確認することができます。
ver1’
メインブランチ
（master）
サブブランチ
（test1）
ver1
ファイルを修正しコミット～プッシュまで行う
既存のファイルを書き換えてコミット～プッシュまで行ってみましょう。
45
// ファイルを編集します
// vimがわからない場合はテキストエディタなどで編集してください
// 「test」を「はじめてのGit & GitHubハンズオン」に変えてみましょう
$ vim README.md
$ コミットまでの流れは前までのページに載っています
探して実行してみてください
// プッシュは以下のコマンドで実行します
$ git push origin test1
方法がわからない場合は
「ファイルをコミットする」
のページを見てみてください
GitHub上でPR(プルリクエスト)を出してみる
46
GitHubにアクセスし�PRを作成してください��Pull requestsタブの
New pull requestからでも
PRの作成が可能です。
ハンズオンの目次
・ローカルにリポジトリを作成する�・新規ファイルの作成～コミット～ログの確認を行う�・GitHub上にリポジトリを作成しpushを行う�・新規でブランチを作成してGitHub上でPRを出してみる�・GitHub上でPRをマージする�・git cloneを利用してみる
47
GitHub上でPRをマージしてみる
Pull requestsタブから、README.mdの修正というコミットを表示し、Merge pull request、�Confirm mergeの順に進めてもらえればマージ完了です。
48
マージした内容をローカルにも反映させる
現時点ではリモートリポジトリに変更を反映させただけです。
git pullを実行し、リモートリポジトリの内容をローカルリポジトリに反映します。
49
// masterブランチにチェックアウト
$ git checkout master
// この時点ではmasterブランチに反映されていない�$ git log master
$ cat README.md
// git pullを実行
$ git pull origin master
ハンズオンの目次
・ローカルにリポジトリを作成する�・新規ファイルの作成～コミット～ログの確認を行う�・GitHub上にリポジトリを作成しpushを行う�・新規でブランチを作成してGitHub上でPRを出してみる�・GitHub上でPRをマージする�・git cloneを利用してみる
50
git cloneを実行してみる
git cloneとは、既存のリポジトリを複製（コピー）することです。
下記リポジトリをcloneしてみましょう。
51
git clone リポジトリのURL
git cloneを実行してみる
以下のコマンドを実行してリポジトリをcloneしてみましょう。
52
// 適当なディレクトリを作成
$ cd ../
$ mkdir git_handson_clone
$ cd git_handson_clone
// git cloneを行いリポジトリをcloneする
$ git clone https://github.com/shogo-igarashi/git-clone-practice.git
// ディレクトリを確認し移動する
$ ls -al
$ cd git-clone-practice
// cloneできているか確認する
// 正常にcloneできていればgit statusが使用できるはず
$ git status
// ディレクトリの中を確認
$ ls -al
// ファイルをブラウザで展開
// Mac OS
$ open index.html
// Windows
$ start index.html
これでハンズオン内容は終了です
お疲れさまでした。
Gitは奥が深く、本ハンズオンで紹介したコマンドは一部に過ぎません。
今後も実際に手を動かしながら、Gitを使いこなせるようにしましょう！
�他のコマンドについてはリファレンスを参照してみてください。
53
アンケートにご協力ください
よろしければアンケートにご回答ください。�アンケートの結果などがよいと次回の開催の励みになります。
また本資料の内容に間違いなどあれば、connpass等でぜひメッセージをください。�今後の参考になります。よろしくお願いいたします。
54
宣伝
アジアクエストはconnpassイベントをやってます！
55
END
56