著者プロフィール

株式会社ドワンゴ所属のRubyist。ニコニコ生放送でのGit講座や勉強会「Git道場」の共催などを行ってきた。エディタはEmacs、本業は親バカ。

●GitHub：kwappa●Twitter：kwappa

塩谷 啓（しおや・ひろむ）

株式会社サイバーエージェント所属のWeb Developer。SVNだったプロジェクトにGit・GitHubを導入したことによりその魅力にハマる。エディタはTextMate 2。既刊書は『フロントエンドエンジニア育成読本』（技術評論社／共著）など。

●GitHub：herablog●Twitter：herablog

原 一成（はら・かずなり）

新潟出身の1986年生まれ。株式会社サイバーエージェントのエンジニア。エンジニアとして新卒入社後、ソーシャルゲームのプロダクトマネージャーを経て、現在はNode.jsでフレームワーク開発や育成、ゲーム開発を行う。エディタはvim。社内のGitHub Enterpriseで社内製フレームワークのメインメンテナーもしている。プライベートではウェブサイトやフライヤー制作等のデザインを行っている。本書のサンプルサイトデザインも担当。BaPA1期生。

●GitHub：79yuuki●Twitter：79yuuki

紫竹 佑騎（しちく・ゆうき）

株式会社サイバーエージェント フロントエンドエンジニア。北海道札幌市出身。JavaScriptでのソーシャルゲーム開発がメイン業務。エディタはVimだが、最近Emacs＋Evilが良いかもと思い出してきてる。個人ではHTML5j.org英語部スタッフや海外のOSSの翻訳をしているenja-ossなどに所属したり、 JavaScript Gardenを始めとする、海外のJavaScript関係のドキュメントを翻訳するなどしている。著書に『開発効率をUPする Git逆引き入門 』（C&R研究所／共著）、『フロントエンドエンジニア育成読本』（技術評論社／共著）がある。

●GitHub：Layzie

平木 聡（ひらき・さとる）

Apple、Mac、Macintoshは、米国Apple Inc.の登録商標です。Microsoft、Windowsは、米国Microsoft Corporationの登録商標です。そのほか、本文中の製品名およびサービス名は、一般に各開発メーカーおよびサービス提供元の商標または登録商標です。なお、本文中には™および®マークは明記していません。

はじめに

最近ネットでWeb開発やプログラミングについて調べていると、GitやGitHubなどの単

語を見ない日がない気がします。皆さんも「何だか便利そう！　使ってみようかな」と思っ

て調べてみて、意外とムズかしそうだな……と尻込みしたことが一度くらいはあるのでは

ないでしょうか？　また、Web上の解説ページはバリバリのプログラマー向けのものばか

りでよくわからない……と感じている方もいるかもしれません。

この本は、タイトルからもわかるとおり「Web制作のためのGitHubの使い方」に主眼を

置いているのが特徴です。

GitHubは主にプログラマに好まれるWebサービスですが、Web制作の現場で使用して

も大きな力を発揮します。ただ、やはりもともとプログラマ向けということもあり、非プ

ログラマーの方には敷居が高い面があるのも事実です。

本書ではそういった、「GitHubって名前は聞いたことがあるけど、そもそもどんなサー

ビスなのかわからない」「GitHubを使いたいけど、どこから手を付けたらいいんだろう？」

「わかる範囲で何となく使っているけど、これは正しい使い方なのかな？」といった、使い

はじめのころに感じる戸惑いを想定して執筆しています。

また、GitHubを現場の案件にスムーズに採り入れていただけるように、全編をとおして

架空のWeb制作会社「オクトリンク」の従業員が登場し、会話をしながらサイトを制作して

いくスタイルを採用しました。GitやGitHubを触りはじめたときは説明を聞いてもピンと

来ないことが多いのですが、具体的なシチュエーションを疑似体験すれば、使い方の流れ

がスムーズに理解できるはずです。

　本書の構成は、

• 1、2章：GitHubやそれを使う上で必須なバージョン管理システムであるGitの基本機

能などを紹介。

• 3～5章：オクトリンク社のスマートフォンサイトを制作するというテーマに沿って、

