1.2.1 開発環境

開発環境は、１人１人すべて異なります。なぜなら開発者は慣れてくるにつれて、自分の環境をカスタマイズするものだからです。開発環境を大別すると、テキストエディタやコマンドラインを組み合わせて使う環境と、IDE（統合開発環境）の２つに分けられます。そしてRailsチュートリアルでは、環境構築の複雑さを避けるためにAWS Cloud9という素晴らしいクラウドIDEサービスを使って進めていきます。AWS Cloud9ではRubyやRubyGems、Gitなど、Ruby on Railsの開発環境の構築に必要なソフトウェアがほとんど組み込まれています。RailsやHerokuなどの一部のソフトウェアはインストールされていませんが、これらはもちろん本書の中で説明してあります（1.2.2）。

クラウドIDEにはWeb開発に必要な三種の神器であるテキストエディタ、ファイルブラウザ、コマンドラインターミナル（図 1.6）もしっかり組み込まれています。また、クラウドIDEのテキストエディタでは、Ruby on Railsの大きなプロジェクトには不可欠とも言うべき横断的ファイル検索も利用できます⁶。たとえクラウドIDEを今後使うことがないとしても、コマンドラインターミナルやテキストエディタなどの開発ツールで一般にどんなことができるのかを知っておくには最適です（筆者としても他のエディタの使い方は知っておいた方が良いと考えています）。

図 1.6: クラウドIDEの外観

クラウドIDEを利用するための手順は次のとおりです。⁷

1. Cloud9は現在Amazon Web Services（AWS）に統合されたため、Cloud9を使うためにはAWSアカウントが必要になります。AWSアカウントを既にお持ちの場合は、AWSにログインしてください。AWSコンソールに行き、検索ボックスから “Cloud9” と入力すると、Cloud9の開発環境を作成するためのページに行けます。
2. Amazon Web Services（AWS）アカウントを持っていない場合は、AWS Cloud9のユーザー登録をします。悪用防止のためクレジットカード情報の入力が必須になりましたが、AWSには無料利用枠があるのでご安心ください。アカウントが有効になるまで最大で24時間かかりますが、著者の場合は約10分ほどで完了しました。
3. Cloud9の管理ページ（図 1.7）に無事たどり着いたら “Create environment” をクリックし、図 1.8のような画面になるまで進めてください。「rails-tutorial」を含む名前などの情報を適宜入力して（図1.8）⁸次のページに進みます。ここではAmazon LinuxではなくUbuntu Serverを選択してから“Next step”をクリックします（図 1.9）。

   確認ボタンを数回クリックしてデフォルトの設定を受け付けると、AWSがIDEのプロビジョニングを開始します（図 1.11）。このとき、“root”ユーザーになっているという警告が表示されるかもしれませんが、この段階では無視して構いません（ここでの望ましい方法は割と複雑になるので、13.4.4のIAM（Identity and Access Management）の項で後述します）。

図 1.7: AWS Cloud9で新しいワークスペースを作成する

図 1.8: AWS Cloud9の新しいワークスペースに名前をつける

図 1.9: Ubuntu Serverを選択する

図 1.10: IDEをプロビジョニングする直前の手順

図 1.11: クラウドIDEの初期画面

Rubyの世界では、インデントに2つのスペースを使うのがほぼ常識になっているので、このエディタのインデント設定もデフォルトの4から2に変えておくことをオススメします。インデント設定を変更するには、右上の歯車アイコンをクリックして［Project Settings］を開き、［Soft Tabs］設定でマイナス記号をクリックして値を「2」にします（図 1.12）。設定の変更はその場で反映されるので、［Save］ボタンをクリックする必要はありません。

図 1.12: Cloud9でインデントをスペース2つに設定する

なお、クラウドIDEを使っている場合はGitHubとHerokuコマンドをセットアップする必要があります。細かな手順は 1.4.3と1.5.1のインストール手順で説明します。

また、今すぐ設定する必要はありませんが、クラウドIDE上でテスト環境をセットアップする際の応用的な設定は3.6で解説しています。詳細は3.6.2まで進んだときに学びましょう。

最後に、本チュートリアルはRuby 2.7.6を標準として使います。rvm（Ruby Version Manager）を利用すれば、さまざまなバージョンのRubyを指定してインストールできます⁹。

$ rvm get stable
$ rvm install 2.7.6
$ rvm --default use 2.7.6

（1.7でも後述するように、本チュートリアルではUnixのプロンプトとして$記号を使いますので、上の各行冒頭にある$記号は入力しないでください。）

Rubyのインストールが完了したら、以下を実行してRubyのバージョンを確認できます（実際に表示されるバージョンはこれと異なることもあります）。

