コーディングを驚くほど速く！EmmetのHTML6選＋CSS7選の効率化テクニック
みなと
フロントエンドクリップ
初心者向けGit入門：Web制作現場での役割と操作イメージ
みなと
Gitって、どんなツールかイメージできますか？
「名前は聞いたことあるけど、よくわからない」「周りで使われているけど、自分にはまだ馴染みがない」――そんな方も多いかもしれません。でも、Web制作の現場では、Gitは欠かせない存在として広く使われています。
この記事では、初心者の方に向けて、Gitがどんなツールで、現場でどのように使われているのかをわかりやすくお伝えします。また、なぜWeb制作の現場でGitが重要なのかも、私の実体験を交えながらご紹介します。
「Gitって意外と簡単そう！」とか「こんなふうに便利に使えるんだ！」と思ってもらえる内容を目指しました。それでは、Gitの基本を見ていきましょう！
Contents
Gitとは？
Git（ギット）は、プログラムやWebサイト制作の現場でよく使われるバージョン管理システムの一つです。バージョン管理とは、ファイルの変更履歴を記録して、過去の状態を簡単に確認したり復元したりできる仕組みのことを指します。Gitを使えば、現在の作業内容や過去のバージョンをまとめて管理できて、チームでの共同作業もスムーズに進められます。
従来の方法とその課題
Gitが広く使われるようになる以前、Web制作の現場では、以下のような方法でファイルの管理が行われていました。
FTPを使った編集作業
以前は、FTPソフトでサーバーにファイルをアップロードして直接編集する方法や、ローカルで編集したファイルを保存と同時に自動でサーバーにアップロードするエディタの機能を使う方法などが一般的でした。これらの方法では過去の状態を記録しておく仕組みがないため、変更に失敗すると元に戻すのが非常に困難です。
- 例：サーバー上のCSSファイルを直接修正したところ、デザイン全体が崩れてしまい、直前の状態に戻せなくなる。
→ 結果として、手元に保存していた古いファイルを再度アップロードして対応することに…。
また、複数人が同時に作業をすると、誰がどの変更を行ったのか分からなくなるため、後から作業内容を追うのも一苦労でした。
手動でのバックアップ
もう一つよく使われていた方法は、ファイルをコピーして「index_20241128」のような名前を付けて保存しておく方法です。この方法は、手軽に履歴を残せる反面、以下のような課題がありました。
- ファイルがどんどん増える
毎回バックアップを取るたびにファイル数が膨れ上がり、どのファイルが最新なのか分からなくなる。 - 管理ミスが発生する
最新の状態を編集しているつもりが、間違って古いバックアップファイルを修正してしまうことも。 - 例：「重要な更新があったため、“index_20241128_最新.html”を編集したけど、なぜか正しく表示されない！」
→ 実際は最新ファイルではなく、1週間前の古いデータを編集していた。
Gitならではの特徴
Gitを使えば、これらの課題を一気に解決できます。変更内容を記録する「コミット」を行えば、変更履歴がGitに保存され、必要なときにいつでも過去の状態に戻ることができます。また、コミットでは誰が、いつ、何を修正したのかが自動的に記録されるため、後から修正内容を簡単に確認できるのも大きなメリットです。
Web制作の現場におけるGitの役割
Gitは、過去の状態を確認したり復元したりできる便利なツールですが、それだけではありません。特にWeb制作の現場では、ひとりでの作業だけでなく、チーム全体での作業やクライアントとのやりとり、さらにプロジェクト全体の進行管理においても、大きな力を発揮します。
具体的には、以下のような場面でGitが役立ちます。
役割1：自分自身の作業を効率化
Gitを使えば、自分の作業を安全かつ効率的に進められるようになります。作業中の「セーブポイント」を作る感覚でコミットを活用すれば、いつでもその状態に戻ることができるため、安心して試行錯誤が可能です。また、過去の変更履歴を簡単に確認できるため、「あの時どんな修正をしたっけ？」と迷うことがありません。
さらに、ブランチを使って並行作業を進めることで、新しいアイデアや試作を本線に影響を与えることなく試せるのも大きなメリットです。Gitは、自分自身の作業を効率化する強力なツールといえます。
役割2：修正内容をチームで共有し、教育にも活用
Gitを使えば、チーム内で誰がどの部分を変更したのかを簡単に把握できます。これにより、他のメンバーの修正内容を現在の作業に反映させたり、修正の意図を理解したりすることが可能です。
さらに、Gitの履歴はコードレビューや学びの場としても役立ちます。新人や経験の浅いメンバーが、他のメンバーの修正履歴を見ながら「どのような理由でこのコードを書いたのか」「どのように問題を解決したのか」といったことを学ぶことができます。
役割3：過去の状態への復元
Web制作の現場では、「以前のデザインやコードに戻したい」という要望がクライアントやチーム内から出ることが珍しくありません。たとえば、デザイン変更の試作を進めた結果、「やっぱり前のデザインに戻したい」というリクエストが来たり、誤って余計な修正をしてしまい、修正前の状態に戻したい場面が発生することがあります。
Gitを使えば、こうした場合でも特定の時点の状態に簡単に復元することが可能です。
Gitがあれば、過去の状態に戻れる「安心感」があるので、思い切った試行錯誤ができます。たとえ実際に戻す機会がなかったとしても、変更を恐れずに作業を進められるのが大きな魅力です！
役割4：クライアントや外部パートナーに修正意図を説明
Web制作の現場では、クライアントや外部のパートナーに対して、修正内容や意図について説明が必要な場面が頻繁に発生します。Gitを活用すれば、修正履歴をもとに状況をスムーズに共有でき、やり取りの効率を大幅に向上させることが可能です。
システム会社やサーバー会社とのやり取りで活躍
納品データがシステム開発会社に渡る場合や、サーバー管理会社が本番環境へのアップロードを担当する場合、変更箇所を明確に伝えることで作業がスムーズになります。たとえば、Gitの履歴をもとに更新箇所を共有することで、「今回の変更はこの部分だけ」と具体的に示せるため、意図しないファイルの上書きや変更漏れを防ぐことができます。
納品後の確認事項にも迅速に対応
納品後に、「不要なファイルが含まれている」「必要なファイルが足りない」「このファイルの用途がわからない」といった問い合わせが発生することは珍しくありません。こうした場合でも、Gitを活用して履歴を管理しておけば、「このファイルはXXのページで使用されています」と迅速かつ的確に回答できます。これにより、確認や調整がスムーズになり、関係者全体の作業がより効率的に進みます。
数年前に修正した箇所について突然質問が来ること、結構あるんです。正直、日々の作業で忘れてしまうことも多いので、Gitで履歴を追えるのは本当に助かります！
Gitは、個人の作業を効率化するだけでなく、チームの連携やクライアントとのやり取りまで、幅広い場面で役立つツールです。Web制作の現場では、単なる履歴管理にとどまらず、プロジェクトをスムーズに進めるための頼れる相棒と言えます。Gitを上手に使いこなせば、作業がもっとラクになるはずです！
Git導入前の課題と失敗談
Web制作の現場では、これまでいろいろな方法でデータの管理や納品が行われてきました。しかし、効率的な管理が難しく、作業に手間やリスクが伴う場面も少なくありませんでした。特に「納品」という重要なプロセスでは、多くの課題に直面することがありました。
納品時の「差分管理」の苦労
クライアントのWebサイトを改修するときは、制作会社がまずクライアントからサイトのファイル一式を受け取って、それをもとに修正を加えるのが一般的です。これは、クライアント側で運用中のファイルをもとに、自分のローカル環境や社内のテスト環境で作業を進めるためです。そして、改修内容を反映したテストサイトを用意し、クライアントからフィードバック（FB）を何度かもらって最終確認を行い、OKが出れば納品となります。
ただ、この「納品」の段階で、いくつか注意すべき点があります。
たとえば、サイトのファイル一式をそのままクライアントに送ってしまうと、どのファイルが変更されたのかわからず、クライアント側のチェックが難しくなります。また、ある程度の規模のWebサイトでは、複数の制作会社が関わる場合も多いため、ファイル一式を納品すると、他社やクライアント側の担当者が更新したファイルと競合してしまうリスクもあります。こうしたリスクを避けるために、業界では「差分」のみを納品することが多く、必要な修正箇所だけを明確にするのが一般的な方法です。
「差分」とは、修正が加わったファイルだけを納品する方法です。これにより、納品物が必要最小限に抑えられ、クライアント側でのチェックや作業もスムーズに進みます。特にディレクトリ構造をそのまま維持して差分を納品することが重要で、これによってクライアント側でのファイル配置や更新が正確に行え、意図しない場所にファイルが配置されるリスクを防ぐことができます。
スプレッドシートによるファイル管理
そのため、当時の私のチームでは、修正したファイルをスプレッドシートに一つ一つメモして、納品時に確認できるようにしていました。ファイル数が数百を超えることもあって、正直かなり面倒な作業で、記入漏れも起きやすい管理方法だったと思います。でも、当時は他に良い解決策が思いつかず、仕方なくこのやり方を続けていました。
先祖返りの発生と徹夜作業
そんなある時、ある大規模なWebサイトの改修作業にチームの数人で取り組んでいた際、納品のときに「先祖返り」が2回連続で発生しました。
先祖返りとは？
システムやコードの状態が、意図せず過去の古い状態に戻ってしまう現象のことです。例えば、次のようなケースが原因で先祖返りが発生することがあります。
- クライアントから提供された最新データの反映が漏れて、古いファイルで作業を進めてしまった
- チーム内で最新状態のファイルが共有されず、古いバージョンのファイルをもとに修正を進めてしまった
このときは、先祖返りの解消と原因の特定、再発防止策の報告が急務となり、数日間、対応に追われた日々を今でも思い出します。
この出来事以来、「先祖返り」という言葉を目にしたり耳にしたりするだけで思わず身構えてしまうほど、私にとって恐ろしさを感じる言葉になりました…。
Git導入の決断
スプレッドシートを使ったファイル管理でも、ミスをしないよう慎重に扱っていた自覚はありましたが、作業が属人化しやすく、効率が悪いこと、また、いざ問題が起きた際に履歴を追えないことといった課題も痛感していました。ちょうどその頃、業界でもSubVersionやGitといったバージョン管理ツールの名前が上がり始め、私のチームでもこの失敗をきっかけに、ついにGitの導入を決断するに至りました。
Gitの操作イメージをつかむ
ここまで、Gitがどんなツールで、Web制作の現場でどのように役立つのかを紹介してきました。でも、「実際にどうやって使うの？」と気になっている方も多いのではないでしょうか。そこで、このセクションでは、基本的な操作の概要を簡単にご紹介します。
難しい専門用語や仕組みの解説は今回は省き、今回は「こんな感じで使えるんだ！」というイメージをつかむことを目的としています。Gitを操作するためのツールはいくつかありますが、ここでは初心者にも使いやすい「Sourcetree」を使った例を紹介します。Sourcetreeは、GUIで直感的に操作できる無料ツールで、コマンドを覚えなくても使えるのが特徴です。
実演1：変更内容を記録する（コミット）
Gitの基本操作を知る第一歩として、「コミット」を覚えるのがとても重要です。コミットとは、作業中の変更内容をGitに記録する操作のこと。たとえば、文章の下書きやデザイン修正の途中で、「ここまでの状態を保存しておきたい！」と思ったことはありませんか？コミットは、そんな「セーブポイント」を作る感覚で使えます。
コミットで記録される情報
コミットを行うと、次のような情報がGitに記録されます。
- 変更したファイル：どのファイルを修正・追加・削除したのか
- 修正内容：どの部分を具体的に変更したのか
- タイムスタンプ：いつ修正を行ったのか
- 作業者の情報：誰が修正を行ったのか
これにより、作業内容をしっかり記録できるだけでなく、必要なときにその状態に戻ることも可能になります。
Sourcetreeを使った操作の流れ
Sourcetreeでは、以下の手順で簡単にコミットできます。
- 修正したファイルが一覧に表示されます。
- コミットしたいファイルを選んでステージングエリアに移動します。
- 「コミットメッセージ」として、修正の内容や理由を一言で記載します。
- 「コミット」ボタンを押すと、変更が記録されます。
コミットメッセージは履歴を追う際の道しるべです。チーム全体で見やすくするためにも、コミットメッセージの書き方のルールを決めておくと安心です！一貫性があると、自分自身も後から見返すときに助かりますよ。
どんな場面で役立つ？
コミットは、日々の作業の中で「ここまで進めた」という節目ごとに行うものです。たとえば、次のような場面でその重要性が実感できます。
- 日常の作業管理として
作業の区切りごとにコミットを行うことで、「どこまで進んだか」を明確に記録できます。これにより、進捗の把握や、次のタスクに集中するための準備が整います。 - 万が一のミスに備えて
誤った修正をしてしまった場合でも、コミットしておけば、簡単に前の状態に戻ることができます。安心して試行錯誤ができるのも、コミットの大きなメリットです。
コミットの粒度は人それぞれですが、私はキリの良いところで細かく行うことが多いです。履歴が細かく残ることで、後からの確認や修正がしやすくなると感じています。
実演2：作業の履歴を振り返る（履歴の確認）
Gitを使う大きなメリットの一つが、「過去の履歴を簡単に振り返られること」です。チームでの作業はもちろん、個人での作業でも「いつ、どこを変更したのか」を把握することは重要です。Gitを使えば、これらの情報を一覧で簡単に確認できるため、作業の管理が効率化します。
履歴確認で得られる情報
履歴を確認することで、以下のような情報を簡単に把握できます。
- コミットメッセージ：その修正が何のために行われたのか
- 変更したファイル：修正が加えられた具体的なファイル
- 修正者：誰が変更を行ったのか
- 日時：いつ修正が行われたのか
さらに、Gitの履歴機能では、コミット単位だけでなく、特定のファイルだけに絞って履歴を確認することも可能です。これにより、ピンポイントな情報を素早く見つけ出せます。
私は、ファイル単位で履歴を確認する機能を重宝しています。「この部分、いつこのコードに変わったんだっけ？」と確認したり、そのファイルで以前使われていたコードを再利用したいときなどに、とても便利ですよ！
Sourcetreeを使った操作の流れ
Sourcetreeでは、履歴確認も直感的に行うことができます。
- 過去のコミット一覧が表示されます。コミットメッセージや日付、修正者などの基本情報が一目でわかります。詳細情報を確認したいコミットをクリックします。
- そのコミットで修正・追加・削除されたファイルが表示されます。変更内容を確認したいファイルをクリックします。
- 追加・修正・削除が行われた箇所がハイライト表示されます。
また、特定のファイルに絞って履歴を確認したい場合は、対象ファイルを指定することで、そのファイルに関するすべての履歴を絞り込むことができます。
winter-2025/index.html の変更履歴をSourcetreeで表示した例。選択したファイルに関するすべてのコミットが一覧に表示されています。どんな場面で役立つ？
Gitの履歴確認は、特定の場面だけでなく、日々の作業全体を支える重要な機能です。具体的には、次のような形で役立ちます。
- 日常的な作業の確認に
どのような修正を行ったのかを振り返りながら作業を進めることで、誤りや抜け漏れを防ぐことができます。作業の流れを把握しやすくなるため、スムーズな進行が可能です。 - 他メンバーの変更内容を把握する際に
クライアントやチームメンバーからの質問に備えるだけでなく、他のメンバーが行った修正内容や意図を自然に把握するためにも履歴確認は役立ちます。 - 特定のファイルの履歴を追うときに
特定のファイルについて「いつこの変更が行われたのか」「過去にはどんな状態だったのか」といった履歴を確認することで、問題の原因や変更の経緯をピンポイントで追跡できます。 - 過去の変更の意図を明確にするために
作業を進める中で「なぜこの修正を行ったんだっけ？」と迷っても、コミットメッセージや変更内容を振り返ることで、すぐに思い出せます。
Gitの履歴確認は、言わば「作業日誌」を見るような感覚です。さらに、特定のファイルだけに絞って履歴を確認できるので、必要な情報をピンポイントで探せるのも大きな魅力です。
実演3：履歴をさらに深掘りする（2点間の差分確認）
履歴を確認することで、作業の流れや修正内容を把握できるのは、Gitの大きな魅力です。さらに、履歴の中から特定の2つのコミットを選んで、その間にどのような変更が行われたのかをピンポイントで確認することも可能です。
たとえば、以下のような場面で役立ちます。
- 過去の特定期間で行われた修正内容を確認したいとき
たとえば、1週間前の状態と今日の状態を比較して、その間に行われた修正が適切に行われているかを確認する際に役立ちます。この操作により、進捗を把握しつつ、必要に応じて見落としや修正漏れを防ぐことができます。 - 納品のタイミングで修正内容を最終チェックしたいとき
納品前に、作業開始時点の状態と作業完了後の状態を比較して、意図した修正だけが正しく行われていることを確認できます。この確認を行えば、漏れや不要な修正を未然に防ぐことが可能です。
Sourcetreeを使った操作の流れ
Sourcetreeでも、この操作は簡単に行えます。
- コミット一覧から比較したい2つのコミットを選択します。
- 選択した2つのコミット間で修正・追加・削除されたファイルが表示されます。変更内容を確認したいファイルをクリックします。
- 追加・修正・削除が行われた箇所がハイライト表示されます。
修正内容を確認できるだけでなく、変更したファイルだけをディレクトリ構造を保った状態で出力することも可能なので、そのまま納品データとして活用できます。余計なファイルを含めずに瞬時に差分データを作れるので、手間が大幅に省けますよ！
※具体的な操作方法については、今後の記事で紹介できればと考えています。
実演4：作業を分ける（ブランチ）
ブランチは、現在の作業内容を「分岐」させる機能です。新しい作業を別の道筋で進めたり、複数のタスクを並行して進行したりする際に欠かせない機能です。
たとえば、以下のような場面で役立ちます。
- 複数のプロジェクトを並行して進めたいとき
ブランチは、ひとつのWebサイトで複数のプロジェクトを並行して進める際に非常に便利です。たとえば、ランディングページの改修とヘッダーのデザイン改修をそれぞれブランチで分けて作業すれば、独立した環境で進行でき、互いの変更が干渉する心配がありません。
また、最終的に両方の作業が完了したら、それぞれのブランチを統合（マージ）して、改修内容を一つにまとめることができます。 - チームで作業を分担したいとき
ブランチは、1つのプロジェクト内でタスクを分担し、複数のメンバーが独立して作業を進める際に非常に便利です。たとえば、ページ全体の作成を進めながら、特定の機能やセクションを別メンバーが別ブランチで作業する場合、それぞれの変更が互いに干渉しないため、スムーズに進行できます。 - 新しい実装方法や動きを試したいとき
ブランチは、新しいアイデアや実装方法を試す際にも便利です。たとえば、既存のデザインに影響を与えずに表示を調整したり、アニメーションを追加したりする場合、専用のブランチを作成して実験ができます。作業中は他のブランチに影響を与えないため、失敗を恐れずに試行錯誤できます。
また、試した結果が良いものであれば、そのブランチをメインのコードベースや共有の作業ブランチに統合（マージ）して活用できます。一方で、試行錯誤の結果必要なくなった場合は、そのブランチを削除して整理することも簡単です。
Sourcetreeを使ったブランチの作成と管理
Sourcetreeでは、ブランチの作成や管理も直感的に行えます。たとえば、1つのプロジェクト内でタスクを分担し、複数のメンバーが独立して作業を進める場合を考えてみましょう。
上記は、作業を進めた後のSourcetreeの画面例です。メインブランチ「landing-page-winter-2025」から新しいブランチ「modal-window」が分岐し、それぞれの作業が進行している様子が視覚的に確認できます。メインブランチでは全体の作業が進められている中、別ブランチでモーダルウィンドウの実装を進めている状況です。
ブランチ名は、チームごとにルールを決めておくのがおすすめです！名前を見ただけで作業内容がわかると、誰が何をしているか把握しやすく、コミュニケーションもスムーズになりますよ。
実演5：作業を統合する（マージ）
マージとは、複数のブランチで進めた作業内容を一つに統合する操作のことです。それぞれ別々に進行していた作業をまとめ、ひとつの完成形として管理できる状態にします。
たとえば、以下のような場面で役立ちます。
- 複数のプロジェクトの作業内容をまとめたいとき
別々のプロジェクト内で進行していた作業を一本化する場面です。たとえば、ランディングページの改修を進めていたブランチと、Webサイト全体のヘッダーをデザイン改修するブランチを、最終的にメインのブランチにまとめて反映するタイミングでマージを行います。 - 作業内容を一本化したいとき
同じプロジェクト内で、複数のメンバーがそれぞれのブランチで作業を進めている場合に役立ちます。たとえば、メンバーAがトップページを修正している間に、メンバーBがフォーム機能を改修している場合、それぞれのブランチをプロジェクトにおけるメインブランチに統合して、最新の成果を一本化する場面です。
また、個人で試作した内容を統合する場合もあります。試行錯誤を経て完成した作業内容をプロジェクトのメインブランチに反映する際に、マージ操作を行います。
マージを行うと、同じファイルであっても、異なる行を編集している場合は、Gitが自動的に変更を統合してくれます。これにより、多くの場合、手動の調整は不要です。ただし、同じ部分を異なる内容で修正していた場合は、競合（コンフリクト）が発生することがあります。このような場合でも、Gitは競合箇所を明確に表示してくれるため、解決作業がスムーズに行えます。
修正しているファイルが同じでも、行が異なるなら自動で統合されると知ったときは、本当に便利だと感じました！
Sourcetreeを使ったマージの操作
Sourcetreeでは、分岐したブランチを簡単にマージして統合することができます。たとえば、別ブランチで進めていた作業が完了した場合、それをメインブランチに統合する流れを考えてみましょう。
上記は、Sourcetreeでマージを行った後の画面例です。新しいブランチ「modal-window」で進められていたモーダルウィンドウの実装が完了し、メインブランチ「landing-page-winter-2025」に統合された様子が確認できます。このように、ブランチを分けて安全に作業を進めつつ、最終的にひとつのブランチに統合できるのがGitの大きな特徴です。
まとめ
今回の記事では、Gitの基本的な役割や特徴、操作のイメージを中心に、Web制作の現場での実体験を交えてお伝えしました。「Gitって便利そう」「どんなものかイメージできた」と思ってもらえたら嬉しいです。
この記事はあくまでGitの入門編として、イメージをつかんでもらうことを目的にしています。実際に使いこなすためには、具体的な操作方法やさらに詳しい活用法を知る必要がありますが、それはまた別の記事でじっくりとご紹介する予定です。
ABOUT ME
東京のWeb制作会社で15年以上働いているフロントエンドエンジニアです。これまで、いろんなプロジェクトに関わりながら、フロントエンド開発やWebデザインに取り組んできました。このブログでは、今までの経験を活かして、Web制作に役立つ情報やノウハウをシェアしていきたいと思います。初心者の方から、現場で働く方まで、誰でも参考にできる内容をお届けしますので、ぜひ覗いてみてください。
