2016年10月22日土曜日

JavaScript 周りのフレームワークや開発ツールのまとめ

イメージ

JavaScript 周りのフレームワークやライブラリ、開発ツールをまとめてみました。

全部で 76 あります。説明に間違いなどがありましたらご指摘ください。

A to Z

Angular (AngularJS)

https://angularjs.org/

Google 製のフルスタックの (Web アプリケーションを開発するための一通りの機能を持った) MVW (Model-View-Whatever) パターンのアプリケーション フレームワーク。

Babel

Babel ロゴ

https://babeljs.io/

ECMAScript 2015 (次世代の JavaScript) で記述されたコードを ECMAScript 5 (従来の JavaScript) に変換するトランスパイラ (言語変換プログラム)。

Backbone.js

Backbone.js ロゴ

http://backbonejs.org/

MVP (Model-View-Presenter) パターンのシンプルなアプリケーション フレームワーク。

Bootstrap

http://getbootstrap.com/

フロントエンド用の Web デザイン フレームワーク。Twitter が開発。

Bower

https://bower.io/

ライブラリの導入や依存関係を管理するフロントエンド用のパッケージ マネージャー。Twitter 製。

Browserify

Browserify ロゴ

http://browserify.org/

Node.js (後述) のモジュール読み込みの仕組みをフロントエンドでも使えるようにするツール。

CasperJS

http://casperjs.org/

後述する PhantomJS、または SlimerJS を使って、Web ブラウザの自動操作や単体テストを行うためのライブラリ。

Chai

http://chaijs.com/

テスティング フレームワークと組み合わせて使うアサーション (表明) ライブラリ。複数のスタイルのアサーションをサポートしている。

CoffeeScript

CoffeeScript ロゴ

http://coffeescript.org/

JavaScript へのコンパイルを目的とした altJS と呼ばれる言語の 1 つ。従来の JavaScript よりも簡潔にコードを記述することができる。

CreateJS

http://www.createjs.com/

HTML5 のキャンバスを制御するためのスイート ライブラリ。

cssnext

cssnext ロゴ

http://cssnext.io/

次世代 CSS のトランスパイラ。後述する PostCSS のプラグイン。

Cycle.js

http://cycle.js.org/

DOM (ビュー) への反映をリアクティブ プログラミングで行うためのフレームワーク。

Dojo Toolkit

Dojo Toolkit ロゴ

https://dojotoolkit.org/

デスクトップ アプリケーションのような見た目を Web 上で実現する RIA (Rich Internet Application) のライブラリ。

Electron

Electron ロゴ

http://electron.atom.io/

クライアントサイドの技術 (JavaScript、HTML、CSS) を使って、クロスプラットフォームのデスクトップ アプリケーションを作成するための Node.js モジュール。GitHub 製。

Ember.js

Ember.js ロゴ

http://emberjs.com/

MVC (Model-View-Controller) パターンのアプリケーション フレームワーク。

ESLint

http://eslint.org/

コード内のエラーや潜在的な問題を検出するリンティング ツール。後述の JSHint や JSLint よりも新しい。

Expect

https://github.com/Automattic/expect.js

Should.js (後述) をベースに開発された BDD (Behavior-Driven Development: ビヘイビア駆動開発) スタイルで記述するアサーション ライブラリ。

Express

Express ロゴ

http://expressjs.com/

サーバー サイドの Web アプリケーション フレームワーク。

Flux

https://facebook.github.io/flux/

Facebook が提唱する一方向データ フローのアプリケーション アーキテクチャ。

Grunt

http://gruntjs.com/

make や Ant と同じく、ビルド プロセスを自動化するためのツール。タスク ランナーと呼ばれる。

gulp.js

http://gulpjs.com/

Grunt の後発となるタスク ランナー。ストリーム ベースにタスクを定義する。

Handlebars

http://handlebarsjs.com/

テンプレート (雛形) に従って HTML を出力するテンプレート エンジンの 1 つ。

Haxe

Haxe ロゴ

https://haxe.org/

JavaScript 以外にも様々な言語に変換できる altJS。