gitコマンドや無料ツールのSourceTreeの操作方法、GitHubの代表的な機能である

IssueやPull Requestなどの使い方を学ぶ。

• 6、7章：GitHub上での作業をより快適にする、Markdown記法やTipsなどを紹介する。

という形になっています。

この本をとおしてGitHubをマスターし、日常的なWeb制作や開発でラクをしていただ

ければ、著者一同としては大変うれしい限りです。

最後に、本書の執筆の機会を与えてくれたインプレス柳沼俊宏様、不慣れな部分をフォ

ローしていただいたリブロワークス大津雄一郎様に感謝いたします。

2014年10月

著者を代表して　平木 聡

第2章 これだけはマスターしたい GitHubの基本機能 21

2-1 みんなで作業するのが楽しくなる！ GitHubの特徴 ·························· 22 GitHubはソーシャルコーディングの中心地 ·········································································· 22 全機能が無料、有料プランで非公開にすることもできる ························································· 23 みんなのファイル置き場 リポジトリ管理 ··············································································· 24 SNS機能で世界中の開発者とつながろう ·············································································· 26 スムーズにプロジェクトを進行させる Issue / Milestone機能 ················································ 28 こんな感じでどうでしょう？ Pull Requestで相互レビュー ··················································· 30 GitHub上で情報公開wikiとGitHub Pages ········································································· 31 コミュニケーションを加速する機能群 ··················································································· 33

2-2 GitHubの画面構成 ································································································ 35 GitHubのトップページ ········································································································ 35 リポジトリページ ················································································································· 38

CONTENTS 目次

第1章 こんにちはGit、 はじめましてGitHub 9

1-1 とあるWeb制作の現場から ············································································ 10 ミッション「自社サイトをリニューアルせよ」 ········································································ 10 Gitって何？ ························································································································ 11 GitHubって何？ ················································································································· 13 コラボレーションツールとしてのGitHub·············································································· 15

1-2 ソーシャルコーディング時代のWeb制作 ··············································· 16 バージョン管理システムとGit ······························································································ 16 ソーシャルコーディングとGitHub ······················································································· 20 ソーシャルコーディングでWeb制作 ···················································································· 20

著者プロフィール ·········································································································· 2

はじめに ························································································································ 3

GitHubでよく出てくる用語·················································································· 8

第 3章 実践！ リポジトリの作成からcloneまで 41

3-1 Gitのインストール ································································································ 42 SourceTree ························································································································· 42 Mac環境へのインストール ·································································································· 44 Windows環境へのインストール ·························································································· 46 SourceTreeのユーザー登録 ································································································· 48

3-2 GitHubアカウントを取得する ······································································· 50 ユーザー登録をする ············································································································· 50 メールアドレスの認証をする ································································································ 51 プロフィール画像を設定する ································································································ 53

3-3 UserアカウントとOrganizationアカウント ······································· 54 2つのアカウントの違い ······································································································· 54 Organizationアカウントを作成する ····················································································· 55 UserアカウントをOrganizationアカウントに変更する ························································ 56

3-4 リポジトリを作成する ·························································································· 60 公開リポジトリを作成する···································································································· 60 リポジトリを非公開にするには？ ·························································································· 62 クレジットカードの登録 ······································································································· 63 リポジトリの設定変更 ·········································································································· 65

3-5 メンバーの管理 ········································································································ 66 メンバーの追加 ···················································································································· 66 コラム　大きな組織用のGitHub Enterprise ········································································· 67 チームの作成 ······················································································································· 68 メンバーの削除 ···················································································································· 70

3-6 ローカルにコピーする（cloneする） ·························································· 71 リポジトリの cloneとは？ ··································································································· 71 SSH Keyの設定 ·················································································································· 72 SourceTreeで clone ··········································································································· 75 コラム　リポジトリブラウザ ································································································ 76 コマンドラインで clone ······································································································· 77

3-7 Gitでバージョン管理 ··························································································· 78 イメージがつかめれば怖くないGit························································································ 78

3-8 GitHubに変更を反映させよう ······································································· 84

