1.1.1 前提知識

Railsチュートリアルでは、題材となるSNSを作りながらプロダクト開発に関する様々な知識を学んでいきます。具体的には、Rubyとコマンドラインによる実践的なプログラミング、Gitやテストを使ったコード管理、セキュリティに関する設計と実装、HerokuやAWSを使ったWebサービスの公開方法などが学べます。

ゼロから学べたという事例もありますが、プログラミングの学習経験があると良いです。「プログラミングが初めて」という人向けにも、初心者向けプログラミング学習サービス「Progate」と提携し、Webの基礎知識が学べるコースを用意しています。Progateは学習の難関である環境構築が不要で、ブラウザ上でコーディング体験ができるため、特にプログラミング未経験者にオススメです。このまま１章ずつを読み進めても大丈夫ですが、もし章の途中で「難しい」と感じたら下記の関連するコースまたはWeb開発コース（Ruby on Rails）で基本を押さえましょう。

• 第1章 ゼロからデプロイまで
  • Command Lineコース
  • Gitコース
• 第4章 Rails風味のRuby
  • Rubyコース
• 第5章 レイアウトを作成する
  • HTML & CSSコース
  • Sassコース
• 第14章 ユーザーをフォローする
  • JavaScriptコース
  • SQLコース
• Web開発の練習
  • Web開発コース（Ruby on Rails）

上記コースを学んだ上で、それでも「難しい」と感じる方は下記の追加コンテンツや質問対応サービスもぜひご検討ください。

Railsチュートリアル実践入門シリーズ

Progateと本書の違いの１つに、「ブラウザで開発するかローカルで開発するか」があります。実践入門シリーズではこれまでブラウザで学習してきた人を対象として、ローカル環境での開発に役立つ実践的な知識を詰め込んでいます。例えばコマンドラインやテキストエディタの環境構築や、GitやGitHubに特化した解説など、ローカル環境で躓きがちな部分を重点的に補足しています。

• 開発環境の基本（詳細）
  • 『コマンドライン編』
  • 『テキストエディタ編』
  • 『Git/GitHub編』

また、ローカル環境の難しさと同じことが、複雑かつ高度になっていくWeb技術にも言えます。本書ではRuby on Railsという実践的なWeb開発フレームワークを題材としていますが、JekyllやSinatraといった比較的シンプルで小さなフレームワークを間に挟むことで、段階的にWeb技術を学ぶこともできます。

• Web技術の基本（詳細）
  • 『HTML編』
  • 『CSS & Design編』
  • 『JavaScript編』
  • 『Ruby & Sinatra編』（準備中）

• Web開発の実践（詳細）
  • 『Ruby on Rails編』（本書がこちら。本書も実践入門シリーズの１つです。）

実践入門シリーズは今後も追加される予定です。最新情報は公式のnoteマガジンやYouTubeチャンネルからも発信していくので、ぜひチェックしてみてください。

Railsチュートリアル解説動画

『ただ学ぶのではなく早く学びたい』といった方向けに解説動画と質問対応サービスも提供しています。企業の社員研修や大学/大学院の講義などでも採用されている好評のコンテンツとなっているので、効率的に学びたいときはぜひご検討ください。

• 解説動画 + AIサポート + 回答付き問題集で学ぶ

  イラストと実演付きの解説動画で学べる速習パックです（倍速再生にも対応）。AIがエラーや疑問を補足する『AIサポート』や、大学/大学院で使われている回答付き問題集『トレーニング』も同梱されているため、「素早く学びたい」「理解度を高めたい」という場面でオススメです。

• 質問対応サポート付きで学ぶ【提供: ShareWis】

  現役Rubyエンジニアのサポート付きで学べる、解説動画の質問対応付きサービスです。後半の章ほど難しくなっていきますが、サポートを受けながらしっかり学ぶことができます。

• コミュニティに参加しながら学ぶ【提供: TechCommit】

  コミュニティ型の学習支援サービスです。独学での学習が不安な方にオススメです。（【Railsチュートリアルコラボ】Rails学習支援追加パックでお申し込みください。）

Ruby on Railsガイド

本書で紹介する各機能を詳しく知りたいときに役立つのが、1,600ページを超えるRuby on Railsの大型リファレンス『Railsガイド』です。

Railsチュートリアル完走者が対象となっているので、本書を完走後、自分のWebサービスを開発するときや、仕事でコードを書く場面などでお使いください。全文検索やダークモードに対応したProプラン、法人向けTeamプラン、ダウンロード可能な電子書籍版もあります。

