[[413833]]

多くの JavaScript フレームワークは、その利点と主な機能に基づいてさらに細分化されます。

約10年前、JavaScriptコミュニティはJavaScriptフレームワーク間の熾烈な争いを目の当たりにし始めました。この記事では、これらのフレームワークの中でも特に有名なものをいくつか紹介します。これらはすべてオープンソースのJavaScriptプロジェクトであるため、オープンソースライセンスの下で自由に利用でき、ソースコードやコミュニティに貢献することも可能です。

ただし、始める前に、JavaScript 開発者がフレームワークについて説明するときによく使用する用語をいくつか理解しておくと、以降の説明に非常に役立ちます。

一般的な用語について説明したので、次はオープンソースの JavaScript フレームワークをいくつか見ていきましょう。

これを説明するために、npm trends による、各フレームワークの NPM パッケージのダウンロードに関する公開データを以下に示します。

フレームワークのダウンロードグラフ

リアクトJS

反応ページ

Facebookによって開発されたReactJSは、Angularよりも後にリリースされたにもかかわらず、現在では明らかにJavaScriptフレームワークのリーダーです。Reactは仮想DOMの概念を導入しています。これは抽象化されたコピーであり、開発者はプロジェクト全体を書き直すことなく、フレームワーク内で必要なReactJSの機能のみを使用することができます。さらに、Reactの活発なオープンソースコミュニティは、その成長の大きな原動力であることは間違いありません。Reactの主な利点をいくつかご紹介します。

• 学習曲線が緩やか - React開発者はJavaScriptコード全体を書き直すことなく、Reactコンポーネントを簡単に作成できます。ReactJSのメリットとプログラミングの容易化については、ReactJSのホームページをご覧ください。
• 高度に最適化されたパフォーマンス - Reactの仮想DOM実装をはじめとする機能により、アプリケーションのレンダリングパフォーマンスが向上します。パフォーマンスベンチマークやアプリケーションパフォーマンスの測定方法については、ReactJSの説明をご覧ください。
• 優れたサポート ツール (Redux、Thunk、Reselect) は、適切に構造化されたデバッグ可能なコードを構築するための最適なツールです。
• 一方向データバインディング - このモデルは、オーナーモジュールから子モジュールへのみフローするReachフローを採​​用しているため、コード内の因果関係の追跡がはるかにシンプルになります。詳しくは、ReactJSのデータバインディングのページをご覧ください。

ReactJSは誰が使っているのでしょうか？FacebookはReactが発明されて以来、企業ホームページの構築にReactを多用しており、Instagramは完全にReactJSライブラリで構築されていると報じられています。ニューヨーク・タイムズ、Netflix、Khan Academyといった有名企業も、テクノロジースタックにReactJSを使用していることに驚かれるかもしれません。

さらに驚くべきは、ReactJS開発者の求人機会です。Stack Overflowの以下の調査結果からもわかるように、オープンソースプロジェクトに携わって報酬を得られるのです。すごいですね！

Stackoverflowの調査によると、ReactJS開発者の需要は非常に高いことが示されています – 出典: 2017年開発者採用動向 – Stackoverflowブログ

ReactJSのGitHubには現在、13,000件以上のコミットと1,377人の貢献者がいます。これはMITライセンスに基づくオープンソースプロジェクトです。

React GitHubページ

角度

Angularホームページ

開発者数で言えば、Reactは現在JavaScriptフレームワークのリーダーと言えるかもしれませんが、Angularも僅差で追っています。実際、オープンソース開発者やスタートアップ企業はReactを好む傾向があり、大企業はAngularを好む傾向があります（以下にいくつかの例を挙げます）。その主な理由は、Angularはより複雑ではあるものの、その統一性と一貫性が大規模プロジェクトに適しているためです。例えば、私はキャリアを通じてAngularとReactの両方に携わってきましたが、大企業は一般的にAngularの厳格な構造を強みと捉えていることに気づきました。Angularのその他の主なメリットは次のとおりです。

