基礎からしっかり学べる！JavaScriptライブラリ・フレームワーク7選
- 2017年2月2日
- 968
ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
>> 著者詳細はこちら
いまやJavaScriptを語る上で、ライブラリやフレームワーク抜きで全てを語ることはできません。
JavaScriptをそのまま使うことも時としてありますが、多くの制作現場では開発スピードを上げたり、便利な機能をより短いコードで実装することのできるライブラリやフレームワークを活用しています。
しかし、一口にJavaScriptライブラリ・フレームワークといっても、その特徴や強み・弱み、活用方法が大きくことなります。
そこで今回は、様々なJavaScriptのライブラリやフレームワークの中から今だからこそ勉強しなおしたいJavaScriptライブラリ・フレームワークを7つ、概要や特徴を中心にご紹介します。
今人気のライブラリやフレームワークを知ることで、学習やWebアプリケーション開発の際の参考にしてみてください。
参考：
全くの初心者でも大丈夫！JavaScriptをゼロから学ぼう｜ferret
JavaScript ライブラリ・フレームワークとは？
JavaScriptの世界では、ライブラリを読み込んでいれば様々な機能を実装することができました。
しかし、昨今作成されているような複雑なWebアプリケーションを作成する際には、ライブラリだけでは不十分で、より汎用的で特定分野に強みを持ったフレームワークを利用することが多くなりました。
それではまず、ライブラリとフレームワークの違いについて解説していきます。
ライブラリ(Library)とは、汎用性の高い複数のプログラムを、再利用可能な形でひとまとまりにしたもので、わかりやすくいえばクラスや関数といったパーツのまとまりで提供されるソースコードの部品です。
一方、フレームワーク(Framework)は「骨組み」を意味するようにアプリケーションにおける部品だけではなく、大まかな雛形を用意することである特定の機能をもたせようとしたものです。
わかりやすくいえば、「アプリケーションはこのように開発する」といった方向性に沿ったパッケージを選び、そのパッケージにない機能を実装していきます。プログラマーはフレームワークの決まりに従って所定のクラスを実装していくだけで，一定の品質をもったアプリケーションを作り上げることができるのです。
ライブラリは単にコードレベルでの再利用を狙ったものですが、フレームワークではアプリケーションの設計レベルでの再利用を想定しています。
また、ライブラリは読み込むだけでは何も実行されず、クラスや関数を自分にあった形で呼び出す必要があります。つまり、プログラムの制御をプログラマー自身が行わなければなりません。
一方、フレームワークは、いわば「アプリケーションの半完成品」の集合体なので、フレームワーク側でプログラムの制御が行われています。
プログラマーは、アプリケーションの半完成品に、具体的なアクションを記述していくという部分が、ライブラリとの大きな違いとなります。
改めて学びたい方にオススメ！JavaScriptライブラリ・フレームワーク7選
1. jQuery
正確に言えば、jQueryはフレームワークではなくライブラリですが、JavaScriptの可能性を大きく広げてくれた存在として注目すべきでしょう。
jQueryを読み込むことで、ブラウザごとの差異を吸収してDOM操作を簡単に行うことができるようになりました。JavaScriptの記述の煩雑さから解放されたことで、Webデザイナーなどの非エンジニア系の人にも大きく広がりました。
参考：
ノンデザイナーのためのjQuery入門｜ferret
2. React
https://facebook.github.io/react/
Reactは、Facebookが開発を行っているJavaScriptライブラリです。
Facebookのフィード画面やYahoo!、Airbnb、Atomなど、大手のサービスでも採用されています。
Reactは、「A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES」(UIを組み立てるためのJavaScriptライブラリ)というコピーからわかるように、見た目の部分を効率よく作っていくフレームワークといえます。
電卓やデートピッカー(日付選択を行うカレンダーのUI)のようなパーツが世界中のデベロッパーによって行われています。
3. AngularJS
AngularJSは、Googleが開発を行っているJavaScriptフレームワークです。
「JavaScriptのフレームワークを始めるならAngularJSから」と言われるくらい、たくさんのエンジニアが利用しています。
AngularJSでは、「MVC」(Model-View-Controller)と呼ばれる、ロジックと表示、制御や実装をわける考え方を採用しています。役割が違うプログラムを別々のファイルで管理するようにできているので、アプリケーションの設計を行う必要がありません。
また、「双方向データバインディング」と呼ばれる、HTML要素の取得と画面の反映を連動して行う仕組みがあるので、より少ないコードで機能を実装することができるのも人気の理由です。
4. Backbone.js
Backbone.jsは、Coffee ScriptやUnderscore.jsの作者でもあるJeremy Ashkenas氏が作成しているJavaScriptフレームワークです。
AngularJSでも採用されている「MVC」を採用していますが、AngularJSがフルスタックで様々な機能が用意されているのに対し、Backbone.jsは文字どおり「下地」を用意するためのシンプルなフレームワークとなっています。
そのため、「双方向データバインディング」などの機能はありませんが、学習コストはAngularJSに比べると少ないので、非エンジニアにも人気になりつつあります。
5. Vue.js
Vue.jsは2013年にEvan You氏の個人プロジェクトとして開発がスタートしたJavaScriptフレームワークです。「MVVM」(Model-View-ViewModel)と呼ばれる「MVC」の派生形パターンを採用し、ファイルサイズが非常に軽量でレンダリングが速いという特徴があります。
AngularJSがフルスタックであるのに対し、Vue.jsは双方向データバインディングに特化しています。
非常にシンプルなので、学習コストが非常に低く、人気が急上昇しています。
参考：
プログラミング初心者にオススメ！シンプルで学習障壁が低いJavaScriptのフレームワーク「Vue.js」の特徴と学習方法｜ferret
6. Knockout.js
Knockout.jsは、MicrosoftのSteave Sanderson氏により開発されているオープンソースのJavaScriptフレームワークで、Vue.jsと同じく「MVVM」を採用しています。
Vue.jsがシンプルさにこだわった反面ViewModel(JavaScript)の記述が独特ですが、Knockout.jsの場合は比較的JavaScriptの構文を引き継いだ形で記述することができます。
7. Feathers
Feahersは、複雑なリアルタイムアプリを作るのに便利なオープンソースのJavaScriptフレームワークです。
フロントエンドとバックエンドをつなぐREST APIを採用しているので、チャットアプリのようなサーバーを介したアプリケーションも簡単に開発することができます。
まとめ
DOM操作が得意だったり、UIや双方向データバインディングに特化していたり、あるいはフルスタックで様々な機能を実装することができたりと、一口にライブラリやフレームワークといってもそれぞれに特徴が異なります。
JavaScriptフレームワークは、今でこそ採用する現場は増えましたが、チームメンバーがキャッチアップしていないと採用することはまだまだ難しいのが現状です。
しかし、近い将来、JavaScriptはフレームワークを使うのが当前、という時代がやってくるかもしれません。
ぜひ、それぞれのフレームワークを一度は触ってみてください。