Web Professional

デザインからマーケティングまで、Webを仕事にする人の情報サイト

• 富士通
• mouse
• iiyamaPC
• Sycom
• パソコン
  SEVEN
• MSI
• FRONTIER
• ASUS
• HP
• アプライド

• ELECOM
• AMD
• ASUS ROG
• GIGABYTE
• Samsung
  SSD
• ASRock
• Crucial
• HUAWEI
• ViewSonic
• Belkin

• JAWS
• Acrobat
• kintone
• Azure
• LINE WORKS
• SORACOM
• Dropbox
• CData
• Backlog
• Fortinet
• ヤマハ
• Zoom

• マカフィー
• キヤノンMJ
• JAPANNEXT
• ソフマップ
• brand
  new ME!

もう迷わない！人気JavaScriptフレームワーク、ライブラリー、ツール総まとめ

• 
• ツイートする

GitHubのクイックリサーチによれば、JavaScriptプロジェクトは2017年5月時点で110万以上存在しています。npmjs.orgには利用可能なパッケージが50万個あり、ダウンロード数は毎月約100億回にのぼります。開発者の数よりもJavaScriptフレームワーク、ライブラリー、ツールの数のほうが多いかもしれません。

本記事では、クライアントサイドで特に人気の高いJavaScriptフレームワーク、ライブラリー、ツールの基礎や主な違いを紹介します。選んで、使ってみて「ベスト」を見つけてください。ただし、いつかは「より良い」フレームワーク、ライブラリー、ツールが登場すると覚えておいてください。

以下の条件に同意の上してから読み進めてください。

• JavaScriptの情勢は日々変化するため、この記事も公開されるときにはすでに時代遅れになっている
• 「ベスト」とは「もっとも人気のある一般用途向けプロジェクト」を指す。そのためお気に入りが含まれていない可能性がある
• フリーまたはオープンソース
• いまでも広く使われているプロジェクトでも、YUIなど開発が中止されたものは、除外してる
• 取り上げるのはクライアントサイドのプロジェクトのみ。サーバーサイドでも動くものもあるが、Express.jsやHapiのような純粋なサーバーサイドのフレームワークは含まない
• 各プロジェクトの情報は、各自で詳しく調べてもらうために意図的に簡潔にし、概略を述べるに留めている
• 各プロジェクトが人気を示す指標を公開しているが、異なる統計を照らし合わせることは困難極まりないことであり、誤解につながる可能性もある
• 私は偏見を持っているため、紹介するすべてのツールを試したわけではないのに好きなツールを言及している
• 本記事に基づく判断によって損害が発生しても責任は負わない

注意が必要な用語

「フレームワーク」、「ライブラリー」、「ツール」は、使う人、状況、文脈に応じて変わる可能性があります。定義は以下のとおりです。

ライブラリー

ライブラリーは便利な機能を体系的にまとめたものです。典型的なライブラリーは文字列、日付、HTML DOM要素、イベント、クッキー、アニメーション、ネットワークリクエストなどを扱う関数を備えています。各関数は呼び出し元のアプリケーションに値を返します。アプリケーションには任意のライブラリーを組み合わせられます。車の部品選びに置き換えると、車を組み立てるためにどんなものを使っても良いですが、エンジンは自分で作る必要があります。

ライブラリーは、高度に抽象化されているため、細部の実装を気にする必要がなくなり、一貫性が保てます。たとえば、AjaxはXMLHttpRequest APIを使いますが、実装には数行コードを書き、ブラウザー間の微妙な差異を考慮する必要があります。ライブラリーなら「ajax()関数」で、細部の実装を気にすることなく、高度なビジネスロジックに集中できます。

ライブラリーで細かい部分を気にする必要がなくなり、開発時間を20%短縮できます。ただし、欠点もあります。

• ライブラリーにバグがあると、特定と修復が困難
• 開発チームがパッチをすぐにリリースする保証はない
• パッチによってAPIが変わり、コードの修正が大幅に発生する可能性がある

フレームワーク

フレームワークはアプリケーションの骨格です。フレームワークを使う場合は特定の手法を用いてソフトウェアを設計することが必要になり、ロジックも決まった場所に挿入します。フレームワークは基本的に、イベント、ストレージ、データバインディングなどの機能を備えています。車でいえば、フレームワークは製造済みのシャシー、ボディ、エンジンを用意してくれます。車を走れる状態に保つかぎり、部品の追加、削除、変更が可能です。

