JavaScript 開発者の数と比較して、JavaScript フレームワーク、ライブラリ、ツールの数はさらに多いようです。 2017 年 5 月の時点で、GitHub で簡単に検索すると、110 万を超える JavaScript プロジェクトがあることがわかります。 npmjs.org には 500,000 の利用可能なパッケージがあり、毎月 100 億近くのダウンロードがあります。

この記事では、最も人気のあるクライアント側 JavaScript フレームワーク、ライブラリ、ツールと、それらの基本的な違いについて説明します。この記事ではどれが最適であるかについては説明できないかもしれませんが、プロジェクトに最も適したものが最適です。

クラスライブラリ

クラスライブラリは、組織化された関数のコレクションです。一般的なクラスライブラリには、文字列処理、日付、HTML DOM 要素、イベント、Cookie、アニメーション、ネットワークリクエスト、その他の関数が含まれます。関数を自分で実装して、関数が呼び出されたときに値を返す必要があるかどうかを選択できます。

クラスライブラリは通常、プロジェクトの詳細をスムーズに実装するのに役立つ高レベルの抽象化メソッドを提供します。たとえば、Ajax は通常 XMLHttpRequest API に依存しており、関数の実装に必要なコードは数行だけですが、ブラウザーごとに微妙な違いがあります。クラスライブラリは、より単純な ajax() 関数を提供するため、開発者はより高度なビジネスロジックに集中できます。

クラスライブラリにより開発時間を 20% 短縮でき、開発者は実装の詳細を心配する必要がありません。

しかし、欠点もあります:

クラスライブラリのバグを見つけて修正するのは難しい
開発チームはパッチの迅速なリリースを保証できません
パッチはAPIを変更する可能性があり、その結果、大規模な変更する必要があるコードの量
学習プロセス中に問題が発生した場合、または学習リソースを入手したい場合は、学習交換グループ
343599877 に参加してください。フロントエンドを一緒に学びましょう!

フレームワーク

フレームワークはアプリケーションのスケルトンです。これには、特定の方法でソフトウェアを設計し、特定のノードに独自のロジックを実装する必要があります。フレームワークは通常、イベント、ストレージ、データバインディングなどの機能を提供します。

フレームワークは通常、クラスライブラリよりも高いレベルの抽象化を提供し、プロジェクトの最初の 80% を迅速に構築するのに役立ちます。

フレームワークの欠点:

アプリケーションがフレームワークの範囲を超える場合、最後の 20% が困難になる可能性があります
フレームワークの更新が難しい
コアフレームワークのコードと概念がほとんど更新されない

ツール

ツールは開発作業に役立ちますが、プロジェクトに不可欠な部分ではありません。ツールには、ビルドシステム、コンパイラー、トランスパイラー、コードスプリッター、イメージコンプレッサー、展開メカニズムなどが含まれます。

ツールは開発プロセスを容易にするのに役立ちます。たとえば、多くのプログラマーは、コード分離、ネスト、レンダリング時の変数、ループ、関数を提供するため、CSS よりも Sass を好みます。ブラウザは Sass/SCSS 構文を理解できないため、テストと展開の前に、適切なツールを使用してコードを CSS にコンパイルする必要があります。

ライブラリ、フレームワーク、ツールの違い

ライブラリ、フレームワーク、ツールの違いは非常に小さいです。フレームワークにはクラスライブラリを含めることができ、そのクラスライブラリはフレームワークと同様のメソッドを実装できます。プロジェクト内のツールはすべて必須です。したがって、ライブラリ、フレームワーク、ツールを明確に区別する必要はありません。

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

人気順のランキングです:

jQuery

ナレッジベースgithub.com/jquery/jquery現在のバージョン3.2.1開発者jQueryチームリリース日2006年8月サイズ最低 30kb使用ユニバーサル使用量ウェブサイトの 72.4%

WordPress、ASP.NET、その他のフレームワークがリリースされた現在でも、jQuery は依然として最も一般的に使用されている JavaScript ライブラリです。 DOM ノードの取得とチェーンに CSS セレクターを導入して、イベントハンドラー、アニメーション、Ajax 呼び出しを適用することで、クライアント側の開発に革命をもたらしました。

