GitHubにリモートリポジトリを作成したり、プルリクエストを作成することができるようになります。
新規リポジトリ作成
GitHubの設定が完了したので、作成したアカウントに新たにリモートリポジトリを作成します。
その前にこのカリキュラムで練習として使うアプリを作成しましょう。
ターミナルで以下のコマンドを実行し、railsのアプリを作成してください。
1
rails new practice_app -d mysql
その後、以下のコマンドでアプリのディレクトリに移動しましょう。
1
cd practice_app
GitHubにアクセスし、ダッシュボードの左サイドバーの「Create repository」を選択します。
新規リポジトリ作成ページに遷移するので、「Repository name」にリポジトリの名前を登録します。
リポジトリの名前は先ほど作成したアプリ名のpractice_appにしてください。
リポジトリが非公開の場合（他人に見られたくない場合）はPrivate、公開の場合はPublicを選択します。
これは公開後も変更が可能です。
また、リポジトリ作成時に「README」ファイルを作成する場合は、「Initialize this repository with:」の「Add a README file」にチェックを入れます。今回は作成しないので、チェックは外したままにおきましょう。
上記の項目を入力し、「Create repository」ボタンをクリックすると新規のレポジトリが作成されます。
「README」ファイルとは、GitHubに自分が作成したツールなどを公開する場合に、アプリの説明やツールの使い方、インストール方法などを記載するファイルのことです。
railsではrails newでアプリを作成した際に、自動で作成されます。
リポジトリ作成後の操作確認
READMEを作成せずにリポジトリが作成されると、リポジトリのURLが作成されます。
また、このページにはリポジトリ作成後の操作方法が「…or create a new repository on the command line」と「…or push an existing repository from the command line」が記載されています。ローカルリポジトリの状況によって、操作方法が分かれます。
各コマンドは以下のような意味を持ちます。
| コマンド | 内容 | 補足 |
|---|---|---|
| git init | 新規にリポジトリを作成する | ディレクトリにリポジトリを構成する .gitファイルが作成される |
| git add/commit/push | コマンド操作を参照 | |
| git remote add | リモートリポジトリの追加 |
※ 後述詳しく解説 |
また、上記の操作はHTTPSのコマンドになりますので、SSHのコマンド操作で行う場合は、ページ上部の「Quick setup — if you’ve done this kind of thing before」のHTTPSをSSHに切り替えて下さい。
「SSH」とは、ネットワークで繋がっている自分以外のコンピュータ(リモートコンピュータ)と通信するためのプロトコルのことです。ネットワーク上の通信内容を全て暗号化してくれるので安全に通信を行う事が出来ます。
ローカルリポジトリをpushしよう
これでリモートリポジトリを作成することができました。
次は作成したリモートリポジトリにローカルリポジトリをpushして反映させます。
その前にgitがインストールされているか確認をしましょう。
ターミナルで以下のコマンドを実行してください。
1
2
3
4
git --version
# 以下のようにバージョンが出力されるか確認
git version 2.11.0
インストールされていない方はこちらの記事を参照し、インストールしましょう。
initial commitをしよう
カレントディレクトリがpractice_appになっているか以下のコマンドで確認しましょう。
1
pwd
カレントディレクトリが確認できたら以下のコマンドでgitリポジトリを初期化します。
1
2
# リポジトリの初期化
git init
次にアプリの全てのファイルをGitの管理対象に追加します。
以下のコマンドを実行してください。
※addと.の間には半角スペースが入るので注意しましょう。
1
git add .
そして最初のコミットを作成します。
1
git commit -m "initial commit"
リモートリポジトリに反映させよう
これで反映させる準備ができました。
これからリモートリポジトリに反映をしていきます。
まずは現在のブランチ名をmainに変更します。
これは最近のデフォルトのブランチ名としてmasterからmainへ移行するのが一般的となっているためです。
gitのバージョンによってデフォルトブランチ名が異なっているので、以下のコマンドでmainに変更します。
1
git branch -M main
次にGitHubで作成したリポジトリのURLを確認し、リモートリポジトリとして登録します。
「ユーザー名」はご自身のものに差し替えてください。
1
git remote add origin git@github.com:ユーザー名/practice_app.git
最後にローカルのコードをリモートリポジトリにプッシュします。
1
git push -u origin main
プッシュ後、GitHubのリポジトリページを開き、ローカルのコードが正しく反映されているか確認してください。
プルリクエストを作成しよう
次にプルリクエスト(PullRequest)を作成します。
プルリクエストとは、Gitの操作ではなくGitHubが提供する機能です。ローカルリポジトリのソースコードの変更・更新をわかりやすく表示し、他の開発者と共有することができます。
自身が開発した追加機能や改修などを他の開発者に確認してもらう事で、バグが起こりにくい開発プロセスになります。この様な目的で、ソースコードを検査・修正する事を「コードレビュー」と言います。
ブランチを作成しよう
今回はルーティングにrootページを追加してみましょう。
新たな機能を実装する際はタスクを行うためのブランチを作成します。
以下のコマンドでブランチを作成しましょう。
1
git checkout -b rootの作成
「rootの作成」がブランチ名になります。
このコマンドにより、「rootの作成」というブランチの作成同時に、このブランチへ移動することができます。
これでrootを作成するための実装の準備ができました。
以下のようにapp/config/routes.rbを編集してください。
1
2
3
Rails.application.routes.draw do
root "posts#index"
end
それではこの変更をコミットします。
まずはaddコマンドで編集したファイルをステージングエリア（インデックス）に追加します。
ステージングエリアとは、次にコミットされる変更を一時的に保存する領域のことです。
以下のコマンドを実行してください。
1
git add config/routes.rb
次にコミットをします。
git addを実行しただけではコミットされないため、以下のコマンドでコミットします。
1
git commit -m "rootの作成"
それではこの変更をリモートブランチに反映させます。
以下のコマンドを実行してください。
1
git push origin rootの作成
GitHubのリポジトリのページを確認すると以下のようにプルリクエストを作成するボタンが表示されています。
「Compare & pull request」をクリックし、プルリクエストの作成画面に遷移しましょう。
以下がプルリクエストの作成画面です。
「Add a title」はプルリクエストのタイトルを入力します。
最初はコミットメッセージが入力されているので、変更する場合は修正します。
「Add a description」にはこのプルリクエストでどのような変更をしたかなどを細かく記述します。
記述ができたら、右下の「Create pull request」をクリックし、プルリクエストを作成します。
すると以下のように作成したプルリクエストが確認できます。
本来であれば、講師にコードを確認し、修正があればコードを修正してコミットし、プッシュでこのプルリクエストに反映させます。
講師がこのコードで問題ないと判断するとLGTMがもらえます。
LGTMは「Looks Good To Me」の略です。
日本語では「私には良さそうに見える」といった意味になります。
簡潔にレビューの承認を表現できるため、開発者同士のコミュニケーションでよく使われます。
LGTMがもらえたら「Merge pull request」ボタンをクリックし、mainブランチにマージします。
今回はこのプロセスは省くので、「Merge pull request」ボタンをクリックし、mainブランチにマージします。
クリックすると以下の確認画面になるので、「Cofirm merge」をクリックします。
以下の画面になればマージが成功しています。
ブランチは不要になったので、「Delete branch」をクリックし、削除しておきましょう。
マージをしたので、mainブランチのconfig/routes.rbを確認してみると、先ほどの編集が適用されているのがわかります。
ローカルリポジトリにpullしよう
これでリモートリポジトリのmainブランチにrootを作成したコードが反映されました。
今のままだとローカルリポジトリのmainブランチには反映がされていないので、プルをしてリモートリポジトリのコードを反映させます。
まずは以下のコマンドを実行し、mainブランチに移動します。
1
2
# mainブランチに移動
git checkout main
その後、先ほど編集したローカルのconfig/routes.rbを確認してみましょう。
すると、記述したコードが書かれていないのが確認できます。
それは先ほどのコードを書いたのはrootの作成というブランチ上で行ったためです。
現在はmainブランチに移動したので、編集前の状態になっています。
しかし、リモートリポジトリではこの編集を行なったrootの作成ブランチをmainブランチにマージをしたため、この変更がmainブランチにも適用されました。
それではローカルリポジトリも同じ状態にするため、以下のコマンドでリモートリポジトリのmainブランチのコードを反映させます。
1
git pull origin main
実行後、config/routes.rbを確認すると先ほど記述したコードが反映されているはずです。
今後もこの流れでアプリを実装していきます。
複数ファイルを一度にaddしてプルリクエストを作成しよう
次は練習としてコントローラ作成タスクの実装を行います。
タスクを実装する前には現在のmainブランチが最新の状態であるかを確認するため、リモートリポジトリからプルしておきます。
1
2
3
4
5
6
7
# 現在のブランチがmainになっているか確認
git branch
* main
rootの作成
# リモートブランチをpull
git pull origin main
次にこのタスクを実装するためのブランチを作成します。
1
git checkout -b postsコントローラの作成
これで実装の準備ができました。
以下のコマンドでコントローラを作成します。
1
2
3
4
5
6
7
8
9
10
rails g controller posts
# 以下のファイルが作成される
create app/controllers/posts_controller.rb
invoke erb
create app/views/posts
invoke test_unit
create test/controllers/posts_controller_test.rb
invoke helper
create app/helpers/posts_helper.rb
invoke test_unit
すると複数のファイルが作成されました。
次のコマンドでaddするべきファイルを確認します。
1
2
3
4
5
6
7
8
9
git status
# 以下のログが出力される
On branch postsコントローラの作成
Untracked files:
(use "git add <file>..." to include in what will be committed)
app/controllers/posts_controller.rb
app/helpers/posts_helper.rb
test/controllers/posts_controller_test.rb
今回は3つのファイルが赤色で出力されたので、この3つのファイルをaddする必要があります。
先ほどは以下のようにファイル名を指定してaddしました。
1
rails add config/routes
今回は3つのファイルをaddするので3回コマンドを実行する必要がありますが、面倒です。
こういう時にはファイル名の代わりに.を指定することで、これら全てをコミット対象ファイルとして設定することができます。
今回はこの方法でaddをし、コミットします。
ターミナルで以下のコマンドを順番に実行します。
1
2
git add .
git commit -m "postsコントローラの作成"
これでコミットができたので、プッシュします。
1
git push origin postsコントローラの作成
プッシュができたら、先ほどのようにGitHubで確認するとプルリクエストの作成ボタンが表示されているので、同じようにしてプルリクエストを作成します。
作成後、「Merge pull request」をクリックし、マージをして「Delete branch」でブランチを削除しましょう。
その後、mainブランチに移動し、リモートリポジトリをプルして完了です。
1
2
git checkout main
git pull origin main
これでコントローラの実装タスクの完了です。
複数のコミットをしてプルリクエストを作成しよう
だいぶタスクを実装するまでの流れが把握できてきたでしょうか？
最後にもう一度復習としてビューファイルの作成タスクの実装を行います。
今回も同じように最新のmainブランチをプルするところから始めます。
1
2
3
4
5
6
7
git brabch
# mainブランチになっているか確認
* main
postsコントローラの作成
rootの作成
git pull origin main
そしてブランチを作成します。
1
git checkout -b indexアクションのビュー作成
先ほど作成したpostsコントローラにindexアクションを追加します。
1
2
3
class PostsController < ApplicationController
def index; end
end
次にindexアクションに紐づくビューファイルを作成します。
views/postsディレクトリにindex.html.erbファイルを作成し、以下のように記述します。
1
<p>Hello World</p>
これでコードの作成は完了です。
次にコミットを行いますが、今回は「コントローラにindexアクションを追加」という内容と「ビューファイルの作成」という2つの内容でコミットを行います。
そのため、先ほどのgit add .を実行すると2つのファイルがコミット対象になってしまうため、別々に行い、コミットをします。
まずは「コントローラにindexアクションを追加」というコミットを作成します。
このコミットに含みたいファイルはposts_controller.rbなので以下のようにファイル名を指定してaddし、コミットします。
1
2
git add app/controllers/posts_controller.rb
git commit -m "indexアクションの追加"
そしてプッシュします。
1
git push origin indexアクションのビュー作成
同じような流れでプルリクエストを作成します。
今回のタイトルはコミットメッセージを編集し、「indexアクションの追加とビューの作成」とします。
それでは作成されたプルリクエストを確認してみましょう。
「Commits」の部分はこのプルリクエストのコミット数を表しています。
ここをクリックするとコミットの一覧を確認することができます。
「Files changed」はこのプルリクエストで追加・変更されたファイル数を表しています。
クリックするとファイルの内容を確認することができます。
今回は「1」と表示されているので、以下のように先ほどaddしたファイルが追加・修正されています。
次にこのプルリクエストに「ビューファイルの作成」のコミットを追加します。
以下のようにコミットを作成します。
1
2
git add app/views/posts/index.html.erb
git commit -m "indexアクションのビューファイルの作成"
そしてプッシュします。
1
git push origin indexアクションのビュー作成
その後、プルリクエストの画面を見るとプッシュしたコミットが追加されているのが確認できます。
また、「File Changed」も「2」になっています。
各コミットメッセージをクリックするとそのコミットで追加・編集されたファイルを確認することができます。
「File Changed」をクリックすると、このプルリクエストで追加・編集されたすべてのコードを確認できます。
「indexアクションの追加」のコミットではコントローラーのみが修正され、
「indexアクションのビューファイルの作成」ではビューファイルのみが修正されていましたね。
「File Changed」ではプルリクエストの全ての修正が反映されるので、これら2つの修正がすべて反映されていることが分かります。
これで全てのコミットが完了したのでマージし、ブランチを削除します。
そしてリモートリポジトリをプルして完了です。
1
2
git checkout main
git pull origin main
これで完了です。
リポジトリを削除しよう
練習が終了したので、このリポジトリは削除します。
まずはメニューの「Settings」をクリックします。
画面一番下の「Delete this repository」をクリックします。
すると以下のようなモーダルが表示されるので、「I want to delete this repository」をクリックします。
次に、以下のモーダルが表示されます。
内容としては「このリポジトリの内容全てが削除されます。」ということが書かれています。
問題なければ「I have read and understand these effects」をクリックします。
最後に、以下のモーダルが表示されるので、確認のため「ユーザー名/アプリ名」を入力します。
今回であればユーザー名が「pikawaka」の場合「pikawaka/practice_app」と入力します。
そして、「Delete this repository」をクリックします。
最終確認になるので、GitHubのパスワードを入力し、「Confirm」をクリックします。
これでリポジトリが削除されました。
まとめ
以上が、リポジトリの作成からプルリクエストの作成までの手順となります。
内容がまだ十分に理解できていない方は、このカリキュラムを繰り返し実践してみてください。
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します