[JavaScript] Vue.js / React / AngularJS の個人的な感想

[JavaScript] Vue.js / React / AngularJS の個人的な感想 – 後編

2016/12/23

こんにちは。きんくまです。

前回各ライブラリの感想を書く前に終わってしまいましたが、今回はようやく本編でございます。
>> [JavaScript] Vue.js / React / AngularJS の個人的な感想 – 前編

概要

Vue.js
・html/css/js のファイルを分けられる
・トランジション（アニメーション）が柔軟に書ける
・親子関係以外のイベントの受け渡しが可能 – (new Vue()).$emit
・ES6で書く
・cssはグローバル、スコープと分けて定義できる
・webpackの設定で詰まった時があった（これをこうして書き出したいのに！！みたいのをするのに時間がかかった）

React
・jsx の中にテンプレート（html部分）とjs部分を同時に書く
・ES6で書く
・関数型プログロミングの影響が強い
・3つの中では一番機能を絞っているのでシンプル。わりとすぐに使える
・cssは扱わない

AngularJS
・html/css/js のファイルを分けられる
・htmlの記法でちょっと見慣れないところがあるが（ ()や[]のバインディング）、慣れると一目でデータの方向がわかるので便利
・3つの中では一番巨大なライブラリ。全部入り
・TypeScriptで書く
・cssはコンポーネント単位で閉じている

プログラム言語について
ES6だったり、TypeScriptというのは、ライブラリ側が基本プランとして想定している言語です。
ReactをTypeScriptで書いたりすることもできますが、とても面倒くさかったです。
基本的に、ライブラリで想定している言語をそのまま使ってあげた方が良いかと思います。

私は前からTypeScriptを使っていたので、当初ReactやVueをTSで書こうとしましたが、いろいろと設定が難しくあきらめました。
ES6はTSからちょうど型定義を抜かしたような形になっているので、移行も簡単です。

ライブラリの大きさ順に並べると
React < Vue.js << 壁 << AngularJS

という感じです。

これだけ書いてもよくわからないと思うので、ここからは個人の感想でございます。
好き嫌いが多分に含まれるので、気分を悪くした方がいれば申し訳ございません。

Vue.js

一番バランスが取れたライブラリだと思います。

まず、html/css/jsごとにファイルが分けられるのが良いです。
Reactではjsxファイルの中にテンプレートとjsが一緒に入っているのですが、個人的には分けて扱いたいです。
また、htmlではなくPug、cssではなくSass を使うことも可能です。（Pugは私は使わないですけど、インデントでの階層分けは苦手）

ファイルが分けられるので、デザイナとの分業もしやすいのではないかと思います。

あとトランジションが、細かく設定できます。
CSS3アニメーションも、JSでのアニメーションもどちらもOKです。

cssは、普通に書くとグローバルに展開されますが、scoped という設定をするとそのコンポーネントの中で設定が閉じます。
といいつつ、私はscopedを使わず、コンポーネントのルートにclassを設定して、Sassのネストでそのまま設定しちゃっています。

細かいところですが、new Vue()すると、イベントの発行 .$emit(‘event-name’) 。イベントの購読 .$on(‘event-name’) ができるのもありがたいです。

React

プログラマ寄りのライブラリだと思います。

大きさはこの中では一番小さいので、わりとすぐに使えるようになると思います。
ただ、非常にプログラム寄りといいますか、テンプレートとjsをひとつのjsxファイルに書く必要があったり、あととにかく何でも関数です。（returnする）

よく一緒に使われると思われるReduxが特に関数的な思想が強くて、データのまとまりのStoreというのは関数で構築します。

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

上のコードはデモに書いてあるコードです。
やっていることは、Actionというイベントオブジェクトに対して、switchで分岐、stateを変更します。

最後の部分を見てもらうとわかるのですが、 state = state + 1; となっているのではなく、 return state + 1; となっています。
内部で値を変更するのではなく、値を変更する関数を定義しているのがわかりますでしょうか。

ある入力に対して、値を加工して出力する関数を書く。
y = f(x)
入力 => 値に何か変更を加える => 出力　みたいな。

こんな感じにプロパティごとに関数を定義して、それらをreducerでとりまとめて、ひとつのstoreを作るという感じです。

というわけで、これまでのようにプロパティに変更を加えたいときに、そのプロパティを直接変更するのではなく、プロパティを変更する関数を作成するという頭のきりかえが必要です。

これはReactでも通じている哲学のようなものなのかもしれません。

個人的にはちょくちょく目にする「オブジェクト指向が時代遅れで、関数型が最先端」というのは疑問を持っています。（将来的に考えが変わるかもしれないけど）
ただ関数で書くというのを何度かやっていると、オブジェクト指向のクラスの中でそういうメソッドを定義しようと思うようになるので、勉強してみる価値はあると思います。

Reactはプログラマ主導のチームで開発するのに適しているかもしれません。

あと、VueとReactに共通して言えることなのですが、既存のページの一部分だけ組み込むといったこともしやすいと思います。ライブラリも比較的小さいし軽いです。