2016年にJavaScriptを学ぶのはどんな感じか

この記事の執筆中にJavaScriptフレームワークは作成されませんでした。

以下は、Circle CI の記事「It's the future」からインスピレーションを得たものです。原文はここからお読みいただけます。この記事は単なる意見であり、他の JavaScript フレームワークと同様に、あまり真剣に受け止めないでください。

こんにちは、この新しい Web プロジェクトを任されたのですが、正直に言うと、ここ数年 Web のコーディングをあまりしておらず、状況が少し変わったと聞いています。あなたはこの辺りで最新の Web 開発者ですよね?

- 実際の用語はフロントエンド エンジニアですが、そうですね、私は適任です。2016 年に Web をやっています。視覚化、音楽プレーヤー、サッカーをする空飛ぶドローンなど、何でもやっています。JsConf と ReactConf から戻ってきたばかりなので、Web アプリを作成するための最新のテクノロジーを知っています。

いいですね。ユーザーの最新のアクティビティを表示するページを作成する必要があります。REST エンドポイントからデータを取得して、何らかのフィルター可能なテーブルに表示し、サーバーで何か変更があった場合は更新する必要があります。jQuery を使用してデータを取得して表示することを考えています。

- ああ、もう誰も jQuery を使っていません。React を学んでみるべきですよ。2016 年ですから。

ああ、わかりました。React とは何ですか?

- これは Facebook の人たちが作った超クールなライブラリで、ビューの変更を非常に簡単に処理できるようにすることで、アプリケーションの制御とパフォーマンスを大幅に向上させます。

それはいいですね。React を使用してサーバーからのデータを表示できますか?

- はい、ただし、まず、React と React DOM を Web ページのライブラリとして追加する必要があります。

待ってください、なぜライブラリが 2 つあるのですか?

- 1 つは実際のライブラリで、もう 1 つは DOM を操作するためのもので、JSX で記述できるようになりました。

JSX? JSX とは何ですか?

-JSX は、XML によく似た JavaScript 構文拡張です。DOM を記述する別の方法のようなもので、より優れた HTML と考えてください。

HTML の何が問題なのですか?

- 2016 年です。もう HTML を直接コーディングする人はいません。

そうです。とにかく、この 2 つのライブラリを追加すれば React が使えるようになるのでしょうか?

- そうではありません。Babel を追加すれば、React を使用できるようになります。

別のライブラリですか? Babel とは何ですか?

- ああ、Babel は、JavaScript の任意のバージョンでコーディングしながら、特定のバージョンの JavaScript をターゲットにできるトランスパイラです。ReactJS を使用するために Babel を含める必要はありませんが、含めない場合は ES5 を使用するしかありません。現実的に考えれば、今は 2016 年ですから、他のクールな人たちと同じように ES2016+ でコーディングするべきです。

ES5? ES2016+? よくわからなくなってきました。ES5 と ES2016+ とは何ですか?

- ES5 は ECMAScript 5 の略です。現在ではほとんどのブラウザで実装されているため、多くの人がターゲットとするエディションです。

ECMAScript?

- はい、ご存知のとおり、JavaScript のスクリプト標準は 1995 年に最初にリリースされた後、1999 年にベースになりました。当時、JavaScript は Livescript という名前で、Netscape Navigator でのみ実行されていました。当時は非常に混乱していましたが、ありがたいことに、現在は非常に明確になっており、この実装には 7 つのエディションがあります。

7 つのエディション。本当ですか。ES5 と ES2016+ はどうですか?

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

待って、6番目はどうなったの？

- ES6 のことですか? そうですね、各エディションは以前のバージョンのスーパーセットなので、ES2016+ を使用している場合は、以前のバージョンのすべての機能を使用していることになります。

そうです。では、なぜ ES6 ではなく ES2016+ を使用するのでしょうか?

- ES6 を使用することもできますが、async や await などの優れた機能を使用するには、ES2016+ を使用する必要があります。そうしないと、適切な制御フローのために非同期呼び出しをブロックするコルーチンを備えた ES6 ジェネレーターに頼ることになります。

今おっしゃったことが全く分かりません。名前もわかりにくいです。サーバーから大量のデータを読み込んでいるだけです。以前は CDN から jQuery を組み込んで AJAX 呼び出しでデータを取得できましたが、なぜそれができないのでしょうか。

- 今は 2016 年です。jQuery を使う人はもういません。結局はスパゲッティ コードだらけになります。それは誰もが知っています。

