ひとりぼっちのGitHub（GitHubは便利です😀）

チーム開発やバージョン管理なんてことが無縁なので💦
「GitHubはあまり使わないのかな〜」と思っていましたが…そんなことはなくGitHubは便利です

目次

1. GitとGitHub
2. ローカルリポジトリ
   1. ローカルリポジトリ作成と基本の操作
   2. 取り消しについて
   3. Branch
3. プロジェクトフォルダはGitHubで管理する
   1. GitHubへアップロード
   2. .gitignoreファイル
   3. GitHubからダウンロード
   4. GitHubコミット履歴一覧
4. 検索

GitとGitHub

Gitって何？

Gitは、ファイルの変更履歴を記録し、過去の状態に戻したり、複数の変更を管理できる 「バージョン管理システム」 です
たとえば、間違えてファイルを編集してしまったとき、Gitを使えば 「あの時の状態に戻したい！」 が簡単にできます

GitHubって何？

リポジトリって？

Gitを使うと、ファイルの変更履歴を 「リポジトリ」 という場所に保存します
このリポジトリには2種類あります

• ローカルリポジトリ（自分のPC内にあるリポジトリ）
  ローカルリポジトリは 「自分のPC内だけで履歴を管理する場所」
• リモートリポジトリ（GitHubなどのオンライン上にあるリポジトリ）
  PCが壊れたり、データを消してしまったら復元できない💦
  そこで、GitHubのリモートリポジトリに保存すれば、安全に管理できます

ローカルリポジトリ

今のところ、ほぼ出来上がってからローカルリポジトリを作って、GitHub（リモートリポジトリ）に push する流れになっています😅

ローカルリポジトリ作成と基本の操作

ローカルリポジトリ（PC上）
インデックス：ローカルリポジトリにファイル変更点を保存
コミット：リポジトリにファイルを保存
「.gitフォルダ」：Gitに必要なファイルは全てこの中に含まれます

# 最初の一回だけ（ローカルリポジトリを作成　.gitフォルダが作成されます）
git init  

#　インデックスに追加　 .は全てのファイルのこと
git add .

#  commit　変更内容を記録する
git commit -m'コメント'

＊もしプロジェクトからGitを消してしまいたい時は、「.gitフォルダ」（隠しフォルダです）を削除します😅
.gitフォルダを削除することで、そのディレクトリからGitの履歴や設定がすべて除去され、単なる通常のフォルダになります

rm：remove（削除）の略で、ファイルやディレクトリを削除するコマンドです。
-r：recursive（再帰的）の略で、ディレクトリとそのサブディレクトリを削除するオプションです。
-f：force（強制）の略で、警告や確認を求められることなく削除を行うオプションです。

rm -rf .git

その他、ときどき使うコマンド

# ステージから戻す
git restore --staged ファイル名

# 差分の確認(addでステージにあげる前との差分)
git diff

# リポジトリの現在の状態
git status
git status --short

# commitの履歴
git log

取り消しについて

Reset 取り消し（3種類）

# 例
git reset -- soft HEAD^

# オプション
# 全て戻す　
　--hard　 

# HEAD（commit)とindex(add)を戻す　　　    
 --mixed  

# HEAD（commit)だけ戻す  
 --soft      
# ３つ前 は　HEAD^^^ 
# 又は　HEAD　〜３ 
# 又は　@^^^ 

Revert
コミットを取り消す新たなコミットを追加する
ちなみにpushのあとでも使える（resetはpushの後は使えない）

# --no-editはviエディター立ち上がらないオプション
git revert commitのID --no-edit

Branch

大幅な変更を試したい時はBranchを作ります

Branchは複製を作ってその複製で作業するイメージです

#　現在のbranch確認
git branch

#　branch作成
git branch 名前

# branchのbranchを作成
git branch 名前 派生もとのブランチ名

#　branchの切り替え (checkoutでもよい)
git switch 名前

# 切り替えと作成を同時に
git switch -c 名前

#　branch 削除
git branch -d 名前

#　branch の一覧
git branch

