2018-05-21

Github（Git）の各機能を理解するための図解

Github（Git）の各機能を理解するための入門編として、それぞれ簡単な図を書いて使い方を説明してみます。

まずはじめにGithub のリモートリポジトリに以下のようにmaster、hoge1、hoge2というブランチがあるとします。

Github
リモートリポジトリ
master
hoge1
hoge2

クローン（Clone）

Github
リモートリポジトリ
master
hoge1
hoge2

　↓　クローン（Clone）する

自分のPC
ローカルリポジトリ
リモートブランチ	ローカルブランチ
master	master
hoge1
hoge2

クローン（Clone）すると自分のPCにローカルリポジトリが作成され、
リポジトリ内にリモートブランチ、ローカルブランチというグループが出来ます。

リモートブランチにはリモートリポジトリにあったブランチが全て作成され、
ローカルブランチにはリモートリポジトリにあったmasterが作成されます。

ブランチの作成

ブランチはローカルリポジトリの中にあるブランチならどこからでも作成できます。

例えばリモートブランチのmasterから認証機能を実装するためのadd_authというローカルブランチを作成したとします。

自分のPC
ローカルリポジトリ
リモートブランチ		ローカルブランチ
master	┐	master
hoge1	└→	* add_auth
hoge2

ブランチの移動

Gitではローカルブランチを切り替えることで、作業をする環境を切り替えます。

ユーザ一覧画面を作成するためのローカルブランチを作成したとします。

自分のPC
ローカルリポジトリ
リモートブランチ		ローカルブランチ
master	┐	master
hoge1	│	add_auth
hoge2	└→	* user_list

＊の付いた場所が現在の位置で、add_authのソースコードを修正したい場合はadd_authブランチに移動します。
そうするとソースコードがadd_authのものに切り替わります。

自分のPC
ローカルリポジトリ
リモートブランチ		ローカルブランチ
master		master
hoge1	┌→	* add_auth
hoge2	└─	user_list

このローカルブランチの移動をGitではチェックアウト（checkout）と呼びます。 ※Subversion（SVN）を知っている方だとこのあたり少し違和感があります

プッシュ（Push）

Github
リモートリポジトリ
master
hoge1
hoge2
add_auth

←┐
　↑
　↑
　↑
　↑
　↑
　↑
　↑
　↑
─┘

自分のPC
ローカルリポジトリ
リモートブランチ	ローカルブランチ
master	master
hoge1	* add_auth
hoge2	user_list

プッシュ（Push）とは、修正を施したローカルブランチをリモートリポジトリへ送ることです。

プルリクエスト（Pull request）

プルリクエストとは、Github上でソースコードのレビュー（＆マージ）依頼をすることです。

Github
リモートリポジトリ		プルリクエスト
master	←┐	add_authからmasterへのマージをするプルリクエスト
hoge1	↑
hoge2	↑
add_auth	─┘

プルリクエストを出したあとにレビューを依頼して、依頼された人はGithub上でソースコードの差分を確認します。問題があれば差し戻し、問題がなければそのままマージしたり（依頼者に戻してマージを促したり）します。

フェッチ（Fetch）

フェッチ（Fetch）とは、リモートリポジトリの最新をローカルリポジトリのリモートリポジトリに反映することです。
master、hoge1、hoge2の最新ソースと、先程プッシュ（Push）したadd_authがローカルリポジトリのリモートブランチへ反映されます。

┌─
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
└→

Github
リモートリポジトリ
master
hoge1
hoge2
add_auth

自分のPC
ローカルリポジトリ
リモートブランチ	ローカルブランチ
master	master
hoge1	* add_auth
hoge2	user_list
add_auth

マージ（Merge）

マージ（Merge）とは、他のブランチに加えられた変更をローカルブランチへ反映させることです。

先程、フェッチ（Fetch）をしたので最新のソースコードがローカルリポジトリのリモートブランチに反映されています。
例えば、最新のmasterブランチのソースコードをローカルブランチのadd_authへ反映させたい場合は以下のようにマージします。

自分のPC
ローカルリポジトリ
リモートブランチ		ローカルブランチ
master	┐	master
hoge1	└→	* add_auth
hoge2		user_list
add_auth

プル（Pull）

プル（Pull）とは、フェッチ（Fetch）を行ったあとにマージ（Merge）を行う手順を１つにしたものです。

┌─
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
└→

Github
リモートリポジトリ
master
hoge1
hoge2
add_auth

自分のPC
ローカルリポジトリ
リモートブランチ		ローカルブランチ
master	┐	master
hoge1	└→	* add_auth
hoge2		user_list
add_auth

スタッシュ（Stash）

