2017年に学ぶべきJavaScriptフレームワークとトピック

おっとっと!あなたが時間をさかのぼったようです。早く! 2019年に戻ってください!

JavaScriptの人気は、テクノロジー、フレームワーク、およびライブラリーの非常に活気のあるエコシステムをもたらしました。生態系の驚くべき多様性とエネルギーに加えて、多くの人にとって高度な混乱が生じます。どのテクノロジーを気にする必要がありますか?

最大限の利益を得るために、どこに時間を投資すべきですか?企業が現在採用している技術スタックはどれですか?成長の可能性が最も高いのはどれですか?

今知っておくべき最も重要な技術は何ですか?この投稿は、あなたが知る必要があるものの高レベルの概要であり、あなたがそれについてすべてを学ぶことができるリンクでいっぱいです。

実際のコードで実験することを学んでいるときに覚えておいてください。 Codepen.ioでコードをインタラクティブに再生できます。 ES6をまだ学習している場合は、Babel REPLを使用してどのように翻訳されるかを確認できます。

これは長いリストになりますが、落胆しないでください。あなたはこれを行うことができます!このリストを見ている場合、最新のアプリを構築するために知っておくべきことをすべて学習する方法については、「JavaScriptの疲労に感謝する理由」を読んでください。その後、腰を下ろして仕事に取り掛かります。

オプション学習に関する注意

このようなものの一部は厳密にオプションです*。つまり、興味がある場合、または仕事で知りたい場合はお勧めしますが、学ぶ義務はありません。アスタリスクでマークされたもの(例:example *)はオプションです。

*のマークが付いていないものはすべて学習する必要がありますが、すべてのことを知るためにそこにあるすべてのことを学ぶ義務はありません。オプションではないものに注意する必要がありますが、必ずしもすべてを完全に網羅した主題の専門家である必要はありません。

JavaScriptとDOMの基礎

