JavaScriptでフレームワークを使うという発想は、以前にはあまりなかった。
JavaScriptはライブラリさえあれば十分に機能していたからだ。
しかし、Webアプリケーションが複雑になるにつれてJavaScriptフレームワークも一般的になりつつある。
現在注目を集めているJavaScriptフレームワークに、どのようなものがあるかを今からご紹介していく。
色々なフレームワークがここ数年で登場してきており、それぞれ特徴が大きく違っている。
今人気のJavaScriptフレームワークを知ることで、学習や構築をはじめる際の参考にして頂ければ幸いだ。
目次
- 1 JavaScriptフレームワークその1 AngularJS
- 2 JavaScriptフレームワークその2 React.js
- 3 JavaScriptフレームワークその３ Backbone.js
- 4 JavaScriptフレームワークその4 Ember.js
- 5 JavaScriptフレームワークその５ jQuery
- 6 JavaScriptフレームワークその6 Polaris
- 7 JavaScriptフレームワークその7 Knockout.js
- 8 JavaScriptフレームワークその8 Vue.js
- 9 JavaScriptフレームワークその 9 Feathers
- 10 JavaScriptフレームワークその10 Meteor.js
- 11 フレームワークそれぞれの使い道
JavaScriptフレームワークその1 AngularJS
概要
AngularJSは、もっとも有名なJavaScriptフレームワークのひとつだ。
エンタープライズ系(企業向けのシステムを作る企業の事)のフレームワークとして人気が高く、多くの複雑なWebアプリケーションを開発するために使われている。
例えば、Apple、PayPal、Google、Domino’s Pizza、Ryanairといった誰もが知っている様々な有名企業が、AngularJSというJavaScriptフレームワークを用いて開発を行っている。
AngularJSの発信元はGoogleだ。Googleとコミュニティによって開発されているオープンソースのフレームワークになる。そのため信頼度が高い。反面、バージョンアップの間隔も早く、まったく別物になったりもする。
AngularJSはWebブラウザ上で使われるWebアプリケーションの開発にMVCアーキテクチャを取り入れることを目的として開発された。正確にはMVW（Model・View・Whatever=なんでも！）と呼ばれているが、要するに機能分化を意識して作られている。
主な機能
AngularJSはリッチなフレームワークだ。これさえあれば何もいらない、というとこを目指しているように見える。率直に言って、AngularJSを入れておけば、必要な機能の大半はまかなえる。
- テンプレートエンジン
- モデル/ビュー間での値の変更をお互いに反映させる双方向データバインディング
- URLに応じてテンプレートを切り替えるルーティング
- ビューに出力するデータを加工するフィルター
- 非同期通信のサポート
- セキィリティ対策
などの機能がそろっている。
AngularJSの特徴として上げられるのが「HTML拡張」だ。
本来であるなら、JavaScriptでコードを書いていきながら、一つ一つHTMLタグの動作を指定していく必要があるのだが、この「HTML拡張」は「HTMLタグ」に対して新しい振る舞いや、機能、役割りを与える仕組みだ。
また、「双方向データバインディング」も便利である。簡単に言えばユーザによって入力されたデータを自動的に変更、保存、反映してくれる機能の事である。
データの更新はとても面倒な作業だが、この機能によってより少ないコードの記述でWebサービスを展開する事が可能になる。
他にも多数の機能が揃っており、学習コストは高いが、便利なフレームワークだ。まさしく、フルスタックと呼ばれるにふさわしいJavaScriptフレームワークになっている。
JavaScriptフレームワークその2 React.js
概要
React.jsはFacebookによって作られたJavaScriptフレームワークだ。最初にリリースされたのが2013年と、まだまだ新しいJavaScriptフレームワークになっている。React.jsもオープンソースとして公開されている。
使っている企業も年々増えてきているが、例えばAirbnB、Yahoo、Atlassian、Github AtomなどのIT企業で使われている。もちろんFacebookやInstagramにも用いられている。
「A JavaScript library for building user interfaces」と公式サイトにあるようにReact.jsはUIに集中したフレームワークだ。MVCのView機能だけを集中的に扱っているということになる。
主な機能
Reactの大きな特徴は、高速かつ、保守性の高いコードを書く事が出来る点だ。これに加えて、先ほども述べたが、View機能を中心として扱っているのも特徴だ。
Viewに集中することで、複雑かつ管理が難解になりがちのJavaScriptを管理しやすくしている。Angular.jsやBackbone.jsよりも大規模アプリケーションに対応しやすい。
反対に、小規模なアプリケーションであればReactを使うよりもjQueryやBackbone.jsを使ったほうがいいだろう。
React.jsはコンポーネントを定義して、それを組み合わせて画面を作る。コンポーネントとは構成要素の事だ。コンポーネントという部品を用いてWeb上に必要な機能を実装していく。
React.jsは、このコンポーネント（部品）をなるべく小さくすることにより、管理がしやすくわかりやすいJavaScriptを実現している。
旧来の既存のコードを書く手法よりも、より簡素に、わかりやすく記述する事が可能になる点がReact.jsを使うべき理由だろう。
https://facebook.github.io/react/
JavaScriptフレームワークその３ Backbone.js
概要
Backbone.jsは軽量なJavaScriptフレームワークとして、2010年にジェレミー・アシュカナスによってオープンソースソフトウェアの形でリリースされた。
現在ではTwitter、Pinterest、Hulu、Foursquare、Pandora Radioといったパワフルで大規模な開発を行っているWebサービスに使われている。
BackBone.jsもAngularやReact同様に有名なJavaScriptフレームワークだ。
主な機能
BackBone.jsの大きな特徴は、その制約の少なさだ。軽量なフレームワークなので、自由度の高いプログラミングが可能になる。jQueryなど既存のライブラリの力も使っているのも特徴のひとつだ。
反面、自由度が高いので、エンジニアの腕によっては見通しが悪いコードにもなりやすい。
BackBone.jsを導入してもコード量が大幅に減るという印象はなく、やはりメンテナンスのしやすさや、長期的な生産性の向上が導入のメリットになる。
初期の学習コストは少なく、JavaScriptフレームワークの概要をつかむための入り口として最適なフレームワークだ。
JavaScriptフレームワークその4 Ember.js
概要
Ember.jsはプログラマーの生産性を高める事に焦点を当てたJavaScriptフレームワークだ。 2013年に正式にリリースされた。
Ember.jsもポピュラーなフレームワークであり、開発コアチームにはRuby on RailsやjQueryの開発に参加しているYehuda Katz氏のような優秀なプログラマーも名を連ねている。
Ember.jsもすでにお伝えしたフレームワークたちと同様、MV*モデルアーキテクチャを採用している。
AngularやBackbone、Reactと同じように、データが書き換えられると同時に、テンプレートとViewのエンジンが自動的にアップデートするようになっている。このお陰で、煩雑なコードライティングがだいぶ減る。
主な機能
軽量ではなく、リッチなフレームワーク側に位置する。BackboneよりもAngularに近く、フルスタックなフレームワークだ。そのため、学習コストは少々高い。しかし、その分、生産性が圧倒的に高くなる。
「このコードしょっちゅう書くな」というコードがあるだろう。例えば、DOMのイベントを受け取ってデータを更新して、それを表示させるなどだ。これを毎回書くのは非生産的だ。Enber.jsはこのような決まった処理をうまく扱って、代わりに行ってくれる。
ユーザインターフェースの向上など、本当に頭を絞ってやるべき業務に専念できるのが、Enber.jsのいいところだ。
JavaScriptフレームワークその５ jQuery
概要
ご存知、JavaScriptの革命児jQuery。
JavaScriptフレームワークと言えるのかは大いに疑問だが、紹介せずにはいられない。jQeryはJavaScriptライブラリのデファクトスタンダードだ。多くのサービスやシステムに当然のようにしれっと入っている。
JavaScriptの記述の煩雑さを最小限に抑え、とにかく書きやすく、使いやすくした功績は大きい。Webデザイナーなどの非エンジニア系の人にも使いやすく爆発的に広まった。
簡単に導入ができるため、どんな規模のサイトにも利用できる。しかし、大規模になればなるほど管理ができなくなっていくため、AngularのようなJSフレームワークが生まれてきた経緯がある。
主な機能
- 簡易なDOMの操作と変更
- JavaScriptの動きをブラウザに依存させにくくする
- 簡易なCSS操作
- エフェクトやアニメーション
- Ajax
などの機能が揃っている。jQueyを使ったライブラリは数多く世の中に出回っており、便利なものも多い。
UI関連でやりたいことは、一通りライブラリが揃っていると言っていいほど充実している。
若干速度が落ちる場合があるが、それも大きな問題にはならない。簡単なアプリケーションであれば、他のフレームワークよりも、素直にjQueyのみを使うのがいいだろう。
JavaScriptフレームワークその6 Polaris
概要
ユーザーがウェブページのロードを待てる時間は年々短くなっている。「とにかく速く表示を」というのが現在のWebのひとつのキーワードだ。
例えば、Amazonでは100ミリ秒の遅延が1%もの利益を減少させると言われ、血眼になって改善を続けている。Googleもページの表示速度はユーザーへのフレンドリーさに直結すると考えており、表示速度を検索順位決定のひとつの指標にしている。
Polarisは、「ウェブページの待ち時間を短くする」ことを目的とした新しいフレームワークだ。MITが開発元で、2016年にリリースされた。オープンソース化も予定されている。
主な機能
特徴は「速さ」だ。
色々なサイトで実験したところ、ページ表示速度を最大34%も高速化することに成功したとのこと。
仕組みは次の通りだ。
- もともとWebページは画像やCSSなど色々なリソースを色々なところからかき集めてくる
- それぞれのリソースにはさらに依存する他のリソースがあり、積み重なって時間がかかる
- Polarisは要求に応じて、リソースの依存ツリーを事前に用意し、最適な順番でリソースを引っ張ってこられるようにする
簡単にいうと、このような理由で速くなる。
34%速くなるのはWebアプリケーションにおいて画期的だ。本番へ導入するとなると少し先になるだろうが、追いかけておきたいフレームワークだ。
JavaScriptフレームワークその7 Knockout.js
概要
KnockoutJSは、2010年にスティーブサンダーソンとマイクロソフトの社員によってリリースされたJavaScriptフレームワークで、現在もオープンソースプロジェクトとして維持されている。
KnockoutJSライブラリは、シンプルなデータ駆動型のインターフェイスを処理するために簡単な方法を提供している。
主な機能
- Backbone.jsほど軽くはないが、高機能
- Angular.jsほど高機能ではないが、軽量
という立ち位置だ。
学習コストも低めなので、導入しやすい。機能がシンプルなので拡張性も高い。お陰で、すでに走っているアプリケーションへの導入もやりやすい。
データバインディングや依存トラッキングなど概ねの機能は揃っている。また、jQueryとの併用も可能で、住み分けができている。
JavaScriptフレームワークその8 Vue.js
概要
Vue.jsは本格的なフレームワークではなく、Viewに特化したライブラリに近い。
全体的にシンプルで学習コストが低い。Vue.jsはWebアプリケーション上で存在感を発揮するというよりは、サポートに回っている感覚だ。Angularであれば、Angularルールのもと動かないといけないが、Vue.jsは柔軟で自己主張をしない。
特徴・機能
Vue.jsは「シンプル」である事を売りにしたJavaScriptフレームワークだ。Knockout.jsと傾向はにているが、Knockout.jsよりもわかりやすくシンプルなAPIを提供している。
双方向データバインディングも行える。
もしも機能が足りないと感じた時は、Web上から好きなライブラリを選択し、機能拡張を行える汎用性も持っている。
サイトもシンプルでわかりやすく好ましい。
JavaScriptフレームワークその 9 Feathers
概要
Feahersは複雑なリアルタイムアプリを作るのに便利なフレームワークだ。
アプリはブラウザだけではなく、サーバでもネイティブでも動作する。
特徴・機能
「ミニマリスト」として宣言している通り、シンプルな構造をしている。スケーラブルでリアルタイム性が必要なアプリに使えるフレームワークだ。
プロトタイプをすぐに使えると歌っている通り、チャット系のサービスがすぐに作れる。
JavaScriptフレームワークその10 Meteor.js
概要
Meteor.jsは「簡単さ」に焦点を当てたフレームワークだ。Meteor.jsはインストールするだけでWebアプリケーションを開発するための環境構築が行われる。
他のJavacriptフレームワークよりも、「初心者」のために作られたものだと思っていい。楽しいフルスタックなJavaScriptフレームワークだ。
主な機能
例えば、
- 一瞬でコードを書き始められる
- ログインの処理が準備されており、１行でログイン処理を作れる
- どんなデバイスにも対応できる
など初心者にとって嬉しい機能ばかりだ。
反面、Meteor.jsにすべての機能を依存してしまうため、拡張性はない。自社のアプリケーションを作るには不便な部分も多いだろう。
更新を前提としない一発アプリケーションを作るには便利なフレームワークだ。
フレームワークそれぞれの使い道
AngularJSは何でも来いだが、大規模アプリケーション向きだ。
jQueryもAngularとは別の意味で何でも来いだが、これだけでいいという意味では軽いアプリケーション向きになっている。
Backbone.jsはカスタマイズして使うときに重宝される。
Ember.jsとKnockout.jsは高機能なフレームワークを手軽に使いたいときに使える。
React.jsは簡単にコードを書きたいときや、Viewが複雑になりそうな大規模アプリケーションに有用だ。
その他はそれぞれある分野に特化されたフレームワークを選んでいるので、詳細を読んでみてほしい。
まとめ
JavaScriptのフレームワークを10種類ご紹介してきた。有名なもの、そうでないものも含めてご紹介したが、いかがだっただろうか？
JavaScriptフレームワークの導入は積極的に行われているとはまだまだ言い難い。しかし、必ず近い将来JavaScriptはフレームワークを使うのが普通という状態になる。
AngularやReactなど有名どころは、とりあえず一度は触ってみて、導入を検討してみてはいかがだろうか？
コメント