$ ruby -v
ruby 2.7.6p219 (2022-04-12 revision c9c2245c0a) [x86_64-linux]

1.2.2 Railsをインストールする

1.2.1の開発環境には必要なソフトウェアがすべて含まれていますが、Railsそのものは含まれていません。これは意図したものです。チュートリアルを期待どおりに進めるには、Railsの正確なバージョンをインストールすることが重要だからです。

まずはインストール時間を短縮するため、Rubyドキュメントの設定を追加してみましょう（リスト 1.1）¹⁰。このコマンドは１回実行するだけでOKです（コマンドラインの慣習については 1.7で説明します）。

$ echo "gem: --no-document" >> ~/.gemrc

Railsをインストールするには、RubyGemsが提供するgemコマンドを使います。リスト 1.2のコマンドをターミナルに入力してください。クラウドIDEを使っている場合は図 1.6の右下にあるコマンドライン領域に入力してください（ローカル環境で開発している場合は通常のターミナルウィンドウに入力してください）。

$ gem install rails -v 6.0.4

-vというオプションを使うことで、インストールされるRailsのバージョンを正確に指定できます。railsコマンドに-vオプションを使うとインストールされたことを確認できます。

$ rails -v
Rails 6.0.4

このコマンドで出力されるバージョン番号は、インストールされたバージョン（リスト 1.2）と正確に一致する必要があります。

経験上、リスト 1.3で示すようにbundlergemのバージョンも揃えておくとよいことがわかっています。

$ gem install bundler -v 2.2.17

bundler gemは重要です。詳しくは 1.3.1で学びます。

もうひとつインストールするものがあります。JavaScriptソフトウェアの依存関係を管理するYarnというプログラムです。ネイティブOS上で開発する場合は、自分のプラットフォームに合ったYarnインストール手順（英語）に従ってください。クラウドIDEで開発する場合は、リスト 1.4のコマンドを実行するだけで必要なツールをCDN経由でダウンロードおよびセットアップできます。リスト 1.4では、Cloud9環境でディスク容量が不足しないよう、ワークスペース環境に容量を追加するコマンドも事前に実行しています。

