【プレミアム】いまさら聞けないJavaScriptフレームワーク(後編) FavoriteLoadingあとで読む

: 西畑一馬
Angular、React、Vue.jsなどフロントエンドエンジニアにとっては当たり前のJavaScriptフレームワーク。
各フレームワークの特徴を知れば、あなたのプロジェクトを成功へ導くための最適なフレームワークがわかります。

JavaScriptフレームワークを導入するメリット・デメリット
(フロントエンド開発)

次はフロントエンド開発の側面からJavaScriptフレームワークを導入するメリット・デメリットを解説していきます。

開発手法がフレームワークに沿った形に限定される

ReactならReactの、AngularならAngularのルールに沿った形で開発する必要があります。
そのため自分のルールを押しつけ、独自のルールで開発するエンジニアがいなくなります。
また、知識、経験が少ないエンジニアもフレームワークに沿った形で開発しなくてはいけませんので、学習コストこそかかってしまうものの最低限の品質を担保することができます。

裏を返せば、フレームワークを利用するにはある程度の知識が必要になってきます。

開発TIPS や テクニック、ライブラリなどが豊富

現状のフロントエンド界隈では、「jQueryを使った効率の良いフロントエンド開発」といった情報はそれほど見受けられず、「Angularを利用した◯◯」、「Reactを利用した◯◯」といった情報がよく見られます。

jQueryは過去の膨大な情報やライブラリがありますが、情報の発信日からその情報の鮮度を測ることは難しくなっています。
JavaScriptフレームワークは昨今のトレンドということもあり、さまざまな情報が発信されています。そのため、発信日からその情報の鮮度が測りやすくなっています。

仮想DOMにより高いパフォーマンスが出せる

Reactを始めとした昨今のフレームワークでは、仮想DOMと呼ばれるレンダリング機構が用意されていることが多く、jQueryなどで作成したページと比較すると高いパフォーマンスを出せる場合が多いです。

これまでは、ページのHTMLを書き換えようとすると実際のHTMLを変更する必要がありました。目的の変更を行うのに10箇所のHTML変更が必要な場合は、10回HTMLを書き換える処理が必要で、これはブラウザのメモリを消費してパフォーマンスが損なわれる原因になりました。

仮想DOMでは10回の変更を一度メモリ上の構造体で行い、最終的な状態をHTMLとして出力するため、1回のHTML書き換えで10箇所の変更が可能になります。これにより高いパフォーマンスを発揮できます。

周辺のバージョンアップに左右される

デメリットとしては、周辺のさまざまなツールのバージョンアップに左右される点が挙げられるでしょう。

各フレームワークはすごいスピードで進化しており定期的にバージョンアップを行わなければレガシーな環境に陥りがちです。

ただ、バージョンアップに困難を伴うケースも多いです。バージョンが変わったことにより記述が変わった箇所などは修正しテストを行う必要があります。
そのうえ、周辺のライブラリが対応していないという理由で必ずしもスムーズにバージョンアップできるわけではありません。

とはいえ、古いバージョンを利用し続けると深刻なセキュリティアップデート等が発生した場合に、いきなり複数のバージョンアップを行わなくてはいけないことになるので、細かく定期的にバージョンアップは行なったほうがよく、この辺りの葛藤はあるでしょう。

各フレームワークの特徴

それでは現在、代表的なフレームワークであるReact(リアクト)、Angular(アンギュラー)、Vue.js(ビュージェーエス)の特徴について解説をいたします。

React

Facebookが開発を行っている仮想DOMを比較的早くに導入したJavaScriptライブラリです。
JSXと呼ばれる特殊なHTMLでWebページを作成することにより、Reactでさまざまな状態を表現することができます。

AngularやVue.jsと比較するとView(HTMLの描画)のみの機能を提供しており、他の多様なライブラリと組み合わせて利用するのが一般的です。

よく一緒に利用されるのは、状態管理を行うReduxやルーティング機能を行うReact Routerなどがあります。

オフィシャルでは静的型付を行うFlowや、テスト環境であるJESTなどがあります。