ローカルブランチで開発をしていると開発途中で別のブランチへ移動したいことが度々あるかと思います。
その際、コミットしてから別ブランチへ移動するのがGitの流儀のようなのですが、コミットしたくない場合はスタッシュ（Stash）を使います。

以下、add_authで修正中のソースコードをスタッシュ（Stash）すると、スタッシュに修正中の内容が移動し、ローカルブランチでは変更ファイルがない状態になります。

自分のPC
ローカルリポジトリ
リモートブランチ	ローカルブランチ		スタッシュ
master	master	┌→	edit_add_auth
hoge1	* add_auth	┘
hoge2	user_list
add_auth

アンスタッシュ（UnStash）

アンスタッシュ（UnStash）とは、スタッシュに保持したファイルをローカルブランチへ戻したい場合に使います。

自分のPC
ローカルリポジトリ
リモートブランチ	ローカルブランチ		スタッシュ
master	master	┌	edit_add_auth
hoge1	* add_auth	←┘
hoge2	user_list
add_auth

フォーク（Fork）

フォーク（Fork）とは、リモートリポジトリを自分のアカウントのリモートリポジトリとして複製することです。

Github
リモートリポジトリ	→	自分のアカウントのリモートリポジトリ
master		master
hoge1		hoge1
hoge2		hoge2

フォーク（Fork）を使う場合は、フォークした自分のアカウントのリモートリポジトリからクローン（Clone）し、自分のアカウントのリモートリポジトリへプッシュ（Push）して、そこからフォーク元のリモートリポジトリへマージするプルリクエストを出すことになります。

Github
リモートリポジトリ		自分のアカウントのリモートリポジトリ
master	←┐	master
hoge1	│	hoge1
hoge2	│	hoge2
	└	add_auth

↑↓

自分のPC
ローカルリポジトリ
リモートブランチ	ローカルブランチ
master	master
hoge1	* add_auth
hoge2	user_list
add_auth

コミット（Commit）

そもそもコミットの説明をしていませんでしたが、コミット（Commit）とは現在のローカルブランチへ修正を反映させることです。

例えば以下のようにuser_listブランチへ
2018/04/01 12:00:00 に「基礎機能の追加」をコミットし、
2018/04/02 12:00:00 に「機能Aの追加」をコミットし、
2018/04/03 12:00:00 に「機能Bの追加」をコミットし、
2018/04/04 12:00:00 に「機能Cの追加」をコミットしたとします。

すると以下のようにuser_listブランチのコミットログへ追加されます。

自分のPC
ローカルリポジトリ
リモートブランチ	ローカルブランチ	コミットログ
master	master
hoge1	add_auth
hoge2	* user_list	2018/04/04 12:00:00 - 機能Cの追加 2018/04/03 12:00:00 - 機能Bの追加 2018/04/02 12:00:00 - 機能Aの追加 2018/04/01 12:00:00 - 基礎機能の追加：
add_auth

リバート（Revert）

リバート（Revert）とは、既にコミットした内容を戻したい場合に使用します。

例えば先程追加したコミットログで機能Bの修正を戻したい場合に使用し、元に戻した修正として新たにコミットし、コミットログへ追加されます。

自分のPC
ローカルリポジトリ
リモートブランチ	ローカルブランチ	コミットログ
master	master
hoge1	add_auth
hoge2	* user_list	2018/04/05 12:00:00 - Revert 機能Bの追加 2018/04/04 12:00:00 - 機能Cの追加 2018/04/03 12:00:00 - 機能Bの追加 2018/04/02 12:00:00 - 機能Aの追加 2018/04/01 12:00:00 - 基礎機能の追加：
add_auth

リセット（Reset）

リセット（Reset）とは、特定のコミットのタイミングまで遡りたい際に使用します。

例えば先程のコミットログで、「機能Aの追加」をコミットしたタイミングに遡りたい場合は、リセット（Reset）を使用してそのタイミングまで遡ったソースコードに戻すことが出来ます。

自分のPC
ローカルリポジトリ
リモートブランチ	ローカルブランチ	コミットログ
master	master
hoge1	add_auth
hoge2	* user_list	2018/04/02 12:00:00 - 機能Aの追加 2018/04/01 12:00:00 - 基礎機能の追加：
add_auth

チェリーピック（Cherry Pick）

チェリーピック（Cherry Pick）とは、別のブランチへコミットされている内容を今いるローカルブランチへ反映させることです。

例えばリモートブランチのmasterからuser_list_newブランチを新たに作成し、
user_listブランチから「基礎機能の追加」をチェリーピック（Cherry Pick）してコミットすると以下のようにuser_list_newブランチへ別のブランチからコミットを移すことが出来ます。

