【Ruby on Rails入門】viewの使い方を分かりやすく解説

viewとは?

RailsはMVCフレームワークとなっており、機能毎にModel、View、Controllerの3つに分かれています。

RailsのViewという機能で、Modelと連携を取りながら、適宜変化するWebページを作成することができます。

それでは実際にViewを使いながら、見ていきましょう。

このページでは「WebApp」というWebアプリケーションの作成、コントローラーの作成を終えているという前提でお話を進めていきます。

Webアプリケーションの作成を終えるとappフォルダの中にviewsフォルダが作成され、sampleコントローラーの作成を終えるとviewsフォルダの中にsampleフォルダが作成されました。

sampleコントローラーに対応するsampleビューのファイルはsampleフォルダに用意して作成していきます。

それでは早速sampleコントローラーに用意したindexというアクションメソッド用のviewファイルを作成していきましょう。

viewファイル名は「アクションメソッド名.html.erb」という名前でつけます。

末尾に「erb」という拡張子がついていますが、どのような意味を持っているのでしょうか。

「erb」は「Embedded Ruby」という技術をしたファイルという意味を持っています。

「erb」はhtmlタグの中に特殊なタグを埋め込んでRubyのコードを実行できるようにするための技術です。

Railsは「erb」を利用してテンプレートが作成されていきます。

今回はsampleフォルダに「index.html.erb」という名前でファイルを作成してください。

indexファイルを作成し終えたら、ファイル内に以下のようにコードを打ち込んでみましょう。

通常Webページを作成する時、htmlタグ内、headタグ内に必要事項を記述してからbodyタグ内にコードを記述していきました。

しかし、Railsではページ全体のレイアウトを行う機能が用意されているので、各viewにhtmlタグ、headタグを記述する必要がありません。

そのため、bodyタグの内容だけを記述しておけばいいのです。

次にsampleフォルダ内に用意したindexファイルの内容をstylesheetで装飾していきましょう。

stylesheetフォルダはassetフォルダの中に用意されています。

stylesheetフォルダ内を見るとsample.scssというファイルが用意されているかと思います。

拡張子が「scss」となっていますが、「Sass」というスタイルシートを拡張したプログラムのファイルとなっています。

「Sass」はスタイルシートを記述するための言語の一つとなっています。

「Sass」は「Css」とはコードの記述の方法は異なりますが、cssでのコードも読み込むことができます。

ここではcssの方法でコードを記述していきます。

それでは、stylesheetの中に記述していきましょう。

上記のように記述しておくことでsampleというコントローラーがsample.scssというスタイルシートを読み込んでくれます。

そのため、スタイルシートを読み込ませるためのコードを記述する必要はありません。

最後にsampleコントローラーにindexというアクションメソッドを追加しましょう。

indexというアクションメソッド内には何も記述されていません。

Railsではアクションメソッド内に何も記述されていない場合、アクションに対応するファイルを読み込み、ページを表示するようになっています。

ここでは、index.html.erbというファイルを読み込んで表示します。

サーバーを起動して、indexページにアクセスすると以下のように表示されます。

Ruby on Railsを学ぶことができるオススメの教材

Ruby on Rails 6 実践ガイド impress top gearシリーズ

Ruby on Rails 6 実践ガイド[機能拡張編]

パーフェクト Ruby on Rails　【増補改訂版】

まとめ