読者です 読者をやめる 読者になる 読者になる

knockout.jsを触ってみる MVVMのModelとは?

angular.jsとかreact.jsとかvue.jsとかriot.jsとか、〇〇.js系は星の数ほど…はないけど少なくとも太陽系の惑星くらいはある。
electronでアップリケーションをつくってみたいので、ナウい感じのJavascriptの使い方を身につけたいなぁとは前から思っていたんだけれども、このたびとりあえず1つ触ってみることにした。
選んだのはknockout.js。 理由は簡単で、みた中で唯一公式にWEB学習チュートリアルがあったから。
(残念ながらこのチュートリアルFirefoxではピクリともしないしMicrosoft Edgeでは途中までは動くんだけれども途中で動かないメソッド?(なのかな)が出てくる。Edgeがそこそこ出来が良くて「こりゃChromeイラナイワー」と思ってたんだけどやっぱバックアップ用に必要ですね。)



こういったJSフレームワークたちは「MVWフレームワーク」だとか「MVVMフレームワーク」だとか自称している。そういえばRailsは「MVCフレームワーク」だし、一体なんの関係があるの?という風にずっと思っていたんだけれども、少しわかってきた。といってもここ2日間くらいで考えたことなので正しさはあまり期待できない。

まず、RailsMVCというとこんなかんじになっている。
破線より上がサーバー
ユーザーからの要求をコントローラーが受け取り、ユーザーの要求に応じて必要なデータをモデルから引っ張ってくる。そしてビューにそのデータを渡しビューがHTMLという形でユーザーの要求に対する回答をする。
このRailsMVCは本来のMVCという考え方とは変容してしまっているというけれども、 現実としてこういったものがMVCだと言われているのだからしょうがない。(WEBの世界ではユーザーとサーバー上アプリケーションの間にブラウザが入る時点で「本来のMVC」は実現不可能だと思うんだけど。)
このMVC モデルは、比較的スタティックなWEBの世界のモデルである。ユーザーが要求を出すたびにビューが新しいHTMLを返すということはユーザーが何らかの操作をするたびにページ遷移を起こす必要がある。

しかし、Ajaxというゴイスーなものが出てきたおかげでページ遷移を発生させることなくユーザーの操作に基づいてページを書き換えることができるようになった。
Ajaxといっても、コントローラーに要求を出してビューに結果を返してもらうのは変わらない。しかし、この場合ビューは完結したHTMLページを返すのではなく、JSONなどのデータ断片を返すのみである。
そして「今開いているページ」のJavascriptがそのデータを受け取りページを書き換えることでページ遷移なしでのページ書き換えが実現されている。

ただ、ここで注目すべきはAjaxにおいてはサーバー外で、つまりM/V/CどこでもないところでWEBページの書き換えが発生している点である。
Railsにおけるビューとはあくまでブラウザが表示するHTMLを生成する部分であって、ユーザーが見ているページそのものがビューではない。
この「MVCどこでもない場所」が「クライアントサイド」であるということになるんだと思う。そしてMVVMといった分担もこのクライアントサイド内部の話ということであった。Ajaxで飛んできたJSONはその名のごとくそのままJSオブジェクトになるわけだが、これがクライアントサイドにおけるモデルとなる。そしてモデルビューがモデルとビューを双方向に関連付けることで、モデルの変更がビューに反映される、ビューの操作がモデルに反映される、ということになる。
つまり、イメージ図にすると



こんなふうにになるだろうか。
Modelとは言っても、WEBアプリの場合データの永続化機構はサーバー側が持っていないと意味が無い。なのでモデルとは言いつつサーバーとデータをやりとりする部分ということになる。つまりこれまでは全部jQueryでガンバって書いていたところを大部分フレームワークに任せることができるというのが〇〇.js系の存在意義である、ということになるだろうか。