Railsチュートリアルの構成

本チュートリアルは、実際に動くWebアプリケーションを開発しながら学ぶ構成になっています。最初は簡単なページ表示のみですが、章が進むにつれてユーザー登録やログイン機構など、少しずつに高度なWebアプリケーションになっていきます。始めは最小限のhelloアプリ（1.3、図1.2）で各種セットアップを整え、次に少しだけ機能が増えたtoyアプリ（2章、図1.3）を体験してから、最後に本格的なWebアプリケーション『Sample App』（3章〜14章、図1.4）の開発に取り組みます。

本チュートリアルでは、あらゆるWebサービス開発で通用する一般的なトピックを中心に学べるようになっています。例えばユーザー登録やログイン機構、メールを使ったアカウント認証やパスワード設定といったトピックなどです。実際のWebサービスのほとんどでは、これらの主要な機能が盛り込まれています。それだけでなく第14章で完成するSample Appの最終版では、初期のTwitterを連想させるような仕組みになっています。そういえば偶然にも、Twitterも最初はRailsで構築されていましたね。（当時の開発者も「初期にRubyを選んだのは間違いではなかった」と強調しています）

それではチュートリアルを始めていきましょう！

図 1.2: 最初に作るhelloアプリ

図 1.3: 次に作るtoyアプリ

図 1.4: 最後につくるサンプルアプリ

1.1.2 この本における取り決め

本チュートリアルで使う記法のほとんどは説明不要だと思いますが、説明が必要だと思われるものについてのみ、このセクションで補足します。

本チュートリアルでは、コマンドライン (ターミナル) のコマンド例が多用されています。簡素化のため、次のようなUnixスタイルのプロンプト (行の頭に「$」を表示するスタイル) を使って、その例がコマンドラインであることを示しています。

$ echo "hello world"
hello world"

Railsにはコマンドラインから実行するコマンドが多数あります。例えば1.3.2では、rails serverコマンドを使ってローカル環境にWebサーバーを立ち上げたりします。

$ rails server

Railsチュートリアルにおけるディレクトリの区切りは、コマンドラインのプロンプトと同様にUnixスタイルのスラッシュ「/」を使っています。例えば、sample_appのproduction.rbの設定ファイルは次のように表します。

config/environments/production.rb

このようなファイルパスは、アプリケーションのルートディレクトリからの相対パスであると理解してください。ルートディレクトリの位置はシステムによって異なり、このクラウドIDE (1.2.1) の場合は以下のようになります。

/home/ec2-user/environment/sample_app/

この場合、production.rbへの絶対パスは以下のようになります。

/home/ec2-user/environment/sample_app/config/environments/production.rb

表記を簡単にするため、本チュートリアルでは原則としてconfig/environments/production.rbと記述し、ルートディレクトリより上のパスは省略します。

Railsチュートリアルや実践入門シリーズでは、なるべくプログラムの出力結果も記載するようにしています。出力結果は、お使いのOSやそのバージョンなどによって異なるので、本チュートリアルの出力結果と皆さんの出力結果が完全に一致するとは限りません。

また、同じ理由で、皆さんがコマンドを実行したときにエラーが発生することもあります。そのような場合は、エラーメッセージをGoogleで検索してください。エラーメッセージをGoogleで検索することは、実際のソフトウェア開発でも使われている基本的なテクニックなので、技術力向上という視点で見ても良い練習になります (コラム 1.2)。よくある事例についてはヘルプページでまとめています。困ったときに思い出していただけると嬉しいです。

本書ではWebアプリケーションのテストも扱っています。どうなるとテストが失敗し、どうするとテストが成功するか、手を動かしながら学べるようになっています。読みやすさのため、テストが失敗するコードを red 、テストが成功するコードを green で表記します。

最後に、サンプルコードの更新箇所を分かりやすくするために、次の２つの工夫を加えました。１つは、コードの重要な部分にハイライトを追加したことです。

class User < ApplicationRecord
  validates :name,  presence: true
  validates :email, presence: true
end

ハイライト行は通常、コードに追加された行を示しますが、その前に示したコードとの違いを強調していることもよくあります (常にというわけではありませんが)。もう１つは、長いコードの途中を次のように連続ドットで省略したことです。

class User < ApplicationRecord
  .
  .
  .
  has_secure_password