JavaScriptを使用して仕事に就く前に、JavaScriptの基礎を十分に理解しておく必要があります。

  • ES6:JavaScriptの現在のバージョンはES2016(別名ES7)ですが、多くの開発者はまだES6を適切に学習していません。矢印の機能、休息/スプレッド、デフォルトのパラメーター、簡潔なオブジェクトリテラル、破壊など、少なくとも重要なことを学びましょう。
  • クロージャ:JavaScriptの関数スコープの動作を学びます。
  • 関数と純粋な関数:関数を十分に把握していると思われますが、JavaScriptにはいくつかの秘trickがあります。関数型プログラミングを理解するには、純粋な関数について学ぶ必要があります。
  • 関数型プログラミングの基本:関数型プログラミングは、数学関数を構成して、共有状態と可変データを回避することによりプログラムを生成します。関数型プログラミングをあまり使用しない実稼働JavaScriptアプリを見たのは何年も前のことです。基礎をマスターする時です。
  • 部分適用とカレー
  • 組み込みメソッド:標準のデータ型(特に配列、オブジェクト、文字列、数値)のメソッドを学習します。
  • コールバック:コールバックは、結果の準備ができたときに信号を送るために別の関数によって使用される関数です。あなたは「あなたの仕事をして、終わったら私に電話してください」と言います。
  • 約束:約束は、将来の価値に対処する方法です。関数がプロミスを返す場合、プロミスが解決した後に実行するために.then()メソッドを使用してコールバックを添付できます。解決された値は、コールバック関数に渡されます(例:doSomething()。then(value => console.log(value));
  • AjaxとサーバーAPI呼び出し:ほとんどの興味深いアプリは、最終的にネットワークと通信する必要があります。 APIとの通信方法を知っている必要があります。
  • クラス(注:クラスの継承を避けます。クラスの使用方法と夜間の睡眠を参照してください。)
  • ジェネレーターとasync / await:私の意見では、同期的に見える非同期コードを記述する最良の方法です。学習曲線がありますが、学習するとコードが読みやすくなります。
  • パフォーマンス:RAIL —「PageSpeed Insights」と「WebPageTest.org」から始めます
  • プログレッシブWebアプリケーション(PWA):「ネイティブアプリの運命」と「ネイティブアプリの運命」をご覧ください。
  • Node&Express:Nodeを使用すると、サーバーでJavaScriptを使用できます。つまり、ユーザーはデータをクラウドに保存し、どこからでもアクセスできます。 Expressは、地滑りによるNodeの最も人気のあるフレームワークです。
  • Lodash:JavaScript用の優れたモジュール式ユーティリティベルトで、機能的なプログラミング機能が満載されています。 lodash / fpからdata-last機能モジュールをインポートします。

ツーリング

  • Chrome開発ツール:DOM検査とJSデバッガー:最高のデバッガーであるIMOですが、Firefoxにはいくつかの非常に便利なツールもあります。
  • npm:JavaScript言語の標準的なオープンソースパッケージリポジトリ。
  • git&GitHub:分散バージョンマネージャー—ソースコードの変更を経時的に追跡します。
  • Babel:古いブラウザーで動作するようにES6をコンパイルするために使用されました。
  • Webpack:標準のJavaScriptで最も人気のあるバンドラーは、簡単なスターターキット/定型句の設定例を探して、高速に実行します)
  • Atom、VSCode、またはWebStorm + vim:エディターが必要になります。 AtomとVSCodeは、今日最も人気のあるJSエディターです。 Webstormは、高品質のツールを非常に強力にサポートする別のソリューションです。 vimを学ぶか、少なくともチートシートにブックマークを付けることをお勧めします。遅かれ早かれ、サーバー上のファイルを編集する必要があり、それが最も簡単な方法です。 SSHターミナル接続でうまく機能します。
  • ESLint:構文エラーとスタイルの問題を早期に発見します。コードのレビューとTDDの後、コードのバグを減らすために3番目にできること。
  • Tern.js:標準JavaScript用の型推論ツール、および現在JavaScript用の私のお気に入りの型関連ツール—コンパイル手順や注釈は不要です。すべてのタイヤを蹴ったので、Tern.jsはほとんどの利点を提供し、JSに静的型システムを使用するコストはほとんどありません。
  • Yarn *:npmと似ていますが、インストールの動作は決定的であり、Yarnはnpmよりも高速であることを目指しています。
  • TypeScript *:JavaScriptの静的タイプ。 Angular 2+を学んでいない限り、完全にオプションです。 Angular 2+を使用していない場合は、TypeScriptを選択する前に慎重に評価する必要があります。私はとても気に入っており、TypeScriptチームの素晴らしい仕事を称賛していますが、知っておくべきトレードオフがあります。必読:「静的型についての衝撃的な秘密」と「TypeScriptは必要ないかもしれません」。
  • Flow *:JavaScriptの静的型チェッカー。この2つの印象的な情報に基づいた客観的な比較については、「TypeScriptとフロー」を参照してください。 Nuclideを使用していても、FlowでIDEのフィードバックを得るのに苦労したことに注意してください。

反応する

Reactは、Facebookによって作成されたユーザーインターフェイスを構築するためのJavaScriptライブラリです。これは、一方向のデータフローの考え方に基づいています。つまり、更新サイクルごとに次のことを意味します。

  1. Reactは、コンポーネントへの入力を小道具として受け取り、DOMの特定の部分のデータが変更された場合にDOM更新を条件付きでレンダリングします。このフェーズ中のデータ更新は、次の描画フェーズまでレンダリングを再トリガーできません。
  2. イベント処理フェーズ— DOMがレンダリングされた後、Reactは自動的にDOMイベントをそのDOMツリーのルートにある単一のイベントリスナーに委任します(パフォーマンス向上のため)。イベントをリッスンし、それに応じてデータを更新できます。
  3. データへの変更を使用して、プロセスは1で繰り返されます。

