1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

子供の想像力を伸ばしアイデアを形にする小学生向けプログラミング教室「プロスタキッズ」

0からのRuby入門その26〜Ruby on Railsでビューを作る〜

Pocket

はじめに

さあ、Ruby on Railsの締めくくりを始めましょう。

前回まで、Ruby on Railsのコントローラーとモデルについてみてきました。

最後に、MVCアーキテクチャのビューについて学んでいきましょう。ビューは画面表示(ページ)を司る部分です。

コントローラー・モデル・ビューの3つの要素が協調することで、ひとつのアプリケーションとして動作します。

この記事では、Ruby初心者の方向けに、Ruby on Railsのビューについてお伝えしていきます。
それでは、学習を進めていきましょう。

ビューの役割

ウェブアプリケーションは、主にブラウザとやり取りします。

ブラウザがページを表示できるようにするには、HTMLやCSS、JavaScriptを返す必要があります。
そのため、ウェブアプリ側でHTMLなどを使ってページを構築する必要があるわけです。

MVCアーキテクチャでは、ビューがページの構築を担当します。コントローラーがブラウザからのリクエストを受け取り、モデルを取得し、それをビューに渡してページを生成します。最終的に、HTMLなどが結果としてブラウザに返されることとなります。

URLとビューの関係

Ruby on Railsでは、設定よりも規約を優先しています。

つまり、設定ファイルに細々とした設定を書き連ねるのではなく、命名規則などの規約に従うことで、Railsがユーザーの作成したクラスを利用できるようにするというわけです。

以前の連載で、デフォルトでURLに対応したコントローラーが呼び出されることを学びました。
ビューもこれと似ています。

ビューファイルは、”app/views/[controller_name]”ディレクトリ内に”[action_name].[format].erb”という形式に則ったファイル名で保存します。

こうすることで、該当のコントローラーのアクションが呼び出されたときに、既定のビューファイルが使用されるというわけです。

たとえば、”StudentsController”クラスの”index”メソッドをHTMLフォーマットでリクエストしたときには、”app/views/students/index.html.erb”ファイルがビューとして使用されます。

実際に実行して確かめてみよう

それでは、実際にどうなるか実行して確かめてみましょう。

以前も行ったように、プロジェクトディレクトリで次のコマンドを実行して、Railsの開発サーバーを起動しましょう。

開発サーバーが起動したら、”StudentsController”クラスの”index”メソッドを実行してみましょう。

アクセスするURLは、コントローラーファイルのコメントを参考にしましょう(例:http://localhost:3000/students)。

URLにアクセスすると、”StudentsController”クラスの”index”メソッドが実行され、HTMLとして結果が返ってきます。
前回の記事で作成した、シードデータが一覧で表示されていますね。

どのような結果となるかは、これでわかりました。
それでは、ビューはどのように定義されているのでしょうか?

ビューのコードを確認してみよう

次に、ビューの定義がどうなっているかを見てみましょう。

”app/views/students”ディレクトリの”index.html.erb”ファイルを開いて下さい。

拡張子が”erb”となっていることからも、通常のHTMLとは異なることがわかります。
とはいっても、中身は見慣れたHTMLに近い内容になっています。

純粋なHTMLファイルとの違いは、「<%〜%>」や「<%=〜%>」といった記法を使って、Rubyコードを記述できることです。

PHPコードのように、HTML中に条件分岐や繰り返しを記述でき、”<%=〜%>”の実行結果はHTMLとともに出力されます。

一般的な構文はもちろんのこと、Railsに用意されているヘルパーメソッド(link_toなど)を使うことで、別のアクションを実行するためのURLを簡単に記述できます。

共通コードはレイアウトテンプレートにまとめよう

すでにお気づきかもしれませんが、先ほどのビューファイルにはHTML要素などの必要不可欠なタグが記述されていません。
しかし、ブラウザでは正常に表示できています。

これはなぜでしょうか?

Ruby on Railsでは、共通するコードをレイアウトテンプレートにまとめておくことができ、複数のビューファイルから利用することが可能です。

”app/views/layouts”ディレクトリ内の” application.html.erb”ファイルがアプリケーション全体で使用されるテンプレートとなります。
このファイル中の「<%= yield %>」の部分に、ビューの結果が埋め込まれて出力されるわけです。

これがRuby on Railsの基本的な動作の流れになります。

まとめ

Ruby on Railsの全体像がつかめましたか?

今回はRailsのスキャフォールディングを利用したため、コードを一行も書かなくともアプリケーションを作成できました。
全体像が理解できたら、スキャフォールディングで自動生成されたファイルに手を加えて、どうなるか実験してみましょう。

トライアンドエラーで学んでいくことが大切です。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る