end

連続ドットは省略を表しているので、他のコードと一緒にコピーしないようご注意ください。

1.2.1 開発環境

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

ちなみにローカル環境で開発を進めることもできますが、Railsの開発環境のセットアップはやや難しいため、ほとんどの読者にとってはクラウドIDEが最適だと筆者は考えています。もしローカル環境でセットアップしたい場合は Learn Enough Dev Environment to Be Dangerousの手順に従ってください (訳注: 日本語だとRails Girls インストール・レシピが詳しいです。仮想環境 (Vagrant) を使った環境構築もあります)。

クラウド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のような画面になるまで進めてください。情報を適宜入力して確認ボタンを押し、次のページでは、Amazon LinuxではなくUbuntu Serverを選択して進めます。すると、Cloud9の開発環境が利用できるようになります。 (図 1.9)。このとき “root” ユーザーであるという警告メッセージが表示されるときがありますが、こちらの対処方法は後ほど説明します (IAMという機能を使った対応方法について13.4.4で説明します)。

図 1.7: Cloud9の管理ページ

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

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

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

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

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

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

1.2.2 Railsをインストールする

1.2.1の開発環境には必要なソフトウェアがすべて含まれていますが、Railsそのものは含まれていません。そこでよくある便利な設定とインストールを済ませてしまいましょう。最初に、Rubyドキュメントのインストールで無駄な時間を使わないよう、コマンドに設定を少々追加してみましょう (訳注: Rubyドキュメントのインストールに数分ほどかかることがあるので、エンジニアの間ではよくある設定の1つです)。これはシステムで1回だけ設定しておけばOKです。このコマンドの意味がわからなくても、今は何の問題もありませんのでご心配なく⁷。

$ printf "install: --no-document \nupdate:  --no-document\n" >> ~/.gemrc

次に、Railsをインストールするためにgemコマンドを使います。このコマンドはRubyGemsパッケージマネージャーが提供しており、コマンドライン (ターミナル) にリスト 1.1のように入力するときに使います。ローカルシステム上で開発する場合はターミナルを使います。クラウドIDEを使っている場合は、図 1.6のコマンドラインエリアに入力してください。

$ gem install rails -v 5.1.6

-vというオプションを使うことで、インストールされるRailsのバージョンを指定できます。つまり、この後のチュートリアルはRails 5.1で進めていくことになります。なお、Rails 5.1は現在サポート対象外となっています。詳細は以下の注意事項をお読みください。

1.3.1 Bundler

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

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

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.6'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme
# for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster.
# Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5.x'
# Build JSON APIs with ease.
# Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

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]
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

group :development do
  # Access an IRB console on exception pages or by using
  # <%= console %> anywhere in the code.
  gem 'web-console'
  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

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

(訳注: Railsは常に進化し続けるため、ここでGemfileの内容やRailsのバージョンが5.1.6となっていなくても大丈夫です。後述するGemfileでバージョンを明示的に固定するので、その変更を加えた後でbundle updateを実行すれば本書と同じバージョンになります。)

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

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

gem 'sqlite3'

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

gem 'uglifier', '>= 1.3.0'

uglifierのバージョンが1.3.0以上であれば最新バージョンのgemがインストールされます。極端に言えば、バージョンが7.2であってもそれが最新ならインストールされます (なお、uglifierはAsset Pipelineでファイル圧縮を行うためのものです)。2番目の方法は次のとおりです。

gem 'coffee-rails', '~> 4.0.0'

このように指定すると、coffee-rails (これもAsset Pipelineで使うgemです) のバージョンが4.0.0より大きく、4.1より小さい場合にインストールされます。つまり、以下のコードを実行すると、>=という記法では常に最新のgemがインストールされ、~> 4.0.0という記法ではマイナーバージョンの部分に相当するアップデート済みのgem (例: 4.0.0から4.0.1) をインストールします。後者の場合、メジャーバージョン (例: 4.0から4.1) のリリースはインストールされません⁹。残念ながら、経験上ちょっとしたマイナーアップグレードですら問題を引き起こすことがあります。このため、Railsチュートリアルでは基本的に事実上すべてのgemでバージョンを「ピンポイントで」指定し、がっちり固定してあります。ベテラン開発者であれば、Gemfileで ~> を使って指定し、最新のgemを使って進めてもらっても構いません。ただし、バージョンが異なると本チュートリアルに記載されている挙動と異なる可能性がありますので、その場合は各自でご対応願います。