そうです。そのため、私の代替案は、データを取得して HTML テーブルを表示するために 3 つのライブラリをロードすることです。

- そうですね、これら 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みたいですね！

- Angular は 2015 年のものです。でも、そうです。Angular は、VueJS や RxJS などの 2016 年のクールなライブラリと一緒に存在します。それらについて学びたいですか?

React を使い続けましょう。すでに多くのことを学んでいます。React を使用する必要がある場合は、この npm から取得して、この Browserify を使用するのでしょうか?

-はい。

たくさんの依存関係を取得してそれらを結び付けるだけでは、複雑すぎるように思えます。

- そうです。そのため、Grunt や Gulp、Broccoli などのタスク マネージャーを使用して、Browserify の実行を自動化します。Mimosa を使用することもできます。

うなり声？ゴクゴク？ブロッコリー？ミモザ？一体何について話しているんだ？

- タスク マネージャー。しかし、もうクールではありません。2015 年頃にはタスク マネージャーを使用していましたが、その後は Makefile を使用していましたが、現在はすべてを Webpack でラップしています。

Makefile ですか? 主に C または C++ プロジェクトで使用されるものだと思っていました。

- そうですね。でも、どうやら Web の世界では、物事を複雑にして、その後に基本に戻るのが好きなようです。私たちはそれを 1 年かそこらでやっています。待ってください。1、2 年以内に Web でアセンブリを実行する予定です。

はぁ。Webpack というものについて言及しましたか?

- これはブラウザ用の別のモジュール マネージャーであり、タスク ランナーのような役割も果たします。Browserify の改良版のようなものです。

ああ、わかりました。なぜそれが良いのですか?

- まあ、良くなったというわけではないかもしれませんが、依存関係をどのように結び付けるかについて、より意見が分かれるだけです。Webpack では、CommonJS だけでなく、ネイティブ ES6 対応モジュールなど、さまざまなモジュール マネージャーを使用できます。

CommonJS/ES6 の件で非常に混乱しています。

- 誰もがそうだと思いますが、SystemJS ではもう気にする必要はありません。

まったく、また名詞が js だ。さて、この SystemJS とは何でしょうか?

- そうですね、Browserify や Webpack 1.x とは異なり、SystemJS は、複数のモジュールを 1 つの大きなファイルにまとめるのではなく、複数のファイルに結び付けることができる動的モジュール ローダーです。

待ってください。でも、ライブラリを 1 つの大きなファイルに構築して、それをロードしたいと思っていました。

- はい、しかし HTTP/2 が登場しているので、複数の HTTP リクエストの方が実際には優れています。

待ってください、React の元のライブラリ 3 つを追加するだけではだめですか?

-そうではありません。つまり、CDN から外部スクリプトとして追加することはできますが、その場合は Babel を含める必要があります。

はぁ。それは悪いことですよね？

-はい、babel-core 全体を含めることになりますが、本番環境では効率的ではありません。本番環境では、プロジェクトを準備するために一連の事前タスクを実行する必要があります。そのタスクは、サタンを召喚する儀式をゆで卵のレシピのように見せるものです。アセットを縮小し、醜くし、CSS を折り返し部分にインライン化し、スクリプトを延期し、さらに...

分かりました。では、ライブラリを CDN に直接含めない場合は、どのようにすればよいのでしょうか?

- Webpack + SystemJS + Babel の組み合わせを使用して Typescript からトランスパイルします。

Typescript? JavaScript でコーディングしていると思っていました!

-Typescript は JavaScript です。もっと正確に言えば、JavaScript のスーパーセットであり、より具体的にはバージョン ES6 の JavaScript です。前にお話ししたバージョン 6 のことをご存知ですか?

ES2016+ はすでに ES6 のスーパーセットだと思っていました。なぜ今 Typescript というものが必要なのでしょうか?

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

そして、Typescript は明らかにそれを実行します。

-Flow も同様ですが、Typescript はコンパイルが必要な JavaScript のスーパーセットであるのに対し、Flow は入力のみをチェックします。

はぁ…Flowって何？

- これは Facebook の人たちが作った静的型チェッカーです。関数型プログラミングは素晴らしいので、彼らはこれを OCaml でコーディングしました。

OCaml? 関数型プログラミング?

- 最近のクールな若者が使っているものだよ、分かるだろ、2016年だろ？関数型プログラミング？高階関数？カリー化？純粋関数？

