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

Line 1: Error: Invalid Blog('by Esehara' )

または私は如何にして心配するのを止めてバグを愛するようになったか

>> Zanmemo

あと何かあれは 「esehara あっと じーめーる」 か @esehara まで

日報: Vue.jsを三日間ほど触ってみての感想

今日の寿司

f:id:nisemono_san:20160929145144j:plain

寿司をViewと考えた場合に、寿司を食べたときに、寿司が減ったことを皿に反映させたいという話です。

はじめに

ある事情によって、知人のお手伝いをすることになった。で、そのお手伝いで、できそうなのがフロントエンドだったので、これを機会にフロントエントの知識をアップデートするのも悪くないよなーと思って、Vue.jsを触りはじめている。

当然ながら、自分の趣味プロダクトだったら、いきなり入れて「なるほどね」と納得して終了でいいんだけれども、今回はお手伝いということもあったので、それなりに導入するメリットみたいなものが必要になるだろうし、実際に触ってみてどうなのよ、というフィードバック必要だよね、みたいな気持ちになったので、そのあたりを書いておく。

リアクティヴ・コンポーネントについて

今回のお手伝いが、漠然とした概念で伸べるならば「管理画面のフロントエンド実装」ということになる。管理画面であるので、何かしらのボタンやチェックボックスをポチポチいじりながら、なんらかの値を変えていくことになる。

ところで、2014年から2015年に向けて、フロントエンドというか、GUI画面で流行ったものがある。リアクティヴ・プログラミングってやつだ。ここで正確な議論は省くとして、乱暴に言ってしまうならば、「ある値が更新されたときに、同時にある部分にも変更が波及されることを当たりまえとする」設計と考えてもらえるといいのかもしれない。

例えば、テキストに入力されたMarkdownが、リアルタイムにプレビューされるようなテキストエディタを考えたさい、まず最初にテキストの変更を察知し、それをプレビューに反映させるという二つの実装が必要になる。しかし、これよりも、「テキストとプレビューの値が一対一になる」ようにしたほうがいいだろう。つまり、テキストの変更がそのままプレビューの変更に波及するほうが望ましい。

特に管理画面といったような、値を操作しながら、最終的な結論に持っていくようなフォームであるならば、このようにある程度、フォームと、その画面の編集が一対一で対応するようになるほうが望ましい。

というわけで、そういう「フォームの変更と値への波及」を隠蔽してくれるような、何かしらのライブラリがあったほうが、今後の設計および実装をする上で望ましいのではないだろうかというわけで、そういうのを導入した次第なのであった。

フレームワークに対してどれだけ複雑性を求めるか

というわけで、こういう浅はかな知識は往々にして裏切られることがある。なので、できるだけ依存性が少ないフレームワークのほうが良いだろう。また、個人的にフロントエンドをやっていくのは久しぶりだったので、できるだけ軽量なフレームワームにしておきたい。同様に、リアクティブを実際に使って実装するのはそれほど経験があるわけではなかったので、そういう意味で簡単なライブラリで実装したいというのがあった。

Vue.jsが他のフレームワークと違う点に関しては、公式ドキュメントにまとまっている通りである。

実は、以前に一度だけAngular.jsを触っていた経験と比較すると、Angularは、レイヤーとかの階層化がしっかりしているのだけれど、その分やはりシンプルではないという欠点が存在する。また、Reactの場合、確かに本格的な「アプリケーション」を作るさいには、JSXや仮想DOMなどを利用する利点は後半になって加速度的にペイできる可能性は高い。

しかし、今回の場合はシンプルな操作に限定されるという都合を考えた場合、Vue.jsのほうがいいのではないか、という気がした。また触ってみて、だいたい直感的に「こうなるだろう」ということが、こうなっていたので、じゃあそうことで、という感じで使っている。

とはいえ、フロントエンド魔神であるmizchi氏によれば:

ということなので、Reactも食わず嫌いせずに、ちゃんと触ってシャキっとした意見を出したいと思ったりした。

実際に使ってみての感想

Vue.jsに限らないことだと思われるけれども、データ、フォーム、HTMLで、ある程度View側の更新が完結することは、かなりスムーズな印象を受けた。要するに、これらさえ気を使っていれば、実際の値のロジックのほうに集中することができる。まだそれほどロジックも無いので、結構楽に作ることができるようになる。これがjQueryとかでやろうとすると、当然のことながらフォームを組み立てて云々という部分が出てくるので、そういうのを追いだせるのはよかった。

当然ながら、このようなフレームワークで隠蔽するということは、同時に値を波及させる挙動というのは、ある程度は脳の中でおさえておかなければならないはずなので、そのあたりの学習コストがどのくらいになるのか、という部分は今後注目したいところではある。(あるいは技術的負債はどの程度になるのだろうか、とかそういう辺り)

とはいえ、今後フロントエンドでは、こういう風にフォームによる更新を隠蔽していくほうに向かっていくんだろうなーと思うと、今勉強していて損は無い技術なのかなあという気がしている。