Merge
1：branchをmain（元ファイル）に統合したい時
2：最新のmainの更新内容をbranchに反映したい時

# 注意　mainに切り替えてから　
git switch main
git merge 取り込むbranch名

# 取り込んだbranch削除
git branch -d 名前

# 最新のmainの更新内容を開発用ブランチに反映したい時 (コンフリクト防止)
git merge main

たまに「branch」をきると「branch」で操作しているつもりが「main」で操作していて
コンフリクト（衝突）したりします^^;

コンフリクトは通常は異なるブランチで同じ行を編集している場合に起こるのでしょうが…

mergeするときにコンフリクト（衝突）した場合

# マージしない(とりあえず前の状態に戻す)
git merge --abort

# 変更内容を取り込んで解決
vi ファイル名　（編集する）
<<<<<<< HEAD
hoge (元々の状態)
=======
hogehoge　（mergeしようとした内容）
>>>>>>>

# おまけ  vi 編集

vi ファイル名

i 現在のカーソル位置から挿入。

Esc :w :ファイルを保存する。viは終了しない

Esc :q! ：セーブせずに終了

Esc :wq :ファイルを保存しviを終了する

Rebase：コミット履歴の取り込み（mainの内容を取り込む）
mainに統合する場合「直接マージする方法」以外に「リベース後マージ」することがあります
コミットの履歴を直線にして綺麗にします（mainのコミットの前にブランチのコミット付け足します）

# ブランチで
git rebase main
# mainに切り替えて
git switch main
git merge 取り込むbranch名
# branch 削除
git branch -d branch名

mainで作業した場合（ブランチよりもmainのコミットが先に進んでいた場合）mainの作業をブランチに持ってきて、その先にブランチをくっつけることができます

# ブランチで
git rebase main

＊プッシュしたコミットはリベースしてはいけない

プロジェクトフォルダはGitHubで管理する

GitHubをプロジェクトフォルダの保管場所にしています
必要になればGitHubからPCにダウンロードします

• GitHubにアップロードしたプロジェクトフォルダは、ストレージに余裕がないPC😂 から削除しています
• 「以前のコードを確認したいとき」もGitHubのリポジトリで確認したほうが手元のパソコンでエディタ開くよりお手軽です
  何より、自分のリポジトリ内を検索できるのですぐにコードを発見できます

GitHubへアップロード

パソコン（ローカルリポジトリ）から　GitHub（リモートリポジトリ）へ

GitHubでリポジトリを作成します
＊リモートリポジトリにはプライベート（自分だけ）とパブリック（誰でも見れる）があります

git init  
git add .
git commit -m'コメント'
# -mまたは-Mオプション<oldbranch>の名前が<newbranch>に変更されます
# <newbranch>が存在する場合「-M」を使用して名前の変更を強制する必要があります
git branch -M main
git remote add origin https://github.com/.....git
git push -u origin main

2回目以降

git add .
git commit -m'コメント'
git push

ローカルでブランチを作成してそのブランチをリモートに登録する場合

git push -u origin ブランチ名
# 1度登録した後はpushだけ
git push                      

リモートリポジトリの削除

settings →Danger Zone（一番下にある）→Delete this repositoryから削除する

リモートリポジトリからフォルダやファイルを削除して、ローカルの作業ディレクトリには残す
＊distディレクトリを削除する例
＊–cachedオプションは、Gitのgit rmコマンドで使用される場合、指定したファイルやディレクトリをインデックス（ステージングエリア）から削除するが、作業ディレクトリにはそのまま保持するという意味になります

git rm -r --cached dist/

.gitignoreファイル

必要に応じてローカルからリモートにpushする前に「.gitignoreファイル」を作ります
「.gitignoreファイル」はリモートリポジトリにはアップロードしないファイルを指定します

nodeモジュールとバンドル後のフォルダはリモートに上げないパターンが多いかと思います
＊その他パブリックリポジトリの場合の「.envファイル」など

node_modules
dist

「gitignore.io 」という生成サービスがある（さまざまな環境に応じた .gitignore を生成できます）

