log > おととい作ったやつのフロントをVueで作り直した

おととい作ったやつのフロントをVueで作り直した

「Twitterから非公開TumblrにLikesをバックアップした」で作ったやつ、あまりにもコードが雑すぎてPHPの画面とロジックが分離できてないレベルだったので、vue.js使ってみたかったこともあり、作り直した。

vue.jsはMVCのうちViewに関する処理を行いやすくするライブラリで、それほど複雑なことをやるのでなければ使いやすいらしいので選んだ。というか、それ以外ほぼ知らず、「はじめに」を前にやったことがある程度だった。

使ってみたが、まだ終わってないけど、とりあえずいくつも画面があるわけではなく、一つの画面で読み込んだデータを表示するだけなので簡単だった。（コンポーネントを使った方がいいのかもしれないが、使わなかった。）Mithrilに比べるといろいろ覚えることが多いな、と思った。¹

しかし、日本語ドキュメントが整備されているので、あまり外部のドキュメントやStackOverflowを参考にしなくてすんだ。ドキュメントが充実しているのはよい。特にvueは1.0以降とそれ以前でAPIが変化しており、公式ドキュメントに情報が集まりのは助かった。

• Release 1.0.0 Evangelion · vuejs/vue

で、PHPの構文をVueの構文に置き換えるのはかなり簡単だった。というか、<?php echo $tweet->id_str; ?>とかを、{{ tweet.id_str }}とかに置き換えるだけでほぼオッケーで、部分部分でv-ifやv-forを使うだけだった。情報の取得にvue-resorceは使わずにgithub/fetchを使ったけど、こういう柔軟にできるところもいいところだと思った。

テキストのエスケープ処理は少し手こずった。出力時に自動でエスケープされるらしく、URLに自動でリンクを張ったり、\nを<br>に置き換えてもエスケープされて文字列として出力された。なので、PHPでhtmlspecialcharsとnl2brをした後にvueではエスケープせずに出力するようにした。

ルーティングはpage.jsを使ったが、よくわからなかった。とりあえず、URLを記録させるために使おうと思ったのだが、最終的にフォームから投稿でリダイレクト→ルーティングでツイート読込という処理にした。これが正しい使い方なのかわからない。

まあ、とりあえずあと少し手直しすれば終わるところまで一日でいったのでよかった。あとはPHPの側をRESTにすれば、みたいなことを考えていて、本当に凝り性は損だと思った。