フレームワークは通常、ライブラリーよりも高度に抽象化されているため、使用することでプロジェクトを80%の所まで素早く進められます。欠点は次のとおりです。

• フレームワークの制約を超えるアプリケーションを作ると、最後の20%で苦労する
• フレームワークの更新は、不可能ではないが困難
• フレームワークの核となるコードと概念は、時間が経ってもほとんど進歩しない。一方、開発者はやがて同じことをより良く実現する方法を発見する

ツール

ツールがあれば開発が捗りますが、プロジェクトに必要不可欠ではありません。ツールにはビルドシステム、コンパイラー、トランスパイラー、コード圧縮ツール、画像圧縮ツール、デプロイツールなどがあります。

ツールがあれば開発プロセスがより簡単になります。たとえば、CSSよりもコードの分割、ネスト、変数、ループ処理、関数を使用できるSassを好むコーダーは多いです。ブラウザーはSaSS、SCSSの構文を理解できないので、テストとデプロイ前に適切なツールを使ってコードをCSSにコンパイルします。

レッテルを貼るのはやめてくれ！

ライブラリー、フレームワーク、ツールの境界線は不明瞭で、フレームワークにライブラリーが含まれたり、ライブラリーがフレームワークのようなメソッドを実装していたり、ツールがライブラリーやフレームワークに必要だったりします。記事ではプロジェクトをどれかに割り当てていますが、実際の機能の幅はさまざまです。

ここまで読んで、複雑だと感じるなら、素のJavaScriptを書く手もありますが、JavaScriptはブラウザーとOSの上で稼働する抽象化した存在なので、やがてライブラリーやフレームワークを書いたりメンテナンスしたりする日が来ます。

JavaScriptのフレームワークとライブラリー

人気順でプロジェクトを紹介します。

jQuery

jQueryはこれまでに作られたJavaScriptライブラリーの中で、一番利用されているライブラリーです。 WordPress、ASP.NET、そのほかのフレームワークでも利用できます。DOMノードの取得にCSSセレクターを導入し、イベントハンドラー、アニメーション、Ajaxコールを組み合わせることでクライアントサイドの開発に革命をもたらしました。

jQueryは近年人気が落ちていますが、JavaScriptの機能が少しだけ必要なプロジェクトには、有力な選択肢です。

長所：

• 配布サイズが小さい
• 学習コストが低く、オンラインヘルプがたくさんある
• 構文が簡潔
• 拡張が容易

短所：

• ネイディブAPIにオーバーヘッドが加わり、速度が低下する
• ブラウザー間の互換性が改善したため、以前より重要度が低下した
• 使用率が横ばい
• 不必要な使用に対する反発が業界内にある

React

Reactはユーザーインターフェイスを構築するためのJavaScriptライブラリーで、この1年でもっとも話題になったライブラリーです。MVC（Model-View-Controller）の「ビュー」に特化して、状態を保持するUIコンポーネントを簡単に作成できます。Reactは仮想DOMを実装した最初期のライブラリーで、メモリ内の構造とページとの差異を演算することで、ページを効率的に更新できます。

統計によるとReactの使用率は低いです。おそらく、ReactがWebサイトよりもアプリケーションで使われているためです。開発者の38%近くがReactを使っていると答えています。

長所：

• 小さい、効率がいい、高速、柔軟性が高い
• シンプルなコンポーネントモデル
• ドキュメントとオンラインリソースが充実している
• サーバーサイドでの描画も可能
• 現在人気が高く、急成長している

短所：

• 新たな考え方と構文を学ぶ必要がある
• ビルドツールが必要不可欠
• モデルとコントローラーを提供するほかのライブラリーやフレームワークが必要になることがある
• DOMを操作するコードやほかのライブラリーと共存できない可能性がある

Lodash、Underscore

LodashとUnderscoreをまとめて紹介します。どちらも文字列、数値、配列などの基本的なネイティブオブジェクトのメソッドを補う機能的なJavaScriptユーティリティを数多く備えています。機能の一部が重複しているので、プロジェクトで両方のライブラリーが必要になる可能性は低いです。

クライアントサイドでの使用率は低いですが、どちらのライブラリーもサーバーサイドのNode.jsアプリケーションに使えます。

長所：

