Git / 2023 ニフティ新人研修

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Copyright © NIFTY Corporation All Rights Reserved. バージョン管理システムについて 3 バージョン管理って何︖ バージョン管理⽅法バージョン管理とは、⼀つのファイルやファイルの集合に対して時間とともに加えられていく変更を記録するというものです。例）発表スライドなどの資料を修正するたびに上書き保存するのではなく、新規に保存するとどこを変更したかが⽬に⾒えて分かります。 ● ファイル名 ● ソフトウェア構成管理(SCM︓Source Control Management)

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Copyright © NIFTY Corporation All Rights Reserved. SCMのメリット 14 ● ファイル名が煩雑にならない ○ リポジトリで全てのバージョンの履歴を保持しているため、ファイル名が同じでも変更内容を確認することができます ● 変更内容の履歴をたどれる ○ リリース後に何か問題が発⽣した際、どこで問題が発⽣したか追跡しやすい ○ 問題が発⽣する前のバージョンに戻せば、すぐにシステムを復旧できる ● 素早い開発が可能になる ○ バージョン管理が効率的に⾏われており、素早い開発に貢献

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Copyright © NIFTY Corporation All Rights Reserved. GitのGUIとCLI 16 VScodeの拡張機能など GUIツール ● VSCode <- 今回紹介 ● TortoiseGit ○ 社内でも使われているらしい ● 各種IDE ○ 開発環境にGitの機能が組み込まれている場合もある ● Git Graph <- 今回紹介 ● GitLens ● GitHub Pull Requests

Slide 17

Slide 17 text

Copyright © NIFTY Corporation All Rights Reserved. GUIとCLIのメリット、デメリット 17 GUI ● メリット ○ 操作が直感的でわかりやすい ○ 視覚的にもわかりやすい場合がある ■ 変更差分の確認 ○ コマンドを覚えなくて良い ● デメリット ○ どのGUIツールを使うかによって操作⽅法が変わる CLI ● メリット ○ The Engineer感があってCOOL!!である ○ 基本的にどの環境でもコマンドの内容は変わらない ● デメリット ○ 場合によってはわかりずらい ■ コンフリクトの解消やGit ツリーの確認など ○ コマンドを覚えなければならない

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Copyright © NIFTY Corporation All Rights Reserved. リモートリポジトリとローカルリポジトリ 19 ローカルリポジトリリモートリポジトリ ● サーバー上に配置して複数⼈で共有するリポジトリ ● 他の⼈と共有するために存在する ● 開発者⼀⼈⼀⼈が⾃分のマシン上に配置するリポジトリ ● リモートのファイルをローカル(個⼈のPC)に持ってきて作業を⾏い、更新をリモートへ共有するイメージ

Slide 20

Slide 20 text

Copyright © NIFTY Corporation All Rights Reserved. 20 ファイル名のバージョン管理ローカルリポジトリ内のファイルは２つの状態に分けられる trackedのファイルは３つの状態に分けられる ● 追跡されている(tracked) ○ 変更内容を保存するファイル ● 追跡されていない(untracked) ○ 変更内容を保存してないファイル ● 変更されていない(unmodified) ● 変更されている(modified) ● ステージされている(staged)

Slide 21

Slide 21 text

Copyright © NIFTY Corporation All Rights Reserved. ローカルリポジトリに変更内容を記録するまで 21 リポジトリ内にindex.txtというファイルを新規作成 ● index.txtは追跡されていない(untracked)状態のファイル ○ VSCodeの場合「U」が付く index.txtを追跡(tracked)状態にして、ステージする ● 左側のマークからもステージできる（右図） ○ 未追跡のファイルが表⽰されているのでカーソルを重ねると出る「＋」マークをクリック ● ステージされている変更に移動すればOK︕ git add index.html

Slide 22

Slide 22 text