README.md ······················································································································ 84 ファイルをステージングエリアに移動させる ········································································· 86 最初のコミット ···················································································································· 89 pushしてGitHubに反映されたことを確認する ···································································· 91 コラム　Raw、Blame、History ·························································································· 92 pullしてGitHubから最新の状態を取得する ········································································· 93 コンフリクトを解決する ······································································································· 94 特定ファイルをバージョン管理しないようにする（.gitignore） ··············································· 97 コラム　ファイルの最新の変更内容を見るには ······································································ 100

第5章 実践！ Pull Requestを使った 分担作業からマージまで 119

5-1 Pull Requestとは？ ···························································································· 120 みんなで共同作業するときは、どうする？ ············································································· 120 2種類の Pull Requestの手順 ······························································································ 121

5-2 Pull Requestを使った共同作業 ···································································· 129 ブランチモデル ···················································································································· 129 Git Flow ····························································································································· 130 GitHub Flow ······················································································································· 134 GitHub Flowを使って開発してみよう ·················································································· 135 はじめての Pull Request ····································································································· 138 送った Pull Requestの修正 ································································································· 142 Pull Requestのmasterブランチへのマージ ········································································ 149

5-3 Pull Requestを送るときに起こりがちなトラブルの対応 ·············· 151 マージしたあとの作業の流れは？ ·························································································· 151 コンフリクトが起きてしまった ! ··························································································· 152 masterブランチがだいぶ進んでしまって、 Pull Requestで送ったコードがマージできなくなった ! ························································· 156

第 4章 実践！ 複数デザインの 提示から採用まで 101

4-1 Issueを使ってデザインを提案する ····························································· 102 Milestoneを立てて作業を管理する ······················································································ 102 Issueを使って作業内容について議論しよう ·········································································· 105

4-2 デザインの相談と修正を Issue上で共有する ········································ 110 デザインを Issueで共有して確認してもらう ········································································· 110 コラム　GitHubのファイルサイズ制限について ···································································· 112 コラム　特定のコミットまで状態を戻す ················································································ 114 Issueを参照しながらデザインを決定する ············································································· 116· コラム　画像表示と差分表示····························································································· 118

第 6章 快適に共同作業するための ドキュメント作成と進捗管理 159

6-1 メンバーと対話しながら課題を解決できる Issue ································ 160 Issueとは？ ························································································································ 161 Issueの機能 ························································································································ 163

6-2 GitHub Markdown ······························································································· 175 そもそもMarkdownって？ ································································································· 175 Markdownの文法 ··············································································································· 177 GitHub Flavored Markdownについて ················································································· 184

6-3 wiki ································································································································· 188 wikiとは？ ·························································································································· 188 GitHubのwikiとGitの関係 ································································································ 191 目次 ···································································································································· 193 コラム　GitHub Pages ······································································································· 194

第 7章 現場で使える！ 便利なGitHubテクニック 195

7-1 LGTM！ GitHub流コミュニケーション ················································· 196 emoticonを使ってみよう ···································································································· 196 GitHubでよく見かける略語 ································································································· 198 コラム　WIP Pull Requestのススメ ···················································································· 199 コメントに画像を入れてみよう ····························································································· 200

7-2 知らないと損！GitHubのテクニック ······················································· 203

Gist ···································································································································· 203 キーボードショートカットを覚えよう ··················································································· 207 クエリパラメータ「?w=1」 ··································································································· 208

7-3 目指せ上級者！GitHubの裏技 ······································································ 210

ブックマークレットで好みの表示にカスタマイズ ··································································· 210 コラム　Macと Homebrew ································································································ 213 黒い画面の便利ツール ·········································································································· 213 コラム　Windowsで便利なコマンドを利用するには？ ·························································· 218

索引 ···································································································································· 219

clone（クローン） …………………… リモートリポジトリを複製して、パソコン内に新たなローカルリポ

ジトリを作成すること。

folk（フォーク） ……………………… GitHub上の他人のリモートリポジトリを編集するために、自分の

アカウント下にコピーのリモートリポジトリを作ること。

Issue（イシュー） …………………… 作業に関する問題を話し合うために使われる一種の掲示板。