あなたが今何を言ったのか全く分かりません。

- 最初は誰も知りません。関数型プログラミングは OOP よりも優れているということ、そして 2016 年に私たちが使用すべきなのは関数型プログラミングだということだけを知っておく必要があります。

待ってください、私は大学で OOP を学びました、それは良いことだと思いましたか?

-Oracle に買収される前の Java もそうでした。つまり、OOP は昔は優れていて、現在でも使用されていますが、今では誰もが状態を変更することは赤ん坊を蹴ることに等しいことに気づき、誰もが不変オブジェクトと関数型プログラミングに移行しています。Haskell の人たちは何年もそれを呼んでいましたが、Elm の人たちについては触れないでおきます。幸いなことに、Web には今や Ramda のようなライブラリがあり、プレーンな JavaScript で関数型プログラミングを使用できます。

ただ単に名前を挙げているだけですか? Ramnda って何ですか?

- いいえ。Ramda です。Lambda のようなものです。David Chambers のライブラリを知っていますか?

デイビッドって誰？

-David Chambers。クールな人。Coup のゲームが上手。Ramda の貢献者の 1 人。関数型プログラミングを真剣に学びたいなら、Erik Meijer もチェックしてください。

そしてエリック・マイヤーは…？

-関数型プログラミングの人でもあります。素晴らしい人です。彼は、奇妙な色のシャツを着てアジャイルをけなすプレゼンテーションをたくさん行っています。Tj、Jash Kenas、Sindre Sorhus、Paul Irish、Addy Osmaniの作品もチェックしてみてください。

わかりました。ここで止めておきます。それはすべて良いことですが、データを取得して表示するだけなら、それはすべて非常に複雑で不必要だと思います。動的なデータを含むテーブルを作成するために、これらの人々と知り合ったり、それらすべてを学ぶ必要はないと思います。React に戻りましょう。React を使用してサーバーからデータを取得するにはどうすればよいでしょうか。

- 実は、React ではデータを取得するのではなく、React でデータを表示するだけです。

ああ、くそっ。それで、データを取得するために何を使うんですか?

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

すみません? データを取得するために Fetch を使用していますか? それらの名前を付けている人は、シソーラスが必要です。

- そうですよね？Fetch は、サーバーに対して XMLHttpRequests を実行するためのネイティブ実装の名前です。

ああ、AJAXですね。

- AJAX は XMLHttpRequests を使用するだけです。しかし、確かに。Fetch を使用すると、Promise に基づいて AJAX を実行でき、コールバック地獄を回避することができます。

コールバック地獄？

- そうですね。サーバーに対して非同期リクエストを実行するたびに、その応答を待つ必要があり、関数内に関数を追加することになります。これは地獄のコールバック ピラミッドと呼ばれます。

ああ、わかりました。それで、この約束で解決するんですか?

- 確かにそうです。Promise を通じてコールバックを操作することで、理解しやすいコードを記述し、それらをモックしてテストできるだけでなく、同時にリクエストを実行し、すべてがロードされるまで待機することもできます。

それはFetchでできるのですか?

- はい、ただし、ユーザーがエバーグリーン ブラウザを使用している場合のみです。それ以外の場合は、Fetch ポリフィルを含めるか、Request、Bluebird、または Axios を使用する必要があります。

一体いくつの図書館を知っておく必要があるのでしょうか? いくつあるのでしょうか?

- JavaScript です。同じことを行うライブラリは何千もあるはずです。私たちはライブラリを知っています。実際、最高のライブラリを持っています。私たちのライブラリは巨大で、ガイ・フィエリの写真が含まれていることもあります。

ガイ・フィエリって言った？ さっさと終わらせましょう。Bluebird、Request、Axios ライブラリは何をしますか？

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

jQuery の AJAX メソッドも promise を返すようになったのではないですか?

- 2016 年にはもう「J」という言葉は使いません。Fetch を使い、ブラウザーにない場合はポリフィルするか、代わりに Bluebird、Request、または Axios を使用します。次に、非同期関数内で await を使用して promise を管理すれば、適切な制御フローが完成します。

await について言及するのはこれで 3 回目ですが、それが何なのか全くわかりません。

-Await を使用すると、非同期呼び出しをブロックできるため、データの取得タイミングをより適切に制御でき、全体的なコードの可読性が向上します。これは素晴らしいことです。Babel に stage-3 プリセットを追加するか、syntax-async-functions と transform-async-to-generator プラグインを使用するだけです。

