2016年にJavaScriptを学ぶのはどうですか

-ねえ、私は新しいWebプロジェクトを手に入れましたが、正直なところ、私はここ数年Webコーディングに携わっていないので、すべてが少し変わったと聞きました。 あなたは最新のWeb開発者ですよね？



「現在、これはフロントエンドエンジニアと呼ばれていますが、はい、そうです。」 私は2016年にウェブで仕事をしています。視覚化、音楽プレーヤー、サッカーをする飛行ドローンなど、何でも。 JsConfとReactConfから戻ったばかりなので、Webアプリケーションを構築するための最新のテクノロジーを知っています。



-かっこいい。 ユーザー側で最新のアクションを表示するページを作成する必要があります。そのため、RESTからデータを取得して、何らかのフィルター処理されたテーブルに表示し、サーバーで何か変更があった場合は更新するだけです。 jQueryを使用してデータを取得および表示することを考えていましたか？



-なんてこった！ いや！ 誰もjQueryを使用していません。 Reactを試す必要があります：これは2016年です！



-面白い。 Reactとは何ですか？



-これは、Facebookのメンバーによって作成された非常にクールなライブラリです。 それは本当に完全な制御を提供し、アプリケーションのパフォーマンスを改善し、ビューへの変更を非常に簡単に処理できるようにします。



-それは魅力的ですね。 Reactを使用してサーバーからのデータを表示できますか？



-ええ、しかし最初にReactとReact DOMをライブラリとして追加する必要があります。



-待って、なぜ2つのライブラリがあるのですか？



-さて、1つはライブラリ自体であり、2つ目はDOMを操作するためのもので、JSXで記述できます。



-JSX？ JSXとは何ですか？



-JSXは、XMLに非常によく似たJavaScript構文の単なる拡張です。 これは、DOMを記述する別の方法の一種です。 拡張HTMLと考えてください。



-HTMLはどうなりましたか？



-これは2016年です。生のHTMLを作成する人はもういません。



-まあ、いい。 これら2つのライブラリを追加した場合、Reactを使用できますか？



「そうでもない。」 Babelを追加する必要があり、Reactを使用できます。



-別のライブラリ？ バベルとは何ですか？



-ああ、Babelはトランスポーターです。JavaScriptのどのバージョンでもコードを記述しながら、特定のバージョンのJavaScriptに集中することができます。 ReactJSで記述するためにBabelを追加する必要はありませんが、それを行わないと、ES5にこだわることになりますが、これは2016年であり、すべてのクールな男と同様にES2016でコーディングする必要があります。



-ES5？ ES2016 +？ 迷子になりました。 ES5およびES2016 +とは何ですか？



-ES5はECMAScript 5の略です。これは、現在ほとんどのブラウザに実装されているため、ほとんどが対象としているバージョンです。



-ECMAScript？



-はい、1995年の最初のリリース後に1999年に設立されたJavaScript標準を知っていますか？ 次に、JavaScriptがLiveScriptと呼ばれ、Netscape Navigatorでのみ機能したとき。 当時は非常に混乱していましたが、幸いなことに、すべてが明確になり、この実装の7つのバージョンがあります。



-7つのバージョン。 真剣に。 しかし、ES5とES2016 +これは...？



-それぞれ第5版と第7版。



「待って、6番目に何が起こったの？」



-ES6？ はい、各エディションは以前のエディションのアドオンであるため、ES2016 +を使用する場合は、以前のバージョンのすべての機能を使用します。



-いいね。 なぜES2016 + ES6を使用するのですか？



「まあ、ES6を使用できますが、asyncやawaitのような興味深いことをするには、ES2016 +を使用する必要があります。」 そうしないと、非同期呼び出しと通常のフロー制御をブロックするためのES6ジェネレーターとコルーチンに固執します。



「あなたの言ったことがわかりません。これらの名前はすべて混同されています。」 サーバーから大量のデータを読み込み、CDNからjQueryをプラグインし、AJAXを使用してデータを取得するだけです。 なぜこれができないのですか？



-おい、これは2016年です。jQueryを使用する人は誰もいません。混乱するコードの束で終わります。 しかし、彼らはそれを知っています。



-なるほど。 したがって、3つのライブラリをダウンロードしてデータを抽出し、HTMLテーブルを表示するという方法があります。



「まあ、これら3つのライブラリを含めますが、それらをモジュールマネージャにリンクして、1つのファイルのみをロードします。」



-なるほど。 そして、どのようなモジュールマネージャーですか？



-定義は環境によって異なりますが、Webでは通常、AMDまたはCommonJSモジュールをサポートするすべてのものを意味します。



-さようなら。 しかし、AMDとCommonJSはどうですか？...



