概要
「Railsアプリ作成からコントローラ、ルーティング作成まで - Qiita」の続きとしてRailsのビューの基本について、改めてまとめたいと思います。
ビューを分離させる
前回の「Railsアプリ作成からコントローラ、ルーティング作成まで - Qiita」のコントローラーの最終形は以下のようになっておりました。
class UsersController < ApplicationController
def index
render plain: 'Hello World!'
end
end
これは、コントローラーが直接プレーンテキストをレスポンスとして送り、ビューテンプレートを介さずに出力しています。しかし、このやり方はMVCアーキテクチャの考え方に反しています。なので、コントローラーからビューを切り離す作業を行います。
まず、ビューはapp/viewsフォルダ配下に保存するのが慣習となっており、app/views/コントローラー名/ビュー名.html.erbという命名規則でディレクトリ、ファイルを作成していきます。この命名規則を利用することで、コントローラーにrenderメソッドを作成し、ビューまでのルートを用意する必要がなくなります。
ここでは、app/views配下にusersディレクトリを作成し、更にその配下にindex.html.erbファイルを作成致します。
作成したindex.html.erbには、以下のように記述します。
<p>Hello World!</p>
最後に、users_controller.rbのrender plain: 'Hello World!'の行を削除し、これで切り離しの完了です。
rails sでhttp://localhost:3000/usersに、アクセスして確認しましょう。
コントローラーからビューに値を送る
アクション内でインスタンス変数を定義することで、ビューで変数を使用することができます。
具体的な方法は、まずアクション内で、インスタンス変数を以下のように定義します。
class UsersController < ApplicationController
def index
@hello = 'Hello World!'
end
end
そしてそのインスタンス変数をindex.html.erbで受け取るために以下のように記述します。
<p><%= @hello %></p>
このindex.html.erbのようなビューファイルを(ビュー)テンプレートと呼びます。またこのようなerbという形式のファイルでは、以上のとおり<% %>や<%= %>で囲むことで、HTMLファイルの中にRubyのコードを記述することができます。「erb」とは「Embedded Ruby（埋め込みRuby）」の略です。
ERBの記述ルールは以下のようになります。
| 記号 | 動作 |
|---|---|
| <% %> | Rubyのコードとして実行 |
| <%= %> | Rubyのコードの実行結果を出力 |
またrails sでhttp://localhost:3000/usersにアクセスし、同じように表示できるのが確認できると思います。
レイアウトで共通デザインを定義する
Railsアプリでページ毎のHTMLを表示する際に、<head>タグなど各ページに共通で利用する要素があります。これらをレイアウトというRailsが提供するページ共通のデザインを管理する仕組みを用いて一元管理してみましょう。
レイアウトはapp/views/layoutsの配下にあるapplication.html.erbが、標準のレイアウトファイルとなります。
確認してみると、以下のようになっているのがわかると思います。
<!DOCTYPE html>
<html>
<head>
<title>myapp</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
<head>タグの上から順に以下のような意味を持っております。
-
titleタグ
rails newコマンドを実行した際にの引数に指定したアプリ名がデフォルトで設定されます。 -
csrf_meta_tags
このメソッドはRailsが提供する、クロスサイトリクエストフォージェリ(CSRF)と呼ばれる不正アクセルに対処するためのHTMLタグを出力します。 -
stylesheet_link_tag,javascript_include_tag
これらのメソッドは、Railsが提供する、スタイルシート(CSS)とJavaScripファイルをインクルードするHTMLタグを出力します。
また、<body>タグ内に記述されたyieldメソッドは、ビューテンプレートの内容を表示する箇所を指示するものです。
つまり、index.html.erbの出力時のソースは、以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title>myapp</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
これらを理解した上で、続いて、application.html.erbに<header>タグと<footer>タグを追加し、yieldメソッドにも<div>タグで囲むよう追加しましょう。
<!DOCTYPE html>
<html>
<head>
<title>myapp</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<header>
</header>
<div>
<%= yield %>
</div>
<footer>
</footer>
</body>
</html>
アセットファイルの確認
Railsのアプリケーションでは、JavaScript、CSS、画像などのアセットファイルを効率的に管理するための仕組みが提供されています。この仕組みはアセットパイプラインと呼ばれており、これを利用することで各種ファイルを一元管理し、効率的に配信することが可能になります。
アセットファイルは主にapp/assetsディレクトリに格納されます。具体的には、JavaScriptのファイルはapp/assets/javascripts、CSSのファイルはapp/assets/stylesheets、画像ファイルはapp/assets/imagesに配置します。
デフォルトで生成されるアセットファイルとしては、app/assets/javascripts/application.jsとapp/assets/stylesheets/application.cssが存在します。これらのファイルは全てのページで共通で読み込むJavaScriptとCSSを記述する場所です。
例えば、app/assets/stylesheets/application.cssを開いてみると、以下のような記述があります。
/*
*= require_self
*= require_tree .
*/
ここでのrequire_selfとrequire_tree .はSprocketsと呼ばれるRailsのアセットパイプラインの機能で、それぞれ現在のファイル（application.css）と同じディレクトリ以下の全てのCSSファイルを読み込むことを意味しています。
スタイルシートとJavaScriptをページ毎に読み込む
全てのページで同じスタイルやJavaScriptを適用するのではなく、ページごとに異なるスタイルやJavaScriptを適用したい場合もあります。この場合、それぞれのビューに対応するスタイルシートやJavaScriptファイルを作成することが推奨されています。
例えば、UsersControllerのindexアクションに対応するビュー（app/views/users/index.html.erb）のためのスタイルシートを作成したい場合は、app/assets/stylesheetsディレクトリ内にusersディレクトリを作成し、その中にindex.cssという名前のファイルを作成します。
そして、作成したスタイルシートを適用するためには、該当するビューファイル（ここではindex.html.erb）で以下のようにstylesheet_link_tagヘルパーメソッドを使用します。
<%= stylesheet_link_tag 'users/index' %>
これにより、users/indexアクションを表示する際にはapp/assets/stylesheets/users/index.cssが読み込まれるようになります。
JavaScriptファイルも同様に、javascript_include_tagヘルパーメソッドを使用して読み込むことができます。
<%= javascript_include_tag 'users/index' %>
これらの方法を利用することで、ビューごとに異なるスタイルシートやJavaScriptを適用することが可能になります。
まとめ
今回は、Railsのビューの基本について説明しました。ビューを切り離すことでコントローラからの見通しが良くなり、またインスタンス変数を用いてデータをビューに渡す方法や、共通のデザインをレイアウトで管理する方法、さらにはページ毎にスタイルシートとJavaScriptを読み込む方法について説明しました。これらの知識は、Railsアプリケーションを作成する際の基本となるため、しっかりと理解しておきましょう。