プログラミング未経験からでも月50万円達成

GitHubを使って開発効率を上げよう!〜使い方解説・入門編〜

作成: 2016.09.09 更新: 2019.04.23

>> 世帯年収300万以下限定!
転職成功まで受講料発生なし。詳細はこちら

あなたはGitHubの使用方法をご存知ですか?

プログラミングを学習する過程で一度は耳にしたことがあるでしょう。
これから開発者として次々にプロダクトを生み出していくためにGitHubは必要不可欠な存在です。

この記事ではまだGitHub使ったことがない、使ってみたいけど何から始めればいいかわからない、といった悩みを解消します。

Git・GitHubとは?

Git

git2

Gitとは、世界中で利用されている開発者にとって必須となる「バージョン管理システム」です。

「バージョン管理システム」と言われても初心者の方はピンとこないかもしれませんが、すぐに馴染めるようになるので安心してください。

初心者の方は、Gitとは「ファイルにセーブポイントを作って好きな時に以前の状態まで戻したりできる便利なツール」と覚えてください。

Gitを使うことでシステム開発においても、ポケモンやドラクエのゲームみたいにセーブポイントを作ってミスした時はセーブポイントまで戻ることができるようになるのです。

Gitを使わずにファイルを好きな時に編集前の状態に戻したりしながら開発を行うには、編集前のファイルをその都度保存し、バックアップを取りながら編集していかなければなりません。考えただけでもイライラするぐらい大変面倒な手間がかかります。

GitHub

Octocat
出典: GitHub
GitHubとは、自分が書いたコードを世界中の人達に公開したり、共有することができるGitの仕組みを用いたWebサービスのことです。

初心者の方はGitとGitHubが混同してしまうことがよくありますが、この2つは同じものではありません。バージョン管理をするだけならばGitだけで十分です。

しかし、プログラミングをしていると、どうしても「他の人のソースコードを見たい」「自分のソースコードをオープンにして色々な人に見てもらいたい」と願望が湧いてくるものです。それを叶えてくれるのがGitHubです。

GitHubは、Gitの仕組みをネットワーク上にしたWebサービスのことで、「Hub」という名前はネットワークを意味して名付けられています。

Gitを使いGitHubのサーバ上で自分の書いたコードを公開したり、GitHubで公開されている様々なプロジェクトコードのコピーを自分のコンピュータに保存したりすることができます。

また、共同編集の設定をすることで特定の人と同じプロジェクトを共同開発することもできます。

GitHub社によって運営されており、LINEやFaceBookのような他のSNSと同じように誰でも無料で利用することができます。

GitHubの全ての機能は無料で利用することができ、300MBまでなら好きなだけコードを管理することができます。また、月額7$の有料プランに加入すると他の人には公開しないクローズドなコード管理ができるようになります。

GitHubは、個人開発、共同開発どちらの場合にも使います。特に共同開発の際には強力な力を発揮するため多くの開発現場で利用されています。

自分が書いたコードをGitHubで公開し、他のメンバーがそのコードをチェックしながら開発を進めていくことができるので効率よくスムーズに開発を行うことができます。

 

どんなときに使うの?

GitHubをチームで活用することで、協力してコードレビューしながら開発を進めることができます。

GitHubを使ってコードレビューを行うことで、ファイルを編集した意図や編集箇所を一目でわかるようになります。

編集したファイルにコメントを付けることもできるので、アドバイスを簡単に行うことができ非常に便利です。日本だけでなく、世界各国の企業がソースコードを管理するためにGitHubを使って開発を行っています。

また、GitHubはOSS(オープンソース・ソフトウェア)の公開場所としても活用されており、世界中の優れた技術を共有する場として多くの方が活用されています。海外の有名企業はもちろん、国内でもサイバーエージェントなど有名企業が続々とGitHubでOSSを公開しています。

また、GitHubは自分の書いたコードを公開し共有することができるので開発者としてどれくらいコードを書けるのか判断基準として優れているので就職や転職活動の際にも利用されており、「GitHub採用」を行っている企業も少なくありません。

効率よく開発が行えるだけでなく、自らの技術力をアピールする手段としても利用されています。

 

事前準備

Gitをインストールしよう

 

git
出典:Git

GitHubを使って開発を行うためには、まずGitをインストールする必要があります。
では、さっそくGitを利用するために環境構築を行いましょう。

