エンジニア駆け出し

GitHubはエンジニア・デザイナー・みんな向け【便利ツール】

GitHubはエンジニア・デザイナー・みんな向け【便利ツール】

プログラミングの勉強をしている方や、IT系の職種の方であれば「GitHub」(ギットハブ)という言葉を聞いたことがあるのではないでしょうか?

GitHubは自分のパソコン上で書いたテキストファイルや画像ファイルなどをインターネット上で管理出来るWebサービスです。

GitHubはエンジニアが使うものというイメージが強いかと思いますが、エンジニア以外の人にもとても便利なサービスです。

デザイナー
デザイナー

エンジニアさんがGitHubを使っているのは知っているけど、私にはあまり関係ないわ。

ディレクター
ディレクター

ファイルのバックアップ取るときは、「〇〇_2018_09_01_backup」って感じでフォルダのバックアップを取って、コピーしたもので作業してる。

このように思っている方も多いのではないのでしょうか?

今回はエンジニアはもちろん、デザイナーディレクター、その他にも仕事でよくファイルの変更・管理をしているといった方に向けてGitHubのメリットについて説明していきます。

本記事の内容
  • ファイルであれば何でも管理できる
  • ポートフォリオになる

ファイルであれば何でも管理できる

最初の方でも述べましたが、GitHubはファイルがテキストファイルや、画像ファイルなどファイルであれば何でも保存して管理できるWebサービスです。

ここで少しむずかしい言葉ですが「バージョン管理」という概念でファイルを管理していきます。

バージョン管理

バージョン管理とは、ファイルの作成・更新・削除したときの記録をとることです。

その記録を取るためのツールとして今一番使われているのは「Git」というソフトです。

Gitとは?入門向け基礎知識のまとめ」にGitをマウス操作で扱えるソフトの紹介や、Gitの詳し説明がされているので詳しく知りたい方はこちらを読むと参考になるかと思います。

下の図を使って、「index.html」をバージョン管理するときの流れを説明します。

バージョン管理とは
  1. index.htmlファイルを新規に作成。バージョン管理対象として記録に取る。
  2. 更新した記録を取る
  3. 削除した記録を取る
  4. ②の記録をもとに③で削除したファイルを復元する。(復元したファイルの内容は②のときのものとなる)

上記の①~④の流れで、①~③でその時その時のファイルの内容を記録にとっておくことで、いつでもその記録の内容を復元することが出来ます。

④のタイミングでは②の内容を復元していますが、過去に記録にとったものは全て復元できるので①の内容に戻すことも可能です。

バックアップをとるやり方として「〇〇_2018_0801_backup」のようにコピーをとる方も多いかと思いますが、

このやり方で管理すると「〇〇_2018_0802_backup」「〇〇_2018_0803_backup」…のようにどんどん数が増えていき、

どのバックアップがどんな内容のものかわからなくなっていきます。

しかしバージョン管理ツールを使えば、作成・更新・削除と言った内容を記録に取るだけなのでバックアップのためにファイル・フォルダをコピーする必要はありません。

また、記録ごとにどんな変更内容を行ったかメモを残しておくことも出来るので、

一週間前に更新したこのファイル、何を変更したんだっけ?

ということにもなりにくいのです。

メモを残すだけでなく、テキストファイルであれば変更前と変更後の内容もパッと見でわかるため、何を削除したのか、何を追加したのか詳細にわかることが出来ます。

Githubでファイルの変更差分Githubでファイルの変更差分の確認が出来る

 

上の画像はGitHub上でファイルの変更内容を確認できるページになります。

左側が変更前、右側が変更後の内容になり、それぞれの赤背景・緑背景となっているところは以下の内容を意味しています。

  • 赤背景になっているところは削除された箇所
  • 緑背景は新たに追加した箇所

このようにバージョン管理ツールを使うといつでも変更内容を確認出来て・元に戻すことも可能なので安心してファイルの変更・削除を行うことが出来ます。

画像ファイルも管理できる

画像ファイルや、Photoshopで作成されるPSDファイルなどもテキストファイルと同様にバージョン管理することが出来ます。

人間の目から見たら画像ファイルもテキストファイルは見た目は違うものの、「ファイル」であるためGitで扱うことが出来るのです。

次の画像は、男性アイコンの変更履歴をGitを使って記録にとったものです。

バージョン管理とは (画像の場合)画像をバージョン管理した場合

 

