過去に JavaScript を学習するのはどのような感じでしたか?-jsチュートリアル-php.cn

最近 Web プロジェクトを受けましたが、正直に言うと、ここ 2 年間 Web プログラミングにはあまり触れていませんでした。Web テクノロジーにはいくつかの変化があったと聞きました。あなたはここの Web 開発者の中で新しいテクノロジーについて最も詳しいと聞きましたが?

正確に言うと、私は「フロントエンドエンジニア」です。しかし、あなたは適切な人を見つけました。私は今年のテクノロジー、フロントエンドの視覚化、音楽プレーヤー、サッカーができるドローンなどについてはあまり詳しくないので、聞いてください。 JS カンファレンスと React カンファレンスに行ったばかりですが、知らない新しいテクノロジーはありません。

すごい。さて、ユーザーからの最新の更新情報を表示する Web ページを開発したいと考えています。バックエンドインターフェイスを介してデータを取得し、テーブルを使用してデータを表示し、ユーザーがデータを並べ替えることができると思います。サーバー上のデータが変更された場合は、このテーブルも更新する必要があります。私のアイデアは、jQueryを使用してそれを行うことです。

jQuery は使用しないでください。今では jQuery を使う人は誰もいません。 2016 年なので、間違いなく React を使用する必要があります。

ああ、わかった、React とは何ですか?

React は、Facebook の才能ある人々によって書かれた非常に強力なライブラリです。これにより、ページがより制御しやすくなり、非常にパフォーマンスが向上し、使いやすくなります。

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

もちろん、追加する必要があるのは 2 つの依存関係だけです。1 つは React で、もう 1 つは React DOM です

えっと、なぜ 2 つのライブラリがあるのでしょうか?

React とは、DOM を操作するために使用されるライブラリです。これらの DOM は JSX で記述されているため、操作するには特殊なライブラリが必要です。

JSX? JSXとは何ですか?

JSX は JS の拡張機能であり、XML に似ており、HTML を記述するために使用できます。

なぜHTMLを使用しないのでしょうか...?

今は 2016 年ですが、HTML を直接書く人はいません。

はい。さて、これら 2 つの依存関係を追加したら、React を使い始めてもいいでしょうか?

いいえ。 React を使用する前に、Babel を追加する必要があります。

バベルは別の図書館ですか？

そう、Babel は、作成した JS を任意のバージョンの JS に翻訳できる翻訳ツールです。 Babel を使用する必要はありませんが、使用しない場合は ES5 構文を記述する必要があります。ご存知のとおり、今は 2016 年ですが、ES2016+ 構文を使用できないわけはありません。 ES2016+はとてもクールです。

ES5とは何ですか? ES2016+とは何ですか?少しめまいがします。

ES5 は ECMAScript 5 です。ほとんどのブラウザが ES5 をサポートしているため、ほとんどの人は ES5 を使用するでしょう。

ECMAScriptとは...

ご存知のとおり、JSは1995年に誕生し、JS標準は1999年に策定されました。当時、JavaScript はまだ Livescript と呼ばれており、Netscape ブラウザーでのみ実行できました。当時は混沌とした時代でしたが、現在では JS 仕様には 7 つのバージョンがあります。

7つのバージョン? ES5 と ES2016+ についてはどうですか?

はそれぞれ5番目と7番目のバージョンです。

ねえ、6 番目のバージョンはどうですか?

ES6 について話しています。各バージョンは前のバージョンのスーパーセットであるため、最新の ES2016+ をそのまま使用できます。

はい。なぜES6を使わないのでしょうか？

そうですね、ES6 を使用することはできますが、async と await の優れた構文は使用できません。 ES2016+を使用することをお勧めします。 ES6 では、ジェネレーターは非同期タスクフローの制御にのみ使用できます。

何のことを言っているのか分かりません…理解できない名詞が多すぎます。サーバーからデータを取得したいのですが、以前は jQuery をよく使っていましたが、AJAX を使用してデータを取得できるようになりました。

兄弟、今は 2016 年ですが、誰も jQuery を使っていませんね? jQuery を使用すると、(保守不可能な)「スパゲッティ」コードが作成されるだけであることは誰もが知っています

それでは、データを取得して表示するために 3 つのライブラリをロードする必要があります。

はい、実際に「モジュールマネージャー」を使用して、これら 3 つのライブラリを 1 つのファイルに「パッケージ化」できます。

ああ、モジュールマネージャーとは何ですか...

異なるプラットフォームのモジュールマネージャーは異なります。フロントエンドモジュールマネージャーは通常、AMD または CommonJS モジュールを管理するものを指します。

わかりました...AMD と CommonJS とは何ですか?