jQuery は近年人気が高まっており、少量の JavaScript 機能を必要とするプロジェクトには依然として良い選択肢です。

利点:

配布規模が小さい
平坦な学習曲線、豊富なオンラインヘルプ
簡潔な構文
拡張が簡単

欠点:

追加ネイティブ API への速度のオーバーヘッド
ブラウザの互換性は悪いですが改善されました
フラットな使用法
一部の業界は

Lodash と Underscore の使用に反対しています

jQuery
Types	Libraries
ウェブサイト	jquery。

ロダッシュ
タイプ	クラスライブラリ
ウェブサイト	lodash.com/
ナレッジベース	github.com/lodash/lodash/
現在のバージョン	4 .17. 4
開発者	John-David Dalton
リリース日	2012年4月
サイズ	最小4kb – 24kb
使用方法	ユニバーサル
使用状況	低
アンダースコア
タイプ	クラスライブラリ
ウェブサイト	underscorejs.org/
ナレッジベース	github.com/jashkenas/underscore
現在のバージョン	1.8.3
開発者	Jeremy Ashkenas
リリース日	2009年10月
サイズ	最小6kb
用途	ユニバーサル
使用度	低い

このセクションでは、Lodash と Underscore について一緒に説明します。これらは、ネイティブの文字列、数値、配列、その他のプリミティブオブジェクトメソッドを補完する数百もの機能的な JavaScript ユーティリティを提供します。 2 つのライブラリには重複する部分がありますが、両方が同じプロジェクトで使用される可能性は低いです。

これら 2 つのクラスライブラリはクライアント側では使用率が非常に低いですが、サーバー側の Node.js アプリケーションではこれら 2 つのクラスライブラリを使用できます。

利点:

小さくてシンプル
優れたドキュメントで学びやすい
ほとんどのライブラリおよびフレームワークと互換性がある
組み込みオブジェクトを拡張しない
使用できますクライアント側でまたは、サーバーで

を使用します。欠点:

一部のメソッドは、ES2015 以降の JavaScript バージョンでのみ使用できます。

AngularJS 1.

angularjs.org

ナレッジベースgithub.com/angular /angular.js現在のバージョン1.6.4開発えーGoogleリリース日2010年10月サイズ144KB用途シングルページアプリケーション使用量低Angular はフレームワーク (または MVC) のリストの最初にありますアプリケーションフレームワーク) クラス。現在最も人気のある Angular バージョンは 1.x です。これは、DOM 操作とアプリケーションロジックを分離しながら、双方向データバインディングで HTML を拡張します。利点: は標準 MEAN スタック (MongoDB、Express.JS、AngularJS、NodeJS) 用です








バージョン 2 (現在はバージョン 4!) がリリースされましたが、Angular 1.x はまだ開発中です。
	一部の大企業が使用している人気のフレームワーク
最新の Web アプリケーションを開発するためのソリューション

では、多くの記事やチュートリアルが利用可能です:

学習曲線が急峻なコードライブラリ

は Angular 2.x にアップグレードできません
Angular 2.x (現在) Angular 4.x)

Angular

タイプ
フレームワーク
ウェブサイト
angular.io

ナレッジベース

github.com/angular /angular。 js

現在のバージョン4.1開発者Googleリリース日2016年9月サイズ最小40 kb使用シングルページアプリケーション使用量低い

Angular 2.0 は 2016 年 9 月にリリースされました。これは、TypeScript を使用して作成されたモジュール式コンポーネントベースのモデルを導入する完全な書き直しです。 Angular 4.0 は 2017 年 3 月にリリースされました。

Angular 2.x は v1 とは完全に異なり、他のバージョンと互換性がありません。Google はプロジェクトに別の名前を付ける必要があるかもしれません。

利点:

最新の Web アプリケーションを開発するためのソリューション
は標準の MEAN スタックの一部ですが、利用できるチュートリアルはわずかです
静的型付け言語に精通している人向けC# や Java など) 開発者にとって、TypeScript にはいくつかの利点があります。

短所:

学習曲線が急である
コードベースが大きい
Angular 1.x からアップグレードできない
1.x と比較して、 Angular 2.x は難しい理解しています
学習プロセス中に問題が発生した場合、または学習リソースを入手したい場合は、学習交換グループ
343599877 への参加を歓迎します。一緒にフロントエンドを学びましょう!

