Tweet
Tweet

Slide 1

Slide 1 text

仕組みから理解する Git 入門 〜ひとり開発でも便利〜 YouTube Live (2020.07.02 Thur. 21:00~) CTO と VPoE が初学者向けに講義する オンライン勉強会です。 随時質問なども受け付けていますので、 お気軽にどうぞ。 ハッシュタグ #mu_zaru

Slide 2

Slide 2 text

話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe エンジニアリングMgr。 チームづくり、採用。 Twitter 担当。 数学が好き。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components.

Slide 3

Slide 3 text

Git は バージョン管理ツール

Slide 4

Slide 4 text

バージョン管理とは 変更履歴を管理すること ファイル 作成する ムーザルちゃんねる始めます。 バージョン1

Slide 5

Slide 5 text

バージョン管理とは 変更履歴を管理すること ファイル 作成する ムーザルちゃんねる始めます。 ファイル 追記する ムーザルちゃんねる始めます。 次回の放送は5分で作るアプリです。 変更した履歴 を取っておく こと バージョン1 バージョン2

Slide 6

Slide 6 text

バージョン管理のメリット

Slide 7

Slide 7 text

変更履歴があると 元に戻せる ファイル コード 書いたぞ 6/20

Slide 8

Slide 8 text

ファイル v1 コード 書いたぞ ファイル v2 機能を追 加したぞ バージョン2へ 6/20 6/24 変更履歴があると 元に戻せる

Slide 9

Slide 9 text

ファイル v1 コード 書いたぞ ファイル v2 ファイル v1 機能を追 加したぞ やっぱり 戻したい バージョン2へ バージョン1へ戻す 6/20 6/24 7/1 変更履歴があると 元に戻せる

Slide 10

Slide 10 text

変更履歴があると 振り返れる みんなで同じファイルを 編集した場合、変更履歴 があれば、いつ誰がどん な修正をしたのか振り返 ることが可能。 ファイル コード 書くぞ ファイル 機能追加 しよう 修正 しよう Aさん Bさん Cさん ここは 削除しよう Dさん Aさん 誰がこの修正 をしたんだろ う？

Slide 11

Slide 11 text

みんなで同じファイルを 編集した場合、変更履歴 があれば、いつ誰がどん な修正をしたのか振り返 ることが可能。 ファイル コード 書くぞ ファイル 機能追加 しよう 修正 しよう Aさん Bさん Cさん ここは 削除しよう Dさん Aさん 誰がこの修正 をしたんだろ う？ この意味不明な コード、誰が書 いたんだ？ あ、昨日の 自分だった… 個人開発であっても 昨日の自分は他人 という 観点でバージョン管理をした方がいい。 変更履歴があると 振り返れる

Slide 12

Slide 12 text

バージョン管理のやり方

Slide 13

Slide 13 text

最も原始的な管理は ファイルコピー ファイル 記事.txt ファイル 記事_20200621.txt ファイル 記事_20200618.txt 変更するたびにファイルを コピーして名前をつけておく…

Slide 14

Slide 14 text

最も原始的な管理は ファイルコピー ファイル 記事.txt ファイル 記事_20200621.txt ファイル 記事_20200618.txt 変更するたびにファイルを コピーして名前をつけておく… あ、コピー するの忘れた… 記事_最新.txt 記事_最終修正済み.txt 記事_最終修正済み(1).txt カオスなファイル名になりがち 作業ミスが発生したり Git を使えば、いくつかのコマンド操作で 全部自動でよしなに管理してくれる

Slide 15

Slide 15 text

Git バージョン管理のやり方

Slide 16

Slide 16 text

Git の管理イメージ v3 v2 v1 ファイルの変更履歴 データが Git に管理 され、蓄積している ファイル コード 書いたぞ

Slide 17

Slide 17 text

working tree ファイル index ファイル repository ファイル add commit Git の 操作と 流れの イメージ 作業をする場所 履歴を保存する候補 履歴データ Git に追加してねと お願いをするコマンド Git に保存してねと お願いをするコマンド add や commit と いったコマンドを 使って Git に管理 をしてもらう

Slide 18

Slide 18 text

Git と GitHub リモートリポジトリ

Slide 19

Slide 19 text

working tree ファイル index ファイル local repository ファイル add commit GitHub はリモート保管所 remote repository ファイル push GitHub GitHub は Git のデータを保存してくれるサー ビス。インターネット上に置いて、色んな人が ファイルにアクセスすることができる。 Git に GitHub に送信して ねとお願いするコマンド

Slide 20

Slide 20 text

GitHub ファイル コード 書いたぞ 改良しよう 不具合 直そう GitHub でチーム開発 GitHub にデータが集約されているので、色んな人が Git を使って開発をすることができる。また、個人でも違う パソコンでの開発もやりやすくなる。

Slide 21

Slide 21 text

実際に git を使ってみる！

Slide 22

Slide 22 text

今日使うコマンド # 少なくとも、概念から覚えてほしい git init git add git commit # できれば使ってみてほしい git status git log git branch

Slide 23

Slide 23 text

