GitとGitHubの変な使い方

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

でもGitとGitHubは便利だった

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

また英語〜!!、

なんか怖いし〜 

ややこしそう〜 

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

いやいや便利
目次
  1. GitHub活用方法
  2. 取り消しを元に戻すことができ(それをまた取り消しができる)
  3. フォルダはGitHubで管理する
  4. Netlifyとの連携
  5. 究極の取り消し手段
  6. 注意点
  7. コマンドと用語の備忘録
    1. ローカル
    2. Branch
    3. Merge
    4. コンフリクト(衝突)した場合
    5. 取り消し
    6. Revert
    7. Rebase
    8. GitHub
      1. パソコン(ローカル)から GitHub(クラウド)
      2. GitHub(クラウド)から パソコン(ローカル)
      3. その他

GitHub活用方法

  • 取り消しをやり直したい時
  • フォルダの保管場所
  • 本番環境の確認作業を簡略化する
  • 究極の取り消し手段(clone)

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

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

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

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

取り消しを元に戻すことができ(それをまた取り消しができる)

取り消した作業が新しいcommitになるrevert

Command+Zで戻るのとは違う

Command+Zは一度エディタを閉じるともう戻れないので、なかなかエディタが閉じれなかった

Command+Zは取り消しを取り消すことはできないので残したいコードはメモとしてコピペで保存していた

Gitはcommitにコメントをつける手間はかかるけど、確実に変更できる

フォルダはGitHubで管理する

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

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

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

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

Netlifyとの連携

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

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

究極の取り消し手段

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

注意点

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

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

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

node_modules
dist