【知っておきたいITトレンド】JavaScriptの最新動向/JavaScriptライブラリ・フレームワークまとめ

• JavaScript６選の特徴

◦React.js 

「Reactを使用しているサービス・企業」 
Facebook, Airbnb, DropBox, Github, Instagram, NetFlix, PayPal, セールスフォース, Shopify, Slack,スナップチャット, テスラ, Twitter, Uber, Udemy, WhatsApp 

「Reactとは？」 
Reactは2013年にオープンソース化されたUIを構築するためのライブラリです。ReactはFacebookの開発チームによって作成され、主にSPA（シングルページアプリケーション）やモバイルアプリケーションの開発におけるベースとして使用することができます。FacebookのUIを想像すればわかる通り、現在の時流に沿ったUIを構築することができます。

「Reactを一言で表すと…」
高速で動き、デザイン性抜群のライブラリ

「長所」 
Reactは主に以下3つの長所を有しています。 
・Declarative－宣言的 
宣言的なプログラミングとはSQLのように方法ベースでプログラムを記述するのではなく、目的ベースで記述するものを総称したのが宣言的なプログラミングです。熟練のエンジニアであればここまでの説明で分かる方も多いかと思いますが、筆者含め初学者からすると何のことだかさっぱりわからないと思われます。なのでさらに具体的に言うと、宣言的でないプログラミングとはfor文やif文をはじめ、様々な選択肢を駆使しながら、どのように最終的目標となる結果を取得するかを考え、構築していくのがJavaなどの多くの言語でよくあるプログラミングのことです。一方で、宣言的であるReactはSQL文で記述するように、このデータが欲しい、この結果が欲しいというように、あくまで方法は考えずに、構築していくプログラミングのことです。このように宣言的なプログラミングを用いてアプリケーションを構築することは、可読性を高め保守しやすいというようなメリットがあります。またその結果、デバッグが容易になることや、プログラムのテストがしやすくなり、人を選ばないシステムを構築することができます。 
・Component Based－コンポーネントベース 
コンポーネントベースとは細かい部品をつなぎ合わせ、組み立てていくようなプログラミングの方法のことです。機能ごとに分割した部品で管理をするため、コードの可読性や、拡張性の高いシステムを構築することができます。 
・Learn Once,Write AnyWhere－一度学習すればどこでも使える 
一度Reactを学習すれば、Webアプリケーションだけでなく、スマートフォンのアプリなどその他のあらゆる分野にも適応することができます。例えばReactがベースとなったReact Nativeというフレームワークを使用することで、AndroidやiOSのようなネイティブアプリ開発を行えたり、React VRというフレームワークを使用することによって、VRの開発も行うことができます。 
以上３つの特徴を持ったReactによって可読性を高めることができ、大規模開発になればなるほどReactの恩恵を受けることができます。 

「短所」 
Reactの短所としては「利用状況」でも述べた通り、比較的新しい言語であることから日本語でのドキュメントが少ないことに加え、開発環境を導入する手間がかかることなど、学習コストが高いというデメリットがあります。また、React自体の追加機能など、アップデート機会が多いため、エンジニアにもその都度、技術的なアップデートを必要とされます。  

◦Vue.js

「Vue.jsを使用しているサービス・企業」 
Xiaomi,Alibaba,Nintendo,DeNA,LINEなど 

「Vueとは？」 
Vue.jsは、2014年2月にリリースされたJavaScriptフレームワークです。公式サイトのガイドではUI（ユーザーインターフェース）構築のためのプログレッシブフレームワークです。

「Vueを一言で表すと…」
初学者にも簡単で、日本語文献の充実した小規模開発を得意とするフレームワーク

「長所」 
・Easy to learn 
ReactはJavaScriptの拡張言語であるJSXという言語で記述することが標準となっています。またAngularはJSX同様にJavaScriptの拡張言語であるTypeScriptで記述されることが標準となっており、純粋なJavaScriptとは記述方法が異なるため、初学者にとっての参入障壁は少々高くなってしまいます。しかしながらVueはそのような参入障壁はなく、純粋なJavaScriptを使ってプログラミングすることが可能なため学習コストという面では、相対的に低いと言うことができます。 
・two way―双方向のデータバインディング 
ReactではデータからHTMLへの片方のみでしかデータバインディングができない。一方でVueは画面に入力すればデータにも反映されるように、双方向にデータバインディングができるという特徴を持っている。片方＝単方向のデータバインディングでは、テキストボックスに文字を入力しても更新処理がされない限りデータに反映されないため、手間が増える（例えば更新するタイミングをイベントハンドラで設定する処理を記述する手間など）ということを意味しています。 

「短所」 
UIの開発に特化しているため、Vueというフレームワークに搭載されている機能は限られています。またSPA（シングルページアプリケーション）での開発を前提としているため、ページ数などの観点から大規模な開発を行うには向かないことが多いです。 

◦Angular

「Angularを使用しているサービス・企業」 
AWS（コンソールログイン画面など）、Microsoftアカウント、Upworkなど 

「Angularとは？」 
「Google」が提供しているオープンソースのクライアントサイド向けフレームワークで、2012年にリリースされた歴史の古いフレームワークながら、現在でも数多くのシステム開発に使用されています。ただし、Angularを扱う際に「AngularJS」または「Angular1」と「Angular」または「Angular2」には互換性がないため、技術調査の際は注意が必要となります。 

「Angularを一言で表すと…」
全てがそろってる、大規模開発向けフレームワーク

