現代のWeb制作や開発において不可欠なツール、Git。
エンジニアはごく当然のように利用しているツールですが、非エンジニアであるWebディレクターにとってもGitを扱えると便利です。
Gitはコードのバージョン管理からチームでのプロジェクト進行まで、プロジェクトの効率化と品質管理を支える重要な役割を果たしています。
この記事では、Gitを使えるようになるための学習記録としてまとめていきます。
Gitの基本から実際の業務イメージまで、Webディレクターがどこまで理解しておくと良いか、個人的な視点から備忘録的に紹介します。
Webディレクター業務でGitを使っていなかった方向けに参考になればうれしいです。
なぜ、WebディレクターがGitを学ぶべきか
Web制作業務では以下のようなシチュエーションが多々あるかと思います。
- 最新版のファイルがどれかわからなくなる
- 誰が、いつ、何を変更したのか追跡できない
- 複数人で同時に作業して手戻りが発生
- バックアップの取り忘れでデータ消失
- チーム内でのファイル共有が煩雑
などなど。
適切なソース管理はWeb制作において重要であるため、これらの課題を解決するためには、Gitの活用が不可欠です。
Gitを導入することで、変更履歴を明確にし、作業の進捗を迅速に把握できるようになります。
WebディレクターのGitとの関わりとして、コーダーやエンジニアが効率的に作業できる環境を整備しながら、必要に応じて自身もHTMLの軽微な修正も行えるようになれば、チーム全体の作業効率を向上させることができます。
まとめると、WebディレクターにとってGitは以下の点でメリットがあります。
- プロジェクト進捗の可視化
- コーダー・開発チームとのコミュニケーション向上
- 変更履歴の管理と追跡
- HTML修正の巻取りによるコーダー作業の効率化
Gitの基本概念
Gitの詳細を解説していきます。
Git＝バージョン管理システム
Gitとは、「バージョン管理システム」のことです。
「どのファイルの何を」「誰が」「いつ」「何のために」変更したか、記録を残せるため、Web制作プロジェクトでのソースの変更履歴を効率的に管理することができます。最新のファイルがどれかわかり、元の状態に戻すこともできます。
同時に作業して手戻りが発生することも防ぐことができるため、複数人での作業に適しています。
リポジトリ＝ファイルを保管する場所
作業するうえでは、プロジェクトのファイルやその変更履歴を保存する場所が必要になります。それが、「リポジトリ」です。
このリポジトリという保管場所で様々なソース管理を行っていきます。
<リポジトリの具体的な例>
- 履歴を管理
例：ファイルに「A」というコードを書いた → 後日「B」に書き換えた → リポジトリには「A」と「B」の両方の記録が残る。 - 過去に戻る
例：変更後に不具合が見つかった場合、「B」から「A」の状態に戻す。 - 共同作業
例：チームのメンバーがそれぞれ異なる部分を作業してリポジトリに保存 → 後で全ての作業を統合。
ブランチ＝作業を分岐させる仕組み
リポジトリ内で作業の流れを分岐させる仕組みとして、「ブランチ」があります。
例えば、Aのプロジェクト中にA’の機能を取り入れたい場合、同じリポジトリ内で作業するエリアを分けてAというメインエリアとは別で、A’という作業エリアを作成することができます。
ブランチは「枝分かれ」を意味し、プロジェクトを進める中で安全に変更を加えたり、新しい機能を試したりするために使われます。
ブランチの具体的な例
- メインブランチ（mainやmaster）
プロジェクトの中心となるブランチで、基本的に動作するコードだけを置く場所です。
例：リリースする製品や動作確認済みの安定版コードを管理。 - 機能ブランチ（feature branch）
新しい機能を追加するために作成するブランチ。
例：feature/add-login-page
→ ログインページを追加するために作業するブランチ。 - 修正ブランチ（bugfix branch）
バグ修正のためのブランチ。
例：bugfix/fix-login-error
→ ログインエラーを修正する作業をするブランチ。 - トピックブランチ
特定のテーマや課題に取り組むために作成されるブランチ。
例：topic/experiment-ui-update
→ UIデザインを実験的に変更するためのブランチ。
ローカルとリモート
Gitには「ローカル」と「リモート」の2つの考え方があります。
リポジトリ（ファイルの保管場所）とブランチ（作業を分岐させる仕組み）に当てはめると以下のようになります。
リポジトリの比較
保存場所と共有範囲の違いで、ローカルは個人、リモートはチームでの共有。
| 項目 | ローカルリポジトリ | リモートリポジトリ |
| 場所 | 自分のPCやローカル環境に保存される | GitHub、AWS CodeCommitなどのホスティングサービス上に保存される |
| 用途 | 個人で作業を進めたり、変更を確認するために使用 | チームで共有し、統合やバックアップの目的で使用 |
| 操作の対象 | 自分の環境内で完結する | チーム全体で共有され、プッシュやプルで同期する |
| 同期方法 | リモートリポジトリからクローンやプルで作成される | ローカルリポジトリからプッシュで内容をアップロード |
| 接続 | インターネット接続は不要 | インターネット接続が必要 |
ブランチ比較
作業範囲と同期の仕組みの違いで、ローカルは手元の作業、リモートは共有用の作業。
| 項目 | ローカルブランチ | リモートブランチ |
| 場所 | ローカルリポジトリ内で作業する | リモートリポジトリ上に保存される |
| 用途 | 個人の作業や新しい機能・修正のために使用 | チーム全体で共有するために使用 |
| 操作の対象 | チェックアウトして直接作業できる | プルやフェッチでローカルに同期する必要がある |
| 同期方法 | リモートブランチと同期する（プッシュ/プル） | ローカルブランチからプッシュされて作成される |
| 例 | feature/add-login（ローカルで作成したブランチ） | origin/feature/add-login（リモートで追跡されるブランチ） |
Git操作と関連用語
Gitを操作するうえで関連する用語やコマンドを覚えておく必要があります。
| ステップ | 用語 | コマンド | 説明 |
| リポジトリの準備 | リポジトリ | git init → 新しいローカルリポジトリを作成 | 新しいプロジェクトをGitで管理する準備をする |
| git clone → リモートリポジトリをローカルにコピー | 既存のリモートリポジトリをローカルにコピー | ||
| ブランチの作成・切り替え | ブランチ | git branch <ブランチ名> → 新しいブランチを作成 | 新しいブランチを作成して、異なる作業を開始する |
| git checkout <ブランチ名> → 既存のブランチに切り替え | 既存のブランチに切り替えて作業を続ける | ||
| git checkout -b <ブランチ名> → 新しいブランチを作成して切り替え | 新しいブランチを作成し、そのブランチに切り替え | ||
| 作業内容の変更 | ステージングエリア | git add <ファイル名> → 変更をステージングエリアに追加 | 編集したファイルをステージングエリアに追加し、次のコミットに準備 |
| コミット | git commit -m “メッセージ” → ステージングエリアの変更をコミット | 変更内容をローカルリポジトリに記録する | |
| リモートとの同期 | リモートリポジトリ | git remote add origin → リモートリポジトリを追加 | リモートリポジトリのURLを指定し、リモートと連携 |
| プッシュ | git push origin <ブランチ名> → ローカルの変更をリモートにプッシュ | ローカルで行った変更をリモートリポジトリに反映 | |
| プル | git pull origin <ブランチ名> → リモートの変更をローカルにプル | リモートリポジトリから変更をローカルに取り込む | |
| リモートの変更を取り込む | フェッチ | git fetch → リモートの変更をローカルに取り込む | リモートの変更を確認するが、ローカルには反映しない |
| マージ | git merge <ブランチ名> → 他のブランチの変更を現在のブランチに統合 | 変更内容を統合し、作業を一つにまとめる | |
| 競合の解決 | コンフリクト | git mergetool → 競合解決のためのツールを起動 | 競合しているファイルを解決するためのツールを使用 |
| git status → 競合しているファイルを確認 | 競合が発生したファイルを確認し、解決に向けて作業する |
Git関連ツール
Gitリポジトリ（コード）のホスティングサービス：Github、AWS Codecommit
エディタ：Visual Studio Code
Gitのグラフィカルユーザーインターフェース（GUI）クライアント：SourceTree
Web制作におけるバージョン管理の具体例
Gitを基盤としたバージョン管理
Visual Studio Codeをメインエディタとして活用
GitHubをリモートリポジトリとして使用
SourceTreeをGUIクライアントとして補助的に使用
VSCodeでコードを編集し、内蔵Git機能で変更をステージング・コミット
GitHubにプッシュしてリモートリポジトリを更新
プルリクエストを作成してチームメンバーとコードレビュー
必要に応じてSourceTreeで複雑なGit操作を視覚的に実行
まとめ
Webディレクターでも知っておきたいGitによるバージョン管理の仕組みを紹介しました。
Gitはコードのバージョン管理からチームでのプロジェクト進行まで、プロジェクトの効率化と品質管理を支える重要な役割を果たすことから、Gitの基本概念や操作方法を覚えておきたいところです。繰り返し操作しながら、学んでいきましょう。
コメント