ES6 JavaScriptとは何ですか、そしてそれはどのように異なりますか？

JavaScriptはほとんどのインタラクティブなウェブを支えており、それに伴って進化してきました。現在、JavaScriptには毎年新しい機能が追加されています。新機能が何であるか、そしてあなたのウェブサイトでES6 JavaScriptをどのように使用するかを見ていきましょう。

JavaScriptには多くの種類があります

オラクルはJavaScriptという用語に商標を持っているため、モダンJavaScriptが実装している実際の標準はECMAScript標準、またはESと呼ばれています。主なJavaScript標準はECMAScript 5、またはES5で、2009年にリリースされました。これは特別な機能のないバニラJavaScriptであり、IE 9を含むすべての場所でサポートされています。

ES6は比較的新しい仕様で、2015年にリリースされ、多くの新機能をサポートしています。技術的にはES2015と呼ばれており、その後の毎年のリリースはリリース年で示されます。しかし、誰もがES6と呼んでいるので、私たちもそれに従います。

ES6は重要です。特に、JavaScriptの再標準化の始まりを示しているからです。最近では、ECMAは毎年新しい標準を発表しています。しかし、ES6はES5の6年後にリリースされ、ES5はES3の10年後にリリースされたため、これは大きな節目となります。

ES6構文の使い方

ES6は実際には多くの場所でサポートされていますが、主な問題はインターネットエクスプローラー（いつものように）です。したがって、ES6スタイルで書き始めることはできるかもしれませんが、誰のブラウザも同じように動作するとは限りません。

最近では、通常、Babelのようなユーティリティの助けを借りて、通常のES5構文にコンパイルされます。Babelは、あなたの開発コード（ES6で書かれた全ての素晴らしい機能を持つコード）を、プロダクションサイトで実行するコードに変換するコンパイラです。このプロダクションコードは、しばしばWebpackを使ってバンドルおよび圧縮されます。

これがどのように機能するかです：あなたは自分の開発環境を持っていて、そこで自分の

.js

ファイル。好きなES6の文法を使うことができます。直接実行するのではなく、Webpackを設定してBabelでJSファイルを読み込むようにします。しばしば、webpack-dev-serverを実行したくなるので、変更を加えたときにこれが自動的に行われます。

今はロードする代わりに

index.js

読み込むと、

bundle.js

, これはあなたのコードすべてを含んでいます。また、これによりあなたはJSでNPMモジュールを使用できるという大きな利点もありますが、あまり多く追加するとコードが膨らむ可能性があります（ただし、webpackはミニファイに非常に優れています）。

新着情報

ここには多くの要素が含まれているので、この記事ではすべてをカバーすることはできません。完全なリストについては、この互換性表を参照できます。この表にはES2016およびそれ以降の機能も含まれています。

一般的に、Babelが何かを古いJavaScriptの仕様にコンパイルできる場合、開発において使用するのはおそらく安全です。もしできない場合、IE 11を使用している3％の人口を気にしないのであれば、それはおそらく最新の機能でない限り、ほとんどのブラウザでサポートされています。

アロー関数

タイプする代わりに:

arr.map(function (d) {




 return d + 1;

});

代わりに関数キーワードを括弧の後に矢印に置き換えることができます:

arr.map((d) => {

 return d + 1;

});

さらに、引数を1つだけ渡す場合は括弧は必要ありません。また、値を1つだけ返す場合はブラケットとreturn文も必要ありません:

arr.map(d => d + 1);

これは新しい式クロージャー構文であり、特にリスト、コールバック、またはエラーハンドリングを扱う際に、コンパクトな関数を作成するのに役立ちます。これは、一行のifステートメントの動作に似ています。

分割代入によるオブジェクトと配列の簡略化された作成

書くのではなく:

var type = "123", color = "blue"

var obj = { type: type, color: color }

キー名を単に省略することができ、変数名に自動的に設定されます。

var obj = { type, color }

さらに、これは逆に機能し、分割代入と呼ばれます。

var { type, color } = obj

分解の派手な副作用は、配列やオブジェクトの残りを変数に割り当てる「...」構文であり、これは「etc.」のように機能します。

var { type, ...rest } = obj

//rest == { color: "blue" }

そして、それは逆方向にも機能し、配列を拡大して平坦化する効果があります:

var arr1 = ["a", "b"], arr2 = ["c", "d"]

var flat = [...a, ...b, "e"]





    

//flat = ["a", "b", "c", "d", "e"]

ここで説明されている以上に、構造分解にはもっと多くのことがあります。

クラス

JavaScriptには今クラスがあります。これがMozillaのドキュメントに基づく使い方です:

class Rectangle {

 constructor(height, width) {

 this.height = height;

 this.width = width;

 }

 // Getter

 get area() {

 return this.calcArea();

 }

 // Method

 calcArea() {

 return this.height * this.width;

 }

}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

ご覧のように、他のオブジェクト指向プログラミング言語に似ていますが、完全にはそうではありません。Mozillaが述べているように、この新しいシステムは「JavaScriptの既存のプロトタイプベースの継承に対する主に構文上の砂糖」ですので、実際にはJSをオブジェクト指向にするわけではありません。でも、あって損はありません。

さらに、クラス構文は静的メソッドとプロパティ、および子クラスをサポートしていますが、子クラスは複数の親から継承することはできません。

関数引数の変更

ES6は、関数のパラメータを記述する2つの新しい方法を導入しました。まず、デフォルトパラメータは、関数定義で値を割り当てることで指定できます:

var func = (a, b = "default") => { }

もし二つの引数を指定せずにfuncを呼び出すと、デフォルト値が使用されることになります。

また、関数には可変個の引数を配列として渡すことができるようになりました。これは、残余引数の構文と呼ばれています:

var func = (a, b, c, ...rest) => { }

restパラメータは、関数パラメータの残りの部分の配列に設定されるか、名前付きパラメータだけが存在する場合はundefinedに設定されます。

let と const

letコマンドは、特にブロックスコープを付与するためのvarの代替です。以下は、通常のJSにおける変数の動作です:

var x = 0; //global variable

function someFunc() {

 var y = 3; //local variable

}

グローバル変数は関数内で使用できますが、ローカル関数変数は関数の外では使用できません。これにより、変数に「i」、「tmp」、「x」および「count」といった名前を付けても問題ありません。

ブロックスコープは異なり、ネストされたブロックで変数を再定義することを可能にします:

var x = 0

{

 let x = 2

 //x == 2

}

// x == 0 again

このlet構文は、基本的にそのブロック内（関数、キャッチブロック、またはこのような明示的なブロック）でxの内容を変更できるようにし、ブロックを出るとリセットされるようにします。これは特に、一時的なcount変数に便利で、各ブロックは異なるスコープを持ちます。スコープは子ブロックに引き継がれますが、さらにネストして変更することもできます。

const構文はかなり簡単です。varをconstに置き換えると、変数は読み取り専用になります。それに書き込もうとすると、エラーが発生します:

Uncaught TypeError: Assignment to constant variable.

あなたに、してはいけないことをしようとしていることを知らせています。これは、バグを防ぐためにコーディング中の良いリマインダーである以外の目的はありません。