Git

【Git】社内新人向けGit勉強会で詰んだ【簡単なコマンド】【超初心者向け】

フロントエンドエンジニアの正社員として入社して2か月弱経ちました。
まだまだぽんこつ。

先日、社内新人向けオンラインGit勉強会を開いてもらったのに序盤で詰んだ。

翌日復習したので自分用メモ。

※Windows用。Macのやり方は知らない



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.name “yuki”
$ git config –global user.email “yuki@mail.com”


注意点
ついCtrl+CやCtrl+Vでコピペしてたけど、コマンド上では無効。

↓ これでコピペできる

コピー : Ctrl + Ins

ペースト(貼り付け) : Shift + Ins




5.コマンド


ホームディレクトリの確認

現在ユーザーがいるホームディレクトリを確認する

$ echo ~

/c/Users/******




移動コマンド

今回はドキュメントの中に作業ディレクトリ(作業用フォルダ)を作り、そこでGitの使い方の練習をしていく。

/c/Users/******/Documents
=エクスプローラーの「PC > ドキュメント」に移動する必要がある。

$ cd 移動したい場所
$ cd ~/Documents

上のようにコマンドで移動するか、ドラッグアンドドロップで移動できる。

~はホームディレクトリを指すので、「~/Documents」は「/c/Users/******/Documents」と同じ意味。