「長所」 
・フルスタック 
フルスタック＝全機能なフレームワークを指向しており、Web アプリケーション開発に必要な機能のほぼ全てを搭載しています。そのため、複数のライブラリを組み合わせる必要がなく、SPAだけにとらわれない開発を行うことができます。 
・two way―双方向のデータバインディング 
Vue同様に双方向のデータバインドなため、記述量的には手間のかからない実装が可能です。 
・信頼性 
Angularを管理開発しているのがGoogleであるため、アップデート等の安心感という意味では他の追随を許さないかもしれません。 

「短所」  
まず第一に「AngularJS」と「Angular」は互いに互換性がないため非常にややこしいです。「AngularJS」とはバージョン1.x系統のことで、「AngularJS」というプロダクト名で開発されていましたが、バージョン2.x系統にアップデートされた際、アーキテクチャの抜本的な見直しが図られ、名前も「Angular」に改められました。 
AngularJS では JavaScript をベースとしたフレームワークでしたが、Angular では TypeScript ベースに改められ、文法も刷新されたため、AngularJS と Angular には互換性がないのです。 
またフルスタックであることは主に３つの点でデメリットにもなりえます。1点目はできる選択肢が多く、一つの結果を得る際も開発者によって変わるため、自由に開発できることでプロジェクトに混乱をもたらし兼ねないという危険性をはらんでいます。2点目としては初学者にとっては学習コスト的にはその分高くなることを意味してしまいます。そして最後3点目、ページ更新など、動作全体の動きが遅くなってしまうことです。SPAで開発することで多少軽くすることは可能ではありますが、それでもやはりほかの２者と比較すると重いという印象を持ってしまうかもしれません。以上の理由から近年の利用率が下がってきていることが伺えます。 

◦Ember.js 

「Ember.jsを使用しているサービス・企業」 
株式会社スクエア,ディスコース,LinkedIn,Netflix,Twich  

「Emberとは？」 
2013年5月正式リリースされたJavaScriptのオープンソースのフレームワークです。上記３者同様にSPAでの開発を主眼としています。JavaScriptのフレームワークの中では歴史のあるフレームワークとなっています。 

「Emberを一言で表すと…」
VueとAngularの間、Vueよりも機能が豊富でAngularよりも早いフレームワーク

「長所」 
・two way―双方向のデータバインディング 
Vue、Angular同様に双方向のデータバインドなため、記述量的には手間のかからない実装が可能です。 
・フルスタック 
Angularほどの機能は持ち合わせていないが、機能的に軽量のReactやVueとは異なり、リッチなフレームワークとなっています。 

「短所」 
Angular同様にフルスタックを目指すフレームワークのため、学習コストが高いてしまいます。また世界的な普及とともに日本語ドキュメント増えてきているReactとは異なり、Emberの日本語ドキュメントは未だに少ないのが現状です。世界的に見てもEmberのアクティブユーザー（現在も使用している開発者）は3%程度であり、この問題が解決されることは困難を極める可能性が高いです。 

◦Preact.js

「Preact.jsを使用しているサービス・企業」 
テンセント、ウーバー、Lyft  

「Preactとは？」 
PereactはReactサブライブラリであり、Reactよりも軽量で高速であることが特徴です。そのため、Reactとも互換性があり、開発中はReactで開発し、本番環境ではPreactを使用することが往々にしてあります。 

「Preactを一言で表すと…」
Reactをさらに高速化させたUI抜群のライブラリ

「長所」 
基本的にはReactとの互換性もあり、機能的に劣るということはない。むしろページ読み込みなどのロード時間はReactよりも速く、クライアントには良いユーザー体験を提供できるかもしれません。 

「短所」 
短所もReact同様日本語ドキュメントが少ないために、技術調査が困難になる可能性が高いことが挙げられます。 

◦Svelte.js 

「Svelte.jsを使用しているサービス・企業」 
楽天,New York Times  

「Svelteとは？」 
2016年にリリースされたJavaScriptのオープンソースのフレームワークです。特徴としてはReactやVueに比べて非常に高速で動き、とても軽いことです。JavaScriptのフレームワークの中では後発組であり、発展途上ながらもReactやVueの欠点を解消するように開発されたので、機能的も目劣りするということは全くありません。また、仮想DOMを利用していないためビルド時にコンパイルを必要とします。 

「Svelteを一言で表すと…」
React、Vueを超える速さで、学習コストが低く、汎用性の高い次世代のフレームワーク

「長所」 
・high performance 
先述した通り、Svelteはコンパイルを必要とするため、ほかのどのJavaScriptのフレームワークよりも迅速に動くことが特徴です。 
ReactやVueに比べ、コードの記述量も少なくなるよう設計されており、平均してReactの2倍～3倍、Vueの1.5倍～2倍少なく記述できます。記述量が少ない＝善であることが必ずしも適当であるとは言えませんが、開発スピードが向上する可能性があるという意味では、記述量が少ないことはエンジニアにとってとてもありがたい性能ではないかと考えられます。 

「短所」 
Reactと同様に現状日本語のドキュメントが少ないこと、英語ドキュメントに絞っても後発組のフレームワークであるため、技術調査に時間がかかる可能性があります。またTypeScriptを使用することが前提のため、Vueに比べると学習コストがその分かかることが予想されます。加えて管理開発が個人に依存しているという意味ではバグやセキュリティ的な問題が発生している場合のアップデートが必ず行われるかについてはFacebookのReactやGoogleのAngular、コミュニティで管理されているVueに比べると、不安が残るかもしれません。