Hogan.js

Hogan.js ロゴ

http://twitter.github.io/hogan.js/

Twitter が開発した軽量なテンプレート エンジン。

Hubot

https://hubot.github.com/

会話ボットの実行・開発のためのライブラリ。GitHub 製。

Immutable.js

Sass ロゴ

https://facebook.github.io/immutable-js/

イミュータブル (不変) なコレクションを提供する Facebook 製のライブラリ。

Jasmine

Jasmine ロゴ

http://jasmine.github.io/

BDD のフレームワーク。

Jest

https://facebook.github.io/jest/

Facebook や React で使われているテスティング フレームワーク。Facebook が開発。

jQuery

jQuery ロゴ

https://jquery.com/

DOM 操作やアニメーションの作成などを簡単に記述できるようにするための軽量なライブラリ。

jQuery UI

jQuery UI ロゴ

https://jqueryui.com/

jQuery の上で動作する UI 用のライブラリ。

jsdom

https://github.com/tmpvar/jsdom

Node.js で DOM 操作を行うためのモジュール。

JSHint

JSHint ロゴ

http://jshint.com/

JSLint をフォークして開発されたリンティング ツール。

JSLint

JSLint ロゴ

http://www.jslint.com/

リンティング ツール。Web サイトにアクセスして使う。

JsRender

https://www.jsviews.com/

jQuery Templates の後継となるテンプレート エンジン。

JSX

JSX ロゴ

https://facebook.github.io/jsx/

XML ライクな構文で JavaScript を拡張するためのプリプロセッサ。Facebook 製。

Knockout

Knockout ロゴ

http://knockoutjs.com/

ビューとモデル間の双方向バインディングを可能にする MVVM (Model-View-ViewModel) パターンのアプリケーション フレームワーク。

Less

Less ロゴ

http://lesscss.org/

CSS で変数、演算子、関数などを使えるようにするメタ言語 (スタイル シートの拡張言語)。

Mithril

Mithril ロゴ

http://mithril.js.org/

MVC パターンのアプリケーション フレームワーク。Angular や後述の React に比べ高速に動作する。

Mocha

https://mochajs.org/

様々なスタイルでテスト コードを記述することができる、柔軟なテスティング フレームワーク。Mocha 自体にはアサーション機構が含まれていないため、アサーション ライブラリと組み合わせて使う。

MongoDB

MongoDB ロゴ

https://www.mongodb.org/

ドキュメント指向の NoSQL データベース。

mustache.js

https://github.com/janl/mustache.js

ロジックレスなテンプレート エンジン {{ mustache }} の JavaScript 実装。

Nexe

Nexe ロゴ

https://jaredallard.me/nexe/

Node.js で作成したスクリプトを 1 つのファイルで実行できるようにするパッケージング ツール。

Node.js

Node.js ロゴ

https://nodejs.org/

サーバーサイドで JavaScript を使うためのプラットフォーム。

npm

npm ロゴ

https://www.npmjs.com/

Node.js と一緒にインストールされる標準のパッケージ マネージャー。Node Package Manager の略。

NW.js

http://nwjs.io/

Electron と同様に、デスクトップ アプリケーションを作成するための Node.js モジュール。

PhantomJS

PhantomJS ロゴ

http://phantomjs.org/

Safari で使われているレンダリング エンジン WebKit をベースにしたヘッドレス ブラウザ (GUI を持たないブラウザ)。

Polymer

https://www.polymer-project.org/

Web Components を開発するための機能や、色々なコンポーネントを提供するライブラリ。

PostCSS

PostCSS ロゴ

http://postcss.org/

プラグインの仕組みによって CSS を様々な形に変換するツール。

Prototype

Prototype ロゴ

http://prototypejs.org/

OOP (Object-Oriented Programming: オブジェクト指向プログラミング) の実現や、Ajax などを簡単に扱えるようにするライブラリ。

Pug (旧称: Jade)

https://pugjs.org/

Node.js 上で動作するテンプレート エンジン。軽量なマークアップでテンプレートを記述できる。