• 小さくてシンプル
• ドキュメントが充実しているため簡単に学べる
• ほとんどのライブラリー、フレームワークと共存できる
• ビルトインオブジェクトを拡張しない
• クライアントとサーバーの両方で使える

短所：

• 一部のメソッドはES2015版以降のJavaScriptでのみ利用可能

AngularJS 1.x

Angularはこの記事で最初に紹介するフレームワーク（またはMVCアプリケーションフレームワーク）です。よく使われるのはバージョン1.xで、HTMLを双方向データバインディングによって拡張し、DOM操作をアプリケーションロジックから分離しています。

バージョン2がリリースされたにもかかわらず（現在はバージョン4）、Angular 1.xはまだ開発が続いています。以下で説明します。

長所：

• 大企業が採用している人気のフレームワーク
• AngularのみでモダンWebアプリケーションが作れる
• 「標準の」MEANスタック（MongoDB、Express.JS、AngularJS、NodeJS）の一部なので、数多くの記事やチュートリアルが存在する。

短所：

• 他の選択肢に比べて学習コストが高い
• コードベースが大きい
• Angular 2.xにアップグレードできない
• グーグルのプロジェクトであるにもかかわらず、グーグルはAngularを使っていないかも？

Angular 2.x（現在は4.x）

Angular 2.0は2016年9月にリリースされました。完全に書き直し、コンポーネントをベースにしたモジュール方式のモデルを導入しています。TypeScript（JavaScriptにコンパイルされる）で作られています。さらに、バージョン4.0が2017年3月にリリースされました（バージョン3はセマンティックバージョニングの問題を避けるためにスキップされました）。

Angular 2+はバージョン1と根本的に違います。互換性もありません。グーグルは別のプロジェクト名を付けるべきだったかもしれません。

長所：

• モダンWebアプリケーションを構築できる
• Angular 2+のチュートリアルの数は（前のバージョンと比べて）少ないが、それでもMEANスタックの一部である
• TypeScriptは、C#やJavaなどの静的型付け言語に詳しい開発者に利益をもたらす

短所：

• 競合する選択肢に比べて学習コストが高い
• コードベースが大きい
• Angular 1.xからアップグレードできない
• Angular 2.xは1.xに比べて普及速度が遅い
• グーグルはAngularを使っていないかも？

Vue.js

Vue.jsはユーザーインターフェイスを作るための軽量で先進的なフレームワークです。Reactのような仮想DOMを使ったビュー層がフレームワークの核で、ほかのライブラリーとの統合が可能です。シングルページアプリケーションを作ることもできます。フレームワークの作者Evan You氏はAngularJSの開発に携わっていましたが、AngularJSから好きな部分を抽出したVue.jsを作成しました。

Vue.jsはHTMLベースのテンプレート構文でDOMとインスタンスデータをバインドします。モデル層は純粋なJavaScriptのオブジェクトで、データが変更されたときにビューを更新します。追加ツールを使えばスキャフォールディング（Scaffolding）、ルーティング、状態管理、アニメーションを実装できます。

長所：

• 急速に普及中で人気も上がっている
• 導入が簡単で、レベルの高い開発者にも満足度が高い
• 依存オブジェクトが少なく、高性能

短所：

• 比較的新しいプロジェクトのため、リスクは大きい
• 更新を一人の開発者に頼っている
• 他の選択肢と比べて、リソースが少ない

Backbone.js

Backbone.jsは、サーバーサイドのフレームワークのMVC構造を、クライアントサイドで利用できるようにした初期のフレームワークです。同じ開発者によって作られたUnderscore.jsが唯一の依存オブジェクトです。

Backbone.jsはほかのプロジェクトと統合できるため、ライブラリーだと位置付けています。個人的には、Backbone.jsをフレームワークと考えている開発者が大半なのではないかと疑っています。もっとも、一部の人たちほどこの点に固執していませんが。

長所：

• 小さく、軽量で、比較的単純
• HTMLにロジックを追加しない
• ドキュメントがすばらしい
• Trello、WordPress.com、LinkedIn、Grouponなど数多くのアプリケーションで採用

短所：

• AngularJSなどの競合する選択肢と比べて、抽象化のレベルが低い（利点にもなる）
• データバインディングなどの機能を実装するためにはコンポーネントを追加する必要がある
• 新しいフレームワークはMVCアーキテクチャーではない別の手法に移行している

Ember.js