自分のPC
ローカルリポジトリ
リモートブランチ		ローカルブランチ	コミットログ
master	┐	master
hoge1	↓	add_auth
hoge2	↓	user_list	2018/04/02 12:00:00 - 機能Aの追加 2018/04/01 12:00:00 - 基礎機能の追加：
hoge2	└→	* user_list_new	2018/04/05 12:00:00 - 基礎機能の追加：
add_auth

─┐
　↓
　↓
←┘

リベース（Rebase）

リベース（Rebase）とは、コミットした内容を変更したり、コミット順を入れ替えたり、複数のコミットを１つにまとめたりすることです。
要はコミットの整理整頓をすること。

自分がよく使うのは、コミットメッセージの修正や、細かくコミットしていた複数のコミットを１つにまとめる際に使います。

GitHub実践入門 ~Pull Requestによる開発の変革 (WEB+DB PRESS plus)

作者: 大塚弘記
出版社/メーカー: 技術評論社
発売日: 2014/03/20
メディア: 単行本（ソフトカバー）
この商品を含むブログ (23件) を見る

【改訂新版】Gitポケットリファレンス

作者: 岡本隆史,武田健太郎,相良幸範
出版社/メーカー: 技術評論社
発売日: 2016/12/01
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉

作者: 湊川あい,DQNEO
出版社/メーカー: シーアンドアール研究所
発売日: 2017/04/21
メディア: 単行本（ソフトカバー）
この商品を含むブログ (3件) を見る

2017-04-13

Ruby on Rails チュートリアル「第1章ゼロからデプロイまで」簡略版

Ruby on Rails

