未経験からwebデザイナーになった私が、ステップアップするためのTIPSを紹介
webデザイン

実務で使えるgitの流れ(clone→PRの作成まで)

gitとgithubがわからない方へ

gitとgithubの違いも分からず、ディレクトリもわからないままにgithubからclone、push、プルリク作成→レビューとやって本当に困ったわたしです。
いろんな記事や動画を見てなんとかフワッと理解できて一通りできるようになったので、自分のために忘れないようにメモ的な意味でここに残しておきます。

※gitの細かい使い方やリポジトリってなんだ?みたいなことはここでは割愛します。とにかく実務でgithubのリポジトリを共有されて困ってる人向け。

既にgitで管理されているコードをcloneする場合の手順です。

新規でプロジェクトを立ち上げるときは作成したフォルダをgit initしてgitで管理できるようにしましょう〜

↑このことをずっと知らなくて私は既存のコードをcloneする前にもフォルダをgit initしてハマりました。苦い思い出です…

ローカルにディレクトリを作成する

ローカル=自分のPCです。
githubに公開されているリモートリポジトリをローカルにコピーしてくるためにフォルダを用意しましよう。

そしてbushかターミナルを開いて(私はvscodeで作成したフォルダを開いて新しいターミナルを実行でやってしまいます。)

git clone<githubのURL>でcloneする

共有されたリポジトリ内のcodeからリンクをコピーして、ターミナルでgit clone <コピーしたリンク>を実行。これでgithub上に公開されたコードをローカルに落とせる。

開発用にブランチを切る

cloneしたコードは基本的に本番として実際にweb上に公開されているものと全く同じ最新版のソースコード(master)か、本番と同じ内容だけど開発用のブランチ(dev,stg)であることがほとんど。
自分がそこに新たに修正を加えたい場合は、新しくブランチを作ってcommit、github上にpushして、自分が行った修正を本番に取り込んでも問題ないか動画をレビューしてもらってOKが出たら初めて本番化(merge)されます。
なのでとりあえずcloneしてきたらブランチを作成しましょう。
ブランチ名は任意ですがチーム内でルールがある場合はそれに従いましょう。

ターミナルから、cloneしたフォルダにディレクトリを移動して、

git checkout -b <作成するブランチ名>

と入力して実行します。
これによりブランチの作成+ブランチの移動を同時に行ってくれます。

リモートブランチとローカルブランチ

ブランチにもリモートとローカルという考え方があるのが分からなくてここでもハマったのでメモ。さっき作成した時点ではローカル上でブランチを作成しただけでgithub上には情報が行きません。git push origin <作成したブランチ名>で初めてリモートブランチとしてリモートに情報が伝わります。

ブランチの一覧を見たいときはgit branch、リモート上のブランチ一覧も確認したいときはgit branch -aで確認できます。

作成したブランチ上でソースコードの修正をする

vscodeの場合は画面の右下に現在のブランチが表示されます。
作成したブランチ名になっていることを確認して、開発をします。
ある程度変更が進んだらcommitしていきましょう。
commit=ゲームでいうセーブみたいな感じです。commitの手順は以下。

  1. git statusで追加したファイル、変更したファイルを確認する
  2. git add (ファイル名)で該当ファイルをcommit対象にする
  3. git commit -m “変更内容”でコミット

ここでの注意点は、必ずgit statusでファイルを確認することと、git add .は無闇に使わないことです。git add .は変更されたファイルを一括でaddしてくれるので便利なようで、addする必要のないファイルまでaddしてしまってソースレビューしてくれる人に迷惑をかけてしまう可能性があります。

あとはgit commitだけだとvimが開いて操作にテンパるので、-mをつけて一気にコメントまで書いた方が簡単で良しです。

commitメッセージはチーム内で決まりがある場合はそれに準じますが基本的には変更内容がわかるような簡潔なメッセージにしましょう。

githubにpushする

commitまでできたらいよいよpushです。
自分の開発した内容をgithub上に送信して他の人にチェックしてもらいましょう。

git push origin (作成したブランチ名)

originはリモートという認識でとりあえずOKです。

PR(PullRequest)を作成

pushがうまくできていれば、github上に自分のブランチ名とcommitの情報が反映されています。この時点では本番のブランチとは別れた状態なので、自分のcommitをチェックしてもらいましょう!

githubのPull Requestのタブから、プルリクを作成します。まだ修正途中でレビューはしてほしくない、でも開発の進捗をチーム内でも見られるようにしたい場合はdoraftを立ててプルリクを作成しましょう。(PR作成ボタンを押すと選べる)

追加で修正が必要な場合は修正→commit→push

レビューしてもらってさらに修正が必要な場合はまた自分のローカル上で修正をしましょう。そして先ほどと同じようにadd、commit、pushをします。作成したプルリクの中にcommitが追加されます。

最後はmergeして本番に取り込まれる

mergeは開発した人がやるのかチーム内の決まった人が実施するのかまちまちですが、プルリクで修正がなくなったら本番環境に自分のブランチの内容が取り込まれます。
ここまでで一応作業はひと段落です!

作成したブランチは削除し、masterかdevの内容を更新する

ブランチはmergeまでしたら削除することが一般的。リモートブランチを削除したら、ローカルのブランチも削除しましょう。

git checkout master(dev)

でブランチを移動します。

git branch -d (作成したブランチ名)

これでブランチが削除されます。
次に、リモートの最新の情報をローカルにも反映しておきます。

git pull origin master(dev)

これで最新の状態がローカルにも反映されました。
かなりサクサクっと要点だけ書いたので???な方も多いかもしれません。
gitの便利さがずっと分からず使わずに来た私ですが、今回gitについて調べて調べて少し使えるようになって便利さがわかりました!

まだまだ知らないことがたくさんあるので、どんどん試していって理解を深めたいです。