エンジニア駆け出し

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開発」を使って学習を進めていただきます。

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

誰向けのプラン?

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

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

プラン内容は?

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

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

1日1回カフェでコーヒー1杯頼むくらいの金額で参加できます

1日1回、カフェでコーヒー1杯分くらいの値段(約330円)」で以下の環境が手に入るとイメージして頂けたらと思います。

  1. コードを添削してもらえる
  2. 学習したことのアウトプットに対してフィードバックしてもらえる
  3. いつでも質問出来る
  4. 週1のオンライン講義に参加できる
  5. 過去のオンライン講義動画を好きな時間に復習できる(いつでも閲覧可能)
  6. 不定期で行うオフラインでの勉強会に参加できる(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)
  7. 自分の住まいの近場のメンティーさん同士で集まって、オフラインで勉強会を開くのも可能(初めて開催する場合は事前に僕に連絡をいただけたらと思います)

学習教材には、このサイトで用意している「【学習コンテンツ】Web開発」を使います。

【学習コンテンツ】Web開発」を使って学習を進めることで、Webのフロントエンドとバックエンドのスキルを身につけていくことができます。

プログラミングスクールとの比較

プログラミングスクールに通う場合は1ヶ月で10万円以上するところも多いですし、3ヶ月で50万円、更には100万円するところもあります。

プログラミングスクールの値段が高い理由は、「プログラミングスクールで働いている人の人件費」「就職のサポート」なども含まれているからです。

10万円50万円100万円」のいずれの場合も、自己投資とはいえ、支払うのにはだいぶ勇気がいる金額かと思います。

オススメの学習方法

個人的にオススメするのは、プログラミングのできるメンター(師匠)を見つけて、まずは1ヶ月プログラミング学習をしてみて、自分にプログラミングが向いているかどうか確かめてみることです。

10万円50万円100万円」を払って、学習していく中で「やっぱり自分にはプログラミングは向いてない」と判断した場合、その金額はかなりの痛手となります。

そのため、まずは「これくらいの金額なら最悪失っても痛くないな」の値段で教えてくれるメンターを見つけて、そのメンターに色々と質問をしてみましょう。

それで、「良さそうだな」と思ったら教えてもらうといった流れで学習を始めると、金額もだいぶ節約できます。

注意点

ただし、参加者が増えてきたら、1人1人へのサポートの質を維持するのが難しくなるので、値上げする可能性もあります。

値上げする理由は次の以下の理由となります。

  • 値段を上げて参加ハードルをあげることで、自己解決スキルも身につけたいと考えている学習意欲の高い人だけが参加するようになる
    • 調べたらすぐにわかることを、自分で調べずに何でもかんでも質問すると、自己解決スキルも身につかない
    • 更に、他のメンティーさんの対応する時間が取れなくなりサポートの質の低下にも繋がる

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

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

 

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

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

COMMENT

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