JavaScriptは、Webそのものの歴史とほとんど変わることはなく、20年以上に渡って使われ続けてきた壮大な言語です。それというのは、今後も使われ続けていくであろうJavaScriptがほかのプログラミング言語に比べ、類まれな底力を持っていることの現れだとも言えます。

もちろん、これほどまで、JavaScriptが使われ続けているのには理由があり、時代に合わせて使いやすくするため、多くのフレームワークが登場したという点がポイントです。

フレームワークの登場によって、JavaScriptを直書きするよりもはるかに効率よく、Webアプリケーションを作成することができるようになりました。

そこで今回は、JavaScriptフレームワーク初心者の方向けに、JavaScriptフレームワーク&ライブラリの基本をまとめていきます。
  

JavaScriptやフレームワーク・ライブラリの基本をおさらい

JavaScriptとは?

JavaScriptは、主にHTML内に埋め込み動的でインタラクティブな動きを実装させるためのオブジェクト指向型のスクリプト言語です。英語でいうオブジェクト(object)とは「モノ」のことです。つまり、オブジェクト指向とは手順自体ではなく、モノを基本単位として考えるという意味を指します。

ちなみに、JavaScriptには名前に「Java」が入っていますが、Javaとは全く異なるプログラミング言語ですので混同しないように注意してください。

参考:
JavaScript|ferret マーケティング用語辞典
  

フレームワーク&ライブラリとは?

フレームワークとは、プログラミングの場面で一般的な機能を持つ共通のコードを選択的に上書きしたり特化させたりすることで、便利な機能を持たせようという概念のことです。

ライブラリとよく似ているので混同しがちですが、厳密に言えば、ライブラリでは呼び出し側がプログラム全体の制御構造を指定することができない反面、フレームワーク制御構造を指定できるのが最大の特徴となっています。ただし、昨今ではこれらをあまり区別せずにフレームワークと呼んでいることも多いでようです。

フレームワークは、多くの場面で必要になる便利な機能が多く取り入れられているため、開発スピードが極端に減ります。コードの書き方もある程度統一することができるので、開発場面だけではなく保守運用の面でもメリットがあります。さらに、フレームワークを活用することで、あらかじめ想定されるバグを防ぐこともできます。
  

絶対に押さえておきたい3つのフレームワーク

1. Angular 2

1.png

AngularJSは、 Googleが開発を行っているJavaScriptフレームワークです。JavaScriptフレームワークを始めるならAngularJSから」と言われるほど、数多くのエンジニアが利用しています。

2016年9月に新しいバージョンであるAngular 2がリリースされたことで、コンポーネントベースの構造を作ることができたり、パフォーマンスの多くが改善されるなど、多くの機能が改善されました。しかし、実際には、Angular 2は以前のAngularシリーズとは全く異なる言語であり、アップグレードをするのには大きなコストがかかります。

ただ、AngularJSAngular 2も、どちらも依然として人気のあるフレームワークなので、知っておいて損はないでしょう。GitHubのAngularプロジェクトのスターの数はまもなく3万を迎えそうです。

追記:
2017年11月1日にAngular 5がリリースされました。詳しくは公式ブログをご覧ください。
  

2. Vue.js

2.png

Vue.jsは、2013年にEvan You氏の個人プロジェクトとして開発がスタートした JavaScript フレームワークです。「MVVM」(Model-View-ViewModel)と呼ばれる「MVC」の派生形パターンを採用し、 ファイルサイズが非常に軽量でレンダリングが速いという特徴があります。

AngularJSがフルスタックであるのに対し、Vue.jsは双方向データバインディングに特化しています。非常にシンプルなので、学習コストが非常に低く、人気が急上昇しています。

Vue.jsで使うことができる仮想DOMは、Reactと同じように使うことができます。さらに、JSXを使っている場合には、JSXの構文も使うことができるので便利です。
  

3. Ember.js

3.png

Ember.jsは、Vue.jsと同じく「MVVM」モデルを採用したフロントエンドフレームワークです。ちなみに、Ember.jsが人気な理由は、Ruby on RailsやLaravelと同じようにサーバーサイドの処理ができる点にあります。また、URL駆動型で、JavaScript上の変数とコントローラやモデルクラス変数を直接結び付けることも可能です。

しかし、JavaScriptが使えない環境に対して対応することができないため、別途なんらかの処理を行わなければいけない点は留意しておきましょう。
  

絶対に押さえておきたい3つのライブラリ

1. React

4.png

Reactは、Facebookが開発を行っている JavaScriptライブラリです。Facebookのフィード画面やYahoo!、Airbnb、Atomなど、大手のサービスでも採用されています。

ボタンやテキストなど、デスクトップアプリケーションのUI/UX設計と同じようなイメージで組み立てることができ、HTMLJavaScriptのデータバインディング部分に特化しているため、その使いやすさから愛用者が激増しています。
  

2. jQuery

5.png

jQueryを使うと、ブラウザごとの差異を吸収してDOM操作を簡単に行うことができます。JavaScriptの記述の煩雑さから解放されたことで、Webデザイナーなどの非エンジニア系の人にも大きく広がりました。

jQueryはわかりやすく学習コストが低い反面、JavaScriptを取り巻く環境が以前にも増して変化しており、jQueryを使わなくともほかのフレームワークがカバーしてくれる場面も多くなりました。そのため、初学者としてjQueryに触れつつ、ほかのフレームワークを学習するというケースが多くなっているようです。
  

3. D3

6.png

D3は「Data-Driven Documents」の略で、インタラクティブなビジュアライゼーションを表示する時に便利なライブラリです。ほかの類似するライブラリと違って、D3は最終的なグラフの表示にもインタラクティブな挙動を加えることができます。

D3はDOMのデータバインディングにも対応しているため、ほかのライブラリやフレームワークを使ったことがある人であれば、親しみを持って使うことができるでしょう。
  

今後のJavaScriptフレームワーク&ライブラリの動向は?

JavaScriptを取り巻く環境は現在でも大きく拡大しています。中でも注目したいのは、Node.jsのパッケージマネジャーであるnpmのシェアが急速に拡大しているという事実です。


引用元:Module Counts

Linux.comによれば、現在50万を超えるパッケージがnpmのリポジトリに登録されており、たった1年間で20万ものパッケージが増加していることになります。

一方で、Stack Overflowによれば、同サイトで議論されている質問の数では、jQueryのシェアは2014年を境に徐々にシェアを落とし、AngularJSも2016年のピークから大きく数を落としています。それに対して、Reactの質問数は徐々に増えています。


引用元:Stack Overflow

一方、質問のシェアが上記に比べて少ないフレームワークは、以下のようになっています。


引用元:Stack Overflow

注目したいのは、Vue.jsReduxで、2015年中頃から上昇傾向にあり、この傾向は2018年にも続くと考えられます。かつてMeteorやBackbone.js、Ember.jsは人気がありましたが、プログラミング言語のライフサイクルで言えば後退期に入っていると言えるでしょう。
  

まとめ

最終的にフレームワークの動向をまとめていきましたが、実際のところは「コストダウンにつながるか?」「開発効率は上がるか?」「メンテナンスしやすいか?」などの複数の観点で、トレンドに縛られず最適なものを選ぶのがよいでしょう。

ほかにも様々なフレームワークやライブラリがあるので、ぜひこの機会に利用してみてはいかがでしょうか。

参考:
基礎からしっかり学べる!JavaScriptライブラリ・フレームワーク7選|ferret
次のプロジェクトに取り入れたい!ユニークですぐに使えるJavaScriptライブラリ11選|ferret