Ember.jsはMVVM（Model-View-ViewModel）パターンに基づいて作られた独自性の強いフレームワークです。単一のパッケージにテンプレート、データバインディング、ライブラリーを実装しています。設定より規約（convention-over-configuration）の考え方を採用しているのでRuby on Railsの経験がある人はすぐに習得できます。

長所：

• Ember.jsのみでクライアントサイドアプリケーションを構築できる
• jQueryを使っているので、すぐに生産効率を高められる
• 優れた後方互換性とアップグレードオプション
• 最新のWeb標準を採用している

短所：

• 配布サイズが大きい
• 小さなコンポーネントを集めた構造に移行しつつあるほかのフレームワークとは違い、モノリシックだとされる
• Emberの方針により学習コストが高い

Knockout.js

Knockout.jsは比較的古いMVVMフレームワークで、Observableを使ってユーザーインターフェイスとデータを同期します。特徴はテンプレートや依存関係トラッキングです。

長所：

• 小さく軽量で、依存オブジェクトがない
• IE6までさかのぼって対応する、すばらしいブラウザーサポート
• ドキュメントが充実している

短所：

• プロジェクトが大規模になると複雑になる可能性がある
• 開発速度が低下
• ユーザーが減少している

そのほかの注目プロジェクト

人気は劣るものの検討の価値があるプロジェクトです。

• Polymer：HTML5のWeb Componentsをクロスブラウザー対応にするライブラリー
• Meteor：Webアプリケーション構築のためのフルスタック・プラットホーム
• Aurelia：比較的新しい、軽量のクロスプラットホーム・フレームワーク
• Svelte：フレームワークのソースコードを素のJavaScriptに変換する、最近公開されたプロジェクト
• Conditioner.js：状態に合わせてモジュールを自動でロード、アンロードする、新たなライブラリー

ツール：汎用タスクランナー

ビルドツールはプリプロセッシング、コンパイル、画像最適化、コード圧縮、Lintの実行、テストといったさまざまなWeb開発タスクを自動化します。ビルドツールで複数のタスクを1つの実行可能なパッケージにまとめて管理できます。人気のビルドツールを紹介します。

Gulp.js

Gulpは後発のタスクランナーですが、あっという間に一番人気になりました。個人的にも気に入っています。GulpはJavaScriptのコードなので読みやすいです。ソースファイルをストリームに読み込み、pipeを用いてデータをさまざまなプラグインで処理してからビルドフォルダーに出力します。シンプルで高速なので楽しく使えます。ほかの選択肢を試す前に、まずGulp.jsを試してください。

npm

npmはNode.jsのパッケージマネージャーですが、npmの機能「scripts」は汎用タスクランナーとしても使えます。依存オブジェクトの少ないシンプルなプロジェクトにとって魅力的な選択肢です。ただし、タスクが複雑になると一気に非実用的になる恐れがあります。

Grunt

Gruntは最初に普及したJavaScriptタスクランナーの1つでしたが、速度が遅く、JSONの設定が複雑だったために、Gulpに人気を奪われました。現在は致命的な問題は解決され、多くの開発者に支持されています。

ツール：モジュールバンドラー

複数のJavaScriptファイルを管理するのは面倒な作業です。ブラウザーで使うファイルはコンパイルされないので、依存オブジェクトを適切な順序で読み込み、連結します。ES6 ModulesやCommonJSなどの選択肢がありますが、ブラウザーのサポートが限定的なのでモジュールバンドラーが必要不可欠です。

Webpack

Webpackは人気のあるモジュールオプションをすべてサポートしており、React開発に欠かせない存在です。Webpackはモジュールバンドラーですが、汎用タスクランナーとしても使えます。

Browserify

BrowserifyはNode.jsで使われているCommonJSモジュールをサポートしています。すべてのモジュールをコンパイルしてブラウザーが理解できる1つのファイルにまとめます。

RequireJS

RequireJSはブラウザー側で動作するモジュールローダーですが、Node.jsでも利用できます。

ツール：Lint

「Lint」とは、コードを解析し、潜在的なエラーや模範的な構文からの逸脱を検出することです。Lintを使えば、括弧の閉じ忘れや変数の宣言漏れを防止できます。

ESLint

ESLintは着脱可能なLintツールです。すべてのルールがプラグインで決められるので、好みに応じて設定できます。

JSHint

JSHintは柔軟性の高いJavaScript用Lintツールです。エラーの報告と構文の指摘のバランスが絶妙です。個人的にお気に入りです。