これは、DOMへの変更がデータを直接更新する可能性がある(たとえば、Angular 1と​​Knockoutの場合のように)双方向のデータバインディングとは対照的です。 2方向バインディングでは、DOMレンダリングプロセス(Angular 1のダイジェストサイクルと呼ばれる)中のDOMへの変更により、描画が完了する前に描画フェーズが再トリガーされ、リフローと再描画が発生し、パフォーマンスが低下する可能性があります。

Reactはデータ管理システムを規定していませんが、Fluxベースのアプローチが推奨されます。 Reactの1方向のデータフローアプローチは、関数型プログラミングと不変のデータ構造からアイデアを取り入れ、フロントエンドフレームワークアーキテクチャに関する考え方を変えました。

React&Fluxアーキテクチャの詳細については、「コーディングを学ぶための最良の方法はコーディングすることです:アプリを構築してアプリのアーキテクチャを学ぶ」を参照してください。

  • create-react-app *:Reactを開始する最も簡単な方法。
  • react-router *:Reactのシンプルなルーティングの無効化。
  • Next.js *:Node&Reactのシンプルで汎用的なレンダリングとルーティング。
  • velocity-react *:Reactのアニメーション— VMDブックマークレットを使用して、ページのインタラクティブな視覚モーションデザインを可能にします。

Redux

Reduxは、アプリのトランザクションの確定的な状態管理を提供します。 Reduxでは、アクションオブジェクトのストリームを反復処理して、現在のアプリケーション状態に縮小します。それが重要である理由を学ぶには、「Reduxアーキテクチャを改善するための10のヒント」をお読みください。Reduxを使い始めるには、Reduxの作成者であるDan Abramovによる素晴らしいコースをご覧ください。

  • 「Reduxの使用を開始する」
  • 「慣用的なReduxを使用したReactアプリケーションの構築」

本番プロジェクトでReduxを使用したことがない場合でも、Reduxは必須の学習です。

どうして?なぜなら、それはあなたに多くの練習を与え、純粋な関数を使用することの価値を教え、リデューサーについて考える新しい方法を教えるからです。それはデータのコレクションを反復し、それらから価値を引き出すための汎用関数です。レデューサーは一般的に非常に有用なため、Array.prototype.reduceがJS仕様に追加されました。

レデューサーは単なるアレイ以上のものにとって重要であり、レデューサーを操作する新しい方法を学ぶこと自体が価値があります。

  • redux-saga *:Reduxの同期スタイルの副作用ライブラリ。これを使用して、I / Oを管理します(ネットワーク要求の処理など)。

角度2 + *

Angular 2+は、大人気のGoogleのAngularフレームワークの後継です。非常に人気があるため、履歴書では見栄えがよくなりますが、最初にReactを学習することをお勧めします。

私は、Angular 2+よりもReactを好みます。

  1. よりシンプルで、
  2. 非常に人気があり、多くの仕事で使用されています(Angular 2+も同様です)

このため、Reactを学ぶことをお勧めしますが、Angular 2+は厳密にオプションであると考えています*。 Angular 2+を強くお好みの場合は、お気軽に交換してください。最初にAngular 2+を学習し、Reactはオプションであると考えてください。どちらもあなたに利益をもたらし、履歴書で見栄えが良くなります。

どちらを選んでも、少なくとも6か月間、もう1つを学ぶために逃げる1年前に集中してください。強力な習熟に本当に沈むには時間がかかります。

RxJS *

RxJSは、JavaScript用のリアクティブプログラミングユーティリティのコレクションです。ストリームのLodashと考えてください。リアクティブプログラミングが公式にJavaScriptシーンに登場しました。 ECMAScript Observablesの提案は第1段階のドラフトであり、RxJS 5+は標準的な標準実装です。

私がRxJSを愛しているのと同じように、一度に全部をインポートするだけでは、バンドルサイズが非常に大きくなる可能性があります(多くの演算子があります)。バンドルの肥大化に対処するには、すべてをインポートしないでください。代わりに、パッチインポートを使用します。

パッチインポートを使用すると、バンドル内のrxjs依存関係のサイズを〜200k削減できます。それは本当に大したことです。これにより、アプリがはるかに高速になります。

編集:なぜあなたは<あなたの好きなもの>をリストしませんでしたか?