Markdown（マークダウン） ……… プレーンテキストで手軽に書式を設定して入力できる記法。

pull（プル） …………………………… GitHub上のリモートリポジトリから、コミットをダウンロードし

てローカルリポジトリに反映させること。

Pull Request（プルリクエスト） … 自分が行った変更をマージしてもらうようリクエストすること。

マージする前に確認できるので、マージ後のトラブルを減らせます。

push（プッシュ） …………………… ローカルリポジトリのコミットをアップロードして、GitHub上の

リモートリポジトリに反映させること。

コミット（commit） ………………… 変更されたファイルやディレクトリの記録を1まとまりにして、リ

ポジトリに登録（バージョン管理）すること。コミットされた変更

内容そのもののことも指します。

コンフリクト（con�ict） …………… 複数の人がファイルの同じ場所を変更してしまった場合などに発生

し、Gitが自動でマージができなくなった状態のこと。

作業ディレクトリ…………………… リモートリポジトリをcloneしたディレクトリ（フォルダ）のこと

で、バージョン管理されていない（コミットされていない）ファイ

ルも含みます。

ステージングエリア………………… ローカルリポジトリ内の領域の1つで、これからコミットするファ

イルをまとめるために使用します。SourceTreeでは「Indexにス

テージしたファイル」と呼びます。

チェックアウト（checkout） ……… ブランチの切り替えなどによって、作業ディレクトリを指定したコ

ミットの状態にすること。

ブランチ（branch） ………………… 並行で作業を進めるために、コミットの流れを分岐させたもの。最

初からある大元のブランチをmasterブランチと呼びます。

マージ（merge） …………………… 複数のブランチやコミットを合体させること。

リポジトリ（repository） ………… Gitで管理されたファイルや変更内容が保存される場所。パソコン

内にあるものをローカルリポジトリ、GitHubなどローカル以外の

サーバ上にあるものをリモートリポジトリと呼びます。

GitHubでよく出てくる用語

8

こんにちはGit、はじめましてGitHub

1Chapter

最近話題になることが多い「GitHub」（ギットハブ）というサービス。では、いったいどんな機能があって、何が便利なのでしょうか？Web制作の現場でGitというツールとGitHubというサービスがどのように使われているのかを、一緒に体験してみましょう。

こんにちは

Git 、はじめまして

GitH

ubC

HA

PTER

1

10

• 主な登場人物

発展途上のWebデザイナー。GitもGitHubもよく知らない。

渋谷さん

中堅Webデザイナー。GitHubは前のプロジェクトではじめて触った。

白金くん

エンジニア経験のあるWebディレクター。GitもGitHubも経験豊富で、日常業務で使いこなしている。

新樹さん

ミッション「自社サイトをリニューアルせよ」

渋谷さんと白金くんは、オクトリンク株式会社のデザイナー。今日は次のプロ

ジェクトについて、ディレクターの新樹さんとミーティングです。

我が社のコーポレートサイトをスマートフォン対応することになりました。最近お客さまからの引き合いも増えているので、GitHubを使ったフローで開発を進めます。

新樹

やったー！白金

ぎっとはぶ？　なにそれ？渋谷

みなさんは「GitHub」というWebサービスをご存知ですか？　これから本書では、架空のWeb制作プロダクション「オクトリンク株式会社」がGitHubを使って自社サイトをリニューアルする、というテーマを通じて、GitHubの楽しさ・便利さを紹介していきます。

とあるWeb制作の現場から1 1

1-1 　とある

Web制作の現場から

11

Gitって何？

今まで渋谷さんがやってたプロジェクトは、毎日の作業を日付の名前がついたフォルダで管理してたでしょ？

白金

そうなんです。あのやり方は昨日の作業内容を忘れちゃうし、他の人と同じファイルを変更すると、手作業で 1 つのファイルにしなくちゃならないし、いろいろ大変なんですよねー。

渋谷

そこで Git の出番なんだ。Git は「バージョン管理システム」といって、変更内容を細かい単位で記録しておくことができるんだ 図1 。

白金

図 1 Gitの変更履歴。追加したファイルや削除したファイル、修正箇所などが表示されている