QUnit

QUnit ロゴ

https://qunitjs.com/

jQuery で使われているテスティング フレームワーク。

React

https://facebook.github.io/react/

Facebook が開発する、MVC でいう V (ビュー) のためのライブラリ。コンポーネント (要素の塊) を使って UI を組み立てる。

React Router

React Router ロゴ

https://github.com/ReactTraining/react-router

React 向けのルーティング ライブラリ。

Redux

Redux ロゴ

http://redux.js.org/

Flux に影響を受けて開発されたフレームワークの 1 つ。

redux-observable

http://redux-observable.js.org/

後述する RxJS (RxJS 5) をベースにした Redux の Middleware

redux-router

https://github.com/acdlite/redux-router

React Router を Redux でも使えるようにしたもの。

Relay

https://facebook.github.io/relay/

React アプリケーションをデータ駆動で構築するためのフレームワーク。Facebook が開発。

RequireJS

http://requirejs.org/

モジュール管理の仕様の 1 つである AMD (Asynchronous Module Definition: 非同期モジュール定義) の実装。

Riot.js

Riot.js ロゴ

http://riotjs.com/

React ライクなビュー用のライブラリ。

RxJS

https://github.com/Reactive-Extensions/RxJS

JavaScript でリアクティブ プログラミングを実現するためのライブラリ。

Sass

Sass ロゴ

http://sass-lang.com/

スタイル シートのメタ言語。SCSS 記法 (CSS と互換性のある記法) または Sass 記法 (インデントと改行を使った記法) でスタイルを定義する。

Selenium

http://www.seleniumhq.org/

Web ブラウザを自動操作するためのツール。

Should.js

Should.js ロゴ

https://shouldjs.github.io/

BDD スタイルのアサーション ライブラリ。

Sinon.JS

Sinon.JS ロゴ

http://sinonjs.org/

テスティング フレームワークに依存しないテスト ダブル (スパイ、スタブ、およびモックの機能) のライブラリ。

SlimerJS

https://slimerjs.org/

ヘッドレス ブラウザ。Gecko ベース。

Socket.IO

Socket.IO ロゴ

http://socket.io/

リアルタイム Web アプリケーションのためのライブラリ。

Stylus

Stylus ロゴ

http://stylus-lang.com/

Less、Sass と同様のスタイル シートのメタ言語。

Test’em

https://github.com/testem/testem

テスティング フレームワークに依存しないインタラクティブなテスト ランナー。

TypeScript

TypeScript ロゴ

http://www.typescriptlang.org/

Microsoft 製の altJS。

Underscore.js

Underscore.js ロゴ

http://underscorejs.org/

便利な関数を 100 以上提供する軽量なライブラリ。

Vue.js

https://vuejs.org/

MVVM パターンのアプリケーション フレームワーク。

webcomponents.js

http://webcomponents.org/

Polymer プロジェクトのポリフィル (レガシー ブラウザーに足りない機能を補完する技術) の実装。

webpack

https://webpack.github.io/

ソース コードやアセット (CSS、画像など) といった各種モジュールの依存関係を解決して、静的なリソースを生成するビルド ツール。

Yarn

Yarn ロゴ

https://yarnpkg.com/

npm のパフォーマンスを改善した Facebook 製のパッケージ マネージャー。

Yeoman

http://yeoman.io/

Yeoman チームが開発するスキャフォールディング ツール (プロジェクトのひな型を生成するツール) の yo、タスク ランナー、パッケージ マネージャーの 3 つで構成されるワークフロー ツール。

Zombie.js

http://zombie.js.org/

jsdom ベースのヘッドレス ブラウザ。

おわりに

日々新しいプロダクトがリリースされているため、ここで挙げたものの中には既に時代遅れとなっているプロダクトもありますが、JavaScript 界隈の文脈を理解する上での参考になれば幸いです。

最後に格言を 1 つ紹介します。

Old soldiers never die, they just fade away.
(老兵は死なず、ただ消え去るのみ)

— ダグラス・マッカーサー

0 件のコメント:

コメントを投稿