idol-plus | Webデザイン・職業訓練校・プログラミングまとめブログ (画像を拡大:https://idol-plus.net/wp-content/uploads/2021/01/git-01.jpg/




作業ディレクトリとリポジトリの作成

ドキュメントに移動したあと「workspace」という新たな作業ディレクトリを作成。(名前はなんでもいい)
※mkdir = make directoryという意味。

$ mkdir workspace



次に、ドキュメントから「workspace」ディレクトリへの移動。
★今自分がどこにいるのか把握することが大事

$ cd workspace



さらにgit init で作成した作業ディレクトリに対応するリポジトリ(作業履歴を管理する場所)を作成することができる。

$ git init


これで作業ディレクトリとリポジトリが完成。



idol-plus | Webデザイン・職業訓練校・プログラミングまとめブログ (画像を拡大:https://idol-plus.net/wp-content/uploads/2021/01/git-02.jpg




ファイル一覧を確認する

作成したリポジトリがどこにあるのか確認。


workspaceにいる状態で「ls -a」を入力する。
※lsと-aの間に半角スペースがないと「command not found」と出てくるので注意

$ ls -a



これが出てくる。
「.git」というディレクトリが存在していることがわかる。

. .. .git


意味

  • ls:そのディレクトリ内にあるファイル一覧を確認する
  • -a :特殊なファイルも全て表示する
  • .git:,gitというディレクトリが、リポジトリの正体。
  •   




隠しファイル

エクスプローラーを開いて確認すると、「.git」のものがない。
隠しフォルダである「.git」が作成されたため、見えないようになっているため。

大事なものをうっかり消したり変更したりしないように隠している。





空のファイルを作成

メモ帳からテキストを新規保存…みたいなのをコマンド入力で実行。

「workspace」ディレクトリ内にいる状態で、touch ****を使い、空のテキストファイル「keyakizaka.txt」を作成。

$ touch keyakizaka.txt




現在の状態を確認

gitで対象となっているファイルのステータスを確認するため「git status」を入力。

Untracked files:・・・と書かれてて、変更内容(新しいテキストファイルを作ったこと)ステージされていない状態であることがわかる。

$ git status

On branch master

No commits yet

Untracked files:
(use “git add …” to include in what will be committed)
keyakizaka.txt




ステージング

今の状態→ keyakizaka.txtが新規作成され、変更が加えられた状態。

この変更内容をインデックスに追加してコミット対象にする「ステージング」という作業が必要。

$ git add keyakizaka.txt




もう一度現在の状態を確認

再度「git status」を入力。
変更内容がステージされている状態。


On branch master

No commits yet

Changes to be committed:
(use “git rm –cached …” to unstage)
new file: keyakizaka.txt




コミットする

いよいよコミット。

$ git commit

hint: Waiting for your editor to close the file…
[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%)




idol-plus | Webデザイン・職業訓練校・プログラミングまとめブログ (画像を拡大:https://idol-plus.net/wp-content/uploads/2021/01/git-03.jpg



コミットメッセージの入力

git commitするとエディタが起動。


idol-plus | Webデザイン・職業訓練校・プログラミングまとめブログ (画像を拡大:https://idol-plus.net/wp-content/uploads/2021/01/git-04.jpg


私はインストール時に設定したVS Codeが立ち上がる。
(Macの人は vi というターミナル内で動くエディタが起動するらしい)


↓ エディタ内はこんな感じで英語でいろいろ書いてる。

# Please enter the commit message for your changes. Lines starting
# with ‘#’ will be ignored, and an empty message aborts the commit.
# On branch master
#
# Initial commit
#
# Changes to be committed:
# (use “git rm –cached …” to unstage)
#
# new file: keyakizaka.txt
#

#の後に書いたものはコメントアウトのような形になり無視されるので、#のあとにメッセージを書いても残らない。


一番下の#を消して、「欅坂ファイル作成」みたいなメッセージを残しとく。

idol-plus | Webデザイン・職業訓練校・プログラミングまとめブログ (画像を拡大:https://idol-plus.net/wp-content/uploads/2021/01/git-05.jpg



▽ コミットメッセージを書いたあとのGit Bashの表示。
エディターで書いたコミットメッセージが記載される。

$ git commit
[master (root-commit) 33028c1] 欅坂ファイル作成
1 file changed, 1 insertion(+)
create mode 100644 keyakizaka.txt




コミットメッセージの必要性

なんでメッセージ書かないといけないのか。

みんなで開発する上で、各々が自由に変更してコミットしまくってたらたぶんいつか詰む。
「誰が」「いつ」「何を」「何のために」したのかという履歴を残すことが大事なんだろう…という解釈。(わかんないけど)





履歴を確認

VCSは履歴を残すことができるので、実際にどんな感じなのか見てみる。

$ git log

commit 5b9a899f5fd02074f5917ba92a2fd18b94574732 (HEAD -> master)
Author:ユーザー名 <メールアドレス>
Date: Mon Jan 25 00:40:13 2021 +0900

欅坂から櫻坂に改名したため

commit f7afb71d4daa2a01a999ca9da6181d45f07725a1
Author: ユーザー名 <メールアドレス>
Date: Mon Jan 25 00:00:51 2021 +0900

欅坂ファイル作成




idol-plus | Webデザイン・職業訓練校・プログラミングまとめブログ (画像を拡大:https://idol-plus.net/wp-content/uploads/2021/01/git-06.jpg




ファイル名を変更する

2020年、欅坂は櫻坂に改名したのでファイル名も変更したい。

mvを使うと、Gitで管理しているファイルの移動や、名前の変更ができる。

$ git mv keyakizaka.txt sakurazaka.txt





履歴を確認(オプション)

git logのあとに–graphと書くと、タイムツリーみたいになる。

※–はハイフン「-」が2つ。
※画像ではわかりにくいけど赤色の縦ラインが入っている。

$ git log –graph

* commit 5b9a899f5fd02074f5917ba92a2fd18b94574732 (HEAD -> master)
| Author: ユーザー名 <メールアドレス>
| Date: Mon Jan 25 00:40:13 2021 +0900
|
| 欅坂から櫻坂に改名したため
|
* commit f7afb71d4daa2a01a999ca9da6181d45f07725a1
Author: ユーザー名 <メールアドレス>
Date: Mon Jan 25 00:00:51 2021 +0900

欅坂ファイル作成




idol-plus | Webデザイン・職業訓練校・プログラミングまとめブログ (画像を拡大:https://idol-plus.net/wp-content/uploads/2021/01/git-07.jpg




6.参考サイト


▽ WindowsでGitを始めたらまず確認!



▽ Gitコマンド早見表



▽ 業務で本当によく使うgitコマンド(超絶基本)





7.オンライン勉強会のむずかしさ


はじめてオンラインでのハンズオンを経験しました。

対面だと「わかんないです」感出せるけど、周りの空気感わからないとわからないことを素直に「わからない」と言いにくい。

始終真顔。

たぶん一番わかってないのに、誰よりも「わかってます感」出してた。

その結果、
→ 相手も生徒の反応がわからないのでどんどん進む → 私「むりむり」 → それでも進む → ループ…



直に教えてもらえることがいかに恵まれた環境であるかを知りました。

でも環境を言い訳にせず、素直に自分の状況を伝えないと詰むということを学べました。
あと予習復習大事。