Viewの基本を学ぼう(^^ゞ
Controller(店長)の負担を減らし、View(盛り付け係)に任せよう!
Controllerだけでは限界がある...?
前回はControllerの中に直接HTMLを書きましたが、あれは例えるなら...
「店長(Controller)が、お客さんに料理の説明を口頭で早口でまくし立てている」ような状態です。
短いメッセージならいいですが、複雑なページ(豪華なフルコース)をすべてControllerに書くのは無理がありますよね。
そこで、「盛り付けのプロ(View)」の出番です!∠(`・ω・´)
Viewファイルを用意しよう
実は $ rails generate controller my を実行したとき、
Railsは気を利かせて「View用のフォルダ」も作ってくれていました。
以下のコマンドで、空のファイルを作成しましょう。
HTMLを書いてみよう
作成した page1.html.erb に、以下の内容をコピペしてください。
これが「お皿の上の盛り付け」になります!
<h1>Viewを使ったページへようこそ!</h1>
<p>
これはControllerではなく、<br>
Viewファイル(page1.html.erb)に書かれた内容です。
</p>
<ul>
<li>HTMLがスッキリ書ける!</li>
<li>デザインが変更しやすい!</li>
<li>店長(Controller)もニッコリ!</li>
</ul>
Controllerをスッキリさせよう
Viewファイルを作ったので、店長(Controller)はもう喋らなくてOKです。
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の最高の機能の一つです!( ゚∀゚ )
ブラウザで確認!
サーバーを起動してアクセスしてみましょう。
URL: 'http://localhost:3000/my/page1'
さきほどのHTMLが表示されていれば成功です!(^ ^)v
ブラウザにこんな感じで表示されれば大成功です!(*^^*)
今回の流れをおさらいしよう( ・ิω・ิ)
これで「リクエストを受けて画面を表示する」という基本サイクルが完成しました。
今回はシンプルな文字だけでしたが、Viewを使えばもっと色々なことができます!
Next Step: もっとリッチなWebページに!(^_-)
次回は、以下のトピックについて学んでいきましょう!
- クライアントから値を渡す「クエリパラメータ」
- アプリのデザインを整える「スタイルシート(CSS)」
- プロ並みのデザインを一瞬で作る魔法のツール「Bootstrap」