GitとGitHubの変な使い方

GitとGitHubの変な使い方

チーム開発やバージョン管理なんてことが無縁

でもGitとGitHubは便利です

1年前はローカルリポジトリとリモートリポジトリの区別もつかない

また英語〜!!、

なんか怖いし〜 

ややこしそう〜 

チーム開発とか関係なければ、GitHubは関係ないものと思っていました

目次
  1. GitHub活用方法
    1. フォルダはGitHubで管理する
    2. テンプレートになるフォルダ置場
    3. Netlifyとの連携
    4. 究極の取り消し手段
    5. コミット履歴一覧を確認
  2. 注意点
  3. コマンドと用語の備忘録
    1. ローカル
    2. Branch
    3. Merge
    4. コンフリクト(衝突)した場合
    5. 取り消し
    6. Revert
    7. Rebase
    8. GitHub
      1. パソコン(ローカル)から GitHub(クラウド)
      2. GitHub(クラウド)から パソコン(ローカル)
      3. その他
  4. .gitignore

GitHub活用方法

  • フォルダの保管場所
  • 本番環境の確認に使う
  • 究極の取り消し手段(clone)
  • 右上のcommitでコミット履歴一覧を確認(過去の状態を丸ごとダウンロードしたり、1つ前のコミットの差分の確認ができる)

1人作業なのでほぼ出来上がってからGitHubにPushしています

この時点で、もう普通の使い方ではない気がしますw

作業中はローカルのmainしか使いません

たまにBranchを作るとmainかbranchどちらで作業しているかをめちゃくちゃ意識してしまいます

フォルダはGitHubで管理する

フォルダの保管場所として利用

GitHubにアップロードしたフォルダは、私のメモリとストレージに余裕がないMac😂 から削除している

ネットが繋がっていればコードはGitHubのリポジトリで確認できる(手元のパソコンでエディタ開いて確認するよりお手軽)

必要になればGitHubからPCにダウンロードする(Googleフォトと同じ感覚)

テンプレートになるフォルダ置場

テンプレートになるフォルダをGitHubにアップロードする

GitHubを使う予定がなければテンプレートをダウンロードして使う

*cloneするときは要注意
テンプレートをダウンロードするときは、ディレクトリを置きたい場所で

git clone コピーしたurl ディレクトリ名
cd ディレクトリ
# git remote -v リモートが同じなのを確認してみる
#変更する
git remote rename origin 名前
# 新いレポジトリを作つてから
git remote add origin url
# 最初のpushは
git push -u origin main

Netlifyとの連携

静的なサイトならNetlifyにデプロイして本番環境の確認をする

変更はpushするだけで完了し、FTPでレンタルサーバーに上げるよりも簡単

究極の取り消し手段

本番環境にアップロードしている状態に戻したい時、GitHubからcloneしてローカルのフォルダと入れ替える 😅

コミット履歴一覧を確認

一覧の右側「<>」ボタンをクリックすると、コミットした直後の時点での状態を再現して参照できます

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

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

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

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

最新の状態に戻す

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

注意点

commitはまめに、わかりやすいコメントにしよう

操作を間違えていてもターミナルが真っ赤にならず英語なのでわかりにくい為、残したつもりが間違えていて、迷走した経験あり

たまにbranchを作るとbranchで操作しているつもりが注意不足でmainだった(そしてコンフリクト)

コマンドと用語の備忘録

めちゃくちゃ雑な備忘録

  • ローカルがパソコン 
  • リモートがGitHub
  • インデックスは登録する一時的な場所(Gitで管理したいファイルを登録する)
  • リポジトリはデータなどを保存しておく場所
  • コンフリクトは競合(同じ場所で異なる操作をしている)

ローカル

# 最初の一回だけ(フォルダをリポジトリに変換 .gitができる)
git init  

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

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

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

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

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

# commitの履歴
git log

Branch

main(本筋)を変更しないで機能を追加したり、お試しするために作る枝

# 現在のbranch確認
git branch

# branch作成
git branch 名前 派生もとのブランチ名(main以外の時)

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

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

# branch 削除
git branch -d 名前

# branch の一覧
git branch

Merge

branchをmainに取り込む(統合)

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

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

# mainを開発ブランチに取り込み (コンフリクト防止)
git merge main

コンフリクト(衝突)した場合

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

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

# おまけ  vi 編集

vi ファイル名

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

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

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

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

取り消し

# 例
git reset -- soft HEAD^

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

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

# HEAD(commit)だけ戻す  
 --soft      

# 3つ前 は HEAD^^^ 
# 又は HEAD 〜3 
# 又は @^^^ 

Revert

コミットを取り消す新たなコミットを追加する

ちなみにpushのあとでも使える(resetはpushの後は使えない)

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

Rebase

branchと並行してmainも変更されていたらコンフリクト(衝突)する場合があるが、

branchにmainを取り込み、

テストして問題がなくなれば、

mainにbranchを取り込む

その時にbranchを付け替えて履歴を整える

branchの枝分かれしたところを、整えた後、mainにmergeしたところに持ってきて、その後にbranchをcommitして履歴を変更する

git rebase

GitHub

リモートリポジトリにはプライベート(自分だけ)とパブリック(誰でも見れる)がある

リモートリポジトリの削除はsetting の一番下、Danger Zoneから削除する

パソコン(ローカル)から GitHub(クラウド)

# 最初だけ
git remote add origin URL

# -u origin mainも最初だけ  2回目以降は git push
git push -u origin main

# ブランチをリモートに登録
git push -u origin 名前

GitHub(クラウド)から パソコン(ローカル)

Zipフォルダをダウンロードすることもできる

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

# 他の人がGitHubを更新したものを自分のPCに 
# pull は Fetch + Mergeのこと
git pull 

# fetch はMergeなし 
git fetch

# チーム開発 GitHub Flowの流れ 
git pull (mainに)
git switch -c ブランチ名 (作業ブランチ作る)
git add .
git commit -m'hogehoge'
git push origin ブランチ名 (リモートにブランチを作りpush)
# GitHubでmainにマージ
# pullrequest作成
# pullrequest確認
# pullrequestのマージ

git switch main (ローカルのmainにリモートの変更を反映)
git pull
git branch -d 削除するブランチ名

その他

他の人のGitHub(クラウド)を 自分のGitHub(クラウド)にコピーする(右上にあるFork)

コピーしてきたリポジトリを変更して他の人のGitHub(クラウド)オリジンにPullを要請する
(左上にあるpull request

.gitignore

ローカルからリモートにpushする前に .gitignoreファイル(リモートにpushしないファイルを指定)を作る 

ほぼ下記のパターン(nodeモジュールとバンドル後のフォルダはリモートに上げない)

node_modules
dist

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