ルーティングとコントローラを試す - 静的ページ編

• 学習の目標
• はじめに
• コントローラを作成する
  • コントローラの役割
  • コントローラの生成
• ルーティングを設定する
  • ルーティングとは
  • ルーティングの設定方法
• ビューを確認する
  • ビューとは
  • ERBでRubyコードを埋め込む
• ページをブラウザで確認する
  • サーバーの起動
  • ブラウザでの確認
  • 仕組みの理解
• まとめ

学習の目標

本章では、以下の内容を学習します。

• Railsのコントローラを生成する方法を理解する
• ルーティング設定の基本的な書き方を習得する
• ERBテンプレートを使ってビューを作成する方法を学ぶ
• URLとコントローラの関係性を理解する
• 実際にブラウザでページを表示して確認する方法を身につける

はじめに

このチャプターでは、Ruby on Railsのルーティングとコントローラを使って、静的なページを表示する流れを体験します。

最初は難しそうに感じるかもしれませんが、仕組みを順番に押さえれば大丈夫です。ここでは、単純に「自分で作ったページをブラウザに表示する」手順を試してみましょう。

前回のチャプターでは rails new コマンドを使ってプロジェクトを作成しました。今回はそのプロジェクトを使って、実際にページを表示してみます。

コントローラを作成する

コントローラの役割

Railsには、コントローラというパーツがあります。これはユーザーのリクエスト（「このページを見せて」という要求）を受け取って最初に処理をしてくれる場所です。

このコントローラを作るところから始めていきましょう。

コントローラの生成

Railsでは、コントローラを自動生成するコマンドが用意されています。例えば、以下のコマンドでStaticPagesという名前のコントローラを生成します。

rails s を実行しているターミナルが既にある場合は、別なターミナルを開いてあげましょう。そうすると、毎回 Rails サーバーを起動し直すことなく、スムーズに動作確認ができます。

改めて myapp を右クリックし、「統合ターミナルで開く」を選択しましょう。そして、以下のコマンドをターミナルで実行します。

rails generate controller StaticPages home about

このコマンドを実行すると、app/controllers/static_pages_controller.rbというファイルが作られます。

同時に、homeとaboutというビューを置くためのファイルも自動的に用意されます。

VS Codeなどのエディタでstatic_pages_controller.rbを開くと、homeとaboutという空っぽのメソッドが見つかるはずです。

ルーティングを設定する

ルーティングとは

ルーティングは、URLとコントローラのメソッドを結びつける仕組みです。つまり、「このURLにアクセスされたら、このコントローラのこのメソッドを実行する」というマッピングを定義します。

設定はconfig/routes.rbというファイルで行います。

ルーティングの設定方法

以下のコードを記述し、rootやgetを使ってルーティングを指定します。

Rails.application.routes.draw do
  root 'static_pages#home'
  get 'about', to: 'static_pages#about'
end

rootは、アプリにアクセスしたときの最初のページをどれにするかを決めています。いわば、トップページを定義する時に使います。

ここではstatic_pagesコントローラのhomeメソッドを最初に呼び出すように指定しています。

次にget 'about'の部分は、/aboutというURLにアクセスしたらaboutメソッドを呼ぶという意味になります。

現在はhttp://127.0.0.1:3000という URL で Rails アプリにアクセスできるため、以下のような対応関係となります。

• http://127.0.0.1:3000 → トップページ（home メソッドで開かれるページ）
• http://127.0.0.1:3000/about → about ページ（about メソッドで開かれるページ）

それぞれのメソッドで開かれるページの役割を担っているのが、次に説明するビューとなります。

ビューを確認する

ビューとは

コントローラのメソッドとルーティングが結びついたら、次はブラウザに表示するページ（ビュー）を整えます。

app/views/static_pages/の中にhome.html.erbとabout.html.erbというファイルがあるはずです。

先ほど rails generate コマンドを実行したときに作られたファイルの一部です。これらのファイルが、実際の画面に表示されるHTMLの役割を果たします。

ERBでRubyコードを埋め込む

Railsのビューでは、拡張子に.html.erbを使います。erbとは、HTMLの中にRubyのコードを埋め込むテンプレートエンジンですが、今はあまり気にしなくても大丈夫です。

erb ではHTMLと違って、埋め込んだ Ruby のコードを表示できるという特徴があります。下の例のように、<%= %>を使ってRubyのコードを書けます。

試しに app/views/static_pages/home.html.erb を編集して、以下のように書いてみましょう。

<h1>ようこそ！</h1>
<p>今日の日付は <%= Date.today %> です。</p>
<p>これは home メソッドに対応するビューです。</p>

<%= ... %>の部分は、実際にRubyが実行されて結果を表示します。例えばDate.todayと書けば、2025-02-07のような日付が画面に出力されます。

同じように、 app/views/static_pages/about.html.erb を編集して、以下のように書いてみましょう。

<h1>About ページへようこそ！</h1>
<p>今日の日付は <%= Date.today %> です。</p>
<p>これは about メソッドに対応するビューです。</p>

ページをブラウザで確認する

サーバーの起動

ルーティングとコントローラ、ビューの準備ができたら、ローカルサーバーを起動します。（前回までで起動したままであればスキップしてください）

ターミナルで以下のコマンドを実行してください。

rails server

あるいは省略形の rails s でも起動できます。

ブラウザでの確認

しばらくすると、http://127.0.0.1:3000でアクセスできるようになります。

ブラウザでそのURLを開くと、rootに設定したhomeページが表示されます。先ほどまでは Rails デフォルトのページが表示されていましたが、オリジナルのビューの内容が表示されましたね。

これは、新たに root、つまりトップページを定義したからです。

また、http://127.0.0.1:3000/aboutにアクセスすれば、aboutページを確認できます。

仕組みの理解

ここで一度、リクエストの流れを整理してみましょう。

1. ブラウザで http://127.0.0.1:3000 にアクセスする
2. Railsアプリが起動しているサーバーがリクエストを受け取る
3. routes.rb の設定に基づいて、static_pages#home が呼ばれる
4. StaticPagesController の home メソッドが実行される
5. 対応するビュー（home.html.erb）が読み込まれる
6. ビューの内容がHTMLとして生成され、ブラウザに送り返される
7. ブラウザが受け取ったHTMLを表示する

同様に /about にアクセスした場合は、static_pages#about が呼ばれて about.html.erb が表示されます。

まとめ

本章では、簡単な静的ページを表示するために以下の手順を試しました。

• コントローラの生成: rails generate controller コマンドを使って、メソッドを持つコントローラを作成しました
• ルーティングの設定: routes.rb にルーティングを設定し、URLからコントローラのメソッドにアクセスできるようにしました
• ビューの編集: ビューファイル（.html.erb）にHTMLやRubyコードを書いて、表示内容を定義しました
• サーバーの起動: rails server でローカルサーバーを起動し、ブラウザでページを確認しました

この流れで、Railsがどのようにリクエストを処理し、ページを表示しているかをざっくりと理解できたと思います。

コントローラがリクエストを受け取り、ルーティングがURLとコントローラを結びつけ、ビューが実際に表示する内容を定義しています。この3つの要素が連携することで、Webページが表示される仕組みになっています。