2018年も業界標準！知っておくべきJavaScriptフレームワーク＆ライブラリの基本の"キ"

更新日: 2018年05月29日

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

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

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

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

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

JavaScriptとは？

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

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

参考：
JavaScript｜ferret マーケティング用語辞典
　　

フレームワーク＆ライブラリとは？

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

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

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

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

1. Angular 2

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

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

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

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

2. Vue.js

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

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

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

3. Ember.js

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

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

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

1. React

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

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

2. jQuery

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

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