フロントエンドエンジニアの正社員として入社して2か月弱経ちました。
まだまだぽんこつ。
先日、社内新人向けオンラインGit勉強会を開いてもらったのに序盤で詰んだ。
翌日復習したので自分用メモ。
※Windows用。Macのやり方は知らない
CONTENTS
1.勉強会の目的
「Gitよくわからん」「詰みがち」という新人向けに、Gitの仕組みについて確認するのが目的。
普段業務で使ってるSourceTreeはどんな動きをしているのか。
逆に「Git glowおいしい(むしゃむしゃ)」みたいな人には向かないとのこと。
勉強会の先生:弊社における超絶ハイスペックCPUのような存在。SourceTreeが好きじゃない
生徒たち:Web業界未経験の新人~3年目くらいが6名ほど。業務でSourceTreeを使ってる。黒い画面はほぼ触らん。
方法:絶賛テレワーク中なのでZoomで。
時間:とある日の1時間半ほど。多分2週に分けてやると思う。
2.予習
勉強会前の資料。
▽ VCS(Version Control System:バージョン管理システム)を学ぶ上で前提となる1~4は読んできてねとのこと。(今から4~8年前のもの)
https://github.com/masaru-b-cl/introduction-to-vcs
▽ 勉強会はこれに沿って進む
https://github.com/Shinpeim/introduction-to-git
3.Gitをインストール
勉強会前の準備として、Git(URL:https://gitforwindows.org/)をインストール。
他にはテキストエディタ(VS Codeなど)& ターミナル(Mac)またはGitBashを使う。
※Windowsの場合…コマンドを操作するのに必要なGitBashはGitと一緒にインストールされる。
※今回はSourceTreeは使用しない。
インストールの画面は全部英語。
バージョンによって文章が微妙に異なる気配を感じたので、最新のものを掲載しているサイトをいくつか参考に。
エディターの設定は使い慣れてるVS Codeにした。初期設定では違うやつだった。
▽ 【初心者向け】Gitのインストール方法をわかり易く解説
▽ Gitインストール手順<Windows向け>
4.初期設定
GitBashを立ち上げると黒いのが出てきた。
まずは初期設定から。
たとえ練習用でも、ユーザー名(例:yuki)とメアド(例:yuki@mail.com)を入力しないとエラーになるらしい。
$ git config –global user.email “yuki@mail.com”
注意点
ついCtrl+CやCtrl+Vでコピペしてたけど、コマンド上では無効。
↓ これでコピペできる
コピー : Ctrl + Ins
ペースト(貼り付け) : Shift + Ins
5.コマンド
ホームディレクトリの確認
現在ユーザーがいるホームディレクトリを確認する
移動コマンド
今回はドキュメントの中に作業ディレクトリ(作業用フォルダ)を作り、そこでGitの使い方の練習をしていく。
/c/Users/******/Documents
=エクスプローラーの「PC > ドキュメント」に移動する必要がある。
$ cd ~/Documents
上のようにコマンドで移動するか、ドラッグアンドドロップで移動できる。
~はホームディレクトリを指すので、「~/Documents」は「/c/Users/******/Documents」と同じ意味。

作業ディレクトリとリポジトリの作成
ドキュメントに移動したあと「workspace」という新たな作業ディレクトリを作成。(名前はなんでもいい)
※mkdir = make directoryという意味。
次に、ドキュメントから「workspace」ディレクトリへの移動。
★今自分がどこにいるのか把握することが大事
さらにgit init で作成した作業ディレクトリに対応するリポジトリ(作業履歴を管理する場所)を作成することができる。
これで作業ディレクトリとリポジトリが完成。
(画像を拡大:https://idol-plus.net/wp-content/uploads/2021/01/git-02.jpg)
ファイル一覧を確認する
作成したリポジトリがどこにあるのか確認。
workspaceにいる状態で「ls -a」を入力する。
※lsと-aの間に半角スペースがないと「command not found」と出てくるので注意
これが出てくる。
「.git」というディレクトリが存在していることがわかる。
意味
- ls:そのディレクトリ内にあるファイル一覧を確認する
- -a :特殊なファイルも全て表示する
- .git:,gitというディレクトリが、リポジトリの正体。
隠しファイル
エクスプローラーを開いて確認すると、「.git」のものがない。
→隠しフォルダである「.git」が作成されたため、見えないようになっているため。
大事なものをうっかり消したり変更したりしないように隠している。
空のファイルを作成
メモ帳からテキストを新規保存…みたいなのをコマンド入力で実行。
「workspace」ディレクトリ内にいる状態で、touch ****を使い、空のテキストファイル「keyakizaka.txt」を作成。
現在の状態を確認
gitで対象となっているファイルのステータスを確認するため「git status」を入力。
Untracked files:・・・と書かれてて、変更内容(新しいテキストファイルを作ったこと)ステージされていない状態であることがわかる。
No commits yet
Untracked files:
(use “git add
keyakizaka.txt
ステージング
今の状態→ keyakizaka.txtが新規作成され、変更が加えられた状態。
この変更内容をインデックスに追加してコミット対象にする「ステージング」という作業が必要。
もう一度現在の状態を確認
再度「git status」を入力。
変更内容がステージされている状態。
No commits yet
Changes to be committed:
(use “git rm –cached
new file: keyakizaka.txt
コミットする
いよいよコミット。
[main 2021-01-24T15:40:14.011Z] update#setState idle
[main 2021-01-24T15:40:44.014Z] update#setState checking for updates
[main 2021-01-24T15:40:44.159Z] update#setState idle
[master 5b9a899] 欅坂から櫻坂に改名したため
1 file changed, 0 insertions(+), 0 deletions(-)
rename keyakizaka.txt => sakurazaka.txt (100%)

コミットメッセージの入力
git commitするとエディタが起動。

私はインストール時に設定したVS Codeが立ち上がる。
(Macの人は vi というターミナル内で動くエディタが起動するらしい)
↓ エディタ内はこんな感じで英語でいろいろ書いてる。
# with ‘#’ will be ignored, and an empty message aborts the commit.
# On branch master
#
# Initial commit
#
# Changes to be committed:
# (use “git rm –cached
#
# new file: keyakizaka.txt
#
#の後に書いたものはコメントアウトのような形になり無視されるので、#のあとにメッセージを書いても残らない。
一番下の#を消して、「欅坂ファイル作成」みたいなメッセージを残しとく。

▽ コミットメッセージを書いたあとのGit Bashの表示。
エディターで書いたコミットメッセージが記載される。
[master (root-commit) 33028c1] 欅坂ファイル作成
1 file changed, 1 insertion(+)
create mode 100644 keyakizaka.txt
コミットメッセージの必要性
なんでメッセージ書かないといけないのか。
みんなで開発する上で、各々が自由に変更してコミットしまくってたらたぶんいつか詰む。
「誰が」「いつ」「何を」「何のために」したのかという履歴を残すことが大事なんだろう…という解釈。(わかんないけど)
履歴を確認
VCSは履歴を残すことができるので、実際にどんな感じなのか見てみる。
Author:ユーザー名 <メールアドレス>
Date: Mon Jan 25 00:40:13 2021 +0900
欅坂から櫻坂に改名したため
commit f7afb71d4daa2a01a999ca9da6181d45f07725a1
Author: ユーザー名 <メールアドレス>
Date: Mon Jan 25 00:00:51 2021 +0900
欅坂ファイル作成

ファイル名を変更する
2020年、欅坂は櫻坂に改名したのでファイル名も変更したい。
mvを使うと、Gitで管理しているファイルの移動や、名前の変更ができる。
履歴を確認(オプション)
git logのあとに–graphと書くと、タイムツリーみたいになる。
※–はハイフン「-」が2つ。
※画像ではわかりにくいけど赤色の縦ラインが入っている。
| Author: ユーザー名 <メールアドレス>
| Date: Mon Jan 25 00:40:13 2021 +0900
|
| 欅坂から櫻坂に改名したため
|
* commit f7afb71d4daa2a01a999ca9da6181d45f07725a1
Author: ユーザー名 <メールアドレス>
Date: Mon Jan 25 00:00:51 2021 +0900
欅坂ファイル作成

6.参考サイト
▽ WindowsでGitを始めたらまず確認!
▽ Gitコマンド早見表
▽ 業務で本当によく使うgitコマンド(超絶基本)
7.オンライン勉強会のむずかしさ
はじめてオンラインでのハンズオンを経験しました。
対面だと「わかんないです」感出せるけど、周りの空気感わからないとわからないことを素直に「わからない」と言いにくい。
始終真顔。
たぶん一番わかってないのに、誰よりも「わかってます感」出してた。
その結果、
→ 相手も生徒の反応がわからないのでどんどん進む → 私「むりむり」 → それでも進む → ループ…
直に教えてもらえることがいかに恵まれた環境であるかを知りました。
でも環境を言い訳にせず、素直に自分の状況を伝えないと詰むということを学べました。
あと予習復習大事。