Webフロントエンド
最適なフロントエンドフレームワークを選択する方法
JavaScriptの世界は、数十のツール、ライブラリ、フレームワークを備えた豊富な環境です。しかし、多くのオプションがあると、多くの混乱が生じます。本当に両刃の剣です。
創造性と実験のために多くのスペースを確保する一方で、どのライブラリまたはフレームワークを選択すべきかわからない場合があります。
選択したフロントエンドフレームワークは、長期的にはプロジェクトを成功または失敗させる可能性があります。
この記事では、最も人気のあるJavaScriptフレームワークのいくつかと、それらが互いにどのように機能するかを見ていきます。これらのフレームワークの5つの異なる視点を検討します。これにより、通常、次のJavaScriptフレームワークに関する決定プロセスが容易になります。
これらの人気のあるJavaScriptフレームワークのいずれかから選択する場合でも、より難解なものから選択する場合でも、これらの各側面を考慮する必要があります。
学習リソースの可用性
これは明らかですが、見過ごされがちです。いくつかのフレームワークの豪華なホームページが目を引くかもしれませんが、始めるのに役立つ退屈で乾いたドキュメントに加えて、いくつかの追加のコース、本、チュートリアル、および記事が必要です。
素晴らしいフレームワークを作成することは1つのことであり、その背後にあるコアアイデアを伝えることは異なります。実際、コーチングを専門とするプロの開発者はたくさんいます。よく練られた学習リソースは、学習曲線を劇的に短縮します。
オンラインで無料でcプログラミングを学ぶ
以前に経験した信頼できる著者からのリソースを探しに行きましょう。最終的には時間をかける価値があります。何か役に立つものを見つけるのに苦労している場合は、注意してください。学習しようとしているフレームワークは新しいか、コミュニティでまだ十分に採用されていない可能性があります。
ドキュメントだけでは不十分だと述べましたが、これには例外があります。たとえば、EmberJSには 素晴らしいドキュメント 。コア機能とユースケースは、あちこちの一般的な例でうまく説明されています。残念ながら、ドキュメント以外に、リソースブック、ビデオコース、またはその他の資料がほとんど残っていません。
一方で、のためのリソースが豊富にあります Angular そして React 。ほとんどすべてのフロントエンド指向の教育ウェブサイトには、それらに関する記事が1つか2つあり、完全なビデオコースや本もあります。
Vueは、中途半端なものです。優れたドキュメントがあり、選択できる優れたコースがいくつかあります。
たとえば、Aureliaのリソースはほとんどありません。あなたへの唯一の希望は文書化と運です。
私は選択肢があることを好みます。
すばらしい本やコースを読んだとしても、さまざまなリソースに触れることで新しいことを学ぶ可能性があります。あなたが主題に精通しているならば、あなたはしばしば、まだ完全に明確ではない可能性のある領域をざっと見て、探すことができます。
残念ながら、選択肢が限られている場合、この戦略は機能しません。そのため、次のポイントに進みます。
人気
エキゾチックなことを学ぶことに誇りを持っているかもしれませんが、これをビジネスの観点から見ると、同じではありません。あなたの会社またはクライアントは、おそらく、戦闘でテストされたツールセットを使用することを好みます。
これにはいくつかの理由があります。フレームワークがそれほど人気がない場合、それはそれを専門とする開発者が数人いることを意味します。プロジェクトを放棄したり、新しい仕事を見つけたりするとどうなりますか？あなたの雇用主は、あなたが使用したフレームワークを知っている開発者を探すことに行き詰まってしまいます。
このプロセスは、企業にとって大きな負担になる可能性があります。プロジェクトに固執して成長しても同じことが言えます。現在、雇用主は開発を加速するためにより多くの開発者を必要としています。
人気のある、広く使用されているフレームワークを選択する理由は他にもいくつかあります。何か問題に悩まされていて、助けを求めることができるコミュニティが実際にはない場合はどうなりますか？ドキュメントを自分で作成しているので、多くの時間を無駄にする可能性があります。
それに加えて、あなたはあなたのキャリアの中で将来の、より魅力的な機会について考えたいと思っています。あなたが人気のあるものを専門とし、それが本当に上手になれば、あなたのためにたくさんのプロジェクトがそこにあるでしょう。
ここでの明らかなリーダーはAngularとReactです。
そこにあるほとんどのフロントエンド関連の求人情報には、どちらか一方が必要です。彼らはそれぞれグーグルとフェイスブックに支えられているので、雇用主は彼らの選択について「安全」だと感じています。
時々、あなたの会社やクライアントのためのフレームワークの選択はあなた次第ではありません。多分それは前の従業員またはチームの他の誰かによって作られました。 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 |
これらのライブラリは、人気のあるオプションとしての地位を証明するのに十分長い間存在していましたが、本当に新しいことを試みている場合は、それらの同様の統計が選択に役立つ可能性があります。
AngularまたはReactだけを学ぶことは、あなたのキャリアの中でこれまでのところしか得られません。もちろん、チャンスはたくさんありますが、他のフレームワークが存在するのには理由があります。暇なときにそれらについて学び、時々いくつかの実験をしてみてください。実際のプロジェクトでそれらを使用したことがない場合でも、日々の開発作業に役立つ貴重な洞察を得ることができます。
コア機能
少し技術的になりましょう。
最初に、フレームワークのコア機能の概要を簡単に説明して、コーディングを開始するときに十分な期待を持ってください。そのためには、ドキュメントをスキャンしてください。このフレームワークが一般的に何であるかを理解する必要があります。それはビューレイヤーのみですか、本格的ですか、それともその中間ですか？
他のフレームワークに関する豊富な経験がある場合、このプロセスは簡単で迅速です。ドキュメントで次のトピックを探してください：テンプレート、状態管理、HTTP通信、フォームの処理と検証、およびルーティング。これらは、開発者として日常的に行うことです。これらのすべてがコアフレームワークで提示されるわけではないか、特定の問題に対していくつかの異なるアプローチがある可能性があります。
人気のあるオプションについて簡単に触れてみましょう。
まずは React そして 見る 。それらは実際にはフレームワークではありません。これらは、アプリケーションのビューレイヤーを表すだけです。これは、HTTP通信、フォーム検証など、他のすべての部分があなた次第であることを意味します。
さっきも言ったように、両刃の剣かもしれません。最終的には、独自のカスタムフレームワークを構築することになります。どちらにも、最も一般的な問題の解決策を提供するライブラリのエコシステムがありますが、全体的な構造はプロジェクトごとに異なります。
ReactのJSXはいつも私をうんざりさせました。私はそれに慣れなければなりませんでした。ただし、Vueのテンプレートは、特にAngularから来ている場合は、非常に優れています。
一方、Emberにはほとんどすべてのものがあります。驚いたことに、Emberのコアは高度なフォーム処理を提供していません。入力ヘルパーがいくつかあるだけで、それだけです。それは非常に意見があり、独自のデータ層さえ持っています。すべては「エンバーウェイ」で行われる必要があります。
他のフレームワークまたはJavaScript全般のバックグラウンドがある場合、Emberがそのフレームワークを使用しているため、イライラする可能性があります。 独自のオブジェクトモデル 。ドキュメントに記載されているように、標準のES2015クラスは広く使用されていません。値をプロパティに直接割り当てて、Emberがそれについて不平を言っていることに気付くかもしれません。
他のフレームワークとは大きく異なるもう1つの点は、 マンデータ 。これは、Emberアプリケーションのデータレイヤーです。フロントエンドの一種のORMのように考えることができます。モデルを作成し、それらの間の関係をマップします。
今、あなたのサーバーが使用する場合 JSON API （これはJSON APIを実装するための仕様です）、Emberは適切な場所にありますが、残念ながら、ほとんどのサーバーはそうではありません。したがって、カスタムアダプタとシリアライザを作成する必要があります。ただし、Emberの方法で物事を行う場合、それは本当に生産的かもしれません。学習曲線が急です。
Angular2は機能豊富なフレームワークです。 Emberのような多くのモジュールが付属しているので、箱から出してすぐに使えるツールがたくさんあります。ただし、Angularは大規模なアプリケーションを対象としているため、 TypeScriptを促進します 、試してみる前に抵抗を引き起こす可能性があります。
もう1つの注目すべき点は、Rxライブラリのオブザーバブルを多用していることです。これは非常に便利です。ほぼすべてのものをオブザーバブルとして表現し、マップ、フィルターなどの高レベルの操作を適用できます。LodashまたはUnderscoreを使用した場合、Rxは同じようなものですが、ステロイドを使用します。
この記事で説明している4つのフレームワークのコア機能の概要は次のとおりです。
| Angular 2 | React | 人間 | 見る | |
|---|---|---|---|---|
| 表示/テンプレート | ||||
| ルーター | ||||
| フォーム処理 | ||||
| フォームの検証 | ||||
| HTTP通信 |
簡単に概説したこれらの機能はすべて、効果的に使用するために両端でろうそくを燃やす必要がある場合は価値がありません。これが次のポイントです。
使いやすさ
この時点で、選択したフレームワークにまだ熱意がある場合は、次のステップは手を汚すことです。
たぶん、あなたのバックグラウンドのために、フレームワークはあなたにぴったりです。多分それは少し異なり、いくつかの点であなたに挑戦します。まだわかりません。自分で試すまで、チュートリアルを読んだり見たりしても役に立ちません。
フレームワークの感触をつかむための最良の方法は、いくつかのミニプロジェクトでそれを使用することです。これにより、特定のフレームワークを使用して、上記の日常的な問題を解決する機会が得られます。
プロジェクトに取り組んでいる間、時間をかけて、生産性が高いかどうかを考えてください。望ましい結果を達成するのはどれくらい簡単ですか？外部ライブラリを探す必要がありますか？コミュニティからのプラグインが必要かもしれません。フレームワークのコンテキスト内に従来の構造またはガイドラインはありますか？たぶん、開発プロセスを加速するためのCLIがあります。このステップでは、基本的な経験を収集しているので、このフレームワークを今後のプロジェクトに使用したり、既存のプロジェクトを移行したりするとどうなるかを考えることができます。
Emberは、少なくともコアユーザーにとって、非常に生産的なフレームワークであると考えられています。付属しています CLI 、これは本当に役立ちます。独自のテストスイートを使用して、ルート、コントローラー、コンポーネント、およびモデルを生成できます。これらすべてを手動で行うのは面倒な作業です。新しいプロジェクトを生成することも可能です。基本的なフォルダ構造を作成し、必要なパッケージをインストールし、ツールをビルドし、環境をテストします。これほどCLIを使用したことがない場合は、非常に満足できます。しかし、先に述べたように、Emberは非常に意見が分かれています。そのすべての良さにもかかわらず、一般的なタスクを実行しようとしているときにイライラするかもしれません。
今ReactとVueのために、彼らはある種のCLIを持っています、 create-react-app そして 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つの問題に焦点を当てた優れたライブラリがあります。それらのいずれかを統合して毎回何時間も費やそうとすると、それは最適な選択ではないかもしれません。 。
CFOの仕事は何ですか
これをテストするのはとても簡単です。特定のライブラリが必要な架空のシナリオをすぐに思いつくことができます。あなたの過去のプロジェクトを見てください。どのツールをどのようなシナリオで使用していますか？もう一度同じ状況に遭遇し、そのための準備をしたい、または少なくとも期待を持っている可能性があります。
そこにあるすべてのライブラリがTypeScriptをサポートしているわけではありません。 Angularはこれを頻繁に使用するため、このようなライブラリを使用していると、TypeScriptの優れた機能の一部が失われる可能性があります。もちろん、回避策を見つけることはできますが、それはもう少し面倒です。 Angularの人気があるため、 ライブラリ自体のページ 。
VueとReactの場合、ほとんどすべての責任があり、他のライブラリを使用することも例外ではありません。 Webpackまたは同様のビルドツールを使用している場合は、NPMを使用してインストールされたライブラリを直接参照できます。 Vueがコミュニティプラグインを使用するのは、特にユーザーインターフェイスロジックも含まれている場合は、少し面倒であることがわかりました。
男の腹 EmberObserver 、コミュニティプラグインのウェブサイトです。それぞれに0から10までのスケールのスコアがあります。必要なものを探すのに最適な場所です。 Lodash、Rx、Ramdaなどのお気に入りのライブラリの名前を入力すると、単純なラッパーから完全な書き換えまで、関連するプラグインが見つかります。もちろん、 素晴らしい反応 そして 素晴らしい眺め ライブラリを含む関連リソースを収集するリポジトリですが、EmberObserverが特に便利であることがわかりました。
JavaScriptフレームワークへのコミット
適切なJavaScriptフレームワークを選択することは、Webプロジェクトを成功させるための最も重要なステップの1つです。小規模なプロジェクトでも大規模なプロジェクトでも、単独で作業している場合でもチームで作業している場合でも、これらの詳細はそれぞれ、プロジェクトに最適なフレームワークを決定する上で重要な役割を果たします。 ）。
コア機能と使いやすさについては、開発者の生産性にさまざまな影響を与えるポイントを挙げました。使いやすさは、あなたの経験や経歴、そしてあなたが働いている会社や組織に大きく依存するため、特に注意が必要です。
時間の経過とともに、この記事で説明したフレームワークは進化し、人気が変わり、適切なプロジェクトが変わる可能性がありますが、この記事では、これらの各フレームワークが最適に機能する場所についての一般的な感覚を理解できます。
関連：