は 2 つの定義です。エクスポートや要求など、JS で複数のライブラリまたはクラスの相互作用を記述する方法は数多くあります。 AMD または CommonJS API に従って JS を記述し、Browserify でパッケージ化できます。

それは合理的ですね。しかし、ブラウザリファイとは何でしょうか?

は、JS ファイルを CommonJS の形式でパッケージ化し、ブラウザーで実行するために使用されるツールです。 npm リポジトリを使用する人々が CommonJS を発明しました。

npmリポジトリとは...

は、依存モジュールを配置するために使用されるパブリックリポジトリです。

CDN のようなものですか?

同じではありません。これは、誰もがコードを投稿したり、コードをダウンロードしたりできるデータベースのようなものです。これらのコードは、開発中に使用するためにローカルにダウンロードすることも、必要に応じて CDN にアップロードすることもできます。

バウアーっぽいですね！

はい、でも今は 2016 年なので、もう Bower を使う人はいません…

わかりました。依存関係をインストールするには npm を使用する必要があります。

正解です。例を示します。React を使用したい場合は、npm を使用して React を直接インストールし、コードに React をインポートします。ほとんどの JS ライブラリはこの方法でインストールできます。

まあ、Angular も機能します。

Angular はまさに 2015 年です。しかし、今年 Angular が終わったわけではありません。VueJS や RxJS などもあります。それらを学びたいですか?

Reactを使ってみましょう。もう十分勉強しました。では、npm で React をインストールし、Browserify でパッケージ化しますか?

はい。

これは少し複雑すぎるようです。

確かに。このため、Browserify を自動的に実行できる Grunt、Gulp、または Broccoli などのタスク管理ツールを使用する必要があります。いいえ、今はミモザを使用できます。

何言ってるの…

タスク管理ツール。しかし、私たちはもうそれを使用しません。昨年はまだそれを使用していましたが、その後 Makefiles に変更しましたが、今では全員が Webpack を使用しています。

Makefile を使用するのは C/C++ プロジェクトだけだと思っていました。

はい、しかし明らかに私たち Web 開発者は、最初に物事を複雑にしてから、最も単純な状態に戻ることを好みます。私たちはこれを毎年行っています。見てください、2 年も経たないうちに、ウェブページ上に編集物を書くことができるようになるでしょう。

ねえ、今言った Webpack とは何ですか?

もう一つのモジュール管理ツールであり、タスク管理ツールでもあります。これは、Browserify の強化版と考えることができます。

ああ、わかった、なぜ Webpack が拡張バージョンなのでしょうか?

まあ、強化されてないのかもしれないけど。 Webpack は、依存関係を管理する方法を示します。Webpack を使用すると、CommonJS だけでなく、ES6 モジュールもサポートするさまざまなモジュールマネージャーを使用できます。

あちこちでいろんなことが起こっていて、混乱しています。

みんな混乱していますが、SystemJS が登場するまで待ってください。

なんと、また JS ライブラリができました、これは一体何ですか?

はは、Browserify や Webpack 1.x とは異なり、SystemJS は動的モジュールローダーです。

ちょっと待って、すべての依存関係を 1 つのファイルにパッケージ化する必要があると言いましたよね?

と言う事ですが、HTTP/2が普及したらパッケージ化しない方が良いでしょう。

それでは、React の 3 つの依存関係ファイルをページに直接追加してみませんか?

いいえ。これらのファイルは CDN からロードできますが、Babel を使用してローカルに変換する必要があります。

ああ、そんなに悪いですか？

はい、実稼働環境で babel を実行することはできません。実稼働環境に公開する前に、圧縮、難読化、インライン CSS、スクリプトの遅延読み込みなどの一連のタスクを実行する必要があります...

理解しました。はい、わかりました。 CDN を直接使用できないのですが、どうすればよいですか?

Webpack + SystemJS + Babel を使用して Typescript をトランスパイルすることを検討します。

タイプスクリプト? JavaScript のことを話しているのではありませんか? ！

Typescript も JavaScript であり、JS よりも使いやすく、先ほど説明した ES6 をベースとしています。

ES2016+ はすでに ES6 のスーパーセットですが、なぜ Typescript が再び登場するのでしょうか?

以上です。Typescript を使用すると、「厳密に型指定された」JS を作成できるため、実行時エラーが減ります。 2016 年には、JS が強力な型指定をサポートする時期が来ました。

どうやら Typescript でそれができるようです。

Flow もそれを行うことができます。違いは、Typescript をコンパイルする必要があるのに対し、Flow は構文をチェックするだけであるということです。

ああ、フローは？

は Facebook の人々によって書かれた静的型チェッカーです。 OCaml を使用して書かれた関数型プログラミングは非常に簡単です。

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

現在、大手企業はこれらのものを使用しています。もう 2016 年です。関数プログラミング、高階関数、カリー化、純粋関数などの概念です。