git init で初期化する Git で管理すると言う宣言を git init コマンドで行う。 全てはこのコマンドから始まる。 git init

Slide 24

Slide 24 text

git init で初期化する $ cd ~/Desktop/sample_project $ git init ここで git init したら、ここ以下の フォルダやファイル全てが Git 管理 になる

Slide 25

Slide 25 text

Git の実体は .git フォルダ .git と言う不可視フォルダに、全て の履歴データが保存されている。 このフォルダを削除すれば Git の管 理は全てリセットされ、なくなる。

Slide 26

Slide 26 text

実際に git add / commit する

Slide 27

Slide 27 text

git add の使い方 working tree ファイル index ファイル repository ファイル add commit 変更ファイルを index に登録する。 （厳密には変更した箇所を登録することができる）

Slide 28

Slide 28 text

git add の使い方 add ファイル名で、変更履歴を記録する対象に追加します。 ファイル名は * などのワイルドカード指定や . で全ファイルという指定が可能です。 git add ファイル名 git add file*.txt # file1.txt や fileA.txt など git add . # 今いるディレクトリのファイル全て

Slide 29

Slide 29 text

git commit の使い方 working tree ファイル index ファイル repository ファイル add commit Repository に変更を記録。 このとき変更内容を、文章で記載しておく必要がある。 この文章をコミットメッセージと言う c3 c2 c1 index.html ファイル を追加 Hoge クラスを追加 hoge メソッド を追加 ※コミットメッセージ

Slide 30

Slide 30 text

git commit の使い方 commit コマンドで add したファイルを対象に、変更履歴を記録 します。コミットメッセージを指定することで、何の変更をした のかを分かりやすくします。 git commit -m 'コミットメッセージ' git add zaru.txt # zaru.txt を対象に追加 git commit -m 'zaru のプロフィールを編集' # 記録 どんな内容をコミットしたのかが分かるようなメモを書ける

Slide 31

Slide 31 text

コミットを特定する commit ID commit ID commit したら自動で発 行されるこの文字列は commit ID (通称) と言わ れるもので、コミットを 特定するためのキーワー ドのようなもの。 40文字だが、先頭の7文 字で省略して使ったりす る。

Slide 32

Slide 32 text

状況を見る git status ファイルを修正したり add した時に、今どういう状況だっ け？というのを確認するには status コマンドを使います。 git status 修正して git add した 修正したけど add してない

Slide 33

Slide 33 text

記録を見る git log commit で記録した差分は git log コマンドで確認ができます。 git log いろいろなオプションがあり、最も覚えられないコマンドのよう な気がするので、素直に Git クライアントアプリを使った方が効 率的です（個人の見解）。

Slide 34

Slide 34 text

オススメ Git クライアント Fork 両方とも Windows / macOS 対応。 Sourcetree は完全無料。Fork は評価版であれば無料。

Slide 35

Slide 35 text

add してない add した コミットログ一覧 修正差分

Slide 36

Slide 36 text

Git 基本的な使い方 ~ ひとり開発でも便利 ~

Slide 37

Slide 37 text

コードを残して 色々試したい ブランチを使えば、今のコードを残したまま別の環境を作ること ができる。ブランチは何個でも作れ、切り替えが可能。 C C C master C C feature ブランチ名 master ブランチを残したまま、 コピーして新しくブランチを作る ことができる。 ブランチは 切り替えが 可能 コミット メインブランチ 別ブランチ

Slide 38

Slide 38 text

ブランチ操作 switch / branch ブランチの切り替えや、作成は switch を使う。 git switch ブランチ名 # 指定ブランチに切り替え git switch -c 新しいブランチ名 # 指定ブランチを作成 ブランチの一覧表示や削除は branch を使う。 git branch 　 # ブランチ一覧を表示 git branch -d ブランチ名 # 指定ブランチを削除

Slide 39

Slide 39 text

試した成果を merge で反映 別のブランチのコミットを持ってきて反映させることを マージ merge と言う。 C C C master C C feature 無事、マージできたら、 このブランチは削除する こちらに反映させる コミット C ここで作業した内容を C

Slide 40

Slide 40 text

ブランチ操作 merge 指定した他のブランチにあるコミットを、今のブランチに反映す ることができる。 git merge ブランチ名 # 指定ブランチをマージ

Slide 41

Slide 41 text

前の状態に戻す 特定のコミット時点までファイルの変更を戻すことができます。 いろんなやり方がありますが、今回は restore コマンドを使いま す。 C C C master C C C C master C このコミット時点に戻す

Slide 42

Slide 42 text

元に戻す restore restore は色々な方法でファイルの修正を戻すことができます。 git restore . --source 戻したい場所 # 指定位置まで戻す git restore . --source HEAD~2 # 2個前のコミットまで全て戻す C C C master C C C C master C HEAD HEAD~1 HEAD~2

Slide 43

Slide 43 text

ありがとうございました！ 次回も…未定です…が！ いつも通り YouTube ライブ、もしくは普通の編集動画どちらかを お届けします。告知は Twitter でします。 @mu_vpoe 質問感想など呟いていただけると嬉しいです！ ハッシュタグ #mu_zaru