リスト 1.4のGemfileを、実際に使用する正確なバージョンのgemに置き換えたものをリスト 1.5に示します。(コマンドラインでgem list <gem名>を実行して各gemの正確なバージョン番号を知ることもできますが、リスト  1.5を使うのが無難でしょう)。なお、この置換えのついでに、sqlite3 gemをdevelopment環境とtest環境 (7.1.1) だけで使う (つまりproduction環境では使わない) ように変更している点にもご注目ください。これは、後でHerokuで使うデータベースと競合する可能性を防ぐための処置です (1.5)。

source 'https://rubygems.org'

gem 'rails',        '5.1.6'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.6.4'

group :development, :test do
  gem 'sqlite3',      '1.3.13'
  gem 'byebug', '9.0.6', platform: :mri
end

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

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

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

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

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

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

1.3.2 rails server

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

$ cd ~/environment/hello_app/
$ rails server
=> Booting Puma
=> Rails application starting on http://localhost:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server

JavaScriptランタイムがインストールされていないというエラーが表示された場合は、GitHubのexecjsページにあるインストール可能なランタイムの一覧からJavaScriptランタイムを入手してください。個人的にはNode.jsがオススメです。

rails serverコマンドの実行は別のターミナルタブで行うことをオススメします。こうしておけば最初のターミナルタブで他のコマンドを実行できるからです。図 1.13と図 1.14。既に最初のタブでサーバーを開始している場合は、Ctrl+Cを押すとサーバーを終了できます¹¹。Railsアプリケーションを表示するには、ローカルサーバーの場合はhttp://localhost:3000/をブラウザで開きます。クラウドIDEの場合は、[Share] を開いて、開きたいアプリケーションのアドレスをクリックします (図 1.15)。どちらの場合も、図 1.17のようにブラウザにRailsアプリケーションが表示されます。

図 1.13: 新しいターミナルタブを開く

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

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

図 1.16: アプリケーションをブラウザで開いたときの画面

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

1.3.3 Model-View-Controller (MVC)

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

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

図 1.18: Model-View-Controller (MVC) アーキテクチャの概念図

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

1.3.4 Hello, world!

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

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

