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

AngularJS

一番大きいし、全部入りです。Ajaxの通信とかも入っています。
ただし、ファイルサイズが大きいです。(2MBぐらい?)
だから、ページの一部分だけ使うという使い方はやめた方がよいと思います。

イメージ的にはVue.jsにもっと機能を増やしていった感じといいますか。

全部入りというのにはメリットがあると思います。

プロジェクトによっては、開発チーム全員の顔がわからない場合があります。誰が開発しているのかわからないような。
そんな時に、細かいライブラリを組み合わせて開発しようとすると、無理が出てきます。
メンバーの得意分野も様々だと思いますし、ライブラリをひとつひとつ勉強していくと、とても時間がかかります。

Angular2だったら、ひとつのライブラリとしてまとまっているので、メンバのノウハウも共有化しやすいし、書き方も統一しやすいです。
ドキュメントのここ読んで!みたいなのとか。

しかし全部入りなので、全ての機能を学習しようとすると大変です。
その点はチュートリアルをやれば基本的な機能については理解できます。あとはググってStackOverflowみたり、公式のAPIドキュメントを見たりといった感じでしょうか。

なので、ある程度の規模のプロジェクトで、他のライブラリを細かく勉強せず、これに統一して作りたいといった場合が良い気がします。

html/css/jsも分割できるので、分業もしやすいかと。

まとめ

この世代のライブラリは、基本的な部分。コアの部分でやれることはそんなに変わらないです。
コンポーネントを作って、イベントやプロパティを設定して、それらを組み合わせてページを作るという。

各ライブラリともドキュメントが充実していて、チュートリアルをやれば基本的な使い方は理解できるようになっています。
また、多少の文法の差はありますが、書き方もそんなに変わらないです。
ですので、どれかひとつが書けるようになれば、他もすぐにできるようになると思います。

LINEで送る
Pocket

自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る