何を言っているのかわかりません。

最初は誰も知りませんでした。こう言えば、知っておく必要があるのは、関数型プログラミングの方がオブジェクト指向プログラミングよりも優れているということだけです。2016 年に私たちは関数型プログラミングを指摘しました。

待って、私は大学でオブジェクト指向プログラミングを勉強し、それがとても良いものだと思っていました。

Java は Oracle に買収される前は非常に優れていました。つまり、オブジェクト指向はかつては優れていて、今でもそれを使用している人がいますが、今では状態変換を維持するのが難しいことに誰もが気づいているため、誰もが「不変オブジェクト」と関数型プログラミングを使用し始めています。 Haskell の人々は長い間このセットを使用してきましたが、幸いなことに、Web 開発分野には Ramda のようなライブラリがあり、JS を使用して関数型プログラミングを実行できるようになります。

さらに名詞をいくつか捨てましたか?ラムダとは何ですか？

Ramnda ではなく、Ramda です。これは Lambda 式に少し似ています。 David Chambers によって書かれたライブラリです。

誰？

デヴィッド・チェンバース、素晴らしい奴だ。 blablabla

お邪魔しなければなりません。これらはすべて良さそうですが、どれも複雑すぎて不必要だと思います。データを取得して表示したいだけなので、この場合は知識は必要ないと思います。

React に戻りますが、React を使用してサーバーからデータを取得するにはどうすればよいですか?

そうですね、React はこの機能を提供していません。React を使用できるのはデータの表示のみです。

私は確信しています。では、どうやってデータを取得すればよいのでしょうか?

Fetch API を使用するだけです。

一体何ですか？この API の名前はひどいです。

私もそう思います。 Fetch API は、ブラウザによって提供される非同期リクエストインターフェイスです。

ああ、それは AJAX です。

AJAX は XMLHttpRequest オブジェクトのみを使用しますが、Fetch API を使用すると、Promise スタイルを使用して非同期リクエストを開始できるため、「コールバック地獄」を取り除くのに役立ちます。

コールバック地獄?

はい、非同期リクエストを行うたびに、そのリクエストが応答するまで待つ必要があります。このとき、関数内で関数を使用する必要があり、このネストされた呼び出しがコールバック地獄になります。

わかりました。 Promise はこの問題を解決しますか?

はい。 Promise を使用してコールバックを管理すると、より読みやすく、テストが容易なコードを作成できます。同時に複数のリクエストを実行し、すべてのリクエストが返されるのを待つこともできます。

Fetchでもできる？

はい。ただし、ユーザーが新しいバージョンのブラウザを使用していることが前提です。そうでない場合は、Fetch "ポリフィル" を追加するか、Request、Bluebird、Axios などのライブラリを使用する必要があります。

なんと、ライブラリはいくつ必要なのでしょうか?

これは JS です。同じことを行うライブラリが何千もあります。私たちは図書館をよく知っており、最高の図書館を持っています。私たちは多数の図書館を持っており、必要なものはすべて入手できます。

今挙げた図書館は何をするものですか？

これらのライブラリは XMLHttpRequest を操作し、Promise オブジェクトを返します。

jQueryのajaxメソッドも同じことをしているようです…

2016年からjQueryは使っていません。 Fetch を使用する場合は、Polyfill を追加する必要がある場合があります。それ以外の場合は、Bluebird、Request、または Axios を使用できます。次に、await と async を使用して Promise を管理し、非同期タスクを制御できるようにします。

「待って」って言うのはこれで3回目です、何ですか？

await を使用すると、非同期呼び出しをブロックできるため、非同期で返されるデータをより適切に制御できるようになり、コードの可読性が大幅に向上します。 await は非常に使いやすく、Babel にステージ 3 構成を追加するか、syntax-async-functions とtransform-async-to-generator プラグインを追加するだけです。

クレイジーですね。

おかしくないよ。 await を使うために、Typescript をコンパイルし、それを Babel で翻訳する人は頭がおかしいです。

一体何ですか？ Typescript は待機をサポートしていませんか?

次のバージョンでサポートされる予定です。

何も言うことはありません。

実際はとてもシンプルだということがわかります。 Typescript を使用してコードを記述し、Fetch を使用して非同期リクエストを開始し、すべてのコードを ES6 にコンパイルしてから、Babel のステージ 3 構成アイテムを使用して ES6 を ES5 に変換します。すべてのコードは SystemJS を使用してロードされます。 Fetch を使用できない場合は、ポリフィルを追加するか、Bluebird、Request、または Axios を使用して、await を使用して Promise を処理できるようにします。

ほら、「シンプル」に対する私たちの理解は異なります。さて、これでやっとデータを取得してReactで表示できるようになりますね。