🚀 ニフティ’s Notion

2024-09-19

【Git2024 #5】座学&演習 ローカルでGitを使ってみよう

ローカルリポジトリに変更内容を記録するまで .gitignoreについて .gitignoreファイルの書き方 コメント 特定のファイルを無視 相対パスで指定されるファイル or ディレクトリを無視する .gitignore内の全サブディレクトリ下にあるこの名前のディレクトリを無視する ワイルドカード エスケープ gitignoreの注意点 Gitの初期設定 演習 ローカルリポジトリを作ってみよう ファイルを追加して、コミットしてみよう ファイル作成 ステージする コミットする ファイルを編集して、コミットしてみよう ファイルを変更してコミットする方法（解答）
この演習のゴール
Gitのリモートとローカルの概念が理解できていること
Gitの基本的なコマンドが実行できること

ローカルリポジトリに変更内容を記録するまで

image block

ローカルリポジトリ内のファイルは２つの状態に分けられる

  • 追跡されている(tracked)
    • 変更内容を保存するファイル
  • 追跡されていない(untracked)
    • 変更内容を保存してないファイル

trackedのファイル は３つの状態に分けられる

  • 変更されていない(unmodified)
  • 変更されている( modified )
  • ステージされている( staged )
image block

ローカルの中でも ワークツリー・ステージ・ローカルリポジトリ の3つに分けられている

  • ワークツリー
    • 実際に作業している場所
  • ステージ
    • ローカルリポジトリに保存したい変更を選択する 仮置き場 のようなもの
  • ローカルリポジトリ
    • 自分のマシン上にあるリポジトリ

.gitignoreについて

Gitでは基本的にリポジトリ内の全てのファイルを管理します。

一方で、開発の中ではパスワードの記述されたenvファイルなど、Git上で管理したくないファイルがあることがほとんどです。

このようなGitで管理しないファイルをGitに教えるためのファイルがgitignoreファイルです。

.gitignoreファイルの書き方
コメント 
# "#" で始まる行はコメント
特定のファイルを無視 
package.json
相対パスで指定されるファイル or ディレクトリを無視する

.gitignoreが置いてあるディレクトリがカレントディレクトリとなる 

# binファイルとbinディレクトリを無視する
/bin
# binディレクトリを無視する
/bin/
.gitignore内の全サブディレクトリ下にあるこの名前のディレクトリを無視する 
# 以下のように頭に/(スラッシュ)をつけずに記述する
bin/
  • トップにあるディレクトリだけではなく、以下のような深い層にあるディレクトリも無視される
    • /test/bin/
    • /src/bin/
ワイルドカード

gitignoreでは * と ? 、 ** 、 [] がワイルドカードとして使用できる

ワイルドカードを使用した例

  • *
    • /以外の0文字以上の文字列にマッチ 
      # 特定の拡張子を無視
*.exe
エスケープ

\ を使うことでエスケープ可能 

# ?をエスケープしている
\?*#
gitignoreの注意点

gitignoreは記載された時点でGitの追跡対象から除外されるわけではない

まだ追跡されていないファイルが指定されていれば、git add の実行時にも、追跡を開始しないようになる

つまり、一度追跡に入れてしまった場合は、追跡から外してgitignoreする必要がある

Gitの初期設定 
$ git config --global user.name "名前"
$ git config --global user.email "メールアドレス"
$ git config --global core.autocrlf input
$ git config --global init.defaultBranch main

名前とメールアドレスを入力してください

ちゃんと設定できたか確認するには次のコマンドを入力するか ~/.gitconfig を確認する 

$ git config user.name
//入力した名前が表示される
$ git config user.email
//入力したメールアドレスが表示される
$ git config core.autocrlf
//inputが表示される

演習

ローカルリポジトリを作ってみよう
  • 任意の場所にgit-emtgという名称のディレクトリを作成し、VSCodeで開く
    ⌨️
    CLI操作の場合 
    $ mkdir git-emtg
    「mkdir hoge」… hogeディレクトリを作成
    • Powershellまたはgit bashでフォルダが出来ているか確認 
      $ ls
//git-emtgがあればOK
/*
Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2024/05/09     14:03                git-emtg
*/
    • cdコマンドでgit-testディレクトリに移動
      ⌨️
      CLI操作の場合
      • git initでgitの初期化 
      $ git init
Initialized empty Git repository in /UsersPath/git-emtg/.git/
      • git bashでls -laで.gitディレクトリが作成されたことを確認 
      $ ls -la
drwxr-xr-x  1 user  1049089 0  5月  9 10:09 .git
      • 「cd g」まで入力してtabを押すとパッと出て来るはず 
      $ cd git-emtg
      • 移動した場所をVSCodeで開き直したい場合はcodeコマンド 
      $ code .
  • リポジトリの初期化
  1. 枝分かれしたマークを押して「リポジトリを初期化する」をクリック
image block
  1. 下のような画面になればOK！
    image block
ファイルを追加して、コミットしてみよう
ファイル作成
  • index.htmlを作成
    ⌨️
    CLI操作の場合
    • ファイルの作成 
    $ touch index.html
    • git statusでリポジトリの状態を確認
      • s オプションは簡易表示
      • ?? は追跡されていない(untracked)ファイルを示す 
      $ git status -s