-定義。 複数のJavaScriptライブラリとクラスがどのように相互作用するかを記述する方法はたくさんあります。 AMDまたはCommonJS APIを定義するいくつかのJavaScriptファイルを記述し、Browserifyなどを使用してそれらをリンクできます。



「まあ、それは理にかなっています...おそらく。」 Browserifyとは何ですか？



-これは、ブラウザで実行できるファイルのCommonJS依存関係の説明をリンクできるツールです。 ほとんどの人がこれらの依存関係をNPMで公開するために作成されました。



-NPM？



-これは非常に大規模な公開リポジトリであり、賢い人々がモジュールの形でコードと依存関係を投稿します。



-CDNはどうですか？



-実はいや これは、誰でもライブラリを公開およびダウンロードできる集中型データベースに似ているため、開発用にローカルで使用し、必要に応じてそれらをCDNにアップロードできます。



-ああ、なんてバウアー！



-はい、しかしこれは2016年であり、今では誰もBowerを使用していません。



「ええと、大丈夫...だから、NPMからライブラリをダウンロードする必要がありますか？」



-はい。 たとえば、Reactを使用する場合、Reactモジュールをロードしてコードにインポートします。 これは、ほぼすべての一般的なJavaScriptライブラリで実行できます。



-ああ、それはAngularのようなものです！



-角度は2015年です。しかし、はい。 Angularもあり、VueJS、RxJS、および2016年のその他の興味深いライブラリもあります。それらについて知りたいですか？



-Reactに固執しましょう。彼についてはすでに多くのことを学びました。 Reactを使用する必要がある場合、このNPMからReactを引き出してからBrowserifyを使用しますか？



-はい。



「多くの依存関係をまとめて結び付けるのは複雑すぎるようです。」



-ええ、だからこそ、GruntやGulpなどのタスクマネージャー、またはブロッコリーを使用してBrowserifyの起動を自動化するのです。 Mimosaを使用することもできます。



-うなり声？ むかつく？ ブロッコリー？ ミモザ？ 私たちは今何を言っているのですか？



-タスクマネージャー。 しかし、彼らはもはやそれほどクールではありません。 Makefileでは2015年のスタイルで使用していましたが、今ではWebpackに切り替えました。



-メイクファイル？ 主にCまたはC ++プロジェクトに使用されると思いました。



-うん、でもどうやらウェブ上で物事を複雑にして基本に戻ってみたい。 このタイプは毎年行っています。 1〜2年後には、ウェブ上でアセンブリを作成します。



-Pffff。 Webpackと呼ばれるものについて言及しましたか？



-これは別のブラウザモジュールマネージャーであると同時に、タスクマネージャーの一種でもあります。 これはBrowserifyの改良版のようなものです。



-はい。 なぜそれが良いのですか？



「まあ、それは良いことではないかもしれませんが、依存関係がどのように関連しているのかという点でより柔軟です。」 Webpackでは、CommonJSだけでなく、さまざまなモジュールマネージャーを使用できます。 たとえば、ネイティブES6モジュール。



-これらのCommonJS / ES6では非常に混乱しています。



-はい、誰もがこれに混乱しましたが、SystemJSがあるので入浴できなくなりました。



-ああ、また何か-js。 さて、このSystemJSとは何ですか？



-まあ、BrowserifyやWebPack 1.xとは異なり、SystemJSは動的ローダーモジュールであり、1つの大きなファイルにリンクするのではなく、複数のファイルの複数のモジュールをリンクできます。



-待って、ライブラリを1つの大きなファイルにマージしてアップロードしたいと思っていました！



-はい。ただし、HTTP / 2のため、複数のHTTPリクエストの方が実際には優れています。



-立つために！ それでは、なぜReactに3つの元のライブラリを追加できないのでしょうか？



-もちろん、CDNで外部スクリプトとして追加できますが、Babelを追加する必要があります。



-あ。 そして、これは悪いことではありませんか？



-はい、バベルコアを完全にオンにする必要があり、本番環境では効果がありません。 生産時には、プロジェクトを完全に準備するためにいくつかの準備タスクを実行する必要があります。これは、悪魔を呼ぶのは卵を沸かすためのレシピであるのに比べて儀式です。 ファイルを最小化し、ugliifyを作成し、スタイルを操作し、スクリプトのダウンロードを検討する必要があります...



-わかった、わかった。 しかし、CDNからライブラリを直接ダウンロードしない場合、他にどのようになりますか？



-Webpack + SystemJS + Babelコンボを使用して、TypeScriptからトランスパイラーを作成します。



-TypeScript？ JavaScriptコードを書いていると思った！



-Typescript-これはJavaScript、またはJavaScriptのスーパーセットです。 具体的には、JavaScriptはES6上にあります。 さて、私たちが話したその6番目のバージョン。



「ES2016 +はすでにES6のスーパーセットだと思っていました！」 なぜ今TypeScriptも必要なのですか？