何人かの人々は、私が彼らのお気に入りのフレームワークをリストしなかった理由を尋ねました。私が検討した重要な基準の1つは、「これは実際の仕事に役立つか?」でした。

はい、これは人気のコンテストですが、学習投資を集中する場所を決定する際に、フレームワークを知る機会が重要な考慮事項です。

その質問に答えるために、私はいくつかの重要な指標を見ました。まず、Google Trends。このGoogleトレンドグラフを再現する場合は、キーワードではなくトピックごとに選択することを忘れないでください。これらの単語のいくつかは多くの偽陽性をもたらすためです。言い換えれば、これらはキーワード検索ではなく、トピックに焦点を当てたトレンドです。

Googleトレンドに関するJSトピック

これは、さまざまなプロジェクトに対する相対的な関心を示しています。人々がそれらを探しているなら、彼らの選択肢を探っている、またはヘルプやドキュメントを探している可能性があります。これは、相対的な使用レベルのかなり適切な指標です。

もう1つの優れたデータソースはIndeed.comです。これは、多種多様なソースからのジョブリストデータを集約しています。求人掲載の人気は近年急激に低下していますが、仕事で実際に本番プロジェクトで使用しているフレームワークを示す相対的な比較を行うのに十分なデータを収集しています:

これらの結果を再現するには、 javascriptを検索し、場所を空白のままにします。はっきりとわかるように:

AngularとReactが支配的:他に近いものはありません。 (jQueryは、WordPressなどの一般的なCMSシステムを含むほとんどすべてのレガシーシステムで使用されているため、すべてのWebサイト(アプリを含まない)の大部分で使用されます)を除きます。

これらのリストでは、AngularがReactに比べて大きな利点があることがわかるかもしれません。最初にReactを学ぶことをお勧めするのはなぜですか?なぜなら:

  1. Angularよりも多くの人がReactの学習に興味を持っています
  2. Reactは、Angularのユーザー満足度を大幅に向上させます

言い換えれば、Reactはマインドシェアと顧客満足度の戦いで勝利を収めており、過去1年半にわたるトレンドが展開し続けている場合、ReactはAngularを支配的なフロントエンドフレームワークとして定着させる非常に現実的なチャンスを持っています。

Angular 2+はそれを好転させるチャンスがあるので、Angularはカムバックすることができますが、これまでのところ、Reactは本当に良い戦いをしています。

注目すべきフレームワーク

  • Vue.js *には、多数のGitHubスターとダウンロードがあります。物事が進んでいる場合、2017年には非常にうまくいきますが、来年かそこらでReactとAngular(どちらも急速に成長しています)がなくなるとは思いません。 ReactまたはAngularを学んだ後、これを学んでください。
  • MobX *は優れたデータ管理ライブラリであり、Reduxの人気のある代替品になりました。また、急速に成長しており、2017年にもうまくいくと思います。ほとんどのアプリにはReduxが好きですが、間違いなくMobXがより良い選択である場合があります。たとえば、ページ上に数十万の動的DOMオブジェクトがある場合、おそらくパフォーマンスが向上します。また、アプリのワークフローがすべてシンプルで、トランザクションの確定的な状態が必要ない場合は、おそらくReduxは必要ありません。 MobXは間違いなくシンプルなソリューションです。 Reduxを学んだ後、これを学んでください。
EricElliottJS.comで無料レッスンを開始してください

エリック・エリオットは、「Composing Software」および「Programming JavaScript Applications」という本の著者です。 EricElliottJS.comとDevAnywhere.ioの共同設立者として、開発者に不可欠なソフトウェア開発スキルを教えています。彼は暗号化プロジェクトの開発チームを構築して助言し、Adobe Systems、Zumba Fitness、The Wall StreetJournal、ESPN、BBC、およびUsher、Frank Ocean、Metallicaなどのトップレコーディングアーティストのソフトウェアエクスペリエンスに貢献しています。

彼は世界で最も美しい女性との遠隔生活を楽しんでいます。