Suffix Official Blogサフィックス公式ブログ

Scroll

Gitを使いこなしたい

Creative Member

WebチームのNです。
最近Gitの扱いに慣れてきて、作業を効率化できるようになってきました。
1人で作業する時も便利なのですが、やはりチームで連携する時が一番恩恵を受けられます。
ただ、適当に使ってるとかえって足枷になってしまうので、
Gitの扱いで意識していることを、1人の場合とチームの場合で整理してみます。


ブランチ戦略

Gitにはブランチ戦略という考え方があり、最もメジャーなのがGitHub Flowを採用しています。
GitHub Flowは、リリース用と作業用の2種類のブランチで運用する方式で、
1.開発する機能ごとに作業用ブランチ(feature)を切って作業
2.作業が完了したらリリースブランチ(main)にマージしてUP
という流れを繰り返します。


1人で作業する時

1人でGitを使う場合は、コミットが意味のあるまとまりになるよう意識しています。
CSS設計(BEM)では、ページはブロックの集まりで構成されているので、
ページ作成の過程を記録するコミットも、基本的にブロック単位にしています。
また、パーツを作成していて、別のパーツで軽く修正したい箇所を見つけた時は、
一旦パーツ作成でコミットし、修正作業とコミットを分けるにするようにしています。
こうすると自分の作業を把握しやすくなり、後で作業を再開する時に便利です。
また、自分の作業を引き継いでもらう場合も、チームメンバーに作業内容が伝わりやすいです。
自分が引き継ぐ場合もログがきれいだとありがたいですね。


▼コミット例1(ボタン作成)

.btn {
 font-size: 1rem;
 min-height: 3em;
 line-height: 1;
 align-content: center;
 min-width: 12.5em;
 width: fit-content;
 padding-inline: 0.75em;
 text-align: center;
 position: relative;
 cursor: pointer;
}

▼コミット例2(ボタン修正)

.btn {
 font-size: 1rem;
 line-height: 1.5;
 min-width: 12.5em;
 width: fit-content;
 padding: 0.25em 0.75em; /* 高さをheightからpaddingで調整する方針に変更 */
 text-align: center;
 position: relative;
 cursor: pointer;
}


チームで連携する時

Gitの主目的はやはりチーム開発を円滑にすることです。
そのためには最初に役割分担を明確にしておくのが重要です。
作るページごとにブランチを分けるのが基本ですが、複数ページで同じブロックがある場合、
そのブロックだけで別ブランチで作ってマージすれば、同じパーツを作らずに済みます。
分担を決める事前の打ち合わせでは、しっかりコミュニケーションをとっていきたいですね。


▼下の図では、feature/btnボタンで作ったパーツを二つのページで使っている


まとめ

Git自体は補助ツールですが、うまく使えると作業が楽しくなります。
別々に作ったページやパーツが結合され、爆速でサイトが組み上がっていく様は爽快です。
会社によっては業務マニュアルをGitで更新しているところもあるそうです。
GitはOS開発のバージョン管理用に作られたそうですが、テキストデータなら割と汎用性がありそうです。
今回は意識の話がメインだったので、次書くとしたらコマンドにも触れようと思います。

  1. TOP
  2. お知らせ
  3. ブログ
  4. Gitを使いこなしたい

PAGE TOP