ある種のJSライブラリが定期的に登場し、さまざまなフォーラムで騒々しく議論し始めています。 第一に、熱意が徐々に高まり、コミュニティはすぐに戦争キャンプに分割されます。これは新製品とは異なって関連しています。 すべての一般的なJSフレームワークとライブラリを検討することは信じられないほどの偉業となるため、最も人気があり影響力のあるフロントエンド開発ツールのリストを提供したいと思います。 同時に、それらの使用に関するいくつかの推奨事項を示します。
しかし、ビジネスに取りかかる前に、次のことを明確にします。
- お気に入りのフレームワークまたはライブラリの一部がこのリストにない場合、コピーを壊す必要はありません。
- 使用するツールをお楽しみに。 最近、クロスブラウザおよびクロスデバイスのサポートが積極的に導入されています。 たとえば、古いバージョンがほとんどのデバイスと互換性があるかどうかを通知するスキャナーを使用できます。
Angularjs
これは、多くの開発者が複雑なWebアプリケーションを作成および保守するために使用する一般的なエンタープライズレベルのフレームワークです。 おそらく、非常に人気があると見なす方が正しいでしょう。 Angularは、Domino's Pizza、Ryanair、iTunes Connect、PayPal Checkout、Googleなどの企業で使用されています。 これは、Googleがサポートするオープンソースフレームワークです。 Angularは、複雑なWebアプリケーションを構築するための「HTML拡張機能」として位置付けられています。 TypeScriptに精通しているなら、Angular 2が TypeScriptに書かれていることを知りたいと思うかもしれません。
角度-MVCフレームワーク。 モデルとビュー間の双方向のデータバインディングを実装します。 このアプローチにより、データの変更に応じて両側で自動的に更新できます。 Angularでは、再利用可能なビューコンポーネントを作成できます。 また、利用可能なサービスフレームワークのおかげで、バックエンドとフロントエンド間の相互作用を簡単に構築できます。 そして最後に、Angularは純粋なJavaScriptです。
使用に関する推奨事項 ：複雑なフロントエンドアプリケーションを作成していて、問題を解決できる単一のモジュラーフレームワークが必要な場合。
GitHub ： https : //github.com/angular/angular.js
オフサイト ： angularjs.org
ReactJS
昨年の最も人気のあるJSプロジェクトの 1つ。 私は彼については話しませんでした ほとんどすべての会議で、Reactとこのファミリーの他のライブラリ（ Flux 、 Redux ）に関する講演を聞くことができました。
React-ユーザーインターフェイスを作成するためのJSライブラリ。 これは、多くの大企業の参加を得て、主にFacebookで開発されたオープンソースプロジェクトです。 MVCモデルに関しては、ReactはVを指し、アプリケーションアーキテクチャの他のすべての側面を事実上無視します。 UIエレメントの作成と組み合わせを容易にするコンポーネントレイヤーを実装します。 インターフェイスレンダリングは、DOMを抽象化することで最適化されます。これにより、Node.jsからReactをレンダリングすることもできます。 さらに、Reactは一方向のリアクティブデータストリームを実装しているため、他のフレームワークと比較してツールの理解と習得がはるかに容易になります。
Reactは、EmberとAngularのVを置き換える場合があります。
使用に関する推奨事項 ：強力なビューレイヤーフレームワークが必要な場合、およびその他のアプリケーションレイヤーが必要な場合。 または、ReactをAngular、Backbone、またはEmberの追加として使用できます。 最後に、Reactは同形Webフレームワークの作成に役立ちます。
GitHub ： https : //github.com/facebook/react
オフサイト ： Facebook.github.io/react/
バックボーン
このフレームワークはそのシンプルさで知られており、単一のJSファイルに収まります。 Backboneは、 CoffeScriptとUnderscore.jsも作成したJeremy Ashkenasによって作成されています。 開発チームは特に、AngularやEmberなどのモンスターを必要としないシンプルな構造のWebアプリケーションを作成する開発チームを使用することを好みます。
バックボーンは、本格的なルーティングMVCフレームワークです。 モデルを使用して、データの変更を処理するためのキーと値のバインディングとイベントが実装されます。 モデルとコレクションは、RESTful APIと対話できます。 ビューは宣言型イベント処理を使用し、ルーターはURLを使用して状態を管理します。 過度の機能や複雑さを伴わずに1ページのアプリケーションを作成すれば十分です。
使用に関する推奨事項 ：これは、単純なWebアプリケーションを作成するための優れたGOTOフレームワークです。
GitHub ： https : //github.com/jashkenas/backbone/
オフサイト ： backbonejs.org
エンバー
このかなり人気のあるフレームワークでは、プログラマーの生産性を向上させることに重点が置かれています。 Emberの主要な開発者の1人はYehuda Katzです。彼はRuby on RailsとjQueryの作成に深く関わっています。 Emberは、時間を無駄にしない「意欲的なWebアプリケーションを作成するためのフレームワーク」として位置付けられています。 彼は非常にarbitrarily意的に振る舞い、自分で多くのことを決定し、開発者に事実に立ち向かいます。
EmberはMVCフレームワークにも属します。 テンプレートと、Angular、Backbone、Reactと同じ方法でデータを自動的に更新する組み込みのビューエンジンを使用します。 Emberは、 Webコンポーネントテクノロジーをサポートしており、独自のタグでHTMLを拡張できます（Angularと同様）。 また、フレームワークには、RESTful APIで動作できるルーティングエンジンとモデルが組み込まれています。
使用に関する推奨事項 ：正常に機能するフレームワークが必要な場合。 また、Emberは、限られた予算または厳しい締め切りのために柔軟性を必要としない人にとって有用です。
GitHub ： https : //github.com/emberjs/ember.js
オフサイト ： emberjs.com
jQuery
jQueryライブラリーの紹介は不要です。 彼女のクロスブラウザのサイトのおかげだけが現実になり、ウェブはモダンな外観を獲得しました。 jQueryは、ほとんどの主要なブラウザーがWeb標準をサポートし始めた理由の1つになりました。 jQuery Foundationの使命は、「オープンソースソフトウェアの開発とサポート、および開発者コミュニティとのコラボレーションのおかげで、誰もがアクセスできるようにオープンWebを改善することです。
jQueryは世界で最も使用されているJSライブラリであり、DOM、イベント処理、アニメーション、およびAJAXの使用による作業を簡素化します。
使用に関する推奨事項 ：このライブラリは常に使用できます。 Zeptoのようなよりコンパクトなバージョンを好まない限り。
GitHub ： https : //github.com/jquery/jquery
オフサイト ： jquery.com
アンダースコアとダッシュ
標準のJavaScript機能では、完全に動作できない場合があります。 補助機能、またはコードを簡素化する機能が常に不足しています。 アンダースコアとlodashは、組み込みのJSオブジェクトにモンキーパッチを適用することなく、100以上のヘルパー関数とその他の便利な機能を提供するJSライブラリです。 特に、
map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone
などが利用できます。
Underscoreの使用に関する推奨事項 ：プログラマーとしての生活をすぐに楽にする単一のJSファイルが必要な場合。
GitHub ： https : //github.com/jashkenas/underscore
オフサイト ： underscorejs.org
lodashを使用するための推奨事項 ：AMDおよびコミュニティが作成したプラグインのサポートが改善された、アンダースコアのモジュール型でわずかに高速なバージョンが必要な場合。
GitHub ： https : //github.com/lodash/lodash
オフサイト ： lodash.com
D3.js
Webアプリケーションの標準要件の1つは、データの視覚化とグラフ化です。 そしてこの分野では、事実上の標準はD3.jsです。 これはGithubで最も人気のあるプロジェクトの1つであり、多くの企業で使用されています。 D3は、チャート、グラフ、その他の種類の視覚化を構築するためのライブラリ群の基盤です。
D3では、任意のソースからデータを取得して、DOM / SVG / CSSに変換できます。 このプロジェクトは最新のWeb標準をサポートしているため、FlashやSilverlightなどの独自の形式に遭遇する可能性について心配する必要はありません。
使用に関する推奨事項 ：あらゆる種類の視覚化。
GitHub ： https : //github.com/mbostock/d3
オフサイト ： d3js.org
Babylon.js
最新のWeb標準に完全に準拠したクロスブラウザゲームを作成したいですか？ 次に、WebGLとJavaScriptに基づく3次元エンジンであるBabylon.jsを見てください。 リアルな物理学、サウンド、パーティクルシステム、その他の美しさを備えた信じられないほどの高品質のゲームを作成できます。
使用に関する推奨事項 ：ゲームや複雑な3Dシーンを作成する場合。
GitHub ： https : //github.com/BabylonJS/Babylon.js
オフサイト ： babylonjs.com
Three.js
これはかなりコンパクトな3Dライブラリであり、本格的なゲームエンジンを使用せずに、HTML5キャンバス（キャンバス）、SVG、およびWebGLで3Dシーンをレンダリングできます。 Three.jsは非常に使いやすく、オフサイトではさまざまな使用方法を確認できます。
使用に関する推奨事項 ：キャンバスに表示できるシンプルな3Dビジュアライゼーションが必要な場合。
GitHub ： https : //github.com/mrdoob/three.js/
オフサイト ： threejs.org
モカとチャイ
JavaScriptコードのテストは、長い間非常に面倒です。 他の言語のコードのテストについても同じことが言えますが。 しかし、すべての開発者は定期的にテストに参加する必要がありますが、私たちの多くはこのアクティビティを好まないため回避しています。 ただし、2つの詩的なライブラリ、MochaとChaiは、テストプロセスに対する嫌悪を克服するのに役立ちます。
Mochaは、ノードモジュールまたはブラウザーアプリケーションで非同期コードを簡単にテストできるJSフレームワークです。 Mochaのテストでは、例外トレースの品質が向上し、連続して実行できます。
ChaiはTDD / BDDアサーションライブラリです。Mochaで使用すると、テストをシンプルで読みやすい形式で表現できます。
使用に関する推奨事項 ：常に！ コードをテストし、世界を少し良くします。
GitHub Mocha ： https : //github.com/mochajs/mocha
オフサイト モカ ： mochajs.org
GitHub Chai ： https : //github.com/chaijs/chai
オフサイト チャイ ： chaijs.com
カルマ
MochaとChaiがリストに登場したため、ここにテストランナーを含める必要があります。これにより、継続的な統合テストが可能になります。 Karmaは、異なるブラウザーでのMochaおよびChaiテストの作業を自動化するのに役立ちます。
すべてのブラウザがどのプラットフォームでも動作するわけではないため、テストプロセスを促進する無料のツールに注意してください。
- ブラウザのスクリーンショット
- OS Xを実行していて、EdgeまたはIEをテストする場合、 このツールを使用できます 。
使用に関する推奨事項 ：アプリケーションの包括的なテスト、およびすべてのブラウザーでテストに合格することを確認する場合。
GitHub ： https : //github.com/karma-runner/karma
オフサイト ： karma-runner.github.io
Phantomjs
テスト実行中にブラウザー全体を起動するのはあまり経済的ではありません。これにより、メモリーとプロセッサーのリソースが過剰になります。 PhantomJSを使用すると、Safariで使用されるエンジンであるWebKitのヘッドレスバージョンを実行でき、以前のバージョンではChromeでも使用できます（今日ではBlinkを使用しています）。 JavaScript APIから、テストの実行、スクリーンショットの作成、ネットワークの監視、ページの表示の自動化を行うことができます。
使用に関する推奨事項 ：多数のテストを実行し、ページ操作を行い、ネットワーク要求を監視する必要がある場合。
GitHub ： https : //github.com/ariya/phantomjs
オフサイト ： phantomjs.org
グラントとガルプ
サイトを実稼働環境にロールアウトする準備として、通常、JavaScriptとCSSの縮小を使用したパフォーマンスの改善、CoffeeScript / TypeScriptのコンパイル、ユニットテストなどのタスクを実行する必要があります。 確かに、運用環境での展開のためにサイトを準備するツールのパッケージが既に手元にあります。 ただし、そうでない場合は、GruntまたはGulpをタスクランナーとして推奨できます。 両方について、無数のプラグインが作成されており、展開の準備としてサイトで何でもできるようになっています。
Gruntの使用に関する推奨事項 ：構成ファイルを作成することを好み、タスクエグゼキューターが中間ファイルを生成できることを気にしない場合。
GitHub Grunt ： https : //github.com/gruntjs/grunt
Grunt Offsite ： gruntjs.com
Gulpの使用に関する推奨事項 ：構成する代わりにコードを作成することを好み、Node.jsストリームを使用してパフォーマンスを向上させたい場合。
GitHub Gulp ： github.com/gulpjs/gulp
Gulp Offsite ： gulpjs.com
バベル
言語としてのJavaScriptは急速に発展しています。 たとえば、 ECMAScript 2015は昨年の夏にリリースされ、そのコア機能の多くはすでに多くのブラウザーに実装されています。 ECMAScript 2015との互換性の問題に興味がある場合は、 kangaxの表を調べることができます。 Edge、Chrome、Firefoxの最新バージョンはほぼ完全に互換性があることに注意してください。
しかし、私たちは理想的な世界に住んでいません。 開発者は、最新かつ最高のJavaScript機能をサポートしない古いバージョンのブラウザーをサポートする必要があります。 そして、ウェブとコードベースを改善したいと考えています。 これは、SS標準の最新機能をES5に変換するJSコンパイラであるBabelを使用して実行できます。 これにより、IE 9などの非常に古いブラウザーでも実行できます。Reactでの開発を促進するBabel向けに記述されたプラグインがいくつかあり、仕様で説明されていない機能（ES7など）を使用します。
使用に関する推奨事項 ：最も高度なJavaScript機能を使用したいが、古いブラウザーのサポートを維持する必要がある場合。
GitHub ： https : //github.com/babel/babel
オフサイト ： babeljs.io
作詞家：Rami Sayar
トップJavaScriptフレームワーク、ライブラリ、ツール、およびそれらを使用するタイミング