2章ではトップページを作成していきます。ここでいうトップページとは投稿一覧画面（タイムライン）です。まずトップページから作成するのは、ユーザーが新規登録やログインした際に遷移するページを用意するためです。

本パートの目標物

本パートでは下記の画像のようにデザインは特にしていない仮のトップページを表示させるところまでやっていきます。

目標物を作成するまでの流れ

1. トップページのルーティングを設定
2. コントローラーの作成
3. 作成したコントローラーにアクションを作成
4. トップページのビューを作成
5. rootルーティングの設定

ページが表示されるまでの流れは前回の「2-2 MVCについて学ぼう」で説明した通り、ルーティング→コントローラー→ビューという順で処理が行われるので、実装もこの順番でやっていきます。

では実際に進めていきましょう。

1. トップページのルーティングを設定

まずトップページのルーティングの設定を行います。

ルーティングは受け取ったURLを認識し、適切なコントローラー内のアクションを動かすように設定します。

今回はpagesコントローラーのhomeアクションのルーティングをトップページのルーティングとして設定します。

config/routes.rbに以下のコードを追加してください。

Copied!
config
└── routes.rb

ruby
1234
    
Copied!
Rails.application.routes.draw do
  # ここにpagesコントローラーのhomeアクションのルーティングを追加する
  get 'pages/home'
end

追加したルーティングを確認する

rails routesというコマンドを実行することで設定しているルーティングを全て表示できます。実際に下記のコマンドを入力してください。

Copied!
$ rails routes

すると下記の画像のようにルーティングの一覧が表示されます。

下記のルーティングが今回設定したルーティングの情報になります。

Copied!
pages_home GET  /pages/home(.:format)  pages#home

簡単に用語を解説すると、名前付きヘルパーはpages_home_pathのように末尾に_pathを付け加えることで、ビュー内で使えるURLになります。

HTTP動詞はクライアントが行いたい処理をサーバーに伝えるという役割があります。

Railsでは以下の4種類のHTTP動詞があります。

• GET・・・サーバーからブラウザに情報を返す。単にウェブサイトを閲覧したいときに利用される。
• POST・・・ブラウザからサーバーにリソースを送信し作成する。フォームでデータを保存したいときに利用される。
• PATCH・・・リソースを更新する。データを更新したいときに利用される。
• DELETE・・・リソースを削除する。データを削除したいときに利用される。

今回はページを表示させたいだけなので、HTTP動詞はGETに指定しています。

参考）Rails のルーティング

2. コントローラーの作成

次にトップページで使うコントローラーを作成します。コントローラーの名称は先程設定したルーティングでpagesと指定したので、pagesコントローラーを作成していきます。

コントローラーはルーティングからリクエストを受け取り、データをモデルから取得したりモデルに保存するなどの作業を行い、最後にビューを使用してHTML出力を生成します。

コントローラーは「rails g controller コントローラー名」というコマンドで作成出来ます。以下のコマンドを実行してください。

Copied!
$ rails g controller pages

上記のコマンドを実行するとターミナルに下記のような実行結果が表示されます。

Copied!
$ rails g controller pages
Running via Spring preloader in process 69566
      create  app/controllers/pages_controller.rb
      invoke  erb
      create    app/views/pages
      invoke  test_unit
      create    test/controllers/pages_controller_test.rb
      invoke  helper
      create    app/helpers/pages_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/pages.coffee
      invoke    scss
      create      app/assets/stylesheets/pages.scss

3. 作成したコントローラーにアクションを作成

次に作成したコントローラーにアクションを追加していきます。ルーティングが実際に処理するのはコントローラーに作成されたアクションです。

まず先ほど追加したルーティングを確認してみましょう。

今回の場合はpages#home、つまりpagesコントローラーのhomeアクションを処理するように指定しています。なのでpagesコントローラーにhomeアクションを作成していきましょう。

app/controlllers/pages_controller.rbに以下のコードを追加してください。

Copied!
app
└── controllers
    └── pages_controller.rb

ruby
12345678
        
Copied!
class PagesController < ApplicationController

  # ==========ここから追加する==========
  def home
  end
  # ==========ここまで追加する==========

end

今回は仮のトップページを表示させるだけで、特にデータベースからデータを取ってくるわけではないのでhomeアクションの中には何も書かなくて大丈夫です。

4. トップページのビューを作成

最後にビューを追加します。アプリケーションのapp/viewsディレクトリには、1つのコントローラーごとに1つのディレクトリが作成され、そこにビューテンプレートファイルが置かれます。このビューテンプレートはそのコントローラーに関連づけられています。

今回はpagesコントローラーなのでpagesディレクトリのアクションごとに出力された結果をビューで表示させます。

app/views/pages/ディレクトリ内にhome.html.erbを追加してください。追加したらhome.html.erbに以下のコードを追加してください。

Copied!
app
└── views
    └── pages
        └── home.html.erb

html
1
 
Copied!
<p>このページは仮のトップページです。</p>

では、実際に仮のトップページを表示されるか確認します。もう一度今回のパートで追加したルーティングのパスを確認してみましょう。

パスがpages/homeとなっているので「http://localhost:3000/ 」にpages/homeを付け足して、http://localhost:3000/pages/home にアクセスしてみましょう。下記の画像のように表示されていればうまく動作しています。

Cloud9の方はこちらを参考にページを表示させてください。

参考）Cloud9でページを表示する方法（Rails）

パスが〜〜amazonaws.comのあとに/pages/homeを付け足せば表示できます。

(サーバーを立ち上げていない場合はターミナル上で「bundle exec rails s」を実行してサーバーを立ち上げてください。)

5. rootルーティングの設定

仮のトップページを「http://localhost:3000」にアクセスしたら表示できるようにルーティングの設定を行います。

rootメソッドを使用することで、Railsがルート/とすべき場所を指定できます。

参考）rootを使用する

config/routes.rbを以下のように編集してください。

Copied!
config
└── routes.rb

ruby
1234
    
Copied!
Rails.application.routes.draw do
  # この行を編集する
  root 'pages#home'
end

編集できたら http://localhost:3000 にアクセスして下記の画像のように表示されていればうまく動作しています。

以上で今回のパートは終了です。

お疲れ様でした。