Viewの基本を学ぼう(^^ゞ

Controller(店長)の負担を減らし、View(盛り付け係)に任せよう!

Controllerだけでは限界がある...?

前回はControllerの中に直接HTMLを書きましたが、あれは例えるなら...
「店長(Controller)が、お客さんに料理の説明を口頭で早口でまくし立てている」ような状態です。

短いメッセージならいいですが、複雑なページ(豪華なフルコース)をすべてControllerに書くのは無理がありますよね。
そこで、「盛り付けのプロ(View)」の出番です!∠(`・ω・´)

1

Viewファイルを用意しよう

実は $ rails generate controller my を実行したとき、
Railsは気を利かせて「View用のフォルダ」も作ってくれていました。

app/views/my/ ← ここにファイルを作ります

以下のコマンドで、空のファイルを作成しましょう。

$ touch app/views/my/page1.html.erb
2

HTMLを書いてみよう

作成した page1.html.erb に、以下の内容をコピペしてください。
これが「お皿の上の盛り付け」になります!

app/views/my/page1.html.erb
<h1>Viewを使ったページへようこそ!</h1>

<p>
  これはControllerではなく、<br>
  Viewファイル(page1.html.erb)に書かれた内容です。
</p>

<ul>
  <li>HTMLがスッキリ書ける!</li>
  <li>デザインが変更しやすい!</li>
  <li>店長(Controller)もニッコリ!</li>
</ul>
3

Controllerをスッキリさせよう

Viewファイルを作ったので、店長(Controller)はもう喋らなくてOKです。
app/controllers/my_controller.rb を以下のように書き換えてください。

app/controllers/my_controller.rb
class MyController < ApplicationController
  def page1
    # 何も書かないでOK!
  end
end

Elieの疑問:なぜ空っぽで動くの?

「えっ、指示しなくていいの?」と思いましたか?
実はRailsには「言わなくてもわかるよ(暗黙の了解)」という賢いルールがあるのです。

アクション名が page1 なら、Railsは自動的に
「app/views/コントローラ名/page1.html.erb」
を探して表示してくれます。これを「設定より規約(Convention over Configuration)」と呼びます。
余計なコードを書かなくていい、Railsの最高の機能の一つです!( ゚∀゚ )

4

ブラウザで確認!

サーバーを起動してアクセスしてみましょう。

$ rails server

URL: 'http://localhost:3000/my/page1'

さきほどのHTMLが表示されていれば成功です!(^ ^)v

ブラウザにこんな感じで表示されれば大成功です!(*^^*)

今回の流れをおさらいしよう( ・ิω・ิ)

User
URLにアクセス
Controller
Action実行
View
HTML作成
Browser
画面表示

これで「リクエストを受けて画面を表示する」という基本サイクルが完成しました。
今回はシンプルな文字だけでしたが、Viewを使えばもっと色々なことができます!

Next Step: もっとリッチなWebページに!(^_-)

次回は、以下のトピックについて学んでいきましょう!

  • クライアントから値を渡す「クエリパラメータ」
  • アプリのデザインを整える「スタイルシート(CSS)」
  • プロ並みのデザインを一瞬で作る魔法のツール「Bootstrap」