React

React はユーザーインターフェイスの構築に使用される JavaScript ライブラリであり、昨年最も人気のあるクラスライブラリでもありました。これは、Model-View-Controller (MVC) 開発の「View」部分に焦点を当てており、これを使用すると、状態を保持する UI コンポーネントを簡単に作成できます。これは、仮想 DOM を実装するために推奨されるクラスライブラリの 1 つであり、そのメモリ構造により差分を効率的に計算でき、ページ更新がより効率的になります。統計によると、React は Web サイトではなくアプリケーションで使用されているため、使用率が低いようです。小型、効率的、高速、柔軟

React	/react /
ナレッジベース	github.com /facebook/react
現在のバージョン	15.5.4
開発者	Facebookと貢献者
リリース日	2013年3月
サイズ	21kb分
使用	シングルページアプリケーション
使用状況	低

利点:

シンプルなコンポーネントモデル

優れたドキュメントとオンラインリソース

サーバーサイドレンダリングが利用可能
現在人気、経験豊富急速な成長
短所:

モデルとコントローラー部分を提供するために他のクラスライブラリまたはフレームワークが必要

DOM 変更コードや他のライブラリとは互換性がありません
React the ES6 Way の詳細をご覧ください

Typesフレームワーク

ウェブサイトvuejs.orgナレッジベースgithub.com/vuejs/vue現在のバージョン2.0開発者 Evan You発売日2014年2月サイズ最小19kb使用量シングルページアプリケーション使用量低

Vue.js は、ユーザーインターフェイスを構築するための軽量で先進的なフレームワークです。これは、他のクラスライブラリと統合して強力な単一ページアプリケーションを構築できる、React のような仮想 DOM 駆動のビューレイヤーを提供します。このフレームワークは、以前 AngularJS に取り組み、AngularJS のお気に入りの部分を抽出した Evan You によって作成されました。

Vue.js は、HTML テンプレート構文を使用して DOM をインスタンスデータにバインドします。モデルは、データが変更されるとビューを更新する純粋な JavaScript オブジェクトです。

利点:

すぐに使用でき、ますます人気が高まっています
高レベルの開発者の満足度を高めるのが簡単です
依存関係が小さく、パフォーマンスが優れています

欠点利点:

新しいプロジェクト – リスクが大きくなる可能性があります
更新に関して部分的に開発者に依存しています
他のフレームワークと比較してリソースが少ない

Backbone.js

バックボーン。 js
タイプ	フレームワーク
ウェブサイト	backbonejs.org
ナレッジベース	github.com/jashkenas/backbone/
現在のバージョン	1.3 .3
開発者	Jeremy Ashkenas
リリース日	2010年10月
サイズ	最小8kb
使用方法	シングルページアプリケーション
使用量	低

バックボーン.js は、サーバー側フレームワークでよく見られる MVC 構造を提供する最も初期のクライアント側オプションの 1 つです。唯一の依存関係は Underscore.js です。

Backbone.js は他のプロジェクトと統合できるためライブラリであると主張していますが、ほとんどの開発者はこれをフレームワークとして考えていると思います。

利点:

小さいサイズ、軽量、低複雑さ
HTML ロジックの追加なし
豊富なファイル
Trello、WordPress.com、リンクされたそしてでGroupon

短所:

AngularJSなどの他のフレームワークと比較して抽象化レベルが低い
データバインディングなどの機能を実装するには追加コンポーネントが必要です
最新のフレームワークは廃止されましたMVC アーキテクチャの使用

Ember.js

Ember.js
type	フレームワーク
ウェブサイト	emberjs.com
ナレッジベース	github .com/emberjs/ember.js
現在のバージョン	2.15.0
開発者	Emberチーム
リリース日	2011年12月
サイズ	最小95kb
使用	シングルページアプリケーション
使用量	低

Ember.js は、Model-View-ViewModel (MVVM) パターンに基づくフレームワークの 1 つです。テンプレート、データバインディング、クラスライブラリを 1 つのパッケージに実装します。

利点:

