テンプレートからControllerをAPIっぽく使う

今週実装していて色々と学びがあったのでメモとして。

仕事で使っているCakePHPのテンプレートでVue.jsを使っているのですが、今まではテンプレート内でPHPと組み合わせて使っていました。（コントローラーから値を渡してループしたり）
今回、なるべくVue.jsだけで実装してみようとして、色々と壁にぶち当たりました。
結論から言うとかなり使い勝手は良くなったので……苦労した甲斐はありましたｗ

全体的な流れ

よくあるMVCフレームワークの流れとして、コントローラーからビュー側（テンプレート）にデータを渡すというのがあります。
これをVueのdataで受け取って、DOMの制御や表示などを完全にVue側だけでやるという形で実装しました。
更にAPIを叩いて取得したjsonを表示するという機能もあります。その度にDOMに追加していくので、Vueは必須レベルですね。

つまづいたところと解決策

まず普通にAPIから取得・追加した項目をsubmitして保存するつもりでいました。
が、v-modelでデータバインディングするときの整合性を保つのが難しく断念しました。
次にsubmitしてform保存ですが、これもフレームワークのXSS対策の為、フォーム項目を動的に増やすとエラーが出てしまいます。
ドキュメントを漁ると、どうやらVueなどのフロントエンドフレームワークは基本的にajaxで通信するという事らしい。
なので保存を追加した段階でajaxで保存するようにしました。
追加や削除などを全てこれで行っているので、完全にコントローラーはAPIと化しました。
まさにフロントエンドフレームワークを使った造りになり、かなりモダンになりましたｗ

結局メリットって？

やっぱりリロードが発生しないことによるユーザービリティの向上だと思いますね。
jQueryでは実現出来ない、データバインディングを用いたDOMとのリンクによって圧倒的簡単にDOM操作が実装できたのも大きいです。
シンプルになるということはバグ要因も減らせる訳ですからね。
正直、今からjQueryでセレクタで探してきて〜とかやりたくない・・・ｗ

とまあ以上のように実装しましたが、これがlaravelだったら公式に対応していてlaravelmix使えばいいだけだし楽なんだろうな・・・って思いました。
いつかlaravelmixとvueを使ったやつ、作ってみたいですね。
それでは今回はこの辺りで。