先頭に「ー」がついた赤い部分が変更前、先頭に「＋」がついた緑の部分が変更後を表している。

白金

すごい！渋谷

Git を使えば修正内容の差分を見たり、いつ誰が変更したかチェックしたり、変更を取り消したりできるんだ。

白金

それは便利そう！　……でも、Git って「黒い画面」を使わないといけないんですよね？　あれわたしニガテで……。

渋谷

こんにちは

Git 、はじめまして

GitH

ubC

HA

PTER

1

12

今は使いやすい GUI のツールがたくさんあるから大丈夫！僕が使ってるのはこれだよ 図2 。

白金

これならわたしでもがんばれそう！渋谷

図 2 GUIで操作できるGitクライアント「SourceTree」

1-1 　とある

Web制作の現場から

13

GitHubって何？

Git が便利なのは何となくわかったですけど、GitHub ってなんですか？渋谷

GitHub は、Git のホスティングをしてくれるサービスだよ。みんなが手元で行った修正をやりとりするためのサーバを提供してくれるんだ 図3 。

白金

図 3 GitHubのサインイン画面

これがトップページ。僕のアカウントでサインインしてみるよ 図4 。白金

図 4 サインイン後のGitHubのトップページ

こんにちは

Git 、はじめまして

GitH

ubC

HA

PTER

1

14

ねこ！　ねこかわいい！！渋谷

それはオクトキャットという GitHub のマスコットなんだけど、今はほっといて先に進むよ。

白金

GitHub では、ファイルや修正履歴を確認したり、リポジトリやブランチを作ったり、という作業をブラウザから行うことができる。

白金

例えば「画像を差し替えて CSS を修正」なんていう変更を、こんな風に見ることができるよ 図5 。

白金

図 5 CSSの変更履歴を表示

画像の差分は 3 通りの表示ができるんだ。これはスライダーを動かして比較する「Swipe」というモードだよ 図6 。

白金

図 6 画像の差分表示

これすごく便利ですね！　減色して劣化していないかとか簡単に確認できそう。渋谷

1-1 　とある

Web制作の現場から

15

コラボレーションツールとしてのGitHub

GitHub の機能はそれだけじゃないよ。ほら、修正にコメントがついているだろう？図7

白金

図 7 コードにコメントをつけられる

あ、ほんとだ。具体的だし、直す位置もすぐわかりますね！渋谷

GitHub の一番大きな魅力は、コラボレーションツールとしての機能なんだ。修正内容を確認する、コメントする。OKだったら統合する。GitHubが中心になることで、スムーズにコミュニケーションしながら開発を進められるんだ。

白金

今までのメールや電話でごちゃごちゃ飛んでくる修正指示はなんだったのかしら……。

渋谷

白金くん、ずいぶん GitHub を使いこなしてるようだね。これなら渋谷さんもすぐ覚えるだろう。コーチはまかせたよ！

新樹

ま、まかせてください！白金

こんにちは

Git 、はじめまして

GitH

ubC

HA

PTER

1

16

バージョン管理システムとGit

Gitとは「バージョン管理システム」（VCS：Version Control System）と呼ば

れるソフトウェアの1つです。

バージョン管理とはみなさんはWebサイトを制作していくとき、図のようにプロジェクトのフォ

ルダ名に日付を入れてバックアップしたことはありませんか？

public

public_0701

public_0702

public_0703

とても原始的ですが、これが「バージョン管理」です。この例だと、7月1日か

ら7月3日に行われた修正の履歴がバックアップされています。

作業の途中で「やっぱり前のほうがよかったのでは？」となることも、よくあ

るのではないでしょうか。そんなときに過去の履歴が残っていれば、前の状態に

こうしてオクトリンク株式会社では、GitHubを使ったプロジェクトがスタートしました。ソフトウェア開発において欠かせないツールとなりつつあるGitとGitHub。最近はソフトウェア開発だけでなく、Web制作や出版といった分野でも活用されるようになってきました。もちろんこの本も、GitHubの機能をフル活用して執筆されています。さて、「Git」と「GitHub」はどんなもので、それぞれどんなメリットがあるのでしょうか。あらためて説明していきましょう。

1 2ソーシャルコーディング時代のWeb制作

1-2 　ソーシャルコーディング時代の

Web制作

17

戻したり、今の状態と比較したりできます。履歴が残っていて、修正を元に戻す

ことができれば、思い切った改善をするときでも、安心して作業を進められます。

専用ソフトウェアを使う理由変更履歴を保存するだけなら、日付フォルダでも十分かもしれません。しかし、

VCSには開発を支援してくれるさまざまな機能があります。

• コミット̶̶修正をグループ化する

コミット（commit）は、修正をひと固まりにして保存する単位です。修正内容

のほかに、修正日時、修正した人、修正した内容についてのコメントが含まれて

います。

commit 79ddba557b13920ac20e2f8af9156e373b87d9acAuthor: Shirokane <shirokane@example.com>Date: Sun Jul 20 13:37:48 2014 +0900

first commit

* add index.html

このように、「誰が（Author）」「いつ（Date）」「どのような（add index.html）」

変更を行ったかの履歴をひとまとめにしたものがコミットです。コミットを意味

のある単位でまとめることで、コミット単位の差分を見たり、コミット単位で修

正を取り消したりできます。

例えば……

ヘッダの文言をちょっと修正した

ヘッダの文字色を少し濃くした

ヘッダの文字にドロップシャドウを指定した

という修正を1つのコミットにまとめておくと、あとから修正箇所を探したり、

ある修正だけを取り消したり、ということが簡単にできるのです。日付単位のバッ

クアップでは、同じことをするのはなかなか大変でしょう。

• diff̶̶修正の差分を見る

diff（ディフ）は、修正された差分を見る機能です。修正の結果、ファイルがど

こんにちは

Git 、はじめまして

GitH

ubC

HA

PTER

1

18

のように編集されたかを見ることができます。文字の追加があった場合、追加さ

れた文字列は緑に色分けされ、行頭に「+」記号がつきます。逆に、文字が削除さ

れた場合、削除された文字列は赤に色分けされ、行頭に「-」記号がつきます。また、

「+++」は新しいファイルの名前、「---」記号は古いファイルの名前を表します。

diffdiff --git a/index.html b/index.htmlindex fdcd16b..1b9aa78 100644--- a/index.html+++ b/index.html@@ -5,6 +5,9 @@ <title>Git and GitHub</title> </head> <body>- <p>Hello, Git and GitHub!</p>+ <h1>こんにちはGit、はじめましてGitHub</h1>+ <p>+ みなさんは「GitHub」というWebサービスをご存知ですか？+ </p> </body> </html>

• マージ̶̶複数のコミットをまとめる

マージ（merge）は、複数のコミットをまとめる機能です。例えば、index.

htmlに、誰かがCSSを読み込む修正をしたとします。

diff@@ -2,6 +2,7 @@ <html> <head> <meta charset="UTF-8">+ <link rel="stylesheet" href="/common.css"> <title>Git and GitHub</title> </head> <body>

同じころ他の誰かが、本文に小見出しを追加しました。

diff@@ -9,5 +10,6 @@ <p> みなさんは「GitHub」というWebサービスをご存知ですか？ </p>+ <h2>バージョン管理システムとGit</h2> </body> </html>

1-2 　ソーシャルコーディング時代の

Web制作

19

このように、同じファイルに違う人が同時に修正を行うのはよくあることです。

VCSのマージ機能を使うと、両者の作業内容からコードの変更部分を自動的に

取り込んで、どちらの修正も取りこぼさずに反映することができます。

Gitが選ばれる理由VCSにはいくつか種類があります。CVSやSVN（Subversion）などは、名前

を聞いたことがある方も多いかもしれません。その中で、なぜGitの人気が高い

のでしょうか。

• 分散型

Gitは「分散型」と呼ばれる管理方法を採用しています。一度サーバからリポジ

トリ（ソースコードを管理するプロジェクトの単位）を取得しておけば、オフラ

インの状態でも手元で変更を行い、修正履歴を残すことができます。

オフラインで行った修正は、オンラインになってからマージし、サーバに反映