ここで見ていただきたいのはのときに画像に戻している(復元している)ところです。

もし画像のバックアップをコピーして所持していた場合、例えば変更が100回あったとしたら、100個の画像を全て所持するのはあまり良い管理方法とは言えません。(1画像あたりの容量が大きい場合はなおさら。)

おそらくある程度のバックアップを取ったら最初のほうが削除することになるでしょう。

しかし、あとになって1番最初の画像に戻したいとなったときに削除してしまったら戻すことは出来ません。

これが、Gitを使ってバージョン管理をしているとコピーして過去の画像ファイルをバックアップとして持つ必要がなく、

いつでも好きなときの画像を復元することが出来るので安心して変更することが出来ますし、パソコンの容量も抑えられるので一石二鳥です。

ただ、エンジニア以外の方のほとんどはターミナル(通称:黒い画面)の操作に恐怖している方も居ると思います。

デザイナー
デザイナー

みんながみんなそんなよくわからない黒い画面使えるって思わないでよね!

安心してください。「SourceTree」という普通のソフトのようにマウスを使ってGitでバージョン管理を行えるアプリケーションがあります。

「黒い画面なんて使えないよ〜!」って方はこのSourceTreeを使ってバージョン管理デビューしてみてはいかがでしょうか^^

SourceTreeを使えるようにするために参考になりそうな記事をいくつか見つけたので、以下にリンクを貼っておきます。

補足

デザインをGithubで管理したら修正点がすぐにわかるようになり作業効率があがったと記事を見つけました。

デザイナーにとってもGithubを使うメリットは大きいと思います。

ポートフォリオになる

以前TwitterでGithubの使い道がポートフォリオ作成だと考えていた方がいました。

GitHubというサービス自体はあくまでもバージョン管理しているファイルをインターネット上に置くものなので、

DropboxGoogleドライブといったクラウドサービスの1つだと認識して良いです。

クラウドサービスとは、本来パソコンに保持していたデータなどをインターネット上に保持するようなサービスのことを言います。

インターネット上にデータを置くことで、インターネットにアクセス出来ればどこからでもデータが確認できるのがメリットです。

しかし、GitHub上に自分が書いたコードを共有することで、世界中の人から自分のコードが見られる状態になります。(GitHubの場合は有料で非公開に設定することも可能。)

このことから、企業は面接の際にエンジニアスキルを測る1つの方法としてGitHubで公開しているコードを確認することもよくあります。

そのため現在ではGitHubはエンジニアのポートフォリオの側面も持つようになりました。

コード内容だけでなくコミット頻度もわかる

コミット頻度が確認できる項目コミット頻度が確認できる項目で緑の箇所はコミットがあったこと表す

上の画像はGitHub上でコミットの頻度が確認できる項目です。

コミットとは、ファイルの変更内容を記録すること。

小さい正方形1つ1つが1日1日を表します。黒背景の吹き出しで「Oct 9, 2017」(2017/10/9)と書かれているのが確認できるかと思います。

正方形の中には灰色のものと、濃さの異なる緑がついているものがあるのもわかるかと思います。

それぞれの意味は以下のとおりです。

  • 灰色 :  コミットを1回もしていない
  • 薄い緑 : 1, 2回といった少ないコミットを行った
  • 濃い緑 : コミットした回数が多い

上の画像はぼくのGitHubアカウントの項目ですが、10月から1月にかけてはほぼ毎日何かしらコードを書いてコミットしているのがわかります。

逆に2月の途中から4月まではあまりコードを書いていないのがわかります。(苦笑)

このことから、その人が普段どれくらいコードを書いているのかもわかるので、エンジニアスキルがまだ低いとしても緑でたくさん埋まっていれば、

その人はプログラミング学習の熱量が高いという判断もすることが出来ます。

未経験からエンジニアになろうと毎日頑張っている方は、自分のパソコン上だけにコードを管理するのはもったいないのでGitHubにコードをアップしてアピールポイントにすることをおすすめします。

まとめ

ここまで、GitHubはエンジニアだけでなくデザイナーファイル変更を頻繁にする方にもオススメだということをお話してきました。

また、エンジニアにとっては自分のエンジニアスキルの公開の場でもあり、どれだけ毎日頑張っているかをアピールすることも出来るため、

ポートフォリオとしての側面をもつということを説明しました。

最後にGitHub使ってみようかなと思っている方のために、GitHubのアカウントを作成するのに参考になりそうな記事をまとめておきます。

【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です