アトリエフレームワークスにてGitHubについて説明したときの資料です。GitHubの有用性や基本的な機能について説明しています。

1. GitHubの使い方
~GitHub・SourceTreeの導入~

2. 事前準備
使用するツールの紹介
●GitHub
https://github.com/
●SourceTree
https://www.sourcetreeapp.com/

3. GitHubのアカウント登録
 前のページのＵＲＬからGitHubのサイトにアクセス．
右上の[Sign in]を押して,
名前・メールアドレス・パスワードを登録してください.
↓
 プランを選択してください．
↓
 登録したメールアドレスに認証のメールが届きます．
メールの内容に従ってユーザ認証を行ってください．

4. GitHubとは…
 GitとGitHubの違い
●Git : プログラムソースなどの変更履歴を管理する分散型のバージョン管理システム
●GitHub : Gitの仕組みを利用して、
世界中の人々が自分の作品(プログラムコードやデザインデータなど)を
保存、公開することができるようにしたウェブサービスの名称

5. Gitを用いるメリット
 Gitを用いることでファイルのバージョンを容易に管理することができる．
 以前のデータも残っているため編集前の状態に戻すことも可能．
バージョン管理しない
ABC.t
xt
ABC_Aを修正. txt ABC_Bを修正. txt ABC_最終版を修正. txt
Gitでバージョン管理
ABC.txt
ABC.txt
ABC.txt ABC.txt

6. GitHubを使う上での事前知識
 まずは用語について説明します．
 リポジトリ :ファイルやディレクトリの状態を保存する場所
ディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内の
ファイルなどの変更履歴を記録することができます．
 ローカルリポジトリ : 自身のマシン内にあるリポジトリ
 リモートリポジトリ : サーバーなどネットワーク上にあるリポジトリ

7. GitHubを使う上での事前知識
 リモートリポジトリにファイルを
置くことで，複数の人が利用可能になる
リモートリポジトリ
ネットワーク
データ
反映
データ
反映
データ
取得
データ
取得
ローカルリポジトリローカルリポジトリ ローカルリポジトリ
データ
取得
データ
反映
作業者A 作業者B 作業者C

8. Source Treeの役割
GitHubが便利なことはわかってもらえたと思います．
しかし GitHubを使うためには多くのコマンドを覚えないといけません！
そこで Source tree を用いることで
GitHubをGUIベースで便利に管理することができます！

9. Source Treeのインストール
 前記のURLからインストーラをダウンロードしてください．
↓
 インストーラの指示に従ってインストールを完了してください．

10. GitHubの主な機能
 ブランチ
 マージ
 フェッチ
 プル
 リポジトリの新規作成
 クローン
 コミット
 プッシュ
● リ ポ ジ トリ の 作 成
● フ ァ イ ルの ア ッ プ ロー ド
● フ ァ イ ルの 派 生
● フ ァ イ ルの ダ ウ ン ロー ド

11. リポジトリの新規作成
 GitHubにログインした状態で、
「New Repository」ボタンを押します．

12. リポジトリの新規作成
 「Repository name」の入力のあと，必要に応じて「Description」も入力します．
 リポジトリの種類を「Public」か「Private」を選択します．
この「Private」リポジトリは，
有料会員のみ作成することが可能です
 リポジトリの中にあらかじめ
READMEファイルを作成しておく場合は，
「Initialize this repository with a README」にチェックします．
 .gitignoreやlicenseについては後で追加や変更ができます．
 [create repository]を押してリポジトリを作成します.

13. クローン
 クローン : リモートリポジトリを複製して，新しいローカルリポジトリを作成すること
 任意のGitHubのプロジェクトページに行きます．
↓
 [Clone or download]ボタンを押し，
リポジトリーのURLを取得します
（コピーボタンを押すと、クリップボードに
リポジトリーのURLがコピーされます．）

14. クローン
 Source treeにてクローンを行います．
WindowsとMacOSで手順が少し異なります．
 Windows  MacOS

15. クローン
 先ほどコピーしたGitHubのURLを
[元のパス/URL:]（MacOS;[ソース URL]）
 ローカルリポジトリを管理するパスを
[保存先のパス:]で指定します
 入力が終われば[クローン]を
押してクローンを行います.
（Windows の場合）

16. コミット＆プッシュ
 用語説明
 コミット : 変更したデータをリポジトリに登録すること．
 プッシュ :ローカルリポジトリのコミットをアップロードして
GitHub上のリモートリポジトリに反映させること．
 インデックス : コミットするファイルの変更点を
一時的に保存しておく場所
 ステージ : ファイルをインデックスに登録すること
⇔アンステージ
作業中のファイル インデックス ローカルリポジトリー
リモートリポジトリー
プッシュプル

17. コミット
 [コミット]を押し、コミットするファイルを選択する画面に移動します。