まずは、Gitのホームページにアクセスし、下記の画像を参考にDownloadsをクリックしてGitをインストールして下さい。
bab8a891d75a1b8c1e2e45ba2783a3d2
出典:Git

GitHubに登録しよう

次は、GitHubに登録してみましょう。

基本的にGitHubは英語ベースですが、高校英語程度の英語力で問題なく使用できます。英語サイトに慣れない方はこれを機に合わせて英語の学習を始めてみるといいかもしれません。screencapture-github-join-1473088276714

こちらがGitHubのホームページです。

フォームにユーザ名、メールアドレス、パスワードを入力して「Create an account」ボタンをクリックしてください。次に、プランを選択する画面が表示されると思います。GitHubの章で説明した有料プランと無料プランをこちらの画面で選択することができます。

事業上公開できないプログラムを持っている場合以外は、無料プランを選ぶと良いでしょう。「Free」を選んで「Finish sign up」ボタンをクリックしてください。

登録フォームに入力したメールアドレスに認証メールが届きます。そのメール内にある「Verify email address」ボタンを押します。
「Welcome to GitHub!」というメールが届いたらGitHubの登録完了です。

GitHubで使う機能(リポジトリ、コミット、ブランチ、プッシュ、プル)

スクリーンショット 2016-09-02 10.31.05

GitHubを使うために必要になる用語があります。

  • リポジトリ
  • コミット
  • ブランチ
  • プッシュ
  • プル

この基本用語を理解すればGitHubがどのように「バージョン管理」を行うのか全体図が掴めてくると思います。
それでは、一つ一つの機能の使い方について解説していきます。

 

リポジトリ

GitHubを理解する上で、基本となるのがこの「リポジトリ」です。
リポジトリとは、データを貯めておくための貯蔵庫です。ここに編集し保存したファイルの情報をどんどん貯めていきます。

041

リポジトリには、自分のPCの中に存在する「ローカルリポジトリ」とサーバーやWeb上に存在する「リモートリポジトリ」の二種類があります。

まず、編集したファイルの情報を「ローカルリポジトリ」に保存します。次に「ローカルリポジトリ」の内容をWeb上に存在する「リモートリポジトリ」に反映させるという流れで開発を進めていきます。これはコミットやプッシュという作業です。

リポジトリが貯蔵庫だということは理解できたと思いますが、そもそもコミットやプッシュがわからないと思うので順番に説明していきます。

コミット

コミットとは、編集したファイルの更新履歴をリポジトリに保存することです。

コミットとは1つのセーブポイントのことです。作業をしていて間違ってコードを消して保存してしまっても、その前の段階でコミットをしておけばコミットした地点まで戻ることができるのでなるべく小さくコミットしていくことを心がけましょう。

ブランチ

スクリーンショット 2016-09-06 0.17.06

ブランチとは、履歴を分けて記録していくため仕組みのことです。GitHubでは実装する機能ごとにブランチを作ってファイルの編集が完了するとブランチへコミットしていきます。ブランチを使うことで同じリポジトリの中で複数の作業を同時並行で進めることができます。

例えば、Webアプリ開発においてログイン機能を実装する場合は「login_function」というブランチを作りそのブランチでログイン機能の実装を進めていきます。

特にブランチの名前は実装する機能ごとに決まっているわけではないので開発チームが理解しやすいように名前をつけてください。

プッシュ

プッシュとは、編集したファイルの更新履歴をリモートリポジトリに反映させることです。
下記の画像を見てもわかるようにコミットだけでは編集したファイルをローカルリポジトリに保存しているだけです。これではリモートリポジトリに内容を反映させることができていないのでバージョン管理は行うことができません。

きちんとローカルリポジトリの内容をリモートリポジトリに反映させるためにプッシュします。

プル

プルとは、リモートリポジトリの内容をローカルリポジトリに反映させることです。
協同で開発している人が新しい機能を追加した時に、その情報を自分のローカル上に引っ張ってくるために使います。

自分のPC上(ローカル環境)にローカルリポジトリを作成し、編集したファイルの更新履歴をブランチにコミットしweb上で共有するためにリモートリポジトリにプッシュします。リモートリポジトリの内容はプルすることでローカルリポジトリに反映することができます。

つまり、ローカルリポジトリで開発を進めながらリモートリポジトリに随時プッシュしていくことでWeb上にも更新履歴を保存しながら効率よく開発が行えるというわけです。

