

こういった方向けに、現役Webデザイナーの僕が実際に現場で使用している必須ツールのGit・Githubについて初心者でもわかりやすく解説していきます。
目次
Git・Githubについての基礎知識
Gitでは、ファイルの追加・変更の履歴情報を管理することで、過去の変更箇所を確認したり、状態を指定した内容に戻したりすることができます。
実際、現場で仕事をするときは、チームで動くことがほとんどです。
チームで共有しているファイルの場合では、二人で同時に編集すると、先に編集した人の変更内が後から保存された内容に上書きされてしまい、消えてしまいます。
また、元に戻したい場合は変更前のコピーがないと元に戻せません。

この問題を解決するために作られたのが「Git」などの「バージョン管理システム」です。
Gitとは「バージョン管理システム」のひとつ
あなたがゲームする時「セーブ」をすると思います。
新しいステージに進んだ、ボス戦の前などセーブしていることで、負けてしまってもセーブしたところからまたスタートできますよね。
これはある特定の位置でのセーブデータの「バージョン」が関係しています。
Gitもこのバージョンを利用して、ソースコードなどのファイルの変更履歴を管理しています。
これを「バージョン管理」と呼びます。
まとめると「セーブデータのバージョンを管理するシステム」というイメージです。
GitとGitHubは別物
ひと言でいうと「システムとサービス」の違いになります。
別物です。
あなたが見ている「Youtube」を例とすると、「動画」というシステム・「Youtube」というサービスみたいなイメージです。
これをGitとGitHubに当てはめると、Git(動画)というシステム・GitHub(Youtube)というサービスとなります。
Gitとは
Gitとは、分散型バージョン管理システムの一つです。
「リポジトリ」を複数持つことができて、開発の形態、規模に合わせてソースコードの管理ができることから「分散型」と呼ばれています。
ゲームのセーブデータのように、Gitではファイルの状態を好きなときに変更履歴として保存しておくことができるので、過去の状態に戻したり、どこが変更されたのか表示することができます。
また、古いファイルで、他の人が編集した最新ファイルを上書きしようとすると、サーバーにアップする時にエラーを表示してくれるので上書きしてしまい、消してしまうといったミスも事前に防ぐことができます。

GitHubとは
GitHubとは、Gitの仕組みを利用して、世界中の人々が自分の作品(プログラムコードやデザインデータなど)を保存、公開できるようにしたウェブサービスの名称です。
その名の通り、「Git」の「ハブ:拠点・中心・集まり」という意味になります。
リポジトリ
リポジトリとは、ファイルやディレクトリの状態を記録する場所です。
「何かの保管場所」と思ってもらえればイメージしやすいかと思います。

リモートリポジトリとローカルリポジトリ
Gitのリポジトリは、リモートリポジトリとローカルリポジトリの2種類に分けられます。
- リモートリポジトリ
複数人で共有するリポジトリのこと
- ローカルリポジトリ
自分専用の自身のパソコンの中に配置するリポジトリのこと

コミット
追加・変更を、リポジトリに記録する操作のことをコミットといいます。
実行すると、リポジトリ内では、前回のコミットから現在の差分を記録したコミット(またはリビジョン)が作成されます。
過去にコミットしたファイル・変更内容を確認することができます。
リポジトリの共有
Push
ローカルリポジトリの変更履歴をリモートリポジトリに共有する操作のこと

Pull
リモートリポジトリでは複数人で共有して作業している場合、各々プッシュしているので、ほかの人のプッシュした変更内容を自分のローカルリポジトリに取り込み、最新の状態に更新することをいいます。

ブランチ
実装する場所を切り離し全体に影響が出ない状態で開発を進めるための手法です。

masterブランチ
ざっくりいうと完成形のデータです。
下記の流れのイメージです。
- マスターブランチからトピックブランチ作成、切り離す
- 切り離したトピックブランチで実装
- ②で作ったものをマスターブランチに繋ぎ直すことでマスターブランチに反映させる
ブランチの統合
マージ
作業が終わってメインのブランチに統合することをいいます。
ただ、Push=結合するというわけではなく、ローカルリポジトリからリモートリポジトリに持っていくための操作です。
pushでリモートリポジトリに持って行った変更内容をすでにリモートリポジトリにあるものと繋げる操作を「マージ」と言います。

コンフリクト
わかりやすくいうと、「あなたが変更した箇所、他の人も変更してるよ!」と教えてくれる機能のことです。

別のブランチで作業しているAさん、Bさんがお互い同じファイルを変更してしまいどちらのファイルが正しいのかわからない状態がコンフリクトです。
Aさんはマスターブランチにマージできますが、Bさんがマスターブランチにマージしようとした時、GitHub「このBさんのファイル、ブランチを切ったときと違う。どっちが正しいの?ピピー!」とエラーを表示します。
まとめ

今回は、現場で使用している必須ツールのGit・Githubについて解説しました。
実際、現場で仕事をするときは、チームで動くことがほとんどです。
面接でも「Git使えますか?」この質問は必須項目になってます。
なので、今回解説した内容を理解し、触ってみるだけでもスキルアップになると思うので、ぜひ参考にしていただければと思います。
これからWebデザイナー・エンジニアになりたい方は僕が完全未経験の独学期間にはやく知りたかったおすすめの本をご紹介していますので、ご参考にしていただければと思います。
以上!【【初心者必見】Git・Git Hubについてわかりやすく解説】でした。