Part3:View

海未「最初はビューの部分です。画面を作るにはHTMLをそのまま書く方法もありますが、Expressではいくつかのテンプレートエンジンがサポートされています」
穂乃果「テンプレートエンジン?」
海未「HTMLを簡単に生成できる仕組みと思ってください。変数が扱えたり、繰り返しや条件文が書けたり、部分再利用ができたりします」

海未「ExpressのデフォルトであるJadeというテンプレートエンジンを見てみましょう。前回動かしたアプリケーションで表示された画面のHTMLソースは」

海未「このようになっています」
ことり「これは普通だよね」
海未「はい。しかし、実はこのファイルがそのままサーバに置かれているわけではないのです。views/index.jadeを見てください」

穂乃果「何これ・・・? HTMLじゃないよね」
海未「これがJadeを使ったテンプレートです。これを基にして、さきほどのHTMLが生成されているのです」
ことり「えーっと、h1があって、pがあって、これbodyと対応してるのかな?」
海未「はい。このtitleは変数で、コントローラから渡されているものですが、そのあたりはコントローラのときに説明しますね。とにかく、h1の内容として”Express”を設定、pの内容として”Welcome to Express”を設定しています」
穂乃果「titleには”Express”が入ってるってことだね。じゃあ、headの方は?」
海未「views/layout.jadeを見てください」

海未「この部分は全ページ共通になりますから、こうやって別ファイルに切り出してあります。extends layoutとすることで、このlayout.jadeを読み込むことができます」
ことり「書き方はさっきと同じみたいだね。block contentのところでつながってるのかな」
海未「そうですね。この2つをつなげたものを最初のHTMLと見比べると、単純にタグの書き方を簡略化したものだと分かると思います」

海未「さてここからは、実際に簡単なアプリケーションを作りながら説明していこうと思います。お題は投票サイト。お気に入りのスクールアイドルグループに投票すると、得票数の多いグループが上に表示されるという仕様にしましょう」
穂乃果「いよいよアプリが作れるんだねっ!」
海未「実際はMVCを行きつ戻りつしながら作っていくものですが、今回はビューだけですから静的な画面のイメージを作るだけになりますね」

海未「では前回の要領で、pollsというアプリを作ってください。それから、views/index.jadeをこのように」

海未「ごくシンプルな、グループ名のリストが表示されると思います。この時点では何も動きませんが」
ことり「eachでループが書けるんだ。JavaScriptみたいだね」
海未「if/elseも書けますし、かなり複雑な構造も組み立てられるでしょう。ただし、ビューにロジックを詰め込むのはあまり望ましくないとする向きもありますから、複雑な処理はできるだけ他の層でやっておくのがよいでしょう」

海未「この画面を起点に投票ができたり、グループの新規登録ができるようにしていきます」
穂乃果「できあがりが楽しみだねっ!」
ことり「わくわく♪」


LINEで送る
Pocket


返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です