JavaScriptフレームワーク調査

JavaScriptのモダンフレームワークでどれを選べば良いのか調査した内容になります。

AngularJS

googleによっって開発されているMVVMフレームワーク 現在Angular4まで出ている。出た当初は仮想DOMを使っているReactなどに比べると遅いと言われていたけど、現在はReactと比べて特に遅いというふうではないらしい。

テンプレート

HTMLテンプレートを作成しデータとtwo-wayバインディングさせる。ReactやVueなどの仮想DOMを使うフレームワークの場合はone-wayでデータをバインディングさせるが、Angularの場合は仮想DOMを使っていないためかtwo-wayバインディングで表示用のデータを手軽に操作することができる。 JavaScript内部にhtmlを記述してデータのバインドやテンプレートの読み込みをするなどAngularフレームワーク独特の学習は必要になりそう。

DI

作成したモジュールをサービスとして別のモジュールで利用する(DI)ことができる。コンポーネント間でのデータのやり取りでもサービスを使うらしい。

テスト

Angularのテンプレート構文はJSXのように静的チェックが行えないためテストツールが必須になっているとのことらしい。その分公式の方がどのテストフレームワークを使えば良いか説明していて、それに合わせて作っていたら問題なさそう。

所感

フルスタックフレームワークな分覚えることは多いけど、公式のサポートが充実してそうなので特に困ると言ったことはなさそうなきがする。他のReactやVueなどのフレームワークに比べるとHttpリクエストなどフレームワーク側でのサポートが広い範囲で行われるので安心して使うことはできそう。業務でSPAを扱うと言ったことがあればAngularが良さそうなきがする。

React

React自体はMVVMのViewの部分だけを扱うフレームワークでシンプルと言われているけど、Facebookが提唱するFluxやReduxのアーキテクチャに合わせて実装しようとするのであればその分書くコードは増えて複雑になる。React自体がシンプルな分どう使うかは開発者自身に委ねられている部分が多い気がする。学習コストについてReact自信を覚えるのは大変ではないけどどう設計するかで時間がかかるかもしれない。

テンプレート

テンプレートにはJSXを使用している。JavaScriptの中に直接HTMLを吐きだす関数が書かれているため、デザイナーでない人が見るのは大変だと思われる。JSX自体はReactを使っている開発者自体にも嫌われているので、今後の改善が望まれる。

テスト

公式ではJesとかenzymeが進められていて、Jsetの方が簡単に扱えそうな感じがした。   enzymeのを使用する場合は別でモック用のモジュールを入れている記事がいくつか見受けられる。

Redux

Reduxはだいたいこんな感じだと思う。 アプリケーション全体で管理するstateを変更する場合はマウスクリックなどのイベント後に、状態変更のためのアクションを実行する。 アクションによりデータが作成されたら変更を反映するため、ディスパッチといってstateを管理するstoreにデータを送る。 reduxではここでstateの変更をすぐに変更するのではなくmidlewareの処理を実行する。 midlewareはログの出力やサーバへのリクエスト投げたりするのに使われている気がする。
midlewareが増えると全体的に遅くなるという問題はあるようです。 midlewareの一連の処理が終わったらreducerによりアプリケーションの状態を表すstateが変更され、 そして仮想DOMが変更され描画に反映さる。

所感

Reduxの実装方法であればデータを厳密に扱うことができるので、例えば一つのデータに対していろんな見せ方があったり、いろんなところから変更したりという複雑さがある場合はReactを使った方がよさそうな気がした。

Vue

公式サイトよりVueの概要は以下のようになっています。

Vue.js (発音は / v j u ː /、view と同様) はインタラクティブな Web インタフェースを構築するためのライブラリです。Vue.js のゴールは、
できる限りシンプルな API でリアクティブデータバインディング と 構成可能な View コンポーネントを提供することです。

Vue.js 自体は本格的なフレームワークではありません、Vue.js は View レイヤーだけに焦点を当てています。したがって、Vue.js
 のいいところだけをピックアップしたり、Vue.js を他のライブラリや既存のプロジェクトに統合することはとても簡単です。一方、Vue.js
 を適切なツールとサポートするライブラリによる組み合わせで使用する場合、Vue.js は完全に洗練されたシングルページアプリケーションを提供することができます。

あなたが経験豊富なフロントエンド開発者で、 Vue.js を他のライブラリ/フレームワークと比較したい場合、他のフレームワークとの比較を
チェックしてください。Vue.js で大規模アプリケーションを扱う方法に興味がある場合は、大規模アプリケーションの構築をチェックしてください。

AngularとReactに比べると学習コストは低く、というか多分Vue自体がjQueryの代替として考えられている気がしてその分低いと認識されている気がする。

テンプレート

htmlのテンプレート構文を利用していてバインドしているデータに変更があったら最小限のDOM再描画を行っている。 テンプレート構文を利用する点がPolymerと似ていたりして、JSXとに比べて普段htmlを 書いている人からしたら親しみやすいのかと思う。オプションでJSXを利用することもできる。

ReactとVueは似ているけど描画のロジックは根本的に違っているようで、Reactの方は際の DOM がどのような状態にするためにメモリ内の表現で仮想 DOM を活用し、状態を変更するとき、React は仮想 DOM の完全な再レンダリングを行い、その差分を求めて、そして実際の DOM にパッチする。 仮想 DOM の代わりに、Vue.js はテンプレートとして実在する DOM を使用し、データバインディングに対して実在するノードに参照を保ちます。そのためかVue.jsは性能のチューニングをほとんど必要としないらしい。

テスト

公式はKarmaを使うことを勧めている。

所感

jQueryの代替品を探しているのであればこれがベストなきがする。

結論

一般的な業務でSPAを扱うということがあるのであれば公式のサポートが手厚いAngularがよさそうに思います。jQueryの代替品を探しているレベルであればVueで手軽に実装するのが良さそう。データ操作周りで複雑なことをして見せたいページを作りたいのであればReactが良さそうな感じでしょうか。

f:id:steavevaivai:20170610124847p:plain