• 優れた設計のコマンドラインツール - Angularには優れたコマンドラインツール（CLI）があり、Angularを使った開発を簡単に開始できます。ReactJSはコマンドラインツールやその他のツールを提供しており、Angularには広範なサポートと優れたドキュメントが用意されています。詳細については、こちらのページをご覧ください。
• 一方向データ バインディング - React と同様に、一方向データ バインディング モデルにより、フレームワークが望ましくない副作用の影響を受けにくくなります。
• TypeScriptのサポート強化 - AngularはTypeScriptとの優れた整合性を備えています。これは本質的にJavaScriptの型強制の拡張です。また、JavaScriptへのトランスパイルも可能で、型強制はエラーコードを削減する優れた方法です。

YouTube、Netflix、IBM、Walmartといった人気ウェブサイトは、いずれも自社のアプリケーションにAngularを採用しています。私自身もAngularを独学で習得し、フロントエンドJavaScript開発を学び始めました。Angularを使った個人プロジェクトや仕事上のプロジェクトに数多く参加しましたが、当時はAngular 1.x、通称AngularJSの時代でした。Googleがバージョン2.0へのアップグレードを決定した際、フレームワークは全面的に刷新され、Angularとなりました。新しいAngularは以前のAngularJSを完全に刷新したもので、新しい開発者が加わる一方で、初期の開発者の一部は去っていきました。

本稿執筆時点で、AngularのGitHubページには17,781件のコミットと1,133人の貢献者がいます。また、MITライセンスに基づくオープンソースプロジェクトであるため、プロジェクトや貢献活動に自由にご利用いただけます。

Angular GitHubページ

VueJS

Vue JS ページ

VueJSは非常に興味深いフレームワークです。JavaScriptフレームワークとしては新参者ですが、ここ数年で人気が急上昇しています。VueJSは、かつてAngularプロジェクトに携わっていたGoogleのエンジニア、Evan You氏によって開発されました。このフレームワークは非常に人気が高く、多くのフロントエンドエンジニアが他のJavaScriptフレームワークよりもVueJSを好んでいます。次のグラフは、このフレームワークが時間の経過とともに注目を集めてきた速度を示しています。

Vue JS 人気グラフ

VueJS の主な利点は次のとおりです。

• より簡単な学習曲線 – Angular や React と比較して、VueJS の学習曲線はよりスムーズであると多くのフロントエンド開発者は考えています。
• サイズが小さい – AngularやReactと比較すると、VueJSは比較的軽量です。公式ドキュメントによると、VueJSのサイズは約30KBであるのに対し、Angularでは65KBを超えるプロジェクトが生成されます。
• 簡潔なドキュメント – VueJS には包括的で明確なドキュメントがあります。公式ドキュメントをご参照ください。

VueJS GitHub リポジトリを見ると、プロジェクトには 3,099 件のコミットと 239 人の貢献者がいることがわかります。

Vue JS GitHub ページ

メテオJS

流星のページ

MeteorJSは無料かつオープンソースの同型フレームワークです。つまり、Node.jsと同様に、クライアントサイドとサーバーサイドの両方のJavaScriptを実行できます。Meteorは、Angular、React、Vue、Svelteなどの他の一般的なフロントエンドフレームワークと組み合わせて使用​​できます。

Meteorは、Qualcomm、Mazda、IKEAなどの企業や、Dispatch、Rocket.Chatなどのアプリケーションで使用されています。その他の事例は公式ウェブサイトでご覧いただけます。

Meteorのケーススタディ

Meteor の主な機能は次のとおりです。

• オンラインデータ – サーバーはHTMLの代わりにデータを送信し、クライアントはそれをレンダリングします。オンラインデータとは、主にページの読み込み時にMeteorがWebSocket接続を介してサーバーに接続し、その接続を介して必要なデータを送信することを指します。
• すべてを JavaScript で開発します。クライアント側アプリケーション、アプリケーション サービス、Web ページ、モバイル インターフェイスはすべて JavaScript で設計できます。
• Meteorは主要なフレームワークのほとんどをサポートしており、Angular、React、Vueと統合できます。そのため、ReactやAngularなどのお気に入りのフレームワークを使いながらも、Meteorの優れた機能を活用できます。

現在、MeteorのGitHubには22,804件のコミットと428人の貢献者がいます。これはオープンソースプロジェクトとしては非常に多い数字です。

Meteor GitHubページ

エンバーJS

EmberJS ページ