TECH::EXPERT 東京・名古屋・大阪・福岡

プログラミング未経験からWebエンジニアとして転職成功まで導くスクール TECH::EXPERT は、挫折しない環境を提供いたします。すべて駅から通いやすい便利な場所。いつでも質問できるメンター(講師)、一緒に頑張る同期がいるから頑張れる。そんな教室を是非見にきてください!

SourceTreeを使って簡単にGitを使おう!

logosourcetreepng出典:SourceTree

さきほど説明した、コミットやプッシュ、プルなどはGitコマンドを用いて使用することもできるのですが、今回は、SourceTreeという非常に便利なツールを使います。

SourceTreeとは

Mac、Windowsどちらでも使うことができるGitをグラフィカルでわかりやすく使うためのツールです。SourceTreeを使うことでコマンド操作を使わずにリポジトリの操作を簡単に行うことができます。

SourceTreeをインストールしよう

①まずは、SourceTreeをダウンロードしてください。
②ダウンロードしたディレクトリをダブルクリックし、表示されたアイコンをドラッグしてアプリケーションディレクトリに入れてください。

003

③アプリケーションディレクトリからSourceTreeを起動してください。
以下のような画面が表示されるので、利用規約にチェックを入れましょう。
SourceTreeの使用データを送信しSourceTreeの改善をお手伝いしても良いという方はこちらにもチェックを入れましょう。

004

チェックが済んだら続けるを押してください。

④GitHubのアカウントを登録してください。
続いて以下のような画面が表示されるので、先ほど登録したGithubのアカウントを入力しましょう。

005

以上でSourceTreeのインストールは完了です。

SourceTreeの使い方

まずは、ローカルリポジトリを作ってみましょう。
①SourceTreeを起動し、上部バーにある「新規リポジトリ」をクリックするとメニューが表示されるので「ローカルリポジトリを作成」をクリックしてください。

006
今回はsampleという名前でローカルリポジトリを作ります。
②ファイルを保存したい場所を選択し、「作成」をクリックしてください。
007

以下のようにリポジトリが作成されていれば成功です。
sampleと表示されている部分をダブルクリックしてください。
008

以下のようなウィンドウが表示されましたか?

009

この画面上で先ほど解説した全ての操作が可能になります。
作業コピーの横に③という数字が表示されていると思います。これは、編集されたファイルが3つありますという意味です。
この画面に編集したファイルの情報が反映されます。上のツールバーにあるボタンを使ってブランチを作ったりプッシュやプルを行うことができます。記事の中で紹介した用語を思い出しながら使ってみましょう。

さらに詳しく知りたいという方には、書籍などもあるので参考にしてみてください。
「Gitが、おもしろいほどわかる基本の使い方33」

 

まとめ

開発者にとってGit、GitHubに関する知識は必須です。奥が深く使いこなせるようになるまでには時間がかかるかもしれませんが、開発経験を積めば積むほど徐々に重要性を実感すると思います。

バージョン管理を行いながら効率よく開発を進めていくことはもちろんのこと、GitHubで他の人のコードを見ながら学習したり、自分が書いたコードを世界中に公開することは開発者の楽しみの一つです。

この記事の内容がこれからのあなたの開発者としての経験に役立てば幸いです。

 

TECH::CAMPについて

TECH::CAMPは、講義形式で知識だけを学ぶのではなく、実際にサービスを作りながら実践的に学んでいきます。

TECH::CAMPならプログラミングが、なんとなく分かるではなく、一人で出来るようになります。

また、質問し放題のため、分からないところを質問しすぐに解決することで、どんどん新たなスキルを身につけることができます。

この機会にプログラミングを学びませんか?

banner_techcamp

会社に縛られず自由に働けるエンジニア・Webデザイナーへ

TECH::EXPERTは未経験からのエンジニア・Webデザイナー転職を実現するスクールです。

  • 残業が多い
  • プライベートを充実させながら自由に働きたい

そんな方には柔軟な働き方が可能なエンジニア・Webデザイナーがおすすめです。未経験からプロとして働けるスキルを身につけられ、徹底したサポートで案件獲得を支援します。

まずは無料キャリア相談(カウンセリング)から、お気軽にご相談ください。

無料キャリア相談の日程を見る

この記事を書いた人

Avatar
濵口魁希