?? index.html
  1. 📄のアイコンでファイルを作成する
    image block
  1. 作成したファイルが Untracked になっていることを確認する
    image block
  • .gitignoreというファイルを作成
    • その.gitignoreファイルの中に以下のように記述してください 
      ignore.txt
  • ignore.txtファイルを作成

    中には何かしら入力して保存してください

ステージする
image block
  • ステージとは
    • ローカルリポジトリに保存したい変更を選択すること

⌨️
CLI操作の場合
  • git add でindex.htmlをステージする 
    $ git add index.html
  • git statusでリポジトリの状態を確認
    • A はステージング環境に追加された(staged)ファイルを示す 
    $ git status -s
A index.html
  1. 「＋」ボタンで全てのファイル(.gitignore, ignore.txt, index.txt)をステージしようとする
    • 未追跡のファイルが表示されているのでカーソルを重ねると出る「＋」マークをクリック
    ✔️
    ここの一覧に.gitignoreで指定したignore.txtファイルが表示されず、ステージできないことを確認
    image block
✔️
「 A 」になっていることを確認
image block
AddedのA

コミットする
image block
  • コミットとは
    • 変更内容をリポジトリに記録し保存すること
    • Gitは差分のみを記録するのではなく、 リポジトリ全体のスナップショット をコミットとして記録する

⌨️
CLI操作の場合
  • git commit でコミットを行う
    • 変更内容などを記述する 
    $ git commit -m "first commit"
  • git statusでリポジトリの状態を確認 
    $ git status
On branch main
nothing to commit, working tree clean
  1. コミットメッセージを書いてチェックをクリックしてコミット
    image block
✔️
「 U 」が消えていることを確認
image block

🤔
何書くの？の例
  • こういう変更をしたよ
    • ex ) 削除機能の追加
  • 自分がやってるタスクの名前
    • 何のタスクのための削除機能なのか、わかりやすくなる
  • issueのチケット番号
    • GitHubだと自動で紐付けをしてくれたりする
コミットメッセージのPrefixについて

コミットメッセージにはprefixをつけて明示的にどのような変更を行ったコミットなのか示す方法があります。

📝
prefixを使ったコミットメッセージ例

・fix: ○○データ参照箇所の修正を行いました
・delete: 機能削除に伴いファイルの削除を行いました。

prefixの方法はさまざまありますが、以下は一例です。

fix バグ修正
feat 新規機能・新規ファイル追加
refactor リファクタリング
delete ファイル削除、コードの一部を取り除く
docs ドキュメントのみ修正
test テスト追加や間違っていたテストの修正
chore ビルドツールやライブラリで自動生成されたものをコミットするときなど

その他にも色々種類があります

update バグではない機能修正
change 仕様変更による機能修正
rename ファイル名の変更
move ファイル移動
upgrade バージョンアップ
revert 修正取り消し
style 空白、セミコロン、行、コーディングフォーマットなどの修正
perf 性能向上する修正perf は perfomance の略
なぜprefixをつけるのか

commitメッセージがどのような変更内容なのかといったものをチームメンバーにわかるようにするためです。

またこうすることでpull requestを出した際にもどのcommitで何をしたのかわかりやすくなります。

こうすることでコミットをrevert(戻す)作業をする時にも、どのcommitまで戻せば良いかなどがわかりやすくなります

ファイルを編集して、コミットしてみよう
  • index.htmlを変更する 
    <!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>hoge</title>
</head>
<body>

</body>
</html>
  • VSCodeの場合保存すると「 M 」が付く
    • これを先ほどと同じようにコミットしてみよう
image block
ファイルを変更してコミットする方法（解答）
⌨️
CLI操作の場合
  • リポジトリの状態を確認して、コミットしよう
  • git status でリポジトリの状態を確認
    • M は追跡されているファイルで編集されたこと(modified)を示す 
$ git status -s
M index.txt
  • git add でステージング環境に追加 
$ git add index.txt
  • git commit でコミット 
$ git commit -m "index.htmlを修正"
  • git status でリポジトリの状態を確認 
$ git status
On branch main
nothing to commit, working tree clean
  • git log で今までコミット履歴を見れる
    • 上に表示されているものほど新しいコミット

    ※コミットハッシュはランダムに生成したもの 

$ git log
commit 34s9i2j6tewwty6kyqvdv64ih4dicrnec4edaqrp (HEAD -> main)
Author: example_account <example@example.com>
Date:   Thu May 9 19:37:56 2024 +0900

    空行を追加

commit ebanz67tsvvnthuv6v2jfg8ibj6r4qzgkukrjpjh
Author: example_account <example@example.com>
Date:   Thu May 9 19:08:24 2024 +0900

    test commit

commit 68mm32aktmzrb6dqxm6979r7nf5pvuqvuvwrr39t (origin/main, origin/HEAD)
Author: example_account <589927532+example@users.noreply.github.com>
Date:   Wed Dec 13 09:27:54 2023 +0900

    Initial commit
  1. index.htmlの＋でステージする
    image block
  2. メッセージを入力してコミットする
    image block

エンジニア定例 Git回 2024