EmberJSは、Model-View-ViewModel（MVVM）パターンに基づくオープンソースのJavaScriptフレームワークです。EmberJSを初めて耳にする方は、その活用企業の多さに驚かれることでしょう。Apple Music、Square、Discourse、Groupon、LinkedIn、Twitch、Nordstorm、Chipotleなど、多くの企業がEmberJSをテクノロジースタックの一部として活用しています。EmberJSを使用しているすべてのアプリケーションとクライアントについては、EmberJSの公式ページをご覧ください。

Ember はこれまで説明した他のフレームワークと同様の利点を提供しますが、独自の違いもいくつかあります。

• 設定よりも規約を重視する—Emberは命名規則を標準化し、結果のコードを自動生成します。このアプローチは習得に時間がかかりますが、プログラマーがベストプラクティスに従うことを保証します。
• Ember の成熟したテンプレート メカニズムは、DOM を考慮せずに直接テキスト操作によって HTML ドキュメントを直接構築します。

多くのアプリケーションで使用されているフレームワークであるEmberのGitHubページによると、予想通り、プロジェクトには19,808件のコミットと785人の貢献者がいます。これは非常に大きな数字です！

EmberJS GitHubページ

ノックアウトJS

KnockoutJSページ

KnockoutJSは、テンプレート・ビュー・ビューモデル（MVVM）パターンとテンプレートを使用する、独立したオープンソースのJavaScriptフレームワークです。Angular、React、Vueなどのフレームワークに比べると知名度は低いかもしれませんが、開発者コミュニティでは活発に活動しており、以下の機能を提供しています。

• 宣言型バインディング — Knockoutの宣言型バインディングシステムは、データをUIにリンクするためのシンプルで強力な方法を提供します。シンプルなデータプロパティのバインディングや一方向バインディングの使用も簡単です。詳しくは、KnockoutJSの公式ドキュメントページをご覧ください。
• UI の自動更新。
• 依存関係追跡テンプレート。

KnockoutのGitHubページには、約1,766件のコミットと81人の貢献者がいます。これらの数字は他のフレームワークと比べるとそれほど大きくありませんが、プロジェクトは依然として活発にメンテナンスされています。

ノックアウト GitHub ページ

バックボーンJS

BackboneJSページ

BackboneJS は、RESTful JSON インターフェイスを備えたフレームワークです。モデル・ビュー・プレゼンターモデル・ビュー・プレゼンター(MVP) 設計パラダイムに基づいた軽量 JavaScript フレームワーク。

このフレームワークは、Airbnb、Hulu、SoundCloud、Trelloなどで使用されていると報告されています。これらのケーススタディはすべてBackboneのページでご覧いただけます。

BackboneJS の GitHub ページには、3,386 件のコミットと 289 人の貢献者が示されています。

BackboneJS GitHub ページ

スヴェルト

スリムなページ

Svelteは、フレームワークへの参照を組み込むのではなく、DOMを操作するコードを生成するオープンソースのJavaScriptフレームワークです。実行時ではなくビルド時にアプリケーションをJavaScriptに変換するこのプロセスにより、パフォーマンスがわずかに向上することがあります。

Svelte の GitHub ページを見ると、執筆時点でプロジェクトには 5,729 件のコミットと 296 人の貢献者がいることがわかります。

Svelte GitHubページ

オーレリアJS

アウレリアのページ

最後に、Aureliaをご紹介します。Aureliaは、最新のJavaScriptモジュールをまとめたフロントエンドJavaScriptフレームワークです。Aureliaには、以下のような興味深い機能があります。

• 高速レンダリング – Aurelia は、現在利用可能な他のどのフレームワークよりも高速にレンダリングできると主張しています。
• 一方向のデータフロー - Aurelia は、観察ベースのバインディング システムを使用して、モデルからビューにデータをプッシュします。
• ネイティブ JavaScript アーキテクチャを使用する - ネイティブ JavaScript を使用して Web サイトのすべてのコンポーネントを構築できます。

Aurelia の GitHub ページを見ると、執筆時点でプロジェクトには 788 件のコミットと 96 人の貢献者がいることがわかります。

Aurelia GitHubページ

これはJavaScriptフレームワークの世界を探索しているときに発見したものです。他に興味深いフレームワークを見逃しているでしょうか？