自身の機能がそれほどないため学習コストは比較的軽いのですが、他のライブラリと組み合わせて利用するためさまざまなバリエーションが発生してしまう可能性があり、プロジェクトにより使われ方が変わってくるのが特徴です。

Angular

Googleが開発を行っているフレームワークで2016年のバージョン2がリリースされました。

もともとはAngularJSという名前で長年開発が進められていましたが、過去の互換性等を断ち切って最新のアーキテクチャーでリリースされました。
その後内包しているAngular Routerというライブラリのバージョンを整えるため、1バージョン飛ばしで2017年3月にAngular 4がリリースされ2017年11月にAngular 5がリリースされています。
1→2は大規模な非互換なアップデートでしたが、それ以降は半年単位で細かいアップデートを行う方針がなされています。

Reactと比較するとAll in Oneの機能を提供しており、単体でSPAの製造からテストなどが可能になっています。

また、Angularは他のサードパーティ製の製品を内包していることも特徴の一つで、マイクロソフトが開発をしているTypeScriptRxJSzone.jsなど多様なライブラリの機能を内包しています。

そのため、Angular単体だけではなくこれらのライブラリの機能を覚えなくてはならず、学習コストはかなり高めとなっています。
All in Oneの機能のため、プロジェクト感でアーキテクチャに差異が出にくいのも特徴で、TypeScriptの静的型付けを標準でサポートし、型に慣れているサーバーサイドのエンジニアには好まれる傾向があります。

Vue.js

Vue.jsはGoogleにおいてAngularJSを使用した開発に携わったエヴァン・ヨーによって開発されたフレームワークです。
2016年にVue.js 2.0がリリースされ独自の仮想DOM機構を採用したことで一気に人気が出てきました。

ネクストjQueryとも呼ばれ、デフォルトではReactと同じくできることは少ないが、Vuexやvue-routerといったオフィシャルの拡張機能を導入することにより機能追加が可能になっており、比較的小規模から大規模の案件まで耐えられるフレームワークです。

2017年もっともシェアを広げたフレームワークです。

フレームワーク選定の決め手

さて、最後にこれらのフレームワーク選定について解説を行います。

それぞれ特徴がありますが、フレームワークに周辺のライブラリ等を含めますと、特定のフレームワークしか作れないものや特定のフレームワークが他より抜きん出て秀でているということはなく、どれを選んでも問題ありません。

開発要員

フレームワーク選定の基準として、各フレームワークを得意とする人材が存在するかどうかが一つの基準となります。
Angularが得意な人材がいるのにReactを採用したり、Vue.jsに精通している人がいるのにAngularを採用したりすると後述する学習コストがかかってしまいます。

パートナー会社も含めてフレームワークを利用できる人員をアサインできるかどうかも考慮する必要があるでしょう。Angularが得意な人材がいるのでAngularを採用したが、得意な人材が退職してしまってサービス開発が止まってしまう事態などは避ける必要があります。

学習コスト

学習コストとしてはあくまで個人の見解ですが、

Vue.js < React < Angular

です。

学習コストが低い方が、追加した開発要員に知識がなくても、フレームワークを利用できるまでの期間を短くできます。

開発規模

一般的にAngularは大規模開発などに適しており、Reactは大・中規模、Vue.jsはReactは小・中規模に適していると言われています。
設計次第で、かならずしも大規模だからVue.jsではできない、小規模だからAngularは利用できない、といったことはないのですが、フレームワークを利用できる開発者の得意とする開発規模なども考慮すると上記の規模感は一つの参考値になるでしょう。

そもそもフレームワークの導入は必要か?

APIなどと連携を行うSPA以外では必ずしもフレームワークを導入する必要はありません。
jQueryなどでミニマムに開発を行うことも可能です。
フレームワークの導入を目的とせずにプロジェクトに適したツールは何か、の視点で選択するのがよいでしょう。

西畑一馬
この記事を書いた人: 西畑一馬

株式会社トゥーアール 代表
JavaScript / Ajaxを利用したWebアプリケーション制作やCSS3 / HTML5を利用したサイト作成を業務で行い、個人でも書籍や雑誌の執筆、Webクリエイター向けの講座 / セミナーなどの活動を行っている。