18. コミット
 [Stage All]もしくは
ファイルを選択して[Stage Selected]を押すと
ファイルがインデックスに追加されます．
 コミットメッセージを入力します．
後の確認や第三者が見たときのために
変更点を簡潔に書きましょう．
 [コミット]を押すと，
ファイルのコミットができます.

19. コミットメッセージの書き方
 原則
1行目：変更内容の要約（タイトル、概要）
2行目 ：空行
3行目以降：変更した理由（内容、詳細）
 複数の修正をひとつのコミットにまとめると変更点がわかりにくくなるため
コミットはできる限り頻繁に行うことが好ましいです．

20. プッシュ
 [プッシュ]を押すことでプッシュができます．

21. ブランチ&マージ
 ブランチ :並行して作業を進めるためにmasterブランチからコミットの流れを分岐すること
 マージ :複数のブランチやコミットを統合させること
 リポジトリに最初のコミットを行うと
masterブランチが作成されます.
 最終的にはすべてのブランチが
masterブランチにマージされます.
Ver.1.0 Ver.1.2Ver.1.1
Ver.2.0β
Ver.2.0
ブランチ
マージデバッグめっちゃしたし、
公開しても大丈夫そうだな…！
よし、これで確定して
本筋に戻そう(マージ)
作ったソフトに一気に
機能をつけたいけど、
失敗したらやだな…
コピーして作ろ！(ブランチ)

22. フェッチ
 フェッチ :リモートリポジトリの最新の履歴の取得を行うこと
 ローカルリポジトリで作業している間にリモートリポジトリの内容が更新されたときなどに，
フェッチを行うことでリモートリポジトリの最新の履歴が取得できる．
 ただし，masterブランチに統合されていないことに注意！
あくまで最新の履歴をみることができるだけ.

23. プル
 プル :リモートリポジトリの最新の履歴の取得を行う
+ masterブランチに統合する
 「プル」＝「フェッチ」＋「マージ」
html html
css css
ローカルリポジトリリポジトリ

24. その他の機能
 以上のものはGitHubの基本的な機能です．
 しかし，GitHubには，まだまだ便利な機能が揃っています．
 最後に，その一例として「プルリクエスト」を紹介します．

25. プルリクエスト
 プルリクエスト : 自分がおこなった変更をマージしてもらうようにリクエストをすること.
 つまり、コードの変更をレビュワーに通知し、マージを依頼する機能のことです．
 流れとしてはこのような感じになります．
①GitHubにブランチ
をプッシュする
②ブランチから
プルリクエストを作成する
③コードをレビューする ④ブランチをマージする
こ
れ
も
よ
ろ
し
く
〜

26. プルリクエストのメリット
 コードのレビューを受けることで，自身では気付かなかった
コードの指摘やバク・記述ミスなどが発見しやすい．
 作成されたプルリクエストは一覧で確認できるため
レビュー・マージ担当者は漏れなく処理することができる．
 プルリクエスト上でコメントでの議論が可能．
 このようなやりとりを経て、masterブランチにマージされる
ソースコードの品質を向上させることができます．

27. プルリクエスト
 GitHubの任意のページにアクセスする．
 リポジトリの画面で
[New Pull Request]ボタンを押し，
プルリクエストの作成を開始します．

28. プルリクエスト
 親ブランチと子ブランチを決めます．
 コミット履歴とソースコードの差分が表示されます．
選択したブランチに間違いがなければ
[Create pull request]ボタンを押し，
プルリクエストの詳細を作成する画面へ移動します

29. プルリクエストの詳細設定
 プルリクエストの詳細について決めていきます．
 タイトル
簡潔なタイトルで内容がすぐわかること
 詳細
◦プルリクエストを送るに至った経緯
◦マージすることで期待できる結果
◦関連するIssueやURL
◦このプルリクエストでは行わないこと
– 対応しない項目に関しての指摘が入らないようにするため
◦マージ後のリスク
– 修正箇所の影響範囲などを記入することで，デバッグ項目の漏れなどを減らす

30. プルリクエストの詳細設定
 その他の詳細設定
◦Reviewers
– レビューする人を設定します
◦ Assignees
– プルリクエストの内容を
対応した人・対応する人を設定します
◦ Labels
– [bug(バグ)][question(質問)]
[enhancement(機能の実装)]等から選択します
◦ Milestone
– マイルストーンを選択します（[Issues]画面の[milestone]ボタンから作成可能）

31. 参考資料
 ＴＥＣＨＡＣＡＤＥＭＹ
https://techacademy.jp/magazine/
 Six apart ブログ
https://blog.sixapart.jp/
 ICS MEDIA
https://ics.media/
 Qiita
https://qiita.com/
 サルでもわかるGit入門～バージョン管理を使いこなそう～
http://www.backlog.jp/git-guide/