最適なフロントエンドフレームワークを選択する方法

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

創造性と実験のためのスペースはたくさんありますが、どのライブラリまたはフレームワークを選択すればよいかわからない場合があります。

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

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

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

学習リソースの可用性

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

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

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

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

一方、AngularとReactには豊富なリソースがあります。 ほとんどすべてのフロントエンド指向の教育ウェブサイトには、それらについての記事が1つか2つあり、おそらく完全なビデオコースや本さえあります。

Vueの種類は中途半端です：それは良いドキュメントを持っていて、あなたが選ぶことができるいくつかの素晴らしいコースがあります。

たとえば、Aureliaにはほとんどリソースがありません。 あなたへの唯一の希望は、ドキュメントと運です。

私は選択肢があることを好みます。

すばらしい本やコースを読んだとしても、さまざまなリソースに触れることで、何か新しいことを学ぶ可能性があります。 あなたが主題に精通しているなら、しばしばあなたはざっと目を通し、まだ完全に明確ではない可能性のある領域を探すことができます。

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

人気

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

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

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

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

それに加えて、あなたは自分のキャリアにおける将来のより魅力的な機会について考えたいと思っています。 あなたが人気のあるものを専門にしてそれを本当に上手にすると、あなたのためにたくさんのプロジェクトがそこにあるでしょう。

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

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

時々、あなたの会社やクライアントのためのフレームワークの選択はあなた次第ではありません。 前の従業員またはチームの他の人によって作成された可能性があります。 AngularまたはReactになる可能性があります。 現在、EmberやVueのような他のオプションがあります。 しかし、それらを使用している企業を慎重に探す必要があります。

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

これらのライブラリは、人気のあるオプションとしての地位を証明するのに十分長い間存在していましたが、本当に新しいことを試みている場合は、それらの同様の統計が選択に役立つ可能性があります。

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

コア機能

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

最初に、フレームワークのコア機能の概要を簡単に説明して、コーディングを開始するときに十分な期待を持ってください。 そのためには、ドキュメントをスキャンしてください。 このフレームワークが一般的に何であるかを理解する必要があります。 それはビューレイヤーのみですか、本格的ですか、それともその中間ですか？

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

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

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

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

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

一方、Emberにはほとんどすべてのものがあります。 驚いたことに、Emberのコアは高度なフォーム処理を提供していません。 いくつかの入力ヘルパーがあり、それだけです。 それは非常に意見があり、独自のデータ層さえ持っています。 すべてが「残り火の方法」で行われる必要があります。

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

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

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

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

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

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

簡単に概説したこれらの機能はすべて、効果的に使用するために両端でろうそくを燃やす必要がある場合は価値がありません。これが次のポイントです。

使いやすさ

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

たぶん、フレームワークはあなたのバックグラウンドのためにあなたにぴったりです。 多分それは少し異なり、いくつかの点であなたに挑戦します。 あなたはまだ知りません、そしてあなたがそれを自分で試すまで、チュートリアルを読んだり見たりする量は役に立ちません。

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

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

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

現在、ReactとVueには、ある種のCLI、create-react-app、vue-cliがあります。 ただし、いくつかのオプションを使用して初期プロジェクトを生成する以外に、EmberやAngularと比較してそれほど多くは提供されません。 どちらもビューレイヤーを表しているので理解できます。 カスタマイズされたワークフロー、実験、またはプロジェクトごとに異なる構造が好きな場合は、良い場所にいます。 一部の開発者にとって、柔軟性はReactまたはVueの使用に本質的に伴う鍵です。

Angular 4には、Emberと同様にCLIが付属しています。 コンポーネント、ディレクティブ、サービスなどを生成できます。また、アプリケーションの初期構造も生成されるため、製品についてのみ心配する必要があります。 テスト環境は本当に素晴らしいです。生成されたすべてのアプリで、テストスイートは（文字通り）その近くにあります。 それに加えて、TypeScriptは本当の生産性の向上をもたらすかもしれません。 理由は次のとおりです。

このような行のコードに何度遭遇したことがありますか…

 function doSomething(someData) { // do something }

…そして、 someDataとは一体何なのか、どのようなプロパティを持つべきか、どのような機能を提供するべきか、そしてそれらの振る舞いは何か疑問に思いました。 TypeScriptを使用して、タイプを定義し、適切なデータを期待します。 TypeScriptをサポートするIDEを使用すると、さらに先に進むことができます。 簡単にアプリのさまざまな部分を探索できます。

IDEについては触れていませんが、人気のあるフレームワークのほとんどには、開発を非常に簡単にするプラグインがいくつかあります。 たとえば、WebStormには、Angular、React、およびVueのサポートが組み込まれています。

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

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

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

これをテストするのはとても簡単です。 特定のライブラリが必要な架空のシナリオをすぐに思いつくことができます。 あなたの過去のプロジェクトを見てください。 どのツールをどのようなシナリオで使用していますか？ もう一度同じ状況に遭遇し、それに備えたい、または少なくとも期待を持っている可能性があります。

そこにあるすべてのライブラリがTypeScriptをサポートしているわけではありません。 Angularはこれを頻繁に使用するため、このようなライブラリを使用していると、TypeScriptの優れた機能の一部が失われる可能性があります。 もちろん、回避策を見つけることはできますが、それはもう少し面倒です。 Angularの人気により、ライブラリ自体のページに手順を統合する場合があります。

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

Emberには、コミュニティプラグインのWebサイトであるEmberObserverがあります。 それぞれに0から10までのスケールのスコアがあります。 必要なものを探すのに最適な場所です。 Lodash、Rx、Ramdaなどのお気に入りのライブラリの名前を入力すると、単純なラッパーから完全な書き換えまでの関連プラグインが見つかります。 もちろん、ライブラリなどの関連リソースを収集するAwesomeReactリポジトリとAwesomeVueリポジトリもありますが、EmberObserverが特に便利であることがわかりました。

JavaScriptフレームワークへのコミット

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

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

時間の経過とともに、この記事で説明したフレームワークは進化し、人気が変わり、適切なプロジェクトが変わる可能性がありますが、この記事では、これらの各フレームワークが最適に機能する場所についての一般的な感覚を理解できます。