ES6からES13までのモダンなJavaScript（JSチュートリアル）

このJavaScript ES6コースで待っています。

ブラウザでJavaScriptは長い時間前から存在しています。ほとんどのウェブサイトには、多かれ少なかれJSコードが含まれています。初期のバージョンは非常に不安定でしたが、ES5の標準を使えば、罠や不確実性をうまく回避できました。では、なぜ新しいものを学ぶのでしょうか？なぜ既存のものに留まらないのでしょうか？このレッスンでは、新しい標準であるES6の利点と、なぜこれを無視できないのかについて説明します。

このレッスンでは、開発環境を設定する方法を紹介します。IDEとしては、MSのVisual Studio Codeと開発サーバーとしてViteJSを使用します。

ES5まで、 varというキーワードが変数を宣言する唯一の方法であり、その特性によってしばしば予期せぬ振る舞いやエラーを引き起こしていました。ES6では、letと constという新しいキーワードが登場し、varの欠点をいくつか修正しています。

Forループは、すべてのWeb開発者が知っています。それは配列を繰り返すためによく使用されます。ES6では、この作業をはるかに短く、コンパクトに許可するForループのバリエーションがあります。

関数はJSで不可欠で、これまではキーワード function を使用してだけ宣言と定義されていました。ES6は非常にエレガントで短い書き方を導入し、コードをより読みやすくするだけでなく、this の厄介な問題の解決策も提供しています。

ES5には、オプションのパラメーターを実装するのがやや手間がかかり、関数の呼び出し元には明らかでない。ES6では、オプションのパラメーターはデフォルト値と共に関数のシグネチャに直接書き込むことができる。

デストラクチャリングは、オブジェクトや配列から要素を狙い撃ちで取り出すことを可能にします。注意深く見ると、多くの適用可能な方法が明らかになり、JSコードをよりエレガントでコンパクトにします。

ES6以前、関数で複数のパラメータを許可するためにarguments変数を使用する必要がありました。ES6ではこれを簡単に行うことができ、これを「Rest-Parameters」と呼びます。

関数の定義だけでなく、配列の分割代入でも…-演算子を使用して、「残り」の要素をキャッチし、配列として提供することができます。

配列だけでなく、オブジェクトでも残りのプロパティを収集し、オブジェクトとして利用できるようにすることができる。

Rest演算子の逆はSpread演算子です。それは見た目が同じです（…）が、代入の反対側に配置され、配列を個々の要素に展開します。

「スプレッド演算子」という「トリック」は、オブジェクトにも非常に有効です。これにより、オブジェクトを他のオブジェクトに「混ぜる」ことができます。しかし、Object.assign()も非常に優れた代替手段です。

オブジェクトリテラルでの関数は、function-キーワードを使用して非常に煩わしいです。しかし、ES6を使用すると、はるかに短くわかりやすく書くことができます。

文字列を扱うことは、すべてのプログラマーの基本ツールの一部です。ES6がいくつかの新しい非常に便利な文字列関数を提供してくれるのは素晴らしいことです。これにより、書く作業がかなり節約されます。

違いようがない: 組み込み変数値を持つ複数行文字列リテラルは、ES6以前は苦痛で読みにくいものでした。その点、ES6の新しいテンプレートリテラルは、構文的に恵まれています。

ES5でさえ、より機能的なアプローチを取るいくつかの非常に便利な配列関数があります。ES6には、さらにいくつかの新しい関数が追加され、配列の処理をより快適にします。ここではES5ですでに存在していたいくつかの「古い」関数も評価されています。

オブジェクトは、常にKey-Value-StoreやDictionaryとして機能させることができましたが、いくつかの欠点がありました。新しいMapデータ構造は、これらの欠点を克服し、他のプログラミング言語で知られている堅牢な辞書機能を提供します。

非同期処理は コールバック関数 で処理できますが、その際にネストが深くなりすぎてコードが見づらくなる可能性があります（いわゆる コールバック・ヘル ）。Promise は この問題を解消し、深いネストを回避して非同期処理の連結を1つのレベルで許可します。

PromisesでCallback-Hellを避けることができるようになった後、async/await-構文はさらに文法の砂糖を追加します。Promisesに基づいており、非同期操作を同期的にほぼプログラムできます。 async/await でプログラミングしたことがある人は、それ以降、Promisesのthen-メソッドの直接利用（そしてコールバックの使用）を避けます。

Node.jsでは、モジュールが最初から使用されていましたが、最初はCommonJSモジュールフォーマットにのみrequireが使用されていました。ES6以降、標準のモジュール定義と新しいキーワードimport/exportが導入されました。現在、ほとんどの（新しい）JSライブラリでこの形式がサポートされており、また、Node.jsも最新のバージョンで対応しています。

ES6では、importキーワードを使用してモジュールを静的にインポートするだけでなく、import関数を使用して動的にインポートすることもサポートされています。これは非同期的に機能するため、解決されるPromiseが返され、awaitを使用して待つことができます。これにより、実行時に任意のタイミングでモジュールをロードすることが可能になります。

クラスと継承を使用した従来のオブジェクト指向プログラミングは、ES6以前ではコンストラクタ関数のプロトタイプを介してしか利用することはできませんでした。これは煩雑で、コンパクトではなく、そのためエラーが発生しやすかった。新しいclassキーワードは、ES6での定義を他のプログラミング言語（Java、C＃、C++など）で知られるようなコンパクトな形式で可能にします。内部的には、引き続き基本的にプロトタイプベースのシステムのままですが、より美しい構文が使用されています。

継承も引き続きプロトタイプに基づいていますが、ES6ではextendsキーワードを使用して簡単で見やすくなっています。使用する場合、基本クラスのコンストラクタを適切なタイミングでsuperで呼び出さなければなりません。その方法についてはもちろん、このレッスンでも説明されています。

メンバーまたはフィールドの宣言も、新しい標準によって可能になりました。これにより、静的フィールドを宣言および初期化することもできます。

プライベートフィールドも今では宣言でき、それには外部から到達することは確実にありません。他のプログラミング言語とは明らかに異なる宣言方法は、少し慣れが必要です。

新しいキーワードclassおよび継承やデータカプセル化（プライベートフィールド）などの関連機能を使用すれば、すべてのOOプログラマーが満足するはずですよね。このレッスンで、クラス、プロトタイプ、そしてthisなしでオブジェクトを作成する代替手段を紹介したいと思いますが、その代わりにより柔軟な「継承」またはむしろ「組み立て」を可能にします。

ES6 およびそれ以降の主要な機能がこれでほぼ網羅されました。 ただし、常に新機能が追加されています。 あまり使用頻度の低いいくつかの機能はまだ言及されていません。 今後期待される内容や特定のケースで便利な機能について説明します。