JavaScriptの世界は、数十のツール、ライブラリ、フレームワークを備えた豊富な環境です。しかし、多くのオプションがあるため、多くの混乱が生じます。本当に両刃の剣です。

創造性と実験の余地は十分にありますが、どのライブラリまたはフレームワークを選択すればよいかわからない場合があります。

選択したフロントエンドフレームワークは、長期的にはプロジェクトを成功または失敗させる可能性があります。

この記事では、最も人気のあるJavaScriptフレームワークのいくつかと、それらが互いにどのように重なり合うかを見ていきます。これらのフレームワークに関する5つの異なる視点を検討します。これにより、通常、次のJavaScriptフレームワークに関する決定を容易にするプロセスが可能になります。

これらの人気のあるJavaScriptフレームワークのいずれかを選択する場合でも、より難解なものを選択する場合でも、これらの各側面を考慮する必要があります。

学習リソースの可用性

これは明らかですが、見過ごされがちです。一部のフレームワークの豪華なホームページが目を引くかもしれませんが、開始するには、退屈で乾いたドキュメントに加えて、いくつかの追加のコース、本、チュートリアル、および記事が必要です。

印象的なフレームワークを作成することは1つのことであり、その背後にあるコアアイデアを伝えることは異なります。実際、コーチングを専門とするプロの開発者はたくさんいます。適切に設計された学習リソースは、学習曲線を劇的に短縮します。

以前に経験した信頼できる著者からのリソースを探します。結局、それはあなたの時間の価値があるでしょう。何か役に立つものを見つけるのに苦労している場合は、注意してください。学習しようとしているフレームワークは新しいか、コミュニティでまだ採用されていない可能性があります。

ドキュメントだけでは不十分だと述べましたが、これには例外があります。たとえば、EmberJSには 素晴らしいドキュメント 。主な機能とユースケースは、あちこちの一般的な例で非常によく説明されています。残念ながら、ドキュメントに加えて、リソースブック、ビデオコース、またはその他の資料がほとんど残っていません。

一方で、のためのリソースがたくさんあります Angular Y React 。ほとんどすべてのフロントエンド指向の教育用Webサイトには、ビデオコースや本全体など、1つか2つの記事が掲載されています。

Vueの男は底を打った-彼は良いドキュメントを持っていて、あなたが選ぶことができるいくつかの良いコースがあります。

たとえば、Aureliaのリソースはほとんどありません。あなたへの唯一の希望は文書化と運です。

SQLクエリのパフォーマンスチューニングのヒント

私はオプションがあることを好みます。

素晴らしい本やコースを読んだとしても、さまざまなリソースに触れることで新しいことを学ぶ可能性があります。このトピックに精通している場合は、フリックして、まだ完全に明確になっていない可能性のある領域を検索することができます。

残念ながら、選択肢が限られている場合、この戦略は機能しません。これにより、次のポイントに進みます。

人気

エキゾチックなことを学ぶことに誇りを持っていますが、これをビジネスの観点から見ると、同じではありません。あなたの会社または顧客は、おそらく、戦闘でテストされた一連のツールを使用することを好みます。

これには多くの理由があります。フレームワークがそれほど人気が​​ない場合、それはそれを専門とする開発者がいることを意味します。プロジェクトを辞めたり、新しい仕事を見つけたりするとどうなりますか？あなたの雇用主はあなたが使用したフレームワークを知っている開発者を探すことになります。

このプロセスは、ビジネスにとって大きな負担になる可能性があります。プロジェクトに固執して成長しても同じことが言えます。現在、雇用主は開発をスピードアップするためにより多くの開発者を必要としています。

人気があり広く使用されているフレームワークを選択する理由は他にもあります。何か問題に悩まされていて、助けを求めることができるコミュニティが本当にない場合はどうなりますか？ドキュメントを持っているのはあなただけなので、多くの時間を無駄にする可能性があります。