すればいいのです。

• 高速

Gitは独自のファイル管理方法を採用したため、旧来のVCSより高速に動作し

ます。特にブランチ （P.82参照）を作成したり切り替えたりする操作がストレス

なく行えます。

• 賢いマージ

前ページで紹介したマージの例はごく単純なもので、どんなVCSでもマージ

してくれるでしょう。

Gitは他のVCSと比べてマージのアルゴリズムが優れており、同じ箇所を同時

に修正してしまった場合などの複雑なケースでも、問題なくマージしてくれるこ

とが多いのです。

このような特徴から、Gitはソフトウェア開発の現場で多く採用されてきまし

た。そして今では、Web制作のシーンでもGitを使うことが増えてきました。

もちろんGitそのものの便利さ・強力さは魅力です。ですが、流行した理由と

してもう1つ、「GitHubの普及」が大きく影響しています。

こんにちは

Git 、はじめまして

GitH

ubC

HA

PTER

1

20

ソーシャルコーディングとGitHub

GitHubは2008年にオープンした、Gitのリモートリポジトリ（P.24参照）と、

さまざまなWebツールを提供するサービスです。アカウントさえ作成すれば、

基本的な機能は無料で使うことができます。

GitHubの魅力は、Gitというバージョン管理システムを簡単に使える点にあ

りますが、それ以上に人気を集めている理由は、Webベースで提供されるコラ

ボレーションツールにあります。オープンソースソフトウェアは、時間的にも地

理的にも離れたところに住む複数のプログラマによって開発されます。オンライ

ンでのコミュニケーションを潤滑に進めるために、GitHubでは相談して課題を

解決する Issue（イシュー）や改善案を手軽に提案できるPull Request（プルリク

エスト）などの機能が提供されています。

これらの優れたコラボレーションツールによる開発フローが注目され、オープ

ンソース開発だけではなく、業務での開発にも使われるようになってきました。

Web制作の現場においても、GitHubの魅力に注目が集まっています。

ソーシャルコーディングでWeb制作

こうしてオクトリンク株式会社では、はじめてのGitHubプロジェクトがスター

トしました。はたしてプロジェクトは順調に進むのか？　渋谷さんはGitHubを

使いこなせるのか？

デジタルなものづくりを楽しく強力にサポートしてくれるGitHubの世界を、

オクトリンク株式会社のWeb制作チームと一緒に体験し、使いこなせるように

なりましょう！

これだけはマスターしたいGitHubの基本機能

2Chapter

GitHubは公開以来、たくさんの開発者に利用され、現在ではさまざまな開発の中心地となっているサービスです。この章では、GitHubの機能の中でも、これだけはマスターしておきたい基本的な機能を紹介していきます。

これだけはマスターしたい

GitH

ubの基本機能

CH

AP

TER

2

22

GitHubはWebサービスとして作られているので、誰でも簡単に、Gitをベースとした共同作業をすることができます。ここでは、それらを実現するさまざまな機能について紹介します。

みんなで作業するのが楽しくなる！ GitHubの特徴2 1

GitHubはソーシャルコーディングの中心地

GitHubの世界へようこそ！　GitHubは2008年にTom Preston-Werner

（http://tom.preston-werner.com/）らによって公開されました。バージョン管

理システムであるGitのホスティングサービスとして開発されたGitHubですが、

Webサイトとして作られているため、コマンドラインが苦手な開発者でも簡単

に利用することができます。現在では、世界中の約700万人の開発者がWebサ

イトやオペレーションシステムの開発、書籍の執筆などに利用しており、それら

の内容が集まる「開発の中心地」ともいうべきサービスとなりました。

GitHubには、ソーシャルコーディングを手助けするたくさんの機能がそろっ

ています。ソーシャルコーディングとは複数人のメンバーでコラボレーションし

ながら作業していくスタイルで、いつでもどこでも、場所や時間にとらわれず協

力して作り上げていくという新しいものづくりを可能にしています。

筆者もそれらの魅力に取りつかれたユーザーの1人です。それでは、GitHub

の代表的な機能について紹介していきましょう。