$ ls app/controllers/*_controller.rb

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

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

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

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

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

root 'controller_name#action_name'

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

Rails.application.routes.draw do
  # For details on the DSL available within this file,
  # see http://railsguides.jp/routing.html
end

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

リスト 1.7のコードとリスト 1.9のコードを使うと、ルートルーティングから「hello, world!」が返されるようになります (図 1.19)¹²。

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

演習

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

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

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

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

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

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

$ git init
  Initialized empty Git repository in
  /home/ec2-user/environment/environment/hello_app/.git/

$ git add -A

$ git status
On branch master  Initial commit

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

  new file:   .gitignore
  new file:   Gemfile
  new file:   Gemfile.lock
  new file:   README.md
  new file:   Rakefile
  .
  .
  .

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

$ git log
commit: af72946fbebc15903b2770f92fae9081243dd1a1
Author: Michael Hartl <michael@michaelhartl.com>
Date:   Thu May 12 19:25:07 2016 +0000

    Initialize repository

1.4.2 Gitのメリット

今の時点では、ソースコードをバージョン管理下に置かなければならない理由が今ひとつよくわからない、という方がいるかもしれませんので、例を1つご紹介します。仮に、あなたが重要な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
Changed but not updated:
  (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

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 directory clean)
$ ls app/controllers/
application_controller.rb  concerns/

削除されたディレクトリとファイルを無事復旧できました。これでひと安心です。

1.4.3 Bitbucket

Gitを使ってプロジェクトをバージョン管理下に置くことができたので、今度はBitbucketにソースコードをアップロードしてみましょう。BitbucketはGitリポジトリのホスティングと共有に特化したサイトです (『Git/GitHub編』ではGitHubを使っていますが、コラム 1.4でBitbucketを使っている理由について説明しています)。リポジトリをBitbucketにわざわざプッシュするのには2つの理由があります。１つ目は、ソースコード (とそのすべての変更履歴) の完全なバックアップを作成することです。２つ目は、他の開発者との共同作業をより簡単に行うことです。

Bitbucketでプロジェクトを開始するのは簡単ですが、少しだけ技術的に込み入った部分 (コラム 1.2) がありますので、次の要領で進めてください。

1. Bitbucketアカウントがない場合はアカウントを作成します。
2. 公開鍵をクリップボードにコピーします。既に公開鍵を作成している場合は、リスト 1.10のようにcatコマンドを使って公開鍵を表示ができます。まだ作成していない場合はリスト 1.10のコマンドを実行しても No such file or directory と表示されます。まだ作成していない場合は「Git - SSH 公開鍵の作成」を参考に公開鍵・暗号鍵を作成してください。
3. Bitbucketに公開鍵を追加するには、左下にあるアバター画像をクリックして [Bitbucket 設定]、[SSH 鍵] の順に選択します (図 1.22)。

$ cat ~/.ssh/id_rsa.pub

図 1.22: SSH公開鍵を追加する

公開鍵の追加が終わったら、左サイドバーの「＋」マークから作成メニューを開き、[リポジトリ] をクリックして新しいリポジトリを作成します (図 1.23)。プロジェクト名を選択し¹⁶任意のリポジトリ名を入力したら、アクセスレベルの[非公開リポジトリ] のチェックボックスが「オン」になっていること、[READMEを含めますか？] と[Include .gitignore? ] が「No」になっていること、[Default branch name] が空白のまま¹⁷であることを確認してください。準備ができたら [リポジトリの作成] をクリックして、その後は画面の指示にしたがって進めてください。

図 1.23: Bitbucketに最初のアプリのリポジトリを作成する

最終的に、リスト 1.11のようなコマンドが表示されたら成功です。もしリスト 1.11のような画面にならない場合は、公開鍵が正しく追加されていない可能性があるので、公開鍵の追加からやり直すことをオススメします。

最後は、画面に表示されたコマンドのとおりに入力して、ローカル環境にあるリポジトリをBitbucket上にプッシュできます。リポジトリをプッシュするときに「Are you sure you want to continue connecting (yes/no)?」と表示されることがありますが、そのときは「yes」と入力してください。

$ git remote add origin git@bitbucket.org:ユーザー名/hello_app.git
$ git push -u origin master

リスト 1.11の最初のコマンドは、BitbucketをリポジトリのoriginとしてGitの設定ファイルに追加するためのものです。次のコマンドでは、ローカルのリポジトリをリモートのoriginにプッシュします （-uフラグについては気にする必要はありません。気になるのであれば "git set upstream" で検索してみてください）。なお、「ユーザー名」の部分は実際のユーザー名に置き換える必要があります。例えば著者の場合、実行するコマンドは次のようになります。

$ git remote add origin git@bitbucket.org:railstutorial/hello_app.git

上のコマンドを実行すると、hello_appのリポジトリのページがBitbucketに作成されます。このページでは、ファイルの参照、全コミット履歴などさまざまな機能を利用できます (図 1.24)¹⁸。

図 1.24: Bitbucketのリポジトリページ

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

1.4.3の手順に沿って進めた場合、READMEファイルの内容が自動的に表示されることに気付いたでしょう (図 1.24)。このREADME.mdファイルは、リスト 1.3のコマンドを実行すると自動生成されます。ファイル名の拡張子が「.md」となっているファイルは、Markdownという人間にとってもう少し読みやすい記法を使って書きます¹⁹。Markdownは簡単にHTMLに変換でき、Bitbucketでも前述のように.mdファイルを自動的にHTMLで表示してくれます。

Railsが自動生成したREADMEをそのまま使ってもよいですし、プロジェクトに合わせて内容を書き換えてももちろん構いません。ここでは、READMEをRailsチュートリアル固有の内容に合わせて書き換えてみましょう。それと同時に、Gitでbranch、edit、commit、mergeを行う際にお勧めのワークフローの実例をご覧いただきます²⁰。

図 1.25: Bitbucketで表示されるデフォルトのREADMEファイル

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

# Ruby on Rails Tutorial

## "hello, world!"

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

$ 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 9dc4f64] Improve the README file
 1 file changed, 5 insertions(+), 22 deletions(-)

$ git checkout master
Switched to branch 'master'
$ git merge modify-README
Updating af72946..9dc4f64
Fast-forward
 README.md | 27 +++++----------------------
 1 file changed, 5 insertions(+), 22 deletions(-)

$ git branch -d modify-README
Deleted branch modify-README (was 9dc4f64).

# これはあくまで例です。ブランチでミスをした時以外は実行しないでください。
$ git checkout -b topic-branch
$ <ファイルを作成したり編集したり削除したり...>
$ git add -A
$ git commit -a -m "Make major mistake"
$ git checkout master
$ git branch -D topic-branch

Push (プッシュ)

READMEファイルの更新が終わったので、Bitbucketに変更をプッシュして結果を見てみましょう。既に1.4.3で一度プッシュを行ったので、大抵のシステムではgit pushを実行するときにorigin masterを省略できます。

$ git push

デフォルトのREADMEと同様、更新されたREADMEもBitbucketでよしなにHTMLに変換してくれます (図 1.26)。

図 1.26: Bitbucket上の更新したREADMEファイル

1.5.1 Herokuのセットアップ

HerokuではPostgreSQLデータベースを使います (ちなみに発音は “post-gres-cue-ell” で、よく“Postgres”と略されます)。そのためには、本番 (production) 環境にpg gemをインストールしてRailsがPostgreSQLと通信できるようにします²⁴。

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

HerokuではSQLiteがサポートされていないため、リスト 1.5の変更を行って、sqlite3 gemが本番環境に導入されないようにしておきます。

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platform: :mri
end

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

source 'https://rubygems.org'

gem 'rails',        '5.1.6'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.7.0'

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platform: :mri
end

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

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

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

本番用のgem (この場合はpg gem) をローカルの環境にはインストールしないようにするために、bundle installに特殊なフラグ「--without production」を追加します (リスト 1.14)。

$ bundle install --without production

リスト 1.13で追加したgemは本番環境でしか使わないので、このフラグを追加したコマンドを実行してもローカル環境には本番用gemは反映されません。ではなぜ今リスト 1.14のコマンドを実行したかというと、pg gemを追加したことをGemfile.lockに反映させないと、本番環境へのデプロイで失敗してしまうためです。これから行う本番環境へのデプロイを成功させるために、変更した内容のコミットも忘れずにおこないましょう。

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

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

$ heroku --version

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

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

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

$ heroku --version
heroku-cli/6.15.5 (linux-x64) node-v9.2.1

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

$ heroku login --interactive

最後にheroku createコマンドを実行して、Herokuサーバーにサンプルアプリケーションの実行場所を作成します (リスト 1.16)。

$ heroku create
Creating app... done, fathomless-beyond-39164
https://damp-fortress-5769.herokuapp.com/ |
https://git.heroku.com/damp-fortress-5769.git

このherokuコマンドを実行すると、Railsアプリケーション専用のサブドメインが作成され、ただちにブラウザで表示可能になります。今はまだ何もありませんが、すぐにデプロイしてWebページを表示させましょう。

1.5.2 Herokuにデプロイする (1)

Railsアプリケーションを実際にHerokuにデプロイするには、まずGitを使ってHerokuにリポジトリをプッシュします。警告メッセージが表示されることもありますが、今は無視してください。詳しくは7.5で解説します。

$ git push heroku master

1.5.3 Herokuにデプロイする (2)

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

デプロイされたアプリケーションの表示は、heroku create (リスト 1.16) を実行した際に生成されたアドレスをブラウザで開くだけです (もちろんここに表示されている著者のアドレスではなく、あなたのアドレスを使ってください)。クラウドIDEではなくローカルコンピュータで作業している場合は、heroku openコマンドでブラウザ表示することもできます。実行結果を図 1.27に示します。ページの内容は図 1.19とまったく同じですが、今やそれがインターネット上の本番Webページとして堂々と公開されているのです。

図 1.27: 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

最高ですね。²⁷

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

1.6.1 本章のまとめ

• Ruby on Railsとは、Web開発のためのフレームワークであり、Rubyプログラミング言語によって記述されている。
• 事前設定済みのクラウド環境を利用することで、Railsのインストール、アプリケーションの生成、生成されたファイルの編集を簡単に行うことができる。
• Railsにはrailsという名前のコマンドラインコマンドがあり、rails newで新しいアプリケーションを生成したり、rails serverでローカルサーバーを実行したりできる。
• コントローラのアクションを追加したり、ルートルーティングを変更したりするだけで「hello, world」アプリケーションを作成できる。
• Gitによるバージョン管理を導入し、Bitbucketの非公開リポジトリにプッシュする理由は、データの喪失を防止し、他の開発者との共同作業を行えるようにするため。
• 作成したアプリケーションをHerokuの本番環境にデプロイした。