Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Git & GitHub

Introduction to Git & GitHub

Git 講習会で使用した資料です。
Git と GitHub CLI を用いて説明しています。

Kotokaze

May 17, 2021
Tweet

More Decks by Kotokaze

Other Decks in Education

Transcript

  1. Git 入門
    - Git を理解しよう
    Kotokaze

    View full-size slide

  2. @Kotokaze__R
    Git とは
    2021/5/10 2
    https://git-scm.com/

    View full-size slide

  3. @Kotokaze__R
    Git とは②
    2021/5/10 3
    (Distributed) Version Control System
    バージョン管理システム (分散型)
    ファイルの更新履歴を記録、管理するためのツール

    View full-size slide

  4. @Kotokaze__R
    VCS のススメ
    2021/5/10 4
    やめよう、ファイル名による管理

    View full-size slide

  5. @Kotokaze__R
    バージョン管理システム (VCS) の進歩
    ローカルVSC / 集中VCS / 分散VCS
    2021/5/10 5

    View full-size slide

  6. @Kotokaze__R
    ローカルVCS
    ✓ 名の通り、ローカル環境内
    (DB) のみにデータを保存
    ✓ 差分を使用
    ✓ 代表例: RCS
    2021/5/10
    図: https://git-scm.com/book/en/v2/images/local.png
    6

    View full-size slide

  7. @Kotokaze__R
    集中VCS (CVCS)
    ✓ 全データはサーバのみで保持
    ✓ 必要なものを取り込み、編集
    ✓ サーバが死ぬ = データが死ぬ
    ✓ 代表例: Subversion
    2021/5/10
    図: https://git-scm.com/book/en/v2/images/centralized.png
    7

    View full-size slide

  8. @Kotokaze__R
    分散VCS
    ✓ ローカルがメインの保存先
    → 回線を気にしなくてよい
    ✓ サーバPC にもバックアップ
    → 障害に強い
    ✓ 代表例: Git
    2021/5/10
    図: https://git-scm.com/book/en/v2/images/distributed.png
    8

    View full-size slide

  9. @Kotokaze__R
    セットアップしよう
    Windows 編
    2021/5/10 9

    View full-size slide

  10. @Kotokaze__R
    インストールしよう
    2021/5/10
    https://git-scm.com/downloads
    10

    View full-size slide

  11. @Kotokaze__R
    インストールしよう②
    2021/5/10 11

    View full-size slide

  12. @Kotokaze__R
    注意点①
    ✓ 選択によっては別途インストールが必要
    ✓ 宗教上の理由により、 Nano エディタを使用します
    2021/5/10 12

    View full-size slide

  13. @Kotokaze__R
    注意点②
    1. Git Bush のみで使う
    (シェル切り替え必須)
    2. Posh* / CMD で使う
    3. Posh* / CMD で Git
    & Unix コマンドを使う
    2021/5/10
    Posh*: Power Shell のこと
    13

    View full-size slide

  14. @Kotokaze__R
    注意点③
    行末(改行)文字の選択
    ✓ Unix-Style
    CR (0x0D)
    ✓ MS-Style
    CR+LF (0x0D + 0x0A)
    2021/5/10
    ※ MS-Style で commit するのは避けよう!
    14

    View full-size slide

  15. @Kotokaze__R
    Tab補完 (Posh)
    1. Chocolatey というパッケージ管理ツールをインストール
    → https://chocolatey.org/install からスクリプトを入手
    2. 管理者の Posh にペーストし実行 ( “Win + X” → “A”)
    3. `cinst poshgit` (cinst: choco install のエイリアス)
    2021/5/10
    $ cinst poshgit
    15

    View full-size slide

  16. @Kotokaze__R
    セットアップしよう
    Mac 編
    2021/5/10 16

    View full-size slide

  17. @Kotokaze__R
    インストールしよう
    1. Homebrew というパッケージ管理ツールをインストール
    → https://brew.sh/index_ja からスクリプトを入手
    2. シェルを開き、ペースト&実行
    3. `brew install git` を実行
    2021/5/10
    $ brew install git
    17

    View full-size slide

  18. @Kotokaze__R
    Tab補完 (zsh/bash)
    $ curl https://raw.githubusercontent.com/git/git/master/contrib/completion/git-
    completion.zsh -o ~/.git-completion.zsh
    $ echo “. ~/.git-completion.zsh” >> ~/.zshrc
    -------------------------------------------------------------------------------------
    $ curl https://raw.githubusercontent.com/git/git/master/contrib/completion/git-
    completion.bash -o ~/.git-completion.bazsh
    $ echo “. ~/.git-completion.bash” >> ~/.bashrc
    2021/5/10 18

    View full-size slide

  19. @Kotokaze__R
    準備をしよう
    2021/5/10 19

    View full-size slide

  20. @Kotokaze__R
    GitHub を使おう !
    ✓ Git のホスティングサービス
    ✓ ユーザ数最多 (たぶん)
    ✓ 進捗管理ツールなども有
    ✓ 学生はタダでPro版
    2021/5/10 20

    View full-size slide

  21. @Kotokaze__R
    準備する
    1. 初期設定する (宗教上の理由により、 Nano を使用します)
    2. SSH Key の作成
    `ssh-keygen` し、指示に従い回答する
    2021/5/10
    $ ssh-keygen
    21
    $ git config --global user.name “${GitHubのユーザ名}”
    $ git config --global user.email ${[email protected]}
    $ git config --global core.editor nano
    $ ssh-keygen

    View full-size slide

  22. @Kotokaze__R
    準備する②
    3. GitHub CLI のインストール
    → Mac: `brew install gh` / Win: `cinst gh`
    2021/5/10
    $ choco install gh
    $ brew install gh
    22
    ✓ GitGitHub CLI とは。。。
    GitHub 純正のコマンドラインツール
    リポジトリや、プルリクの作成などがコマンドで出来ちゃう

    View full-size slide

  23. @Kotokaze__R
    準備する③
    4. GitHub CLI の認証を通す
    `gh auth login` で、質問に答えていく
    ※ 途中の質問では、今回生成した SSH キーを選択する
    5. 公開鍵のアップロード確認
    2021/5/10 23
    $ ssh [email protected]
    Hi <ユーザ名>!
    You‘ve successfully authenticated, but GitHub does not provide shell
    access.
    Connection to github.com closed.
    $ gh auth login

    View full-size slide

  24. @Kotokaze__R
    Git & GitHub 入門
    Git ・ GitHub について知る
    2021/5/10 24

    View full-size slide

  25. @Kotokaze__R
    Git と GitHub
    Git と GitHub は別物です!
    ✓ Git
    • バージョン管理システム (管理用ツールのこと)
    ✓ GitHub
    • ソースコードのホスティングサービス
    • バージョン管理システムに Git を採用している
    2021/5/10 25

    View full-size slide

  26. @Kotokaze__R
    Git のイメージ
    2021/5/10 26
    リモートリポジトリ
    (GitHub など)
    ワークスペース
    Push Pull
    ローカルリポジトリ
    Commit

    View full-size slide

  27. @Kotokaze__R
    Git の特徴①
    スナップショット(≠差分)で保存
    ブランチの切り替えがスムーズ
    2021/5/10 27

    View full-size slide

  28. @Kotokaze__R
    ブランチ管理
    2021/5/10 28

    View full-size slide

  29. @Kotokaze__R
    Git の特徴②
    完全性を持つ
    ✓ 格納される前にチェックサムが取られ、そのチェックサムで照合
    ✓ ファイルの内容、もしくは Git 内のディレクトリ構造を元に計算
    ※ SHA-1 を使用
    2021/5/10 29

    View full-size slide

  30. @Kotokaze__R
    Git の特徴③
    データを追加するだけ
    ✓ commit = 復元ポイント作成というようなイメージ
    ✓ ファイルを編集しても、以前に commit した内容は不変
    → データの復元ができる
    2021/5/10 30

    View full-size slide

  31. @Kotokaze__R
    Git & GitHub 入門
    Git 管理を体験してみる
    2021/5/10 31

    View full-size slide

  32. @Kotokaze__R
    基本編
    データを GitHub に上げてみる
    2021/5/10 32
    パート①

    View full-size slide

  33. @Kotokaze__R
    Git の重要コマンド
    1. add
    2.commit
    3. push
    0. ローカル Repo 作成
    1. ステージング・エリアに追加
    2. ステージング・エリアの中身を
    ローカル Repo に保存
    3. リモート Repo に Upload
    2021/5/10
    0. init
    33

    View full-size slide

  34. @Kotokaze__R
    準備編
    1. 作業場所の確保 (作業は、ワークスペース内でしよう!)
    `mkdir -p ~/workspace/git-study && cd $_`
    ※ `$_` は bash(zsh) の特殊変数らしい(?)
    2. Git のローカル・リポジトリを作成
    `git init`¥
    3. GitHub にリモート・リポジトリを作成
    `gh repo create` で指示に従い作成
    2021/5/10 34
    $ mkdir –p ~/workspace/git-study && cd $_
    $ git init
    $ gh repo create

    View full-size slide

  35. @Kotokaze__R
    作業編①
    1. ファイル編集 (わざと Typo してます)
    `echo “#git-study” > README.md`
    2. ステージング ・ エリアに編集済みファイルを追加
    `git add <ファイルへの相対パス>` (ここでは `./README.md`)
    3. 状況を確認する
    `git status`
    2021/5/10 35
    $ echo “# git-stady” > README.md
    $ git add ${ファイルへの相対パス}
    $ git status
    Changes to be committed:
    (use "git rm --cached ..." to unstage)
    new file: README.md

    View full-size slide

  36. @Kotokaze__R
    作業編②
    4. ステージング ・エリアの中身を、ローカルRepo に保存
    `git commit`
    コメントは宗教上の理由で `:tada: Initial commit` とする
    5. 保存状況の確認
    `git status`
    2021/5/10 36
    $ git commit -m “tada: Initial commit”
    $ git reflog
    ${識別} (HEAD -> master) HEAD@{0}: commit (initial): :tada: Initial commit

    View full-size slide

  37. @Kotokaze__R
    作業編③
    6. スナップショットを、サーバにアップロード
    `git push ${Repoの場所} ${ブランチ名}`
    GitHubリポジトリ: origin
    ブランチ: master
    ※ origin は `[email protected]:${ユーザ名}/${Repo名}` のエイリアス
    ※ 人種差別を示唆するとして、 master 廃絶が進んでいる
    → 代替として、 main が使用され始めている
    2021/5/10 37
    $ git push ${Repoの場所} ${ブランチ名}

    View full-size slide

  38. @Kotokaze__R
    確認してみる
    7. アップロードできているか、ブラウザで確認してみよう
    `gh repo view –w`
    2021/5/10 38
    $ gh repo view -w

    View full-size slide

  39. @Kotokaze__R
    タイポを直してみる
    ✓ Nano エディタで開く
    → `nano README.md`
    ✓ 編集終了(保存)
    `Ctrl + X` → `Y` → `Enter`
    2021/5/10 39
    $ nano README.md

    View full-size slide

  40. @Kotokaze__R
    タイポを直してみる②
    3. 変更をステージング & コミット
    4. GitHub に上げてみよう
    2021/5/10 40
    $ git add ./README.md
    $ git commit –m “:pencil2: Update README”
    $ git push origin master

    View full-size slide

  41. @Kotokaze__R
    復習しよう
    1. 編集を加える
    2. ステージング & ローカル Repo へ保存
    3. リモート Repo へ保存
    2021/5/10 41
    $ echo “Hello” > tmp.txt
    $ git add tmp.txt
    $ git commit –m “:tada: Add new file”
    $ git push orgin master

    View full-size slide

  42. @Kotokaze__R
    ブランチ編
    ブランチ機能を使ってみる
    2021/5/10 42
    パート②

    View full-size slide

  43. @Kotokaze__R
    ブランチ機能
    ✓ 履歴の流れを分岐させる (=ブランチを切る) 機能
    ✓ 現状を複製できる
    → スライド4 の画像に近い結果が得られる
    ✓ コマンド:
    2021/5/10 43
    $ git branch ${ブランチ名}

    View full-size slide

  44. @Kotokaze__R
    ブランチ (実践)
    1. ブランチを切る (複製を作る)
    2. 開発用ブランチに移動
    3. ブランチの確認
    2021/5/10 44
    $ git branch dev
    $ git checkout dev
    $ git branch
    * dev
    master
    A
    master
    dev
    (A)

    View full-size slide

  45. @Kotokaze__R
    ブランチ (実践)②
    4. 編集を加える
    5. dev ブランチに Commit
    6. 状況を確認
    2021/5/10 45
    $ echo “test” > tmp.txt
    $ git add tmp.txt
    $ git commit
    A
    master
    dev
    B
    $ git status

    View full-size slide

  46. @Kotokaze__R
    ブランチ (実践)③
    7. リモート Repo へ
    8. master へ戻る
    9. master へ反映させる
    2021/5/10 46
    $ git push origin dev
    $ git checkout master
    A
    master
    dev
    B
    $ git marge --no-ff
    B’
    ※ ff: fast-forward でマージすると master で編集したかのように振る舞う (修正が困難になる)

    View full-size slide

  47. @Kotokaze__R
    リモート編
    GitHub 上のデータを操作してみる
    2021/5/10 47
    パート③

    View full-size slide

  48. @Kotokaze__R
    イメージ
    2021/5/10 48
    リモートリポジトリ
    (GitHub など)
    ワークスペース
    Clone
    ローカルリポジトリ
    自動展開
    変更履歴
    含む
    Commit

    View full-size slide

  49. @Kotokaze__R
    クローンについて
    ✓ リモート Repo を基に、ローカル Repo を作成
    → 履歴を保持したまま、別環境で作業できる
    ✓ GitHub CLI を使う場合
    ✓ 従来のやり方
    2021/5/10 49
    $ gh repo clone (${ユーザ名}/)${Repo名}
    $ git clone [email protected]:${ユーザ名}/${Repo名}

    View full-size slide

  50. @Kotokaze__R
    実践編
    今回用意した、 RiSec/git-workshop を使ってみよう
    1. ローカル Repo に複製
    2. 中を確認してみる
    2021/5/10 50
    $ cd ~/workspace
    $ gh repo clone RiSec/git-workshop
    $ cd git-workshop
    $ ls -a
    .git .gitignore README.md data src

    View full-size slide

  51. @Kotokaze__R
    実践編 ②
    3. ブランチの作成 ・ 切り替え
    4. src 内の sample.c を見てみる
    2021/5/10 51
    ├── .git
    ├── .gitignore
    ├── README.md
    ├── data
    │ └── .gitkeep
    └── src
    └── sample.c
    $ cd src
    $ gcc –o sample.out sample.c
    $ ./sample.out
    Hollo World!
    $ git branch –b ${ブランチ名}

    View full-size slide

  52. @Kotokaze__R
    実践編 ③
    3. Typo を修正する
    4. 修正を記録する
    5. プルリクを作成する (修正依頼を出す)
    2021/5/10 52
    ├── .git
    ├── .gitignore
    ├── README.md
    ├── data
    │ └── .gitkeep
    └── src
    └── sample.c
    $ git add sample.c
    $ git commit
    $ nano sample.c
    $ gh pr create

    View full-size slide

  53. @Kotokaze__R
    プルリクについて
    ✓ GitHub 独自の機能
    ✓ master ブランチで、マージを直接すると不具合修正が困難
    → Pull Request なら、マージ前に編集概要の確認をできる
    2021/5/10 53
    A
    master
    dev
    B
    Pull Request

    View full-size slide

  54. @Kotokaze__R
    Git & GitHub 発展編
    Fork / Commit のオプション / Commit comments
    2021/5/10 54

    View full-size slide

  55. @Kotokaze__R
    他の人の Repo に、
    直接コミットをしたくないとき
    2021/5/10 55

    View full-size slide

  56. @Kotokaze__R
    Fork のイメージ
    2021/5/10 56
    ワークスペース
    個人の
    リモート Repo
    Clone
    ローカル Repo
    自動展開
    リモート Repo
    Fork

    View full-size slide

  57. @Kotokaze__R
    フォークについて
    ✓ GitHub 独自の機能
    ✓ 他者が作ったリポジトリを、自分のリポジトリとして登録
    → 本家の編集に左右されずに開発できる
    ✓ 使い方

    2021/5/10 57
    $ gh repo fork ${ユーザ名}/${Repo名}

    View full-size slide

  58. @Kotokaze__R
    コミットした後に、
    ミスに気づくことありませんか?
    2021/5/10 58

    View full-size slide

  59. @Kotokaze__R
    オプションを活用しよう
    ✓ commit には、前回のコミットを書き換えるエイリアスがある
    ✓ 手順
    1: 間違いを修正をし、通常通りステージする
    2: コミット時に、 `--amend` オプションをつける
    2021/5/10 59
    $ git commit --amend
    $ git add ${ファイル}

    View full-size slide

  60. @Kotokaze__R
    適当なコミット ・ コメント
    付けていませんか?
    2021/5/10 60

    View full-size slide

  61. @Kotokaze__R
    コメント規則を作ろう!
    ✓ 絵文字でジャンル分け
    ✓ 言語は統一 (英語)
    → 共同開発に対応
    ✓ 大文字始まり
    2021/5/10 61

    View full-size slide

  62. @Kotokaze__R
    テンプレートを使おう !
    ✓ Git には、 commit template を設定する機能がある
    ✓ `-m` オプション無しで commit するとヒントとして表示
    ✓ サンプル
    → https://gist.github.com/Kotokaze/845472cc49a4ad204424a8a56349c901
    ✓ 設定方法
    `git config commit.template <ファイルへのパス>`
    2021/5/10 62
    $ git config --global commit.template ${ファイルへのパス}

    View full-size slide

  63. @Kotokaze__R
    参考資料
    ✓ Git Pro, 2nd ed. (Git 公式ブック)
    → https://git-scm.com/book/ja/v2
    ✓ Git 説明資料
    → https://scrapbox.io/interaction-lab-git/
    ✓ GitHub CLI
    → https://github.com/cli/cli
    2021/5/10 63

    View full-size slide