MENU

ツールを理解する②【Git 解説】

皆さんGitというツールをご存知でしょうか。

Gitと聞くと、『Webデザイナーには難しそうだし自分には関係ないかな。』と感じてしまう人も多いのではないでしょうか。

数年前までは僕自身もそう思っていました。

ですが、Webデザイナーが携わるコーディングデータのHTMLやCSSのコード・画像・テキストなどのバックアップとしてGitを手軽に使う方法があります。

そしてGitを使う事でデータ管理がとても楽になります。

GITとは

Gitとはコードなどを記録し、変更した履歴を残して管理するバージョン管理ツールです。

参照:GITホームページ

バージョン管理という言葉が難しく聞こえるかもしれませんが、いつ・誰が・どこの部分を・どう変更したのかという履歴を残せる仕組みの事なんです。

例えばCSSで『Designers:Pro;』を『Designers:Promax;』に変更した時。

  • いつ
  • 誰が
  • どのcssファイルの何行目か
  • どのコードを→Designers:Pro;
  • どう変更した→Designers:Promax;

をGitが記録してくれるんです。

個人はもちろん、複数人での管理にもとても便利です。

サイト制作をする際によくある悩み

HTMLやCSSはとにかく細かい修正を重ねて製作・運営されます。

その為、最新のファイルが分かりにくい場合やファイル管理がずさんな場合、以下のようなトラブルが起きやすくなります。

①チームメンバーでの共有がうまくいかずミスが起こる

②前のバージョンに戻すときにファイルを探す手間がかかり効率が悪い

③バックアップファイルがどんどん溜まっていく

個人で製作をしているWebデザイナーの方も②と③は心当たりがあるのではないでしょうか。

作業前にバックアップに日付を入れて保存している人が多いかと思いますが、修正ごとにファイルを保存し続けるとデータ量がどんどん膨らんで行きます。

そしていつでも直ぐに全てのバックアップにアクセス出来るという訳ではないため、効率も悪いですよね。

悩みを解決する方法

今回上記で紹介した悩みはチームで制作されている方にはあるあるではないでしょうか。

この様な悩みを解決してくれるのが

Git Hubです

参照元:Git Hubホームページ

Gitと混同される事が多いのですが、実はGitとGithHubは別物なんです。

Git→バージョン管理の仕組み

GitHub→Gitをオンライン上で管理するサービス

GitHubは世界中のユーザーが編集したコードを保存・共有しているサービスです。

コードは公開・非公開の設定が出来るので安心です。

そしてGitHubの嬉しいポイントは、デザイナーでも分かりやすく画面上でマウスを使って操作するだけで管理出来る点です。

チームではなく個人のみで使う場合は、オフラインで自分のパソコンの中だけで使用する事も出来ます。

デザイナーはまず、ここからスタートすると分かりやすくてオススメです。

Gitを使って出来る事

デザッピーくん
デザッピーくん
ここからは実際にGITを使って出来る事をご紹介して行きます!

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

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

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

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

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

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

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

そこで納品時のバックアップと現在のファイルの差分をGitで確認した所、エラーの原因となる箇所が一瞬で見つかったんです。

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

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

今までバックアップの保存用に外付けファイルを買い込んで溜め込んでいた方は、その必要がなくなり、データ保存用の外付けHDDを大量に購入する必要がなくなります。 

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

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

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

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

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

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

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

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

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

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

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

2.クローン

3.コミット

4.プッシュ

5.プル

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

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

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

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

リモートリポジトリ:サーバー上に置いている収納場所

ローカルリポジトリ:ローカル(オフラインで編集できる場所)に置いている収納場所

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

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

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

2.クローン

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

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

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

3.コミット

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

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

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

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

4.プッシュ

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

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

5.プル

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

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

終わりに

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

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

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

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

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

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

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

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

6.1回目と2回目の差分のチェックする

7.1回目のバージョンに戻してみる

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

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

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

最初は気持ちのハードルが高いかもしれませんが、仕事を効率化できる、とても便利なツールです。

パソコンアプリを上手に使って手軽にスタートしてみましょう。

    コメント

    コメントする

    CAPTCHA