JSLint

もっとも古いLintツールの1つで、デフォルトのルールセットが厳格です。頑固すぎるかなと思います。

ツール：テストスイート

テスト駆動開発では、コードを書き始める前に「コードをテストするためのコード」を書く必要があります。

Ava、Tape、Jestなど数多くの選択肢がありますが、人気がある3つのツールです。

Mocha

MochaはJavaScriptテストフレームワークで、Node.jsやブラウザーでテストを実行できます。非同期テストをサポートしているほか、テストコードの可読性を上げるためにChaiと組み合わせて使えます。

Jasmine

Jasmineはビヘイビア駆動テストスイートです。ブラウザーでのユーザーインターフェイスとインタラクションのテストを自動化できます。

QUnit

QUnitは単体（Unit）テストフレームワークです。所定の引数を渡すと関数の実行結果を検証します。また、テストカバレッジを報告するので、特定のコードブランチのテスト漏れを確実に防止します。

そのほかのツール

JavaScritpが好きじゃない人でもTypeScript、LiveScript、CoffeeScriptなどのコンパイラーを使えば、開発の満足度が向上するかもしれません。または、Babelを使ってモダンで簡潔なES2015のソースコードをクロスブラウザー対応のES5のコードに変換する方法もあります。

Mustache、Handlebars、Pug (Jade)、EJSといったJavaScriptで作られたHTMLテンプレートエンジンがあります。個人的にはEJSやdoTのように、軽量でJavaScriptの構文を維持しているツールが好きです。

最後に、ドキュメントの自動生成を利用して、自分のドキュメントを書いてみませんか？ESDoc、JSDoc、YUIdoc、documentation.js、Transcriptionなど、ES2015互換のドキュメント生成ツールがおすすめです。

まとめと提案

集団の知恵に従うなら、勢いがあるのはReactです。ほかのライブラリーも同様の技術的方針に舵を切っています。Webアプリケーションにとって安全で汎用的な選択肢だと言えますが、Vue.jsも注視しておくことをおすすめします。

モノリシックフレームワークは人気を失っていますが、堅固な構造が必要な大規模プロジェクトではAngularJSが人気です。大半がバージョン1.0を使い続けていますが、好きで選んでいるというよりは必要に迫られてのことだと思います。TypeScriptを学ぶ意思があるなら、長期的にはバージョン4+が無難です。

jQueryを軽視しないでください。技術関係のニュースでもめったに言及されませんが、jQueryのトレンドは続いており、開発が盛んで、Webサイトやアプリケーションの作成に役立ちます。jQueryは学習コストが低く、世界中の多くの開発者が理解しているのです。

冒険好きな人にはSvelteが興味深いでしょう。クライアント、サーバーの両方で使用可能で、ビルド時にJavaScriptをプリレンダリングします。Svelteは開発手法を変える可能性を持っています。

ツールの選択は比較的重要度が低く、またプロジェクトによってどれを使うべきか変わります。大半はGulpですが、WebPackの人気も拡大しています。テストにはESLintやMochaを選んでおけば間違いありません。しかし、選択肢はたくさんあります。

プロジェクト、チーム、スキルセットは1つとして同じではありません。評価に使える時間は限られているので、すでに知っている道具は魅力的に映ります。もっとおすすめのフレームワークがあると思う人もいるかもしれませんが、ハンマーを持つ人にはすべてが釘に見えるものです。

最後に、ライブラリー、フレームワーク、ツールはオプションだと決して忘れないでください。JavaScriptによる開発は過去10年の間に革新を遂げました。かつては初歩的なヘルパーライブラリーがいくつかあるだけでしたが、いまでは圧倒的な数の選択肢があります。止まらない複雑化に疲弊してしまうことや、話題のフレームワークを数カ月ごとに切り替えてばかりになることもあります。小さなタスクや個人的なタスクでは素のJavaScriptを検討してください。身に着けた知識は時代遅れにならず、プロジェクトでフレームワークを選ぶときに価値を発揮します。

本記事はJavaScriptエコシステムの現状を反映し、2017年5月29日に更新しました。また、Panayiotis Velisarakos、Sebastian Seitzが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。

（原文：Best JavaScript Frameworks, Libraries and Tools to use in 2017）

［翻訳：薮田佳佑／編集：Livit］

WebProfessional 新着記事

すぐに役立つ！プロの解説記事

Web Professionalの本