gitignore.io

GitHubからダウンロード

クローンとZipフォルダをダウンロードの違い

クローンはリポジトリの完全なコピーを作成し、Gitの全機能を利用できるようにします
Zipフォルダのダウンロードはリポジトリの特定の状態のファイルを単にダウンロードするだけなので過去のコミット履歴やブランチは含まれません

GitHub（リモートリポジトリ）からパソコン（ローカルリポジトリ）クローンする
右上CodeをクリックしてURLをコピー（HTTPSで）

# 全てのファイルを
git clone URL

# fetchはリモートリポジトリに、更新がないかの確認(Mergeなし)　
git fetch

# 他の人がGitHubを更新したもや自分のPCないものだけ 
# pull は　Fetch ＋　Mergeのこと
git pull 

注意
「新しいプロジェクトを作るとき、雛形として保管しているフォルダをcloneして使っています」
ただし、既存のリポジトリのコードをベースにして新しいプロジェクトを開始し、
新しいリモートリポジトリ で作業を進める場合、そのままではcloneした元のリポジトリとつながっています
そこで、
リモートの名前（デフォルトは origin）を変更 し、
新しいリモートリポジトリを作成して、そちらにpushします
こうすることで、元のリポジトリとは切り離された、新しい独立したプロジェクトとして管理できます

git clone コピーしたurl ディレクトリ名
cd ディレクトリ
# git remote -v 名前に対応するURLが表示されます
#変更する
git remote rename origin 名前
# 新しいプロジェクトのレポジトリを作ってから
git remote add origin https://github.com/.....git
# 最初のpushは
git push -u origin main

「Zipフォルダをダウンロード」
リポジトリの特定の状態のファイルを単にダウンロードするだけで、Gitの機能は利用できませんが、新しいGitリポジトリとして管理するならダウンロードするのが簡単

コピーしてきたリポジトリを変更して他の人のGitHub（リモートリポジトリ）オリジンにPullを要請する
（左上にあるpull request）

# チーム開発する時の流れってこんな感じ？
git pull (mainに)
git switch -c ブランチ名　（作業ブランチ作る）
git add .
git commit -m'hogehoge'
git push origin ブランチ名　（リモートにブランチを作りpush）
 # GitHubでmainにマージ
 # pullrequest作成
 # pullrequest確認
 # pullrequestのマージ
#ローカルのmainにリモートの変更を反映
git switch main
git pull
git branch -d 削除するブランチ名

Fork
他の人のGitHub（リモートリポジトリ）を　自分のGitHub（リモートリポジトリ）にコピーする

右上にあるFork→左上自分のGitHubアカウント名をクリックします

Forkはオリジナルのリポジトリの所有者にforkしたことが通知されます
リポジトリ内のブランチも複製します
リポジトリを自由に変更できます
オリジナルリポジトリで変更された内容を同期して取り込むことも可能です

GitHubコミット履歴一覧

左上「<>Code」ボタン→右上commits（時計マーク）
右側の「<>」で選択したコミット時点での状態を再現して参照できます

過去のコミット直後の時点でのプロジェクトの状態を丸ごとダウンロードする

「Code」ボタンをクリックして表示されるメニューの中から「Download ZIP」をクリックするとプロジェクトファイルのダウンロードができます

コミット履歴の差分を確認する

コミットメッセージはリンクになっているのでクリックすると、1つ前のコミットとの差分が表示されます

最新の状態に戻す

ブランチ選択ボタン（左上）を押して「master（main）」をクリックすると最新のものに戻ります

検索

Search

GitHubのリポジトリから任意のキーワードだけでなく、正規表現でも検索できるサイト

grep.app

コードに「 .*」（ワイルドカード）を含める場合
Regular expressionにチェックをつけます
面倒ですが正規表現で検索する時はメタ文字と同じ文字「. * [] {} () + ¥ ^ $」がコードに含まれている場合はメタ文字と同じ文字の前に「\（エスケープ）」をつけて区別する必要があります