-JavaScriptを型付き言語として使用し、実行時のエラーの数を減らすことができるため。 これは2016年で、JavaScriptコードにいくつかのタイプを追加する必要があります。



「そして、TypeScriptは明らかにそれを行います。」



-そして、フロー、タイプのみをチェックしますが、TypeScriptはコンパイルが必要なJavaScriptアドオンです。



-ええと...フロー？



-これは、Facebookの男性によって作成された静的なタイピングテストツールです。 関数型プログラミングは驚くほどクールなので、彼らはOCamlでそれを書いた。



-OCaml？ 関数型プログラミング？



-さて、これは2016年のように、クールな子供たちが今日使っているものです。関数型プログラミング。 高次関数。 カレー。 純粋な機能。



「それが何なのかわかりません。」



-最初は誰も理解していません。 関数型プログラミングはオブジェクト指向プログラミングよりも優れていることを知っておく必要があります。これは2016年に使用すべきものです。



-待って、私は大学でOOPを勉強しました。



-それは、OracleがJavaを買収するまでのことでした。 つまり、OOPは以前は良好であり、現在も使用されていますが、状態を操作することは赤ちゃんを蹴ることに相当することを誰もが理解しているため、すべてが不変オブジェクトと関数型プログラミングに向かっています。 Haskellの連中は100年前からこのことについて叫んでいますが、私はElmについてはまだ言及していません。 しかし、幸いなことに、ネット上にはRamdaなどのライブラリがあり、単純なJavaScriptで関数型プログラミングを使用できます。



「名前を作っているだけですか？」 Ramndaとは何ですか？



-いいえ。 ラムダ。 ラムダのように。 デヴィッド・チ​​ェンバーの図書館ですか？



-ダビデは誰？



-デイビッド・チェンバー。 クールな人々 ラムダの著者の一人。 関数型プログラミングの学習に真剣な方は、エリック・マイヤーの作品をご覧ください。



「それはエリック・マイヤーですか？」



-また、機能的な男。 クールな人々 彼は、アジャイルを奇妙な色のTシャツで打ち砕くプレゼンテーションをたくさん持っています。 Tj、Jash Kenas、Sindre Sorhus、Paul Irish、Addy Osmaniが何をしているのかをご覧ください...



-はい。 遅くなります。 これらはすべて美しくて美しいものですが、データとその表示を簡単に選択するには、すべてが複雑すぎて不必要だと思います。 動的データを含むテーブルを作成するために、これらの人々またはこれらすべてのことを知る必要はないと確信しています。 Reactに戻りましょう。 Reactでサーバーからデータを取得するにはどうすればよいですか？



-実際、データを取得するのにReactは必要ありません。データが表示されます。



-あー それでは、データを取得するために何が使用されますか？



-Fetchを使用して、サーバーからデータを取得します。



-Fetchを使用してデータを取得しますか？ これらのことを呼び出す彼はシソーラスが必要です。



-そうそう。 Fetchは、XMLHttpRequestを実行するためのネイティブ実装の名前です。



-ああ、AJAX。



-AJAXは単なるXMLHttpRequestリクエストです。 また、Fetchを使用すると、promiseに基づいてAJAXを実行できます。これは、コールバックの地獄を回避するために解決できます。



-コールバック地獄？



-はい。 非同期要求が実行されるたびに、その応答を待つ必要があります。これにより、コールバック地獄ピラミッドと呼ばれる関数内に関数を追加する必要があります。



-ああ、いい。 約束はこの問題を解決しますか？



-もちろん！ promiseを介してコールバックを操作することにより、より理解しやすいコードを記述してテストし、同時に複数のリクエストを同時に実行して、すべてが完了するまで待つことができます。



-そして、これはFetchで実行できますか？



-はい、ただし一部のブラウザでのみ有効です。そうでない場合は、Fetch polyfillを有効にするか、Request、Bluebird、またはAxiosを使用する必要があります。



「神のために、いくつの図書館を知る必要がありますか？」 それらのいくつ？



-これはJavaScriptです。 同じことを行うライブラリは数千あります。 これらのライブラリを知っています。 私たちのライブラリは素晴らしいものであり、Guy Fieriの写真を追加することもあります。



-ガイ・フィエリ？ でこれを乗り越えましょう。 これらのBluebird、Request、Axiosは何をしますか？



-これらは、Promiseを返すXMLHttpRequestを実行するためのライブラリです。



-そして、AJAX jQueryメソッドはプロミスを返しませんか？



-2016年には「J」を使用しなくなりました。FetchpolyfillまたはBluebird、RequestまたはAxiosを使用するだけです。 次に、async、await、bamを使用して約束を管理します。適切な制御フローがあります。



「これがあなたが待っているのは3回目ですが、それが何なのかわかりません。」