Copyright © NIFTY Corporation All Rights Reserved. 22 index.txtの変更内容をコミットする ● コミットとは ○ 変更内容をリポジトリに記録し保存すること git commit -m 'ここにコミットメッセージを書く' ● こういう変更をしたよ ○ ex ) 削除機能の追加 ● ⾃分がやってるタスクの名前 ○ 何のタスクのための削除機能なのか、わかりやすくなるコミットメッセージを書く ● ①コミットメッセージを書き、②チェックボタンを押すことでもコミットできる（右下図）コミットメッセージの例

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Copyright © NIFTY Corporation All Rights Reserved. .gitignoreについて 24 Git上で管理したくないファイル ● Gitでは基本的に全てのファイルを管理する ● ⼀⽅で、開発の中ではGit上で管理したくないファイルがある ○ パスワードの記述されたenvファイルなど ● Git上で管理したくないファイルをGitに教えるためのファイルがgitignoreファイル

Slide 25

Slide 25 text

Copyright © NIFTY Corporation All Rights Reserved. .gitignoreファイルの書き⽅ 25 基本の書き⽅コメントアウト相対パスで指定されるファイル or ディレクトリを無視する ● .gitignoreという名前のファイルを作り、中に無視したいファイル名を記述 # "#" で始まる⾏はコメント # binファイルとbinディレクトリを無視する /bin # binディレクトリを無視する /bin/ ● .gitignoreが置いてあるディレクトリがカレントディレクトリとなる

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Copyright © NIFTY Corporation All Rights Reserved. 27 !以降のパターン⽂字列が⽰すファイル or ディレクトリを無視しない① # 以下のように書くとsrcディレクトリを無視しないことを設定できる !/src/ ● !は全てのファイルとディレクトリを無視する対象から除外できないパターンがある ○ 例えば以下の例ではhoge/hoge.txtファイルは除外されない # hogeディレクトリを無視する /hoge/ # hoge.txtを無視から除外できない !/hoge/hoge.txt

Slide 28

Slide 28 text

Copyright © NIFTY Corporation All Rights Reserved. 28 ● このようなことを処理として行いたい場合、ディレクトリ以下のファイル全体を無視する対象にして記述する必要がある。 # ディレクトリではなく、ディレクトリ以下のファイル全体を無視するように指定 # *はワイルドカード（次のページで説明） /hoge/* # 上記のファイルの中のhoge.txtは無視しない !/hoge/hoge.txt ● hoge/ディレクトリを無視しまっている場合はその階層以下のファイルやディレクトリを無視する対象から除外できない !以降のパターン⽂字列が⽰すファイル or ディレクトリを無視しない②

Slide 29

Slide 29 text

Copyright © NIFTY Corporation All Rights Reserved. 29 ワイルドカード *.exe ● gitignoreでは*と? 、**、[]がワイルドカードとして使⽤できる ○ 「*」︓ /以外の0⽂字以上の⽂字列にマッチ ○ 「?」︓/以外の1⽂字にマッチ ○ 「[0-9]」︓/以外の指定した1⽂字にマッチ ○ 「**」︓0個以上のファイル or ディレクトリにマッチ package/**/*.ts ● ex1)特定の拡張子の無視 ● ex2)特定のディレクトリ内の特定の拡張子を無視

Slide 30

Slide 30 text

Copyright © NIFTY Corporation All Rights Reserved. 30 エスケープ ● 「¥」を使うことでエスケープ可能 gitignoreの注意点 ● gitignoreは記載された時点でGitの追跡対象から除外されるわけではない ○ まだ追跡されていないファイルが指定されている場合に、追跡を開始しないようになる # ?をエスケープしている ¥?*# → ⼀度追跡に⼊れてしまった場合は、追跡対象から外した後にgitignoreで指定する必要がある

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Copyright © NIFTY Corporation All Rights Reserved. 演習を進める事前準備 32 Gitの準備 ● Git for Windowsをインストールしましょう ○ インストールが完了したら Launch Git Bash にチェック ○ Git Bashが開いたら以下のコマンドでバージョンが表⽰されることを確認 git --version VSCodeの準備 ● VSCodeをインストールしましょう ● 以下の拡張機能を⼊れると便利 ○ 「Japanese Language Pack for Visual Studio Code」︓⽇本語化 ○ 「Git Graph」︓主にコミット履歴の確認