その上、あなたはあなたのキャリアの中でより魅力的な将来の機会について考えたいと思います。あなたが人気のあるものを専門とし、あなた自身を非常に良くするなら、あなたのための多くのプロジェクトがあるでしょう。

ここでの明らかなリーダーはAngularとReactです。

ほとんどのフロントエンド関連の求人情報には、どちらか一方が必要です。それらはそれぞれグーグルとフェイスブックによって承認されているので、雇用主は彼らの選択について「安全」だと感じています。

会社やクライアントのフレームワークの選択があなた次第ではない場合があります。多分それは前の従業員かチームの他の誰かによって行われた。ほとんどの場合、角度があるか反応性です。現在、EmberやVueなどの他のオプションがあります。ただし、それらを使用している企業を慎重に探す必要があります。

プロジェクトがGitHubやその他の場所でどの程度うまく機能しているかをすばやく分析することで、フレームワークの人気を判断できます。この記事の執筆時点で収集された統計は次のとおりです。

	Angular 2	React	人間	見る
GitHubのスター	26,924	73,530	18,154	63,438
GitHubの寄稿者	495	1044	679	122
StackOverflowのタグ付き質問	66,152	54,158	21,651	8,598

これらのライブラリは、人気のある選択肢であることを証明するのに十分長い間存在していますが、本当に新しいものを試している場合は、同様の統計が決心するのに役立ちます。

C +を学ぶ方法

AngularまたはReactだけを学ぶことは、あなたのキャリアの中でこれまでのところしか得られません。もちろん、多くの機会がありますが、他のフレームワークが存在する理由があります。暇なときにそれらについて学び、時々いくつかの実験をしてみてください。実際のプロジェクトでそれらを使用したことがない場合でも、日常の開発作業に役立つ貴重な洞察を得ることができます。

主な機能

少し技術的になりましょう。

最初に、コーディングを開始するときに適切な期待を抱くために、フレームワークの主な機能について簡単に説明します。これを行うには、ドキュメントをスキャンします。このフレームワークが一般的に何であるかについての考えを持っている必要があります。それは単なるディスプレイレイヤーですか、完全に開発されたものですか、それともその中間ですか？

他のフレームワークでの豊富な経験がある場合、このプロセスは簡単で高速です。ドキュメントで次のトピックを探してください：テンプレートの作成、状態管理、HTTP通信、フォームの処理と検証、およびルーティング。これらは、開発者として日常的に行うことです。これらのすべてがコアフレームワークで提示されるわけではないか、特定の問題に対して異なるアプローチが存在する可能性があります。

人気のあるオプションについて簡単に触れてみましょう。

まずは React Y 見る 。それらは実際にはフレームワークではありません。これらは、アプリケーションのビューレイヤーを表すだけです。これは、HTTP通信、フォーム検証など、他のすべての部分があなた次第であることを意味します。

さっきも言ったように、両刃の剣かもしれません。最終的には、独自のカスタムフレームワークを構築することになります。どちらにも、最も一般的な問題の解決策を提供するライブラリのエコシステムがありますが、一般的な構造はプロジェクトごとに異なります。

ReactのJSXはいつも私をうんざりさせました。私はそれに慣れなければなりませんでした。ただし、特にAngularを使用している場合は、Vueテンプレートの作成は非常に便利です。

一方、Emberにはほとんどすべてのものがあります。驚いたことに、Emberコアは高度なフォーム処理を提供していません。エントリーヘルパーが数人いるだけで、それだけです。それは非常に頑固で、独自のデータレイヤーさえ持っています。すべては「エンバーウェイ」で行われなければなりません。

グーグルプレイクレジットカードハック

他のフレームワークまたはJavaScript全般のバックグラウンドがある場合、Emberがそれらを使用していることに不満を感じるかもしれません。 独自のオブジェクトモデル 。 ES2015標準クラスは、ドキュメントに示されているように、広く使用されていません。値をプロパティに直接割り当てると、Emberがそれについて不平を言うことがあります。

他のフレームワークと大きく異なるもう1つの点は、 マンデータ 。これは、Emberアプリケーションのデータレイヤーです。フロントエンドの一種のORMと考えることができます。モデルを作成し、それらの間の関係をマップします。

