Vue.jsに入門した

 JavaScriptの話。
ウェブアプリケーションを作る機会はあったが、フレームワークはおろかライブラリもロクにつかったことが無かった。
Reactとかの存在は知っていたので、バインドやDOM内で変数を展開したりできそうなことはふわっと知っていた。
今回はVue.jsに入門しつつTODOアプリをつくってみたのでレポートする。

 

①ドキュメントを読む
はじめに — Vue.js
入門サイトは沢山あるが、優しく解説するために文章量が多くなっているものが多すぎて億劫。公式のドキュメントを読むと良いとアドバイスをもらい、入門に成功。
「TODOアプリをつくる、できれば他の部分の設計も」と目標を決めて、基本的な使い方の項目をだらだら読み進めたが、最後のコンポーネントの章は長すぎて挫折。それ以降はアニメーションの部分以外読んでいない。
作るものに使えそうな部分を大体把握できたが、「はじめに」の章に書いてあることだけを試して、後で掘り下げる形でもよかったかなと思った。
その後にExampleからできそうなことを把握した。

②サンプルを読む
Markdown エディタ — Vue.js
この中に、まさにTODOアプリがあったので参考にしつつ、他のサンプルも見てこんなことをするならここからコード引っ張ってこようと決意。

③やることを決めて制作開始
内容と日時を指定してTODOリストに追加、それの完了や削除の処理、あとは出来れば良い感じにアニメーションを入れたいという内容を決め制作開始。ちなみにPush通知の導入やlocalStorageへの保存もしているが、Vueとは関係ないので割愛。
TODOの基本的な部分は上のサンプルにあるので大部分の実装を真似た。
❶TODOアイテムの表示と追加するための処理を書いた
❷時刻表示をする部分にフィルターを作り、日付や時間を分けて表示させるなど
❸完了と削除ボタンを実装
❹デザインの組み立て
❺アニメーションの追加
という感じで大体3日間だらだら続けて上のものが出来上がった。
Vue.js以外だと、❷では時間周りの処理に Moment.js 、❹ではデザイン周りに BULMA を使った。
感想を交えつつ、Vue.jsを使ったのは
❶TODOひとつ分の部品を作り、その親のエレメントからv-for(HTML内でfor文を使う機能)で特定の配列の分のTODOアイテムを表示させるように。バインドで配列にデータを突っ込むとHTMLに反映されるようにしたのでめっちゃ便利。
❷HTMLの中での変数の展開と合わせてフィルターを用いて、かなりすっきりした形でHTMLを書けた。
❸一番目と同様に、配列のデータを操作するとHTML側にも反映される。便利。
❹ここでは特に使用していない。
❺アニメーションの挿入は後からドキュメントを読んだので、コードの書き替えが必要かと思ったが全く必要なかった。v-forでレンダリングした物には同じようなアニメーションはどれも反映できそう。動画には映っていないが、TODOを追加するウィンドウにもアニメーションを付けている。お手軽なのにすごく良い感じになって満足度が高い。

④完成
ツイッターに投稿。
以下、使ってみた範囲でのまとめ

メリット
・バインドやデータのレンダリングが強力
HTML/JS共に書くコードの量を減らせる。管理する部分が少なく、後から手を加えるときに過不足なく編集しやすい。
・データや関数を整理してまとめやすい
ひとつの部品ごと作っていけるから整理がしやすい。
雑に使い捨てる変数が少なくしやすいのも良い。
・アニメーション機能がすごい
アニメーションのCSS自体は外部に頼る形になるが、使いやすさがやばい。
・学習がしやすい
ページの一部にだけ…って使い方でもちゃんとはまる。
HTMLの冗長になる部分をカバーするだけ、データの書き換えとHTMLの反映を一括でするだけ、みたいな使い方も有りだと思う。

デメリット
・素のJSよりデバッグがしづらい
エラーが出た際に行数は出ない。
コンソールでオブジェクトのプロパティを参照しようとしても見られなかったり。
・アプリの構造をしっかりと決めておかないと最大限の力が引きだせない
既に開発済みの物に組み込むのは厳しいかも。
しかし、構造が決まっているものを作る場合にはメリットになると思う。
・仕組みが見えづらい部分がある
methodsに登録したメソッドをfilterで呼び出したいのにundefinedっていわれたり。

まとめ
JSフレームワークを使ったことがなければ入門してみて損はないと思う。
入門方法は、ある程度JavaScriptが書けるなら今回の方法が効率が良いと思った。
とにかく小さい単位で使い始められるので、なんとなくどんなことができるかを知ってから書き始めて掘り下げていく形が良いと思う。
ちなみに、ちゃんと設計しない場合にはVue.jsよりもRiot.jsの方が良いかもしれない。
ReactとかAngularは知らない。