-Awaitを使用すると、非同期呼び出しをブロックできます。これにより、データの受信中にすべてをより適切に制御でき、コードの可読性が向上します。 これはすごいです。ステージ3をBabelに追加するか、非同期関数構文とtransform-async-to-generatorプラグインを使用する必要があります。



-これはクレイジーです。



「いや、狂気-TypeScriptコードを再コンパイルしてから、awaitを使用するためにBabelで転置する必要があります。」



-おい！？ これはTypeScriptの一部ではありませんか？



-次のバージョンに含まれていますが、バージョン1.7ではES6のみであるため、ブラウザでawaitを使用する場合は、まずES6でTypeScriptコードをコンパイルしてから、BabelからES5にトランスポーズする必要があります。



「何て言えばいいのかわかりません。」



-聞いてください、簡単です。 TypeScriptですべてのコードを記述します。 ES6でFetchを使用してすべてのモジュールをコンパイルし、ステージ3でBabelでそれらをトランスパイルし、SystemJSからダウンロードします。 Fetchがない場合は、polyfill、またはBluebird、Request、またはAxiosを使用して、約束を処理します。



-「簡単」の定義は大きく異なります。 それで、この儀式で、私はついにデータを得て、Reactで正しく表示できるようになりましたか？



-アプリケーションは状態の変更を処理しますか？



「Grr、私はそうは思わない。」 データを表示するだけです。



-ああ、ありがとう。 そうでなければ、FluxとFlummox、Alt、Fluxibleなどの実装を説明する必要があります。 正直なところ、Reduxを使用する必要があります。



-どのようにしてこれらの名前を取得しました。 繰り返しますが、データを表示するだけです。



-また、単にデータを表示する場合は、Reactで開始する必要はありません。 テンプレートエンジンを使用できます。



-冗談ですか？ これは面白いと思う？



「はい、使用できるものを説明しただけです。」



-やめて やめて



-つまり、テンプレートエンジンを使用したとしても、TypeScript + SystemJS + Babelコンボを代わりに使用します。



-ページにデータを表示する必要がありますが、Mortal Kombatの元のSub Zero致死は実行しません。 使用するテンプレートエンジンを教えてください。



-それらの多くがあります、あなたは誰と親しいですか？



-うーん、名前が思い出せない。 それはずっと前のことです。



JTemplates？ jQote？ 純粋？



-そうじゃない。 もう一つ？



-透明性？ JSRender？ MarkupJS？ KnockoutJS？



-その他



-PlatesJS？ jquery-tmpl ハンドルバー？ 一部の人々はまだそれを使用しています。



-たぶん。 最後に似たものはありますか？



-口ひげ、アンダースコア？ 現在、lodashにもテンプレートエンジンがありますが、これは2014年のようなものです。



「Grr ...たぶん彼はもっと若かった」



-ジェイド？ DustJS？



-いいえ。



-DotJS？ EJS？



-いいえ。



-修道女？ 食べる？



-いいえ。



-おい、とにかくCoffeeScript構文が好きな人はいません。 ジェイド？



-いいえ、あなたはすでにジェイドと言いました。



-まあ、私はパグを意味しました。 私はジェイドを意味しました。 つまり、ジェイドはパグになりました。



-Pf。 いや 覚えていません どちらを使用しますか？



-おそらくネイティブのES6テンプレート文字列。



-推測させてください。 これにはES6が必要です。



-はい。



-使用するブラウザに応じて、Babelが必要です。



-はい。



-ライブラリ全体を追加せずに有効にするには、NPMモジュールとしてダウンロードする必要があります。



-はい。



-これには、BrowserifyまたはWepbackが必要です。ほとんどの場合、SystemJSが必要です。



-はい。



-Webpackでない場合は、理想的にはタスクランナーによって制御する必要があります。



-はい。



「しかし、関数型プログラミングと型付き言語を使用する必要があるため、最初にTypeScriptをコンパイルするか、このフローを追加する必要があります。」



-はい。



-そして、awaitを使用する場合は、処理のためにBabelに送信します。



-はい。



-それで、Fetch、Promise、フロー制御、およびこれらすべての魔法を使用できます。



-ポリフィルフェッチを忘れないでください。サポートされていない場合、Safariはそれを処理できません。



-あなたは何を知っています。 ここで終わると思います。 実際、私はこれで完了だと思います。 私はこのWebとJavaScript全般に行き着きました。



-まあ、数年後にはすべてElmまたはWebAssemblyでコーディングします。



「バックエンドに戻りたいだけです。」 これらすべての変更、バージョン、エディション、コンパイラー、トランスパイラーを処理することはできません。 JavaScriptコミュニティは、誰かがそれに追いつくことができると考えているなら、狂っています。



-なるほど。 次に、Pythonコミュニティを試す必要があります。



-なんで？



-Python 3について聞いたことがありますか？