このチュートリアルでは、JavaScriptの最新バージョンの新機能について学びます。
ECMAScript6（またはES6）とは何ですか
ECMAScript2015（またはES6）は、ECMAScript言語仕様標準の第六およびメジャー版です。 これは、JavaScript実装の標準を定義します。
ES6はJavaScript言語に大きな変更をもたらしました。, ブロックスコープの変数、配列やオブジェクトを反復処理するための新しいループ、テンプレートリテラル、JavaScriptプログラミングをより簡単に楽しくするため この章では、日常のJavaScriptコーディングで使用できる最高のES6機能のいくつかについて説明します。
letキーワード
ES6では、変数を宣言するための新しいletキーワードが導入されています。 ES6より前は、JavaScriptで変数を宣言する唯一の方法はvarキーワードでした。, それらの違いが何であるかを見てみましょう。
varとletの間には二つの重要な違いがあります。 varキーワードで宣言された変数は関数スコープであり、そのスコープ内で先頭に掲げられますが、letキーワードで宣言された変数はブロックスコープ({})であり、掲げられません。
ブロックスコープは、単に中括弧のペアの間に新しいスコープが作成されることを意味します。{}。, したがって、ループ内でletキーワードを使用して変数を宣言した場合、次の例に示すように、ループの外側には存在しません。
上の例でわかるように、最初のブロックの変数iはforループの外側にはアクセスできません。 これにより、スコープがブロック（{}）に限定されているため、同じ変数名を複数回再使用できるようになり、変数宣言が少なくなり、よりクリーンなコードになります。,
constキーワード
新しいconstキーワードは定数を定義することを可能にします。 定数は読み取り専用であり、新しい値を再割り当てすることはできません。 それらはまた、letようなブロックスコープです。
例
このコードを試してみてください”
const PI = 3.14;console.log(PI); // 3.14PI = 10; // errorただし、オブジェクトのプロパティまたは配列要素を変更することはできます。
for…ループの
新しいfor...ofループは、配列やその他の反復可能なオブジェクトを非常に簡単に反復処理することができます。, また、ループ内のコードは、反復可能なオブジェクトの各要素に対して実行されます。 ここに例があります：
for...ofループは反復可能ではないため、オブジェクトでは機能しません。 オブジェクトのプロパティを反復処理する場合は、for-inループを使用できます。
テンプレートリテラル
テンプレートリテラルは、複数行の文字列を作成して文字列補間を実行する簡単でクリーンな方法を提供します。 これで、変数や式を任意の場所で文字列に埋め込むことができます。,
テンプレートリテラルは、通常の二重引用符または一重引quotesの代わりにback-tick(` `)（墓アクセント）文字を使用して作成されます。 変数または式は、${...}構文を使用して文字列内に配置できます。 次の例を比較して、それがどれほど有用であるかを見てください。
ES5では、同じことを達成するために、次のようなものを書かなければなりませんでした。
関数パラメータのデフォルト値
ES6では、関数パラメータにデフォルト値を指定することができます。, この引数がなければ提供している関数が呼ばれるこれらのデフォルトのパラメータの値が使用されます。 これはJavaScriptの中で最も待たれている機能の一つです。 ここに例があります：
ES5では、同じことを達成するためには、次のようなものを書かなければなりませんでした。
矢印関数
矢印関数はES6のもう一つの興味深い機能です。 これは、functionおよびreturnキーワードをオプトアウトすることによって、関数式を記述するためのより簡潔な構文を提供します。,
矢印関数は、新しい構文、太い矢印（=>）表記を使用して定義されています。 それがどのように見えるか見てみましょう：
あなたが見ることができるようにthreはありませんfunctionそしてreturn矢印関数宣言のキーワード。
括弧をスキップすることもできます。()正確に一つのパラメータがある場合は、ゼロまたは複数のパラメータがある場合は常にそれを使用する必要があります。,さらに、関数本体に複数の式がある場合は、中かっこ（{}）をラップする必要があります。 この場合、値を返すにはreturnステートメントも使用する必要があります。
矢印関数の書き方にはいくつかのバリエーションがあります。 ここで最も一般的に使用されています：
通常の関数と矢印関数の間には重要な違いがあります。, 通常の関数とは異なり、矢印関数は独自のthisを持たず、定義されている外部関数からthisを取ります。 JavaScriptでは、thisは関数の現在の実行コンテキストです。,
ES6テンプレートリテラルと矢印関数を使用して同じ例を書き換えます。
はっきりとわかるように、上記の例のthisキーワードは、グローバルオブジェクトウィンドウ（9行目）を参照している前の例とは異なり、Personオブジェクト（9行目）である矢印関数を囲む関数のコンテキストを参照しています。
クラス
ECMAScript5以前では、クラスはJavaScriptに存在しませんでした。, クラスはES6で導入されており、Java、PHPなどの他のオブジェクト指向言語のクラスに似ています。 しかし、彼らはまったく同じように動作しません。 ES6クラスを使用すると、オブジェクトの作成、extendsキーワードを使用した継承の実装、およびコードの再利用が容易になります。
ES6では、新しいclassキーワードの後にclass-nameを使用してクラスを宣言できます。 慣例により、クラス名はTitleCaseで記述されます（つまり、各単語の最初の文字を大文字にします）。,
上記の例では、Squareクラスはextendsキーワードを使用してRectangleから継承します。 他のクラスから継承するクラスは、派生クラスまたは子クラスと呼ばれます。また、コンテキストにアクセスする前に、子クラスのコンストラクタでsuper()を呼び出す必要があります（this）。, たとえば、super()を省略し、squareオブジェクトのgetArea()メソッドを呼び出すと、getArea()メソッドはthisキーワードにアクセスする必要があるため、エラーになります。
メモ:関数宣言とは異なり、クラス宣言はホイストされません。 クラス宣言は、letおよびconst宣言のように、実行がクラス宣言のポイントに達するまで一時的なデッドゾーン（TDZ）に存在します。, したがって、クラスにアクセスする前にクラスを宣言する必要があります。
Modules
ES6より前は、JavaScriptでモジュールのネイティブサポートはありませんでした。 ものの中にJavaScriptアプリケーションは、例えば変数の異なるJavaScriptファイル共有と同じです。
ES6では、各モジュールが個別の.jsファイルで表されるファイルベースのモジュールが導入されています。, これで、モジュール内のexportまたはimportステートメントを使用して、変数、関数、クラス、またはその他のエンティティを他のモジュールまたはファイルと/間でエクスポートまたはインポートすることができます。
モジュール、つまりJavaScriptファイル”main”を作成しましょう。js”とその中に次のコードを配置します。
別のJavaScriptファイル”アプリ”を作成します。js”次のコードで：
最後にHTMLファイルを作成する”テスト。html”と次のコードで、HTTPプロトコルを使用してブラウザでこのHTMLファイルを開きます（またはlocalhostを使用します）。 また、スクリプトタグのtype="module"にも注意してください。,
Restパラメーター
ES6では、任意の数のパラメーターを配列の形式で関数に渡すことができるrestパラメーターが導入されています。 これは、関数にパラメータを渡したいが、必要な数がわからない状況で特に役立ちます。
restパラメータは、名前付きパラメータの前にrest演算子(...)を付けることによって指定されます。 Restパラメータは、パラメータのリストの最後のもののみにすることができ、restパラメータは一つだけにすること, それがどのように動作するかを確認するには、次の例を見てみましょう。
restパラメータが関数内の唯一のパラメータである場合、関数に渡されるすべての引数を取得します。そうでない場合は、名前付きパラメータの数を超える残りの引数を取得します。
注：restパラメータという用語をREST（表現状態転送）と混同しないでください。 これはRESTful webサービスとは何の関係もありません。,
スプレッド演算子
スプレッド演算子は、(...)でも表され、rest演算子とはまったく逆の機能を実行します。 Spread演算子は、push()、unshift()concat()などの配列メソッドを使用せずに、配列の要素を別の配列に挿入するためにも使用できます。,
構造化割り当て
構造化割り当ては、より短い構文を提供することによって、配列から値を抽出したり、オブジェクトからプロパティを別の変数に抽出したりすることを容易にする式です。
構造化代入式には、配列とオブジェクトの構造化代入の二種類があります。,
配列の構造化割り当てでrest演算子を使用することもできます。
オブジェクトの構造化割り当て
ES5では、オブジェクトのプロパティ値を抽出するには、次のように記述する必要があります。
しかし、ES6では、オブジェクトのプロパティ値を抽出し、変数に簡単に割り当てることができます。
上記で説明した機能のほとんどは、次のようにしてサポートされています。
google chrome、mozilla firefox、microsoft edge、safariなどの主要なwebブラウザの最新バージョン。,