今あなたのサーバーが使用する場合 API JSON （これはJSON APIを実装するための仕様です）、Emberは適切な場所にありますが、残念ながらほとんどのサーバーはそうではありません。したがって、カスタムシリアライザーとアダプターを作成する必要があります。ただし、Emberの方法で作業を行うと、非常に生産的になる可能性があります。学習曲線が急です。

Angular2は機能豊富なフレームワークです。 Emberのような多くのモジュールが付属しているので、箱から出してすぐに使えるツールがたくさんあります。ただし、Angularは大規模なアプリケーションを対象としているため、 TypeScriptを促進します 、試行する前に抵抗を引き起こす可能性があります。

もう1つの注目すべき点は、Rxライブラリのオブザーバブルを多用していることです。これは非常に便利です。ほぼすべてのものを観察可能なものとしてレンダリングし、マップ、フィルターなどの高レベルの操作を適用できます。 LodashまたはUnderscoreを使用した場合、Rxはステロイドに似ています。

この記事で説明している4つのフレームワークの主な機能の概要は次のとおりです。

	Angular 2	React	人間	見る
表示/テンプレート
ルーター
フォーム処理
フォームの検証
HTTP通信

簡単に要約したこれらの機能はすべて、効果的に使用するために両端でキャンドルを燃やす必要がある場合は役に立ちません。これが次のポイントです。

使いやすさ

この時点で、選択したフレームワークにまだ熱意がある場合は、次のステップは手を汚すことです。

おそらく、フレームワークはあなたのトレーニングのためにあなたにとって良いオプションです。多分それは少し異なり、何らかの方法であなたに挑戦します。あなたはまだ知りません、そしてあなたがそれを自分で試すまで、読書や観察のチュートリアルの量はあなたを助けません。

フレームワークに慣れるための最良の方法は、いくつかのミニプロジェクトでそれを使用することです。これにより、特定のフレームワークを使用して、上記の日常的な問題を解決する機会が得られます。

プロジェクトに取り組むときは、時間をかけて、生産性が高いかどうかを考えてください。望ましい結果を達成するのはどれくらい簡単ですか？外部ライブラリを検索する必要がありますか？コミュニティからのプラグインが必要かもしれません。フレームワークのコンテキスト内に従来の構造またはガイドラインはありますか？たぶん、開発プロセスをスピードアップするためのCLIがあります。このステップでは、基本的な経験を集めて、このフレームワークを将来のプロジェクトに使用したり、既存のプロジェクトから移行したりするのがどのようなものかを考えることができます。

C ++を学ぶ場所

Emberは、少なくともそのメインユーザーにとって、非常に生産的なフレームワークと見なされています。が付属しています CLI 、これは本当に役立ちます。独自のテストセットを使用して、ストリーム、コントローラー、コンポーネント、およびモデルを構築できます。これらすべてを手動で行うのは面倒な作業です。新しいプロジェクトを生成することも可能です。基本的なフォルダー構造を作成し、必要なパッケージをインストールし、ツールをビルドし、環境をテストします。その程度までCLIを使用したことがない場合は、非常に満足できます。しかし、前に述べたように、Emberは非常に頑固です。そのすべての良さにもかかわらず、一般的なタスクを実行しようとするとイライラするかもしれません。

今ReactとVueのために、彼らはある種のCLIを持っています、 create-react-app Y vue-cli 。しかし、いくつかのオプションを備えたスタータープロジェクトを生成することを除けば、EmberやAngularと比較してあまり提供されていません。どちらもビューレイヤーを表しているので理解できます。カスタムワークフロー、実験、またはさまざまなプロジェクト間の構造が好きな場合は、適切な場所にいます。一部の開発者にとって、柔軟性はReactまたはVueの使用に本質的に伴う鍵です。