$ source <(curl -sL https://cdn.learnenough.com/resize)
$ source <(curl -sL https://cdn.learnenough.com/yarn_install)

なお、以下のような警告メッセージがときどき表示されることがあると思います。

========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================

そんなときは、メッセージの指示に従ってyarnコマンドを実行すればOKです。

$ yarn install --check-files

以上でインストールはおしまいです！Ruby on RailsでWeb開発を行うための準備が完全に整いました。

1.3.1 Bundler

Railsアプリケーションを新規作成したら、次はBundlerを実行して、アプリケーションに必要なgemをインストールします。Bundlerはrailsコマンド（リスト1.6）によって自動的に実行（この場合はbundle install）されます。ここではデフォルトのアプリケーションgemを変更してBundlerを再度実行してみます。そのために、テキストエディタでGemfileを開きます（クラウドIDEの場合は、ファイルナビゲーターで矢印をクリックしてサンプルアプリのディレクトリを開き、Gemfileアイコンをダブルクリックします）。Gemfileの内容は、だいたい図 1.14やリスト 1.7のようになります。バージョン番号など細かな点で多少の違いがあるかもしれません。Gemfileの内容はRubyのコードですが、ここでは文法を気にする必要はありません。Rubyの詳細については第4章で説明します。ファイルやディレクトリが図 1.14のように表示されない場合、ナビゲーターの歯車アイコンをクリックして［Refresh File Tree］を選択します。

一般に、ファイルやディレクトリがうまく表示されていない場合はこのようにファイルツリーを再表示してみてください¹⁴。

図 1.14: テキストエディタでデフォルトのGemfileを開く

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.7.6'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.4'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster.
# Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a
  # debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console'
  # anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the
  # background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

ほとんどの行はハッシュシンボル #（4.2）でコメントされています。これらの行では、よく使われているgemとBundlerの文法の例をコメント形式で紹介しています。この時点では、デフォルト以外のgemをインストールする必要はありません。

gemコマンドで特定のバージョン番号を指定しない限り、Bundlerは自動的に最新バージョンのgemを取得してインストールします。例えば、Gemfileに次のような記述があるとします。

gem 'sqlite3'

このsqlite3というgemのバージョンを指定する主な方法は2通りあります。これにより、Railsで使われるgemのバージョンを「ある程度」制御できます。1番目の方法は次のとおりです。

gem 'capybara', '>= 2.15'

最新バージョンのcapybara gemがインストールされます（これはテストで使うgemです）。極端に言えば、バージョンが7.2であっても、2.15と同じかそれより上のバージョンならインストールされます 。

2番目の方法は次のとおりです。

gem 'rails', '~> 6.0.1'

このように指定すると、rails gemのバージョンが6.0.1以上であり、かつ6.1より小さい場合にインストールされます。つまり、>=という記法では最新のgemを探してインストールし、~> 6.0.2という記法では細かな単位で更新可能なgemを探してインストールします（例: 6.0.4や6.0.5などの新しいバージョンがあればインストールされますが、6.1.0はインストールされません）¹⁵。

残念ながら、経験上ちょっとしたマイナーアップグレードですら問題を引き起こすことがあります。このため、Railsチュートリアルでは基本的に事実上すべてのgemでバージョンを「ピンポイントで」指定し、がっちり固定してあります。ベテラン開発者にはGemfileで~>を使って指定し、最新のgemを使って進めることをオススメしていますが、チュートリアルが思い通りに動かなくなる可能性があることはご承知おきください。

リスト 1.7のGemfileを、実際に使用する正確なバージョンのgemに置き換えたものをリスト 1.8に示します¹⁶。

なお、この置換えのついでに、sqlite3 gemをdevelopment環境とtest環境（7.1.1）だけで使う（つまりproduction環境では使わない）ように変更している点にもご注目ください。これは、後でHerokuで使うデータベースと競合する可能性を防ぐための処置です（1.5）。

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.7.6'

gem 'rails',      '6.0.4'
gem 'puma',       '4.3.6'
gem 'sass-rails', '5.1.0'
gem 'webpacker',  '4.0.7'
gem 'turbolinks', '5.2.0'
gem 'jbuilder',   '2.9.1'
gem 'bootsnap',   '1.10.3', require: false

group :development, :test do
  gem 'sqlite3', '1.4.2'
  gem 'byebug',  '11.0.1', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console',           '4.0.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.1.0'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'capybara',           '3.28.0'
  gem 'selenium-webdriver', '3.142.4'
  gem 'webdrivers',         '4.1.2'
end

# Windows ではタイムゾーン情報用の tzinfo-data gem を含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

アプリケーションのGemfileの内容をリスト 1.8で置き換えたら、bundle installを実行してgemをインストールします¹⁷。

$ cd hello_app/
$ bundle _2.2.17_ install
Fetching source index for https://rubygems.org/
.
.
.

bundle installコマンドの実行にはしばらく時間がかかるかもしれません。完了後、アプリケーションが実行可能になります。

ちなみに、bundle installを実行すると「まずbundle updateを実行してください」というようなメッセージが表示される場合があります。その場合は、メッセージのとおりにbundle updateをまず実行しましょう（マニュアルどおりに行かない場合に慌てず落ち着いて対応することもスキルの１つです。こうしたエラーメッセージにはその場で問題を解決する方法が含まれているものなので、よく読んでおきましょう）。

最後に、1.2.2でセットアップしたYarnを使ってWebpackerをインストールして完了です。Webpackerの使い方は第5章で説明します。

$ rails webpacker:install

1.3.2 rails server

1.3のrails newコマンドと1.3.1のbundle installコマンドを実行したことにより、実際に動かすことのできるアプリケーションが作成されました。ありがたいことに、Railsには開発マシンでのみブラウズできるローカルWebサーバーを起動するためのコマンドラインプログラム（スクリプト）が付属しているので、rails serverというコマンドを実行するだけでRailsアプリケーションを簡単に起動することができます。

システムによっては（クラウドIDEであっても）、rails serverコマンドを実行する前にローカルWebサーバーへの接続を許可する必要が生じることがあります。これを行うには、config/environments/development.rbファイルを開いてリスト 1.9と図 1.15に示した2行を追加します。

Rails.application.configure do
  .
  .
  .
  # Cloud9 への接続を許可する
  config.hosts.clear
end

図 1.15: Cloud9でのRailsサーバーへの接続を許可する

なお、リスト 1.10に表示されているこのrails serverコマンドは、ターミナルタブをもうひとつ開いてそこで実行することをオススメします。そうすることで、最初のタブで引き続きコマンドを実行できるので便利です（図 1.16と図 1.17）。リスト 1.10で「Ctrl-C」キー¹⁸を押すことでサーバーをシャットダウンできます。

$ cd ~/environment/hello_app/
$ rails server
=> Booting Puma
=> Ctrl-C to shutdown server

図 1.16: 新しくターミナルを開く

図 1.17: Railsサーバーを別のタブで実行する

（クラウドでない）OSでrails serverの結果を表示するには、ブラウザのアドレスバーにhttp://localhost:3000を貼り付けてください。クラウドIDEの場合は、Previewを開いて［Preview Running Application］をクリックして（図 1.18）ブラウザのウィンドウかタブで表示します（図 1.19）。いずれの場合も、図 1.20のように表示されるはずです。

図 1.18: クラウドワークスペース上で実行するローカルサーバーを共有する

図 1.19: 実行中のアプリをブラウザウィンドウやタブで開く

図 1.20: rails serverを実行したときのデフォルトのRailsページ

1.3.3 Model-View-Controller（MVC）

まだ始まったばかりですが、今のうちにRailsアプリケーションの全体的な仕組みを知っておくと後々役立ちます（図 1.21）。デフォルトのRailsアプリ構造（図  1.13）を眺めてみると、app/というディレクトリがあり、その中に「models」「views」「controllers」という3つのサブディレクトリがあることに気付いた方もいると思います。ここにはRailsがMVC（model-view-controller）というアーキテクチャパターンを採用していることが暗に示されています。MVCでは、アプリケーション内のデータ（ユーザー情報など）と、データを表示するコードを分離します。アプリケーションのグラフィカルユーザーインターフェイス（GUI）は多くの場合このようにして構成されます。

ブラウザがRailsアプリと通信する際、一般的にWebサーバーにリクエスト（request）を送信し、これはリクエストを処理する役割を担っているRailsのコントローラ（controller）に渡されます。コントローラは、場合によってはすぐにビュー（view）を生成してHTMLをブラウザに送り返します。動的なサイトでは、一般にコントローラは（ユーザーなどの）サイトの要素を表しており、データベースとの通信を担当しているRubyのオブジェクトであるモデル（model） と対話します。モデルを呼び出した後、コントローラは、ビューを描画し、完成したWebページをHTMLとしてブラウザに返します。

図 1.21: Model-View-Controller（MVC）アーキテクチャの概念図

今はこの解説がまだ少し抽象的に思えるかもしれませんが、この章は後に何度も参照しますのでご安心ください。特に1.3.4では、MVCを扱うお試しアプリケーションをご覧に入れます。2.2.2では、このtoyアプリを使ってMVCの詳細を解説します。サンプルアプリケーションでは、MVCの3つの要素をすべて扱います。3.2でまずコントローラとビューを扱い、モデルは6.1から扱い始めます。7.1.2では、3つの要素が協調して動作します。

1.3.4 Hello, world!

記念すべき最初のMVCフレームワークアプリケーションとして、先ほど作ったアプリにほんのちょっぴり変更を加えることにしましょう。「hello, world!」という文字列を表示するだけのコントローラのアクションを追加し、図 1.20のデフォルトRailsページを置き換えてみましょう（コントローラのアクションについては2.2.2で詳しく解説します）。

コントローラという名前からご想像のとおり、コントローラのアクションはコントローラ内で定義します。ここでは、Applicationという名前のコントローラの中にhelloという名前のアクションを作成することにします。実際、この時点ではコントローラはApplicationひとつしかありません。次のコマンドを実行すると、現在あるコントローラを確認できます。

$ ls app/controllers/*_controller.rb

新しいコントローラの作成は第2章で行います。リスト 1.11に、helloを定義したところを示します。ここではrenderメソッドで「hello, world!」というテキストを表示しています。この時点ではRubyの文法については気にする必要はありません。第4章で詳しく解説します。

class ApplicationController < ActionController::Base

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

表示したい文字列を返すアクションを定義したので、今度はデフォルトのページ（図 1.20）の代わりにこのアクションを使うようRailsに指示します。そのためには、Railsのルーター（router）を編集します。ルーターはコントローラとブラウザの間に配置され（図 1.21）、ブラウザからのリクエストをコントローラに振り分ける（=ルーティング）役割を果たします（図 1.21は簡単のためルーターを省略していますが、2.2.2で詳しく解説します）。ここではデフォルトのページを差し替えたいので、ルートのルーティング（ルート URLにアクセスした場合のルーティング）を変更することにします。例えば http://www.example.com/ というURLの末尾は「/」になっているので、ルートURLは単に「/」（スラッシュ）と簡略表記することもあります（訳注: 本チュートリアルではrouteやroutingを「ルーティング」、rootを「ルート」と表記します）。

Railsのルーティングファイル（config/routes.rb）にはRailsガイドの「ルーティング」を参照するようコメントがあり、ルートルーティングの構成方法がリンク先に示されています（リスト 1.12）。具体的なルーティングの文法は、次のような形式になります。

root 'controller_name#action_name'

上のコードの場合、コントローラ名はapplicationであり、アクション名は helloです。変更後のコードをリスト 1.13に示します。

Rails.application.routes.draw do
  # For details on the DSL available within this file,
  # see https://guides.rubyonrails.org/routing.html
end

Rails.application.routes.draw do
  root 'application#hello'
end

リスト 1.11のコードとリスト 1.13のコードを使うと、ルートルーティングから「hello, world!」が返されるようになります（図 1.22）¹⁹。

図 1.22: 「hello, world!」をブラウザで表示する

演習

1. リスト 1.11のhelloアクションを書き換え、「hello, world!」の代わりに「hola, mundo!」と表示されるようにしてみましょう。
2. Railsでは「非ASCII文字」もサポートされています。「¡Hola, mundo!」にはスペイン語特有の逆さ感嘆符「¡」が含まれています（図 1.23）²⁰。「¡」文字をMacで表示するには、Optionキーを押しながら1キーを押します。この文字をコピーして自分のエディタに貼り付ける方が早いかもしれません。
3. リスト 1.11のhelloアクションを参考にして、２つ目のアクションgoodbyeを追加しましょう。このアクションは、「goodbye, world!」というテキストを表示します。リスト 1.13のルーティングを編集して、ルートルーティングの割り当て先をhelloアクションからgoodbyeアクションに変更します（図 1.24）。

図 1.23: ルートルーティングで「¡Hola, mundo!」を表示するよう変更する

図 1.24: ルートルーティングで「goodbye, world!」を表示するよう変更する

1.4.1 インストールとセットアップ

推奨環境であるクラウドIDE（1.2.1）にはデフォルトでGitが導入されていますので、追加で導入する必要はありません。何らかの理由で導入が必要な方は『Git/GitHub編』の「Gitのインストールとセットアップ」などを参考に、Gitを導入してみてください。

$ git config --global user.name "自分のニックネームまたは名前など"
$ git config --global user.email your.name@example.com

$ sudo ln -sf `which nano` /usr/bin

$ git config --global alias.co checkout

$ git config --global credential.helper "cache --timeout=86400"

$ cd ~/environment/hello_app

$ git init
Reinitialized existing Git repository in
/home/ubuntu/environment/hello_app/.git/

$ git add -A

$ git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   .browserslistrc
        new file:   .gitignore
        new file:   .ruby-version
        new file:   Gemfile
        new file:   Gemfile.lock
        .
        .
        .

$ git commit -m "Initialize repository"
[master (root-commit) df0a62f] Initialize repository
.
.
.

$ git log
commit b981e5714e4d4a4f518aeca90270843c178b714e (HEAD -> master)
Author: Michael Hartl <michael@michaelhartl.com>
Date:   Sun Aug 18 17:57:06 2019 +0000

    Initialize repository

1.4.2 Gitのメリット

「ソースコードのバージョンをGitで管理する理由が分からない」という方もいるかもしれませんので、１つ例をご紹介します。仮に、あなたが重要なapp/controllers/ディレクトリを削除してしまったとしましょう（ホーマー・シンプソンがやらかすような感じで）。

$ ls app/controllers/
application_controller.rb  concerns/
$ rm -rf app/controllers/
$ ls app/controllers/
ls: app/controllers/: No such file or directory

ここでは、Unixコマンドのlsでapp/controllers/ディレクトリの中身を表示した後、rmコマンドでうっかりディレクトリごと削除してしまったとします（表 1.1）。詳しくは 『コマンドライン編』の「「ディレクトリのリネーム/コピー/削除を行う」で解説しますが、ここで使っている-rfオプションは、「recursive」（ディレクトリ内にあるすべてのファイルとサブディレクトリを削除する）と、「force」（削除して良いかどうかの確認・警告をせずに削除する）という意味になります。

現在の状態を確認してみましょう。

$ git status
On branch master
Changes not staged for commit:
  (use "git add/rm <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        deleted:    app/controllers/application_controller.rb
        deleted:    app/controllers/concerns/.keep

no changes added to commit (use "git add" and/or "git commit -a")

ファイルがいくつか削除されましたが、この変更はまだステージングに追加されておらず、コミットもされていません。つまり、checkoutコマンド（と、現在までの変更を強制的に元に戻すための-fオプション）を使えば、直前にコミットした状態まで簡単に戻すことができます。

$ git checkout -f

$ git status
On branch master
nothing to commit, working tree clean

$ ls app/controllers/
application_controller.rb  concerns/

うっかり削除してしまったディレクトリやファイルが、無事に復旧できましたね。これがGitを使うメリットの１つです。

1.4.3 GitHub

Gitを使ったソースコードのバージョン管理ができるようになったので、今度はGitHubにソースコードをアップロードしてみましょう。GitHubは、Gitに特化したソフトウェア開発のプラットフォームです。ローカルマシンにあるGitリポジトリを、わざわざGitHubにプッシュする主な理由は２つあります。１つ目は、ソースコードとそのすべての変更履歴（コミット記録）の完全なバックアップを作成するためです。２つ目は、他の開発者との共同作業をより簡単に行うためです。

GitHubを始める方法は単純明快です。GitHubアカウントをお持ちでない方はGitHubアカウントに登録（サインアップ）しましょう（図 1.25）²⁵。

図 1.25: GitHubにユーザー登録する

ユーザー登録が完了したら、+記号のドロップダウンメニューをクリックして“New repository”を選択します（図 1.26）。

図 1.26: “New repository”オプションを選択する

新しいリポジトリを作成するページが表示されたら、リポジトリ名にhello_app）を入力しましょう。Description（説明欄）の内容は空欄でも大丈夫です。そして万全の注意を払って、確実に、“Private”オプションを選択してください（1.27）。

Publicオプションを選択し、本チュートリアルで取り扱うRailsアプリのソースコードをうっかり公開しても原理的には安全です。とはいえ、特にGitを今回初めて使うような場合は秘密鍵のような重要なファイルをうっかりコミットしてしまう可能性もゼロではありません。ですから、何か起きる前にひとまずPrivateにしておく用心深さが大事です²⁶。

図 1.27: GitHubでPrivateリポジトリを作成する

“Create repository”ボタンをクリックすると、図 1.28のように既存のリポジトリをGitHubに追加するコマンドが表示されるはずです。ここではHTTPSオプションを選択してください。²⁷

図 1.28: 既存のリポジトリを追加する

次にGitHubの公式ドキュメントに従って、リポジトリをプッシュする際に必要な個人アクセストークンを作成しましょう²⁸。ドキュメントの通りに必要事項を入力していき、Expirationには個人アクセストークンの有効期限を入力します。

図 1.29: 有効期限は必要に応じて自由に設定できます

Select scopesでは個人アクセストークンに含める権限を設定します。本チュートリアルではrepoを追加してください。（各権限の詳細はGitHubの公式ドキュメントから確認できます）

図 1.30: トークンに含めたい権限にチェックを入れる

Generate tokenをクリックして発行される個人アクセストークンは、ページを閉じるか移動すると消えてしまうので、次のステップにあるgit pushが終わるまでページを開いたままにしておきましょう。また、ここで生成された個人アクセストークンは、パスワードと同じように重要な情報として扱ってください。

最後にリスト 1.18のコマンドを実行し、メッセージに従ってGitHubのユーザー名（Username）と、パスワード（Password）を入力します。パスワードの欄には、先ほど作成した個人アクセストークンを入力してください。無事に認証に成功したら、以後はリスト 1.17で設定したcache timeoutの期間か、もしくは個人アクセストークンの有効期限のどちらかが切れるまでパスワード入力は不要になります。

$ git remote add origin https://github.com/<あなたのGitHubアカウント名>/hello_app.git
$ git push -u origin master

リスト 1.18にあるgit remoteコマンドは、GitHubに置いたGitリポジトリをプッシュ（push）先の１つとして登録するコマンドです。今回はoriginという名前で登録しています。次のgit pushコマンドでは、ローカルマシンにあるGitリポジトリを、先ほど登録したorigin（GitHub）にアップロードしています。²⁹

なお、リスト 1.18の<あなたのGitHubアカウント名>の部分は実際のユーザー名に置き換える必要があります。たとえば筆者（mhartl）の場合であれば、実行するコマンドは次のようになります。

$ git remote add origin https://github.com/mhartl/hello_app.git

このコマンドの実行が成功すると、hello_appリポジトリの内容がGitHub上でも確認できるようになります。このページではファイルの一覧やコミットの確認など、さまざまな機能を利用できます（図 1.31）。

図 1.31: GitHubのリポジトリページ

1.4.4 ブランチ、編集、コミット、マージ

1.4.3の手順に沿って進めた場合、READMEファイルの内容がGitHubリポジトリのページに表示されることに気付いたでしょうか（図 1.32）。このREADME.mdファイルは、リスト 1.6のコマンドを実行したときに自動生成されました。ファイル名の拡張子が「.md」となっているファイルは、Markdownという人間にとって読みやすい記法を使って書きます³⁰。Markdownは簡単にHTMLに変換できるため、GitHubでもMarkdownで書かれたREADME.mdファイルをHTMLで表示してくれます。

Railsが自動生成したREADMEをそのまま使ってもよいですし、プロジェクトに合わせて内容を書き換えても構いません。とはいえ良い練習になるので、今回はREADMEを書き換えながらGitの使い方に慣れてみましょう。具体的には、Gitの基本的なコマンドであるブランチ（branch）、編集（edit）、コミット（commit）、マージ（merge）の４つを紹介します³¹。

図 1.32: GitHubのデフォルトRails READMEの表示

$ git checkout -b modify-README
Switched to a new branch 'modify-README'

$ git branch
  master
* modify-README

Gitの編集（Edit）

トピックブランチを作ったら、READMEを編集（edit）してコンテンツを追加しましょう（リスト 1.19と図 1.33）。

リスト 1.19: 新しいREADMEファイル README.md

# Ruby on Rails Tutorial

## "hello, world!"

This is the first application for the
[*Ruby on Rails Tutorial*](https://railstutorial.jp/)
by [Michael Hartl](https://www.michaelhartl.com/). Hello, world!

図 1.33: READMEファイルを編集する

$ git status
On branch modify-README
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")

$ git commit -a -m "Improve the README file"
[modify-README 34bb6a5] Improve the README file
 1 file changed, 5 insertions(+), 22 deletions(-)

$ git checkout master
Switched to branch 'master'

$ git merge modify-README
Updating b981e57..015008c
Fast-forward
 README.md | 27 +++++----------------------
 1 file changed, 5 insertions(+), 22 deletions(-)

$ git branch -d modify-README
Deleted branch modify-README (was 015008c).

# これはあくまで例です。誤ってブランチを作ったとき以外は実行しないでください。
$ git checkout -b topic-branch
$ <ココで何か変更を加えてみてください>
$ git add -A
$ git commit -a -m "Make major mistake"
$ git checkout master
$ git branch -D topic-branch

Gitのプッシュ（Push）

ローカルマシン上のREADMEファイルの更新が終わったので、プッシュ（push）コマンドでGitHubに変更をアップロードしてみましょう。既に1.4.3で一度プッシュしているため、今回はgit push origin masterを省略したgit pushでも実行できるはずです。

$ git push

無事にアップロードできたら、GitHub上にあるhello_appのページを確認してみましょう。README.mdの部分が更新されていれば成功です（図 1.34）。

図 1.34: GitHub上の更新したREADMEファイル

1.5.1 Herokuのセットアップとデプロイ

HerokuではPostgreSQLというデータベースを使います（ちなみに発音は “post-gres-cue-ell” で、よく“Postgres”と略されます）。そのため本番環境（production）にデプロイするためには、まずpg gemをGemfileに追加して、RailsアプリケーションがPostgreSQLデータベースと通信できるようにします。

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

Railsアプリケーションの開発環境（development）ではSQLiteというデータベースを使っていますが、SQLiteはHerokuでは使えないため、sqlite3 gemが本番環境に導入されないGemfileを変更します³⁵。（リスト 1.8）

group :development, :test do
  gem 'sqlite3', '1.4.2'
  gem 'byebug',  '11.0.1', platforms: [:mri, :mingw, :x64_mingw]
end

最終的なGemfileはリスト 1.20のようになります。

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.7.6'

gem 'rails',      '6.0.4'
gem 'puma',       '4.3.6'
gem 'sass-rails', '5.1.0'
gem 'webpacker',  '4.0.7'
gem 'turbolinks', '5.2.0'
gem 'jbuilder',   '2.9.1'
gem 'bootsnap',   '1.10.3', require: false

group :development, :test do
  gem 'sqlite3', '1.4.2'
  gem 'byebug',  '11.0.1', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console',           '4.0.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.1.0'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'capybara',           '3.28.0'
  gem 'selenium-webdriver', '3.142.4'
  gem 'webdrivers',         '4.1.2'
end

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

# Windows ではタイムゾーン情報用の tzinfo-data gem を含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

本番環境でのみ使うpg gemを開発環境（Cloud9などの開発用マシン）にインストールしないようにするため、bundle configコマンドを使って、本番環境でしか使わないgemは開発環境にインストールしないよう設定することができます。（リスト 1.21）。

$ bundle _2.2.17_ config set --local without 'production'
$ bundle _2.2.17_ install

上の設定を行わないと、pg gemのインストールで失敗することがあります。しかしリスト 1.20で追加したpg gemは本番環境でしか使わないため、開発環境でスキップしてもデプロイは可能です。³⁶

最後に、リスト 1.21を実行した結果をコミットしましょう。無事にコマンドが実行できると、Gemfileにpg gemを追加した結果が、Gemfile.lockに反映させるはずです。本番環境ではGemfileだけではなくGemfile.lockの内容も必要になるため、これから行う本番環境へのデプロイを成功させるために、変更結果を忘れずにコミッしておきましょう。

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

次のステップは、Herokuアカウントの作成と設定です。まずはHerokuのユーザー登録を行います。続いて、自分の開発マシンにherokuコマンドがインストールされているかどうかを確認します。

$ heroku --version

Herokuがインストールされていると、バージョン番号とともにherokuのコマンドラインインターフェース（Command Line Interface: CLI）が利用可能であるというメッセージが表示されます。ただしほとんどの場合は最初からインストールされていないので、The Heroku CLIからインストールする必要があります。クラウドIDEを使っている場合は、リスト 1.22のコマンドを実行することでHeroku CLIをインストールできます。

$ source <(curl -sL https://cdn.learnenough.com/heroku_install)

リスト 1.22のコマンドでインストールできたかどうかは、次のコマンドで確認することができます。正しくインストールできていれば、バージョン番号が表示されるようになります（バージョン番号は異なっていても大丈夫です）。

$ heroku --version
heroku/7.27.1 linux-x64 node-v11.14.0

Herokuのコマンドラインインターフェイス（CLI）がインストールされていることが確認できたら、いよいよherokuコマンドで、Herokuユーザー登録時に使ったメールアドレスとパスワードを入力してログインします（なお--interactiveオプションを使うと、herokuコマンドでブラウザを開かないようにできます）。

$ heroku login --interactive

最後にheroku createコマンドを実行して、Heroku上にアプリケーションを実行する場所（本番環境）を作成します（リスト 1.23）。

$ heroku create
Creating app... done, blooming-bayou-75897
https://blooming-bayou-75897.herokuapp.com/ |
https://git.heroku.com/blooming-bayou-75897.git

$ heroku stack:set heroku-20
Setting stack to heroku-20... done

このheroku createコマンドを実行すると本番環境用のURLが自動的に作成され、さっそくブラウザからそのURLにアクセスするともできます。ソースコードをHerokuにまだアップロードしていないため（git push heroku masterを実行していないため）、今は何も表示されなくても大丈夫です。次のステップでRailsアプリケーションをデプロイし、Webページを表示させてみましょう。

1.5.2 Herokuにデプロイする（1）

Railsアプリケーションを実際にHerokuにデプロイするには、まずGitを使ってHerokuにリポジトリをプッシュします。

$ git push heroku master

1.5.3 Herokuにデプロイする（2）

失礼、その2はありません。以上でおしまいです。

デプロイされたアプリケーションの表示は、heroku create（リスト 1.23）を実行した際に生成されたアドレスをブラウザで開くだけです³⁷。実行結果を図 1.35に示します。ページの内容は図 1.22とまったく同じですが、今やそれがインターネット上の本番Webページとして確かに公開されているのです³⁸。

図 1.35: Heroku上で動いている最初のRailsチュートリアルアプリケーション

1.5.4 Herokuコマンド

Herokuのコマンドはたくさんあるので、ここでは簡単に触れる程度にとどめますが、少しだけ使ってみましょう。アプリケーションの名前を変更してみます。

$ heroku rename rails-tutorial-hello

実際は、Herokuで生成されたデフォルトのアドレスでも十分です。本当にアプリケーションの名前を変えてみたい場合は、次のようなランダムなサブドメイン名を設定し、この章の冒頭で説明したアプリケーションのセキュリティを実装してみる方法もあります。

hwpcbmze.herokuapp.com
seyjhflo.herokuapp.com
jhyicevg.herokuapp.com

このようなでたらめのサブドメイン名なら、URLを教えない限りサイトにアクセスされる心配もありません³⁹。ちなみに、Rubyの威力の一端をお見せするために、サブドメイン用のランダムな文字列を生成するコンパクトなコードをササっと書いてみます。

('a'..'z').to_a.shuffle[0..7].join

ここで使ったコード片は第4章でまた登場します。⁴⁰

Herokuではサブドメインの他に独自ドメインも使えます。実を言うと、このRailsチュートリアルもHeroku上に置かれているのです。したがって、本チュートリアルをオンラインで読んでいるのであれば、まさに今HerokuにホスティングされたWebサイトを見ているということになります。カスタムドメインや他のHeroku関連の詳細な情報については、Herokuのドキュメントを参照してください。

1.6.1 本章のまとめ

• Ruby on Railsとは、Webアプリケーションを開発するためのフレームワークであり、プログラミング言語Rubyで作られている。
• クラウドIDEを利用すると、Railsのインストールやアプリケーションの生成、生成したファイルの編集などが簡単にができる。
• Railsにはrailsコマンドが用意されていて、rails newで新しいアプリケーションを生成したり、rails serverで開発環境用のサーバーを立ち上げられる。
• コントローラのアクションを追加したり、ルーティングを変更するだけで「hello, world」を表示するアプリケーションが作れた。
• データの喪失を防止し、他の開発者と共同作業できるようにするため、Gitによるバージョン管理を導入し、GitHubの非公開リポジトリに作った。
• Gitを導入していたため、git push herokuコマンドで作成したアプリケーションを本番環境（Heroku）にすぐデプロイできた。