クライアントアプリケーションに単一のソリューションを提供します
開発者は jQuery を使用するため、開発効率を即座に向上させることができます
優れた下位互換性とアップグレードオプション
ウェブ開発標準

短所:

分布が大きい
より小さなコンポーネント構造に移行している他のフレームワークと比較して、非常に大規模です
曲線が急峻です

Kノックアウト.js

Knockout.js
タイプ	フレームワーク
ウェブサイト	knockoutjs.com
ナレッジベース	github.com/knockout/knockout
現在のバージョン	3.4.2
開発者	Steve Sanderson
リリース日	2010年7月
サイズ	最小59kb
使用法	シングルページアプリケーション
使用法	Low

Knockout.js は、初期の MVVM フレームワークの 1 つであり、テンプレートと依存関係の追跡により、UI が基礎となるデータと確実に同期するようにします。

利点:

小型で軽量、依存関係なし
優れたブラウザサポート、IE6をサポート可能
優れたドキュメントリソース

欠点:

大規模なプロジェクトでは、複雑です
開発が遅れています
使用量が減っているようです

より多くのフレームワークとライブラリ

以下のプロジェクトは、特に人気があるわけではありませんが、検討する価値があります:

Polymer – クラスライブラリブラウザー全体で HTML5 Web コンポーネントをサポート
Meteor – Web アプリケーション用のフルスタックプラットフォーム
Aurelia – 比較的新しい軽量のクロスプラットフォームフレームワーク
Svelte – フレームワークのソースコードをクリーンな JavaScript
Conditioner.js – 状態に基づいてモジュールを自動的にロードおよびアンロードするクラスライブラリ

ツール: 一般的なタスクを実行します

ビルドツールは、前処理、コンパイル、画像の最適化、縮小などのさまざまな Web 開発タスクを自動化しますコード、コード分析、テストの実行など。タスクは実行可能パッケージで一元管理できます。

現在最も人気のあるツールは次のとおりです:

Gulp.js

Gulp.js
Website	gulpjs.com
ナレッジライブラリ	github.com / gulpjs/gulp
現在のバージョン	3.9.1
月間ダウンロード数	300万

Gulpは最初のタスク実行ツールではありませんでしたが、すぐに最も人気のあるツールになりました。 Gulp は、読みやすい JavaScript コードを使用してソースファイルをストリームに読み込み、ビルドフォルダーに出力する前にさまざまなプラグインを通じてデータを管理します。他のオプションを選択する前に Gulp.js を確認するのは簡単、迅速、そして楽しいです。

NPM

NPM
ウェブサイト	npmjs.com
ナレッジベース	github.com/npm/npm
現在のバージョン	4.5.0
月間ダウンロード数	300万

npm は Node.js パッケージマネージャーですが、そのスクリプトツールを使用して一般的なタスクを実行できます。これは、依存関係が少ない単純なプロジェクトに最適です。ただし、より複雑なタスクには適用できなくなる可能性があります。

Grunt

Grunt
ウェブサイト	gruntjs.com
ナレッジベース	github.com/gruntj s /grunt
現在のバージョン	1.0.1
	月間 200 万ダウンロード

Grunt は、大量採用された最初の JavaScript タスク実行ツールの 1 つでしたが、その速度と複雑な JSON 構成が Gulp の台頭につながりました。これらの問題が解決された今でも、Grunt は依然として人気のある選択肢です。

ツール: モジュールバインディング

複数の JavaScript ファイルの管理は面倒なものになってきています。デフォルトでは、ブラウザファイルはコンパイルされないため、依存関係を適切な順序でロードまたは接続する必要があります。 ES6 モジュールや CommonJS などのオプションもありますが、ブラウザのサポートは限られているため、モジュールバインディングが重要になります。

WebPack

WebPack
ウェブサイト	webpack.js.org
ナレッジベース	github.com/webpack / webpack
現在のバージョン	2.5 .1
	月間600万ダウンロード

Webpackは、人気のあるモジュールオプションをすべてサポートしており、React開発の代名詞となっています。 Webpack はモジュールバンドラーであると主張していますが、すでにユニバーサルタスクランナーとして使用できます。

Browserify