これは狂気だ。

- いいえ、Typescript コードをプリコンパイルしてから Babel でトランスパイルして await を使用する必要があるという事実がおかしいです。

えっ？Typescriptには含まれていないの？

- 次のバージョンではそうなるでしょうが、バージョン 1.7 の時点では ES6 のみを対象としているので、ブラウザで await を使用する場合は、まず Typescript コードを ES6 を対象にコンパイルし、次にそれを Babel でコンパイルして ES5 を対象にする必要があります。

この時点では何を言えばいいのか分かりません。

- ほら、簡単だよ。すべてを Typescript でコーディングする。Fetch を使用するすべてのモジュールは、ES6 をターゲットにコンパイルし、ステージ 3 プリセットで Babel を使用してトランスパイルし、SystemJS でロードします。Fetch がない場合は、ポリフィルするか、Bluebird、Request、または Axios を使用して、すべての Promise を await で処理します。

簡単の定義は人それぞれです。それで、その儀式でようやくデータを取得し、React で表示できるようになりましたよね?

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

うーん、そうは思いません。データを表示するだけです。

-ああ、よかった。そうでなければ、Flux や Flummox、Alt、Fluxible などの実装について説明しなければならなかったでしょう。正直に言うと、Redux を使うべきです。

名前の上に飛んでみます。ここでも、データを表示するだけです。

- ああ、データを表示するだけなら、最初から React は必要ありません。テンプレート エンジンで十分だったでしょう。

冗談でしょ？これが面白いと思う？あなたは愛する人をそんな風に扱うの？

- 何が使えるかを説明していただけです。

やめてください。やめてください。

- つまり、テンプレート エンジンだけを使用する場合でも、私なら Typescript + SystemJS + Babel の組み合わせを使用します。

ページにデータを表示する必要があるのであって、Sub Zero のオリジナルの MK フェイタリティを実行する必要はありません。使用するテンプレート エンジンを教えていただければ、あとは私が引き受けます。

- たくさんありますが、どれに詳しいですか？

うーん、名前が思い出せない。ずいぶん前のことだ。

-jTemplates? jQote? PURE?

えーっと、ピンと来ないですね。もう一つ？

- 透明性？JSRender？MarkupJS？KnockoutJS？あれは双方向バインディングがありました。

もう一つ？

-PlatesJS? jQuery-tmpl? Handlebars? まだ使っている人もいます。

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

- 口ひげ、アンダースコア？正直に言うと、今では lodash にもそれがあると思いますが、それらは 2014 年のものですね。

えーっと…もっと新しいものだったかもしれません。

-Jade? DustJS?

いいえ。

-DotJS? EJS?

いいえ。

-ヌンジャク？電気ショック療法？

いいえ。

- まあ、誰も Coffeescript 構文を好まないよ。Jade は？

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

- パグのことを言っていました。ジェイドのことを言っていました。つまり、ジェイドは今はパグです。

はぁ。いいえ。思い出せません。どれを使いますか?

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

推測してみましょう。それには ES6 が必要です。

-正しい。

使用しているブラウザによっては、Babel が必要になります。

-正しい。

コアライブラリ全体を追加せずに含めたい場合は、npm からモジュールとしてロードする必要があります。

-正しい。

これには、Browserify、Wepback、またはおそらく SystemJS と呼ばれるものが必要です。

-正しい。

これは、Webpack でない限り、理想的にはタスク ランナーによって管理される必要があります。

-正しい。

しかし、関数型プログラミングと型付き言語を使用する必要があるため、まず Typescript を事前コンパイルするか、この Flow を追加する必要があります。

-正しい。

そして、await を使用する場合はそれを Babel に送信します。

-正しい。

そうすれば、Fetch、Promise、制御フローなどの魔法をすべて使用できるようになります。

- Fetch がサポートされていない場合は、ポリフィルすることを忘れないでください。Safari はまだこれを処理できません。

いいでしょう。これで終わりだと思います。実際、私はこれで終わりだと思います。Web は終わり、JavaScript もすべて終わりました。

- 大丈夫です。数年後には、私たち全員が Elm または WebAssembly でコーディングすることになるでしょう。

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

- 分かりました。それなら Python コミュニティを試してみてはいかがでしょうか。

なぜ？

- Python 3 って聞いたことありますか?

更新: タイプミスや間違いを指摘していただきありがとうございます。指摘されたとおりに記事を更新します。HackerNewsとRedditで議論されています。