Bitbucket(Ruby on Rails チュートリアル（https://railstutorial.jp）をみて、

あまりの長さに挫折しそうだったので「第1章ゼロからデプロイまで」を簡略版としてまとめてみます。

※簡略すぎて詰まる場合は、本家（https://railstutorial.jp）を御覧ください

開発環境の準備

Cloud9(https://c9.io/)に登録してサインイン
Workspacesにて「Create a new workspace」をクリック
Workspace nameを入力して、Privateを選択して、Rails Tutorialを選択して「Create workspace」をクリック
IDEが立ち上がったら右上の歯車アイコンをクリックして、「Soft Tabs」の値を4→2に変更する
※Rubyにおけるインデントは2が基本だそうです
IDE下部にあるターミナルにて「$ gem install rails -v 5.0.0.1」とコマンドを入力して実行
※これでRuby on RailsがCloud9の環境にインストールされる
IDE下部にあるターミナルにて「$ rails _5.0.0.1_ new hello_app」とコマンドを入力して実行
※これでRuby on Railsのスケルトンが作成される
IDE左部にあるファイル一覧のGemfileをダブルクリックして開き、gem 'rails'・・・の部分が下記のようになっていることを確認する

gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
または
gem 'rails', '~> 5.0.0.1'

IDE下部にあるターミナルにて「$ cd hello_app」とコマンドを入力して実行
IDE下部にあるターミナルにて「$ bundler update」とコマンドを入力して実行
※Bundlerとは、Ruby on RailsにおけるGem(ライブラリ)の管理をしてくれるもの
IDE下部にあるターミナルのタブ右側の「+」ボタンを押して「New Terminal」をクリック
新規タブにてターミナルが立ち上がるので下記のコマンドを入力して実行

$ cd hello_app
$ rails server -b $IP -p $PORT

※これでローカルWebサーバーが立ち上がる。止めたい場合は、Ctrl+Cで終了

IDE右上のShareをクリックして、ダイアログ内のApplicationに表示されているURLをクリックして、Openをクリックすると、現在のWorkspaceがWeb画面で表示される

やっぱりまずは、Hello, World!

/app/controllers/application_controller.rb を開き、以下のようにhello関数を追加する

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  def hello
    render html: "hello, world!"
  end
end

/config/routes.rb を開き、

root 'application#hello'

と入力して保存します
※これでアプリケーションのルートが先程入力した関数となります

再度、現在のWorkspaceをWebで表示してみると、「hello, world!」と表示されていることが確認出来ます

バージョン管理(Git)

ローカル(Cloud9)側

IDE下部にあるターミナルにて「$ git config -l」とコマンドを入力して実行し、表示された内容に関して修正したい場合は以下のコマンドにて更新を行う

$ git config --global user.name "Your Name"
$ git config --global user.email your.email@example.com

IDE下部にあるターミナルにて「$ git init」とコマンドを入力して実行
※これでGitリポジトリの初期化が行われる
IDE下部にあるターミナルにて「$ git add -A」とコマンドを入力して実行
※これでGitリポジトリへすべてのファイルが追加される
IDE下部にあるターミナルにて以下のコマンドを入力して実行

$ git commit -m "Initialize repository"

※これでGitリポジトリへコミットされる

サーバー(Bitbucket)側

※Bitbucketとは、GitHubのようなGitリポジトリのホスティングサービスです
　特徴として、共同作業者が一定数以下ならリポジトリを公開しなくても無料で使えます

Bitbucket（https://bitbucket.org）に登録してログイン
Cloud9のIDE下部にあるターミナルにて「$ cat ~/.ssh/id_rsa.pub」とコマンドを入力して実行し、表示された公開鍵のテキストをコピーする
Bitbucketの右上のアカウントアイコンを選択し、「アカウントの管理」をクリック
設定画面の「SSH 鍵」を選択し、「鍵を追加」をクリック
Labelにプロジェクト名などを入力し、Keyにコピーしたテキストを貼り付けて「鍵を追加」をクリック
Bitbucketの左上の「リポジトリ」を選択し、「リポジトリの作成」をクリック
リポジトリ名を入力し、リポジトリタイプは「Git」を選択して「リポジトリの作成」をクリック
概要の右上に表示されているSSHパス（git@bitbucket.org:(username)/(repositoryname>.git）を参考にして、Cloud9のIDE下部にあるターミナルにて以下のコマンドを入力して実行

$ git remote add origin git@bitbucket.org:<username>/<repositoryname>.git

※これでBitbucketとの設定が完了します

IDE下部にあるターミナルにて以下のコマンドを入力して実行

$ git push -u origin --all

※これでBitbucketへコードがPushされます
　Bitbucketの画面を更新してソースがPushされていることを確認してみましょう

Gitコマンド例

コマンド	内容
git checkout -b (branchname)	ブランチの作成
git checkout (branchname)	ブランチの移動
git branch	ブランチ一覧の表示
git add -A	新規、修正、削除されたファイルを追加する
git commit -m "(comment)"	コミット
git merge (branchname)	現在いるブランチへ(branchname)をマージする
git branch -d (branchname)	ブランチの削除
git push	ブランチのPush
git push -u origin (branchname)	ブランチ名を指定してPush
git pull	ブランチをPull
git fetch	Fetch
git reset --hard HEAD	直前のコミットの取り消し
git status	ブランチの状態確認

Webサーバー（Heroku）のセットアップ

※Heroku（https://www.heroku.com）とは、AWSのようなWebアプリケーションのプラットフォームです

Webサーバー(Heroku)側

Heroku（https://www.heroku.com）に登録してサインイン

ローカル(Cloud9)側

Gemfile を開き、最下部に以下を追記する

group :production do
  gem 'pg', '0.18.4'
end

次に同じくGemfile内のsqlite3を「group :development, :test do」配下へ移動する
※HerokuではSQLiteがサポートされていないため

group :development, :test do
  # Use sqlite3 as the database for Active Record
  gem 'sqlite3'
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
end

最終的には下記のようになります。

source 'https://rubygems.org'

gem 'rails',        '5.0.0.1'
gem 'puma',         '3.4.0'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.0.0'
gem 'coffee-rails', '4.2.1'
gem 'jquery-rails', '4.1.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.4.1'

group :development, :test do
  gem 'sqlite3', '1.3.11'
  gem 'byebug',  '9.0.0', platform: :mri
end

group :development do
  gem 'web-console',           '3.1.1'
  gem 'listen',                '3.0.8'
  gem 'spring',                '1.7.2'
  gem 'spring-watcher-listen', '2.0.0'
end

group :production do
  gem 'pg', '0.18.4'
end

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

IDE下部にあるターミナルにて以下のコマンドを入力して実行

$ bundle install --without production

※Gemfile.lockを更新するため

IDE下部にあるターミナルにて以下のコマンドを入力して実行

$ git commit -a -m "Update Gemfile for Heroku"

IDE下部にあるターミナルにて「$ heroku version」とコマンドを入力して実行
※Herokuクライアントの確認用。Cloud9を利用していれば初めから入っています。
IDE下部にあるターミナルにて「$ heroku login」とコマンドを入力して実行
「Email」「Password」を聞かれるので登録した際のものを入力する
※これでHerokuクライアントがサーバーにログインされます
IDE下部にあるターミナルにて「$ heroku keys:add」とコマンドを入力して実行
「Would you like to upload it to Heroku?（Y/n）」と聞かれるので「Y」と入力して実行
※これでHerokuにSSHキーが追加されます
IDE下部にあるターミナルにて「$ heroku create」とコマンドを入力して実行
※これでHerokuにWebアプリケーションの場所が作成されます
IDE下部にあるターミナルにて「$ git push heroku master」とコマンドを入力して実行
※これでHerokuにGitのmasterブランチの内容がデプロイされます
HerokuにてWebアプリケーションが追加されているので選択し、右上に表示されている「Open app」をクリックすると、「Hello, World!」と表示されていて、無事デプロイ出来たことが確認できる