Browserify
ウェブサイト	browserify.org
ナレッジベース	github.com/subst /node-browserify
現在のバージョン	14.3 .0
月間ダウンロード数	260万

Browserifyは、Node.jsで使用されるCommonJSモジュールをサポートしており、すべてのモジュールを単一のブラウザ互換ファイルにコンパイルします。

RequireJS

RequireJS
ウェブサイト	requirejs.org
ナレッジベース	github.com/jrbur ke /r.js
現在のバージョン	2.3 .3
毎月何百万ものダウンロード

RequireJS は、Node.js でも動作するブラウザー内モジュールローダーです。

ツール: コード分析

コード分析ツールは、潜在的なエラーや構文標準からの逸脱がないかコードを分析するために使用されます。閉じていない括弧または未宣言の変数は常に検出されます。

ESLint

ESLint
ウェブサイト	eslint.org
ナレッジベース	github.com/eslint/ es lint
現在のバージョン	3.19。 0
月間ダウンロード数	600万

ESLint はプラグイン可能なコード分析ツールです。各ルールはプラグインであるため、個人の好みに合わせて構成できます。

JSHint

jshint.comgithub.com/jshint/ j Shint2.9。 4 200万JSHintは、実際のエラーと古い構文のバランスが取れた柔軟なJavaScriptコード分析ツールです。 JSLint

JSHint	ウェブサイト
	ナレッジベース
	現在のバージョン
	月間ダウンロード数

JSLintjslint.comgithub.com/reid/ de-jslint はありません 0.10 .350000JSLint は、厳密なデフォルトルールセットを実装する最も初期のコード分析ツールの 1 つです。ツール: 単体テスト

	ウェブサイト
	ナレッジベース
	現在のバージョン
	月間ダウンロード

テスト駆動開発のタスクでは、独自のコードをテストするコードを作成する必要があります。 Ava、Tape、Jestなど、多くのオプションがありますが、現在最も人気のある3つのツールは、

Mocha

MochaMochajs.orgです。 github.com/mochajs/mocha3.3.0500万 Mochaは、で使用できるJavaScriptテストフレームワークですノード.js またはブラウザでテストを実行します。非同期テストをサポートしており、テストコードを読みやすい方法で表現できる Chai とともによく使用されます。ジャスミン

	Website
	ナレッジベース
	現在のバージョン
	月間ダウンロード数

ジャスミンjasmine.github.iogithub.com/ jas Mine/jasmine-npm2.6.0Jasmine は、ブラウザーでの UI とインタラクションを自動的にテストできる動作駆動型テストツールです。 QUnit

	ウェブサイト
	ナレッジベース
	現在のバージョン
	月間 200 万ダウンロード

QUnitgithub.com/kof/node - qunit1.0.0 25000

	ウェブサイト
	ナレッジベース
	現在のバージョン
	月間ダウンロード数
	QUnit は、特定のパラメーターを入力したときに関数の結果を確認できる単体テストフレームワークです。また、特定のコード分岐が欠落していないことを確認するためのテスト結果もレポートします。まとめと提案現在最も合理化されたフレームワークは React であり、他のフレームワークも人気のトレンドに向けて開発されています。安全で多用途な Web アプリケーションが必要な場合は、Vue.js の使用を検討してください。モノリシックフレームワークはもう人気がありません。大規模なプロジェクトの厳密な構造管理が必要な場合は、AngularJS が良い選択です。現在、ほとんどの人は Angular 1.0 を使い続けていますが、長期的に見ると、TypeScript を学びたいのであれば、Angular 4.x の方が良い選択です。 jQuery は現在あまり人気がなく、テクノロジーニュースでもほとんど言及されませんが、活発に開発されており、Web サイトやアプリケーションにとって強力なツールであることは否定できません。 jQuery は学習曲線が緩やかで、世界中の多くの開発者によく理解されています。冒険してみたいなら、Svelte を試してみてください。これは、ビルド時に JavaScript を事前レンダリングする興味深いクライアント/サーバーフレームワークであり、開発方法を変える可能性があります。ツールの選択はプロジェクトによって異なります。現在、ほとんどの開発者は Gulp を使用していますが、WebPack の人気が高まっています。同時に、ESLint や Mocha などのテストツールも見逃せません。