Angular4には CLI エンバーのように。コンポーネント、ポリシー、サービスなどを生成できます。また、アプリケーションの初期構造も生成されるため、製品についてのみ心配する必要があります。テスト環境は非常に優れており、生成された各アプリケーションで、テストベッドは（文字通り）その近くにあります。その上、TypeScriptは生産性を大幅に向上させる可能性があります。これが理由です：

このような行のコードを何回見つけましたか...

function doSomething(someData) { // do something }

…そして、一体何が「someData」であるか、それが持つべきプロパティ、それが提供すべき機能、そしてその振る舞いが何であるか疑問に思いました。 TypeScriptを使用して、タイプを定義し、適切なデータを待ちます。 TypeScriptをサポートするIDEを使用している場合は、さらに先に進むことができます。瞬く間にアプリケーションのさまざまな部分を探索できます。

IDEについては説明していませんが、最も一般的なフレームワークには、開発を非常に簡単にするプラグインがいくつかあります。 WebStorm たとえば、Angular、React、Vueのサポートが組み込まれています。

統合のしやすさ（他のライブラリとの統合）

大事なことを言い忘れましたが、これはユーザビリティの一部と見なすことができますが、それ自体のセクションに値するほど重要です。

選択したフレームワークの機能がどれほど豊富であっても、追加のツールが必要な場合に問題が発生する可能性があります。 DOM操作、データ処理、時間フォーマット、リッチテキスト編集など、1つの問題に焦点を当てた優れたライブラリがあります。それらの1つを統合し、毎回時間を費やそうとする場合、おそらくそれは最善の選択肢ではありません。

これをテストするのはとても簡単です。特定のライブラリが必要な架空のシナリオをすばやく見つけることができます。あなたの過去のプロジェクトを見てください。どのツールをどのようなシナリオで使用していますか？おそらく、あなたは再び同じ状況に陥り、そのための準備をしたいと思うか、少なくとも期待を抱くでしょう。

すべてのライブラリがTypeScriptをサポートしているわけではありません。 Angularはそれを大いに使用しているので、TypeScriptの優れた点のいくつかはそのようなライブラリを使用することによって失われる可能性があります。もちろん、解決策を見つけることはできますが、それはもう少し複雑です。 Angularの人気により、手順をに埋め込むことができます ライブラリページ自体 。

VueとReactの場合、ほとんどすべての責任があり、他のライブラリの使用も例外ではありません。 Webpackまたは同様のビルドツールを使用している場合は、NPMを介してインストールされたライブラリに直接クエリを実行できます。特にUIロジックも含まれている場合、Vueがコミュニティプラグインを使用するのは少し面倒です。

エンバーは持っています EmberObserver 、コミュニティプラグインのWebサイトです。それらのそれぞれは、0から10のスケールで採点されます。必要なものを探すのに最適な場所です。 Lodash、Rx、Ramdaなどのお気に入りのライブラリの名前を入力すると、関連する単純なラッパープラグインが見つかり、書き換えが完了します。もちろんリポジトリもあります 素晴らしい反応 Y 素晴らしい眺め 関連するリソースを収集します。ライブラリを含みますが、EmberObserverが特に便利であることがわかりました。

JavaScriptフレームワークにコミットする

正しいJavaScriptフレームワークを選択することは、Webプロジェクトを成功させるための最も重要なステップの1つです。小規模なプロジェクトでも大規模なプロジェクトでも、単独で作業する場合でもチームで作業する場合でも、これらの詳細はそれぞれ、プロジェクトに最適なフレームワーク（および優先するフレームワークが少ない）を決定する上で重要な役割を果たします。

主な機能と使いやすさについては、開発者の生産性にさまざまな影響を与えるポイントを挙げました。使いやすさは、あなたの経験や経歴、そしてあなたが働いている会社や組織に大きく依存するため、特に注意が必要です。

時間の経過とともに、この記事で説明したフレームワークは進化し、あなたの見解が変わり、それらが適しているプロジェクトが変わる可能性がありますが、この記事では、これらの各フレームワークが最適に機能する場所についての一般的なアイデアを提供する必要があります。