前回のレクチャーに戻る 完了して次のレクチャーへ  

  2-2 仮のトップページを表示させる

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

この章で学べること


- RailsにおけるMVC
- ルーティングの設定
- コントローラーの作成
- rootルーティングの設定
- Bootstrapの導入
- Gemモジュールのインストール
- 部分テンプレートについて

学習キーワード


- MVC
- ルーティング
- rails routes
- コントローラー
- ビュー
- rootメソッド

MVCを理解しよう


Railsを使ったアプリケーション開発する上でMVCを理解することは非常に重要です。こちらの記事が非常に分かりやすくMVCについて解説されているので、下記の記事をまず読んでMVCについて学びましょう。

参考)RailsにおけるMVC(モデル/ビュー/コントローラ)

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


まずトップページのルーティングの設定を行います。ルーティングは受け取ったURLを認識し、適切なコントローラー内のアクションを動かすように設定します。今回はpagesコントローラーのhomeアクションのルーティングをトップページのルーティングとして設定します。config/routes.rbを以下のコードを追加してください。

config
└── routes.rb

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


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

$ rails routes

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

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

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


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

pagesコントローラーの作成


次にpagesコントローラーを作成します。コントローラーはルーティングからリクエストを受け取り、データをモデルから取得したりモデルに保存するなどの作業を行い、最後にビューを使用してHTML出力を生成します。コントローラーは以下の「rails g controller コントローラー名」というコマンドで作成出来ます。

参考)Action Controller の概要

$ 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

homeアクションを追加


pagesコントローラーを作成できたので、今度はpagesコントローラーにhomeアクションを追加します。app/controlllers/pages_controller.rbに以下のコードを追加してください。

app
└── controllers
    └── pages_controller.rb

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

Viewを追加する


最後にViewを追加します。アプリケーションのapp/viewsディレクトリには、1つのコントローラーごとに1つのディレクトリが作成され、そこにビューテンプレートファイルが置かれます。このビューテンプレートはそのコントローラーに関連づけられています。今回はpagesコントローラーなのでpagesディレクトリにアクションごとに出力された結果をビューで表示させます。app/views/pages/ディレクトリ内home.html.erbを追加してください。追加したらhome.html.erbに以下のコードを追加してください。

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

では、実際に仮のトップページを表示されるか確認します。http://localhost:3000/pages/home にアクセスして下記の画像のように表示されていればうまく動作しています。

pagesコントローラーのhomeアクションのをrootルーティングに設定する


仮のトップページをhttp://localhost:3000 にアクセスしたら表示できるようにルーティングの設定を行います。config/routes.rbを以下のように編集してください。

config
└── routes.rb

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

参考)Rails のルーティング

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

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

議論
4 質問