WEBデザイナーが抑えておきたいGitとGitHubの違いとは？

WEBデザイナーでコーディングをするとき、

みなさんはどのように管理されてますか？

複数人でやっている場合、気づいたらファイルの場所が変わっていたり

バックアップファイルが大量になったり

前の状態に戻すことになったとき、どの状態だったかわからなくなったり・・・

このような煩わしさから解消してくれるのがGitです。

ちなみに、GitとGit Hubでは役割が違うので説明しますね。

Gitとは

https://git-scm.com/

Gitとは、簡単に言うとファイルのバージョン管理ツールです。

例えば最新のバージョンで不具合が出たため、古いバージョンに戻したいとき

Gitがない場合だと、膨大なファイルから古いバージョンを探し、

コピーしてまた新しい作業をして・・・でも一人でやっているわけではないので

ファイルを整理して・・・といったように作業が多く、ミスも発生しやすいです。

そういったことがないようにこのGitを使用すれば

古いバージョンに簡単に戻すことができ、ファイルを一元管理することができるので

複数人で対応するときにとても便利といえます。

履歴も追うことができるので、この編集をしたのは○○さんね。と

質問をしたいときにすぐ分かるのも時短になりますし、便利といえるでしょう。

Git Hubについて

https://github.com/

Git Hubとは、先ほど説明したGitを利用したサービスです。

世界中の開発者たちが作成したコードを保存、共有しており、

誰でもそのコードを編集し携わることができます。

もちろん、非公開設定もできるので個人で作成したりチームで作成したりと幅広く使うことができるため、人気があります。

まとめ

今回紹介したGitとGit Hubですが、会社によって使用しているアプリは異なりますし

なんなら使用せずにファイルごとに保存して修正してを繰り返している会社もあります。

自分がその案件に参画する場合は、郷に入っては郷に従えといいますので、

今回紹介したことについては使用しないかもしれません。

ですが、もし自分が中心となって1から作成したり

一人で個人的に作成する場合はぜひ使ってほしいアプリケーションの一つです。

これからデザイナーとして勉強していこうとしている方にもオススメで、

事前にこのことを知っているのといないのでは、作業効率がだいぶ変わります。

データ保管を減らしたい、一目で分かるようにしておきたい。

そんな人にはオススメといえますので

是非参考にしてみてくださいね。

【ここでお知らせです】

※Designers-Proからのご提案

ここまで読んで頂きありがとうございます！

ここで我々デザプロからご案内をさせて頂きます。

僕や、既にwebデザイナーとして活躍している先輩達と一緒に学びませんか？

※詳細は上記バナーをClick

 

Gitを使って出来る事

1.一部だけを過去の編集に戻したい

サイトの修正をした後、一部分だけ昔の状態にしたいという依頼はよくあります。

1年前の状態に戻して！という希望をもらう事だってあります。

そんな時も、迅速に該当のファイルを見つけてコード修正が出来るんです！

これまでの様に、過去のバックアップファイルを出してきて戻したい状態のものかどうかをチェックして…という手間がかからなくなった事で作業時間が大幅に短縮出来ます。

2.エラーの原因を直ぐに発見する事が出来る

納品後にお客様から「HTMLを修正したらサイトにエラーが出てしまった」という連絡を頂いた事がありました。

検証に時間をかける事なく無事、正常な表示に戻す事が出来ました。

3.必要経費の節減に繋がる

こちらが、Gitを継続して利用してる方の中で一番大きなポイントであると思います。

サイトによっては画像データが非常に重く、サイト全体のデータが膨大なケースになる場合があります。

そんなサイトのバックアップを作業前・作業後といった様に何度も保管していると、かなりなデータ量になってしまいます。

Gitを使い始めてからはサイト１つにつきリポジトリ１つ分だけで済む為、データ保管がストレスフリーになります。

webデザイナーとして扱うデータは、お客様の大事なデータです。

ストレスなく、きちんと管理できる環境を整えて行きたいですよね。

webデザイナーにもオススメGit Hub入門

webデザイナーの方でGit Hub初心者の方には「GitHub Desktop」がオススメです。

マウスでクリックしていくだけで感覚的に操作が出来る便利なアプリです。ぜひお試し下さい。

1.Gitを使う上で覚えて欲しい言葉6選

上記でも説明させて頂いた様にGitHub Desktopは感覚的に作業出来る物です。

では、それぞれを簡単にご説明します。

「リモートリポジトリ」と「ローカルリポジトリ」

Gitにおいて「リポジトリ」とは、倉庫や収納場所と考えると分かりやすいと思います。

どちらもファイルの更新履歴と最新のファイルが全て保存されます。

リモートリポジトリは、オンラインで接続できるので、複数人で管理出来るのが最大のポイント。

ローカルリポジトリは、分かりやすく言えば自分のパソコンの中で管理する収納場所ですね。

2.クローン

リモートリポジトリに置いているものを変更履歴も含めて丸っとすべて自分のパソコンにダウンロードすることを、クローンと言います。

そして手元にあるファイルで作業するという流れです。

まだリモートリポジトリを作っていない時や、ローカルのファイル管理だけで完結する時は使わない操作でもあります。

3.コミット

HTMLやCSSなど作業をして変更したものを記録する事を、コミットといいます。 ファイルを追加や削除、コードを変更したあとはコミットして変更の記録をする。

いわゆるデータセーブです。

そしてコミット時にそのデータが一体どういったものなのか、というメッセージを入力します。

ここに変更の概要や修正の詳細、注意点などがあれば入れておくと見返す時にとても便利です。

4.プッシュ

ローカルリポジトリでコミットして記録したものをリモートリポジトリにアップロードすることを、プッシュと言います。

変更したファイルも履歴もまとめてアップロードしてくれるので、これで他のメンバーと最新状態が共有出来るというわけです。

5.プル

リモートリポジトリからローカルリポジトリに、他のメンバーによって変更された履歴をダウンロードすることをプルといいます。

リモートリポジトリを利用している場合は、作業前にプルをするようにしておくと安心ですね。

終わりに

個人利用でもサーバー上で管理する方が、万が一自分のパソコンが壊れてしまったという時でも安心です。

しかし、Gitはよく分からないし、使いこなせないという方は、まずローカルリポジトリでバージョン管理をする所からスタートしてみましょう。

先述したパソコンアプリのGitHub Desktopなら、ローカルでの管理は簡単に出来ます。

1.パソコンの中にリポジトリを作る

2.その中に通常通りHTMLなどのファイルを保存する

3.コミットする(１回目)

4.コードを修正してみる

5.コミットする(２回目)

6.１回目と２回目の差分のチェックする

7.１回目のバージョンに戻してみる

ここまで出来ればデザイナーとしては十分です。

難しいところまで使わなくて良いんです。

自分のパソコン内だけでのデータ保存用の仕組みとして、試しに使ってみてください。