Slide 33

Slide 33 text

Copyright © NIFTY Corporation All Rights Reserved. Gitの初期設定 33 ⾃分の情報を設定する ● ちゃんと設定できたか確認するには次のコマンドを⼊⼒ $ git config --global user.name "名前" $ git config --global user.email "メールアドレス" $ git config --global core.autocrlf input $ git config user.name //⼊⼒した名前が表⽰される $ git config user.email //⼊⼒したメールアドレスが表⽰される $ git config core.autocrlf //inputが表⽰される

Slide 34

Slide 34 text

Copyright © NIFTY Corporation All Rights Reserved. ローカルリポジトリを作ってみよう① 34 任意の場所にディレクトリを作成し、VSCodeで開く $ mkdir git-lesson1 $ ls //git-lesson1があればOK $ cd git-lesson1 //「cd g」まで⼊⼒してtabを押すとパッと出て来るはず $ code . //VSCodeで開き直す任意の場所にディレクトリを作成し、VSCodeで開く

Slide 35

Slide 35 text

Copyright © NIFTY Corporation All Rights Reserved. ローカルリポジトリを作ってみよう② 35 任意の場所にディレクトリを作成し、VSCodeで開く $ git init Initialized empty Git repository in /UsersPath/git-lesson1/.git/ リポジトリの初期化 ● 右図の⾚丸で囲まれたマークを押して「リポジトリを初期化する」をクリック ● git initでgitの初期化 ● .gitディレクトリが作成されたことを確認 $ ls -la GUI操作で初期化する場合

Slide 36

Slide 36 text

Copyright © NIFTY Corporation All Rights Reserved. ファイルを追加して、コミットしてみよう 36 任意の場所にディレクトリを作成し、VSCodeで開くやってみよう ● index.html、.gitignore、ignore.txtというファイルをディレクトリ直下に作成 ● .gitignoreファイルの中に以下のように記述 ignore.txt ● 作成した３つのファイルをステージしようとしてみる ○ ignore.txtがステージ出来ないことを確認 ● コミットメッセージを書いてコミットする

Slide 37

Slide 37 text

Copyright © NIFTY Corporation All Rights Reserved. ファイルを編集して、コミットしてみよう 37 任意の場所にディレクトリを作成し、VSCodeで開くやってみよう git log index.htmlを以下で上書きしコミット今までのコミット履歴を⾒てみる ● 上に表⽰されているものほど新しいコミット ● vscodeの⼈は「Git Graph（拡張機能）」を⼊れて⾚丸で囲まれたマークから確認

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Copyright © NIFTY Corporation All Rights Reserved. Gitのブランチについて 39 ブランチとは ● 開発の本流から分岐し、本流の開発と切り離した状態で作業ができる機能のこと ● 他の開発者に影響なく作業を⾏える。 ● 機能単位・改修単位で作業を分割できる。 Main 例 Develop Feature 1 Feature 2 Ver1.1 Ver1.2 Ver2.0 本番環境開発環境機能追加開発⽤ブランチ

Slide 40

Slide 40 text

Copyright © NIFTY Corporation All Rights Reserved. 40 主要な操作 $ git branch ブランチ⼀覧を確認するブランチを作る $ git branch {ブランチ名} ブランチを切り替える（チェックアウト） $ git checkout {ブランチ名} $ git switch {ブランチ名} ● switchはまだ実験的な機能で、今後動作が変わるかもしれないブランチを合流する（マージ） ※親となっているブランチにチェックアウトしておくこと $ git merge {ブランチ名} or

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Copyright © NIFTY Corporation All Rights Reserved. 実際にブランチを触ってみる 43 任意の場所にディレクトリを作成し、VSCodeで開く $ git branch *main developブランチを作って切り替えてみよう ● 今いるブランチを確認する ● developブランチを作る $ git branch develop $ git branch develop * main ● developブランチを切り替える $ git switch develop Switched to branch 'develop'

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Copyright © NIFTY Corporation All Rights Reserved. 45 任意の場所にディレクトリを作成し、VSCodeで開く差分を確認してコミット ● 「-」が削除箇所、「+」が追加箇所 ● 差分を確認して問題なければコミット（忘れた⼈は22ページへ） ○ コミットする前に差分を確認する癖をつけましょう︕ $ git diff - hoge + feature/A コマンドで差分を確認 vscodeで差分を確認 ● git diffで確認 ● コミットできる画⾯でファイルをクリック

Slide 46

Slide 46 text

Copyright © NIFTY Corporation All Rights Reserved. 46 任意の場所にディレクトリを作成し、VSCodeで開く mainブランチに戻って、ファイルを確認 ● 先ほどコミットしたのはdevelopブランチ ○ mainブランチにはtitleの変更が反映されていないはず ● mainブランチに戻り、index.htmlを確認してみよう $ git checkout main $ view index.html

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Copyright © NIFTY Corporation All Rights Reserved. 変更内容の⼀時退避を知る 48 任意の場所にディレクトリを作成し、VSCodeで開く $ git checkout develop $ git switch -c feature/A featureブランチを作る ● developブランチから派⽣するfeature/Aブランチを作り、切り替える ● titleタグの中⾝をfeature/Aに変更 feature/A

Slide 49

Slide 49 text

Copyright © NIFTY Corporation All Rights Reserved. 49 任意の場所にディレクトリを作成し、VSCodeで開く git stashで変更内容を⼀時的に退避する ● git stash saveでキープ ○ メッセージは後からわかるような内容にしよう︕（戒め） $ git stash save "stash message" ● git stash listでキープ内容を確認 $ git stash list stash@{0}: On A: stash massage ● 別ブランチに切り替えると、コミットしていない変更内容は消えてしまう ○ ⼀時退避をすることで変更内容をコミットせずに残すことができる ● index.htmlのtitleがhogeになっている（退避された）ことを確認⼀時退避してみる

Slide 50

Slide 50 text

Copyright © NIFTY Corporation All Rights Reserved. 50 任意の場所にディレクトリを作成し、VSCodeで開く退避したものを戻す $ git stash apply stash@{0} ● ⼀時退避した内容を再度適⽤したい場合は以下のコマンドを叩く ● index.htmlのtitleがfeature/Aになっている（適⽤された）ことを確認 ● ⼀番上(stash@{0})の変更であれば以下のようにして適⽤することも可能 $ git stash pop $ git diff

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Copyright © NIFTY Corporation All Rights Reserved. ホスティングサービス 53 GitHub GitLab AWS CodeCommit ● ホスティングサービスで最⼤⼿ ● 多くのOSSが利⽤している ● 社内でもGitHub Enterpriseを導⼊している ○ GitHub Enterprise ● 無料版でも使える機能が多い ○ GitHubがほぼ全⾯的に無料化 ● 無料で使える範囲はGitHubよりも広い ● AWSが提供するホスティングサービス ● AWSの他サービスとの連携が容易にできるニフティでは主にGitHubを使⽤しています

Slide 54

Slide 54 text

Copyright © NIFTY Corporation All Rights Reserved. Pull Push Clone リモートリポジトリに関わるGitコマンドの説明 54 リモートリポジトリのコピーとして⼿元のPCにローカルリポジトリを作成することローカルリポジトリの作業内容をリモートに反映することローカルリポジトリに最新の内容を反映すること git clone git push origin main git pull origin main

Slide 55

Slide 55 text

Copyright © NIFTY Corporation All Rights Reserved. 【余談】その他のコマンド 55 git rebase git cherry-pick git filter-branch コミットの取り消し、変更の削除などを⾏うコマンド git reset 履歴をきれいにする。まとめてコミットを取り込む直前のコミットを取り込む(他のブランチの余計なコミットを取り込まず、特定のコミットを取り込む) gitの履歴の削除を⾏う