hifiveでMVCの基本！ビューを扱う

Webアプリケーションはリリース時には特に問題がなくとも、更新が重なっていくと徐々に構造的、ロジック的に破綻することがよくあります。その最たるものとしてはUI部分ではないでしょうか。

HTMLは手軽に修正できる反面、適切な管理、運用を心がけないとあっという間にごちゃごちゃになってしまいます。

そこでhifiveではテンプレートエンジンを設けることでロジックとビューを分離して管理できるようになっています。今回はそんなビューを使ったサンプルを紹介します。なおソースコードはGitHubにアップロードされています（view.htmlです）。

まずは完成図

最初の表示です。

例えば5を入力して出力ボタンを押します。

このように奇数は赤、偶数は青で表示されます。

ソースをみる

実際にこの処理を行っている部分のソースを見てみましょう（CoffeeScriptです）。

$ ->
  # コントローラの元となるオブジェクトを作成
  controller =
    __name: "NumListController"
    # 使用するテンプレートのパスを書く（HTMLファイルからのパスです）
    __templates: "./views/list.ejs"
    "#output click": ->
      # 入力値を取得
      to = $("#to").val()
      # 値がなければ処理を終了
      return  unless to
      # StringからNumberへ変換。変換に失敗したら終了
      try
        to = parseInt(to)
      catch e
        return
      # テンプレートに値を渡してHTML文字列を取得する
      numList = @view.get("list",
        num: to
      )
      # 結果を画面に出力
      $("#list").html numList
  # id="container"である要素にコントローラをバインド
  h5.core.controller "#container", controller

入力値は $(“#to”).val() で受け取っています。これはjQueryを使っていますので分かりやすいかと思います。大事なのは、 @view.get() の部分です。

hifiveではEJSをテンプレートエンジンとして用いています。EJSはEmbedded JavaScript の略で、Ruby on Rails標準のテンプレートエンジンであるerbに似た構文が使われています。

__templates のところでテンプレートを定義しており、@view.getでテンプレートを指定しています。この時のテンプレートlist.ejsは次のようになっています。

<script type="text/ejs" id="list">
[% for (var i = 1, len = num + 1; i < len; i++) { %]
<li>
    <span style="[%= 'color: ' + (i % 2 === 0 ? 'blue;': 'red;') %]">[%= i %]</span>
</li>
[% } %]
</script>

scriptタグのところにある id=“list” がコントローラ側で呼び出す際の list に相当します。また、numというのはコントローラから与えられている変数になります。下のコードがテンプレート処理を行っているところになります。

numList = @view.get("list",
  num: to
)

このようにしてテンプレートとそこに渡す変数を定義することで更新に強いWebアプリケーション開発をサポートしています。この辺りの仕組みはサーバサイドの開発では一般的になっていますが、クライアントサイドではついおろそかにされがちです。しかしUI周りの安直な実装は後々の更新、機能追加の際に必ず負債になってきます。hifiveでは予めMVCの枠組みが決まっていますので、テンプレートエンジンに悩んだりすることもなく実装が進められるでしょう。

今回のソースコードはGitHubにアップロードされています（view.htmlです）。ぜひご覧ください。

デモ：hifive ビュー操作

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive