Railsのビューの基本

## 概要
「[Railsアプリ作成からコントローラ、ルーティング作成まで - Qiita](https://qiita.com/kimascript/items/8a5f56d6717760c4ac66)」の続きとして`Railsのビューの基本`について、改めてまとめたいと思います。

## ビューを分離させる
前回の「[Railsアプリ作成からコントローラ、ルーティング作成まで - Qiita](https://qiita.com/kimascript/items/8a5f56d6717760c4ac66)」のコントローラーの最終形は以下のようになっておりました。

```rb:users_controller.rb
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には、以下のように記述します。

```erb:index.html.erb
<p>Hello World!</p>
```

最後に、`users_controller.rb`の`render plain: 'Hello World!'`の行を削除し、これで切り離しの完了です。

`rails s`で`http://localhost:3000/users`に、アクセスして確認しましょう。

## コントローラーからビューに値を送る
アクション内で`インスタンス変数`を定義することで、ビューで変数を使用することができます。
具体的な方法は、まずアクション内で、`インスタンス変数`を以下のように定義します。

```rb:users_controller.rb
class UsersController < ApplicationController
    def index
        @hello = 'Hello World!'
    end
end
```
そしてそのインスタンス変数を`index.html.erb`で受け取るために以下のように記述します。
```erb: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`が、標準のレイアウトファイルとなります。

確認してみると、以下のようになっているのがわかると思います。

```erb: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`の出力時のソースは、以下のようになります。
```erb: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>タグ`で囲むよう追加しましょう。

```erb: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>
    <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`を開いてみると、以下のような記述があります。

```css: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`ヘルパーメソッドを使用します。

```erb:index.html.erb
<%= stylesheet_link_tag 'users/index' %>
```

これにより、`users/index`アクションを表示する際には`app/assets/stylesheets/users/index.css`が読み込まれるようになります。

JavaScriptファイルも同様に、`javascript_include_tag`ヘルパーメソッドを使用して読み込むことができます。

```erb:index.html.erb
<%= javascript_include_tag 'users/index' %>
```

これらの方法を利用することで、ビューごとに異なるスタイルシートやJavaScriptを適用することが可能になります。

## まとめ
今回は、Railsのビューの基本について説明しました。ビューを切り離すことでコントローラからの見通しが良くなり、またインスタンス変数を用いてデータをビューに渡す方法や、共通のデザインをレイアウトで管理する方法、さらにはページ毎にスタイルシートとJavaScriptを読み込む方法について説明しました。これらの知識は、Railsアプリケーションを作成する際の基本となるため、しっかりと理解しておきましょう。