TECH I.S.

JavaScript ES6

ECMAScript2015は、JavaScriptの2番目のメジャーリビジョンです。

ECMAScript2015は、ES6およびECMAScript6としても知られています。

この章では、ES6の最も重要な機能について説明します。

ES6 の新機能

ES6(2015)のブラウザーサポート

Safari 10とEdge 14 は、ES 6を完全にサポートする最初のブラウザです。


Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
2017年1月 2016年8月 2017年3月 2016年7月 2018年8月

The let keyword

このletキーワードを使用すると、ブロックスコープで変数を宣言できます。

例

var x = 10; // Here x is 10 {   let x = 2;   // Here x is 2 } // Here x is 10

詳細については、JavaScript Letの章を参照してください。

The const keyworde

このconstキーワードを使用すると、定数(定数値を持つJavaScript 変数)を宣言できます。

定数はlet変数と似ていますが、値を変更できない点が異なります。

例

var x = 10; // Here x is 10 {   const x = 2;   // Here x is 2 } // Here x is 10

詳細については、JavaScript Constの章を参照してください。

Arrow Functions

アロー関数を使用すると、短い構文で関数式を作成できます。

functionキーワード、returnキーワード、および中括弧は必要ありません。

例

// ES5 var x = function(x, y) {    return x * y; } // ES6 const x = (x, y) => x * y;

アロー関数には独自のthisがありません。これらはオブジェクトメソッドの定義にはあまり適していません。

アロー関数はホイストされません。これらは使用する前に定義する必要があります。

関数式は常に定数値であるため、varを使用する方が をconstを使用するよりも安全です。

return関数が単一のステートメントの場合は、キーワードと中括弧のみを省略できます。このため、常にこれらを維持するのが良い習慣になる可能性があります。

例

const x = (x, y) => { return x * y };

アロー関数の詳細については、次のJavaScript Arrow Functionsの章を参照してください。

The ... Operator

... 演算子は、反復可能(配列など)をさらに多くの要素に拡張します。

例

const q1 = ["Jan", "Feb", "Mar"]; const q2 = ["Apr", "May", "Jun"]; const q3 = ["Jul", "Aug", "Sep"]; const q4 = ["Oct", "Nov", "May"]; const year = [...q1, ...q2, ...q3, ...q4];

... 演算子を使用すると、反復可能を関数呼び出しのさらに多くの引数に拡張できます。

例

const numbers = [23,55,21,87,56]; let maxValue = Math.max(...numbers);

For/Of ループ

JavaScriptfor/ofステートメントは反復可能なオブジェクトの値をループします。

for/of配列、文字列、マップ、NodeListなどの反復可能なデータ構造をループできます。

このfor/ofループの構文は次のとおりです。

<div>for (<i>variable</i> of <i>iterable</i>) {   // <i>code block to be executed</i> } </div>

*変数*- 反復ごとに、次のプロパティの値が変数に割り当てられます。変数はconst、let、 またvarで宣言できます。

iterable- 反復可能なプロパティを持つオブジェクト。

配列のループ


例

const cars = ["BMW", "Volvo", "Mini"]; let text = ""; for (let x of cars) {   text += x + " "; }

文字列のループ

例

let language = "JavaScript"; let text = ""; for (let x of language) {     text += x + " "; }

詳細については、JavaScript ループ For/In/Ofの章を参照してください。

JavaScript マップ

オブジェクトをキーとして使用できることは、Mapの重要な機能です。


例

const fruits = new Map([ ["apples", 500], ["bananas", 300], ["oranges", 200] ]);

MapオブジェクトとMapとArrayの違いの詳細については、JavaScript マップの章を参照してください。

JavaScript セット


例

// Create a Set const letters = new Set(); // Add some values to the Set letters.add("a"); letters.add("b"); letters.add("c");

Setオブジェクトの詳細については、JavaScript セットの章を参照してください。

JavaScript クラス

JavaScript クラスは、JavaScriptオブジェクトのテンプレートです。

クラスを作成するには、キーワードclassを使用します。

constructor()という名前のメソッドを常に追加します。:

構文

class ClassName {   constructor() { ... } }

例

class Car {   constructor(name, year) {     this.name = name;     this.year = year;   } }

上記の例では、「Car」という名前のクラスを作成します。

このクラスには、「名前」と「年」という2つの初期プロパティがあります。


JavaScriptのクラスはオブジェクトでは無い

これはJavascriptオブジェクトのテンプレートである。

クラスの使用

クラスがある場合、そのクラスを使用してオブジェクトを作成できます。

例

const myCar1 = new Car("Ford", 2014); const myCar2 = new Car("Audi", 2019);

クラスの詳細については、次のJavaScript クラスの章を参照してください。

JavaScriptの約束

Promise は、「Producing Code」と「Consuming Code」をリンクするJavaScriptオブジェクトです。

「Producing Code」には時間がかかる場合があり、「Consuming Code」は結果を待つ必要があります。

約束の構文

const myPromise = new Promise(function(myResolve, myReject) { // "Producing Code" (May take some time)   myResolve(); // when successful   myReject();  // when error }); // "Consuming Code" (Must wait for a fulfilled Promise). myPromise.then(   function(value) { /* code if successful */ },   function(error) { /* code if some error */ } );

Promise の使用例

const myPromise = new Promise(function(myResolve, myReject) {   setTimeout(function() { myResolve("I love You !!"); }, 3000); }); myPromise.then(function(value) {   document.getElementById("demo").innerHTML = value; });

次の章でPromiseの詳細を学びます。

シンボルタイプ

JavaScriptシンボルは、Number、String、またはBooleanと同様のプリミティブ データ型です。

これは、他のコードが誤ってアクセスできない一意の「隠された」識別子を表します。

たとえば、異なるコーダーがサードパーティコードに属するpersonオブジェクトにperson.idプロパティを追加したい場合、お互いの値を混在させることができます。

Symbol()を使用して一意の識別子を作成すると、この問題が解決されます。

例

const person = {   firstName: "John",   lastName: "Doe",   age: 50,   eyeColor: "blue" }; let id = Symbol('id'); person[id] = 140353; // Now person[id] = 140353 // but person.id is still undefined

注

シンボルは常に一意です。

同じ説明で 2 つのシンボルを作成すると、異なる値になります。

Symbol("id") == Symbol("id"); // false

Default Parameters

ES6では、関数パラメーターにデフォルト値を設定できます。

例

function myFunction(x, y = 10) {   // y is 10 if not passed or undefined   return x + y; } myFunction(5); // will return 15

Function Rest Parameter

残りのパラメーター(...)を使用すると、関数は不特定の数の引数を配列として扱うことができます。

例

function sum(...args) {   let sum = 0;   for (let arg of args) sum += arg;   return sum; } let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

String.includes()

includes()メソッドが返す文字列に指定された値が含まれている場合はtrue、そうでない場合はfalseを返します。:

例

let text = "Hello world, welcome to the universe."; text.includes("world")    // Returns true

String.startsWith()

startsWith()メソッドが返す文字列が指定された値で始まる場合true、そうでない場合はfalseを返します。:

例

let text = "Hello world, welcome to the universe."; text.startsWith("Hello")   // Returns true

String.endsWith()

endsWith()メソッドは文字列が指定された値で終わる場合はtrue、そうでない場合はfalseを返します。:

例

var text = "John Doe"; text.endsWith("Doe")    // Returns true

Array.from()

Array.from()メソッドは、長さプロパティを持つオブジェクトまたは反復可能なオブジェクトから Arrayオブジェクトを返します。

例

文字列から配列を作成します。

Array.from("ABCDEFG")   // Returns [A,B,C,D,E,F,G]

配列キー()

keys()メソッドは、配列のキーを持つArray Iteratorオブジェクトを返します。

例

配列のキーを含むArray Iteratorオブジェクトを作成します。

const fruits = ["Banana", "Orange", "Apple", "Mango"]; const keys = fruits.keys(); let text = ""; for (let x of keys) {   text += x + "<br>"; }

配列検索()

find()メソッドは、テスト関数を通過した最初の配列要素の値を返します。

この例では、18より大きい最初の要素を見つけます(その値を返します)。

例

const numbers = [4, 9, 16, 25, 29]; let first = numbers.find(myFunction); function myFunction(value, index, array) {   return value > 18; }

この関数は3つの引数を取ることに注意してください。

  • アイテム値
  • アイテムインデックス
  • 配列自体

配列 findIndex()

findIndex()メソッドは、テスト関数を通過した最初の配列要素のインデックスを返します。

この例では、18より大きい最初の要素のインデックスを見つけます。

例

const numbers = [4, 9, 16, 25, 29]; let first = numbers.findIndex(myFunction); function myFunction(value, index, array) {   return value > 18; }

この関数は3つの引数を取ることに注意してください。

  • アイテム値
  • アイテムインデックス
  • 配列自体

新しい数学メソッド

ES6では、次のメソッドがMathオブジェクトに追加されました。

  • Math.trunc()
  • Math.sign()
  • Math.cbrt()
  • Math.log2()
  • Math.log10()

Math.trunc() メソッド

Math.trunc(x)は、xの整数部分を返します。

例

Math.trunc(4.9);    // returns 4 Math.trunc(4.7);    // returns 4 Math.trunc(4.4);    // returns 4 Math.trunc(4.2);    // returns 4 Math.trunc(-4.2);    // returns -4

Math.sign()メソッド

Math.sign(x)は、xが負、null、または正の場合に返します。

例

Math.sign(-4);    // returns -1 Math.sign(0);    // returns 0 Math.sign(4);    // returns 1

Math.cbrt()メソッド

Math.cbrt(x)は、xの立方根を返します。

例

Math.cbrt(8);    // returns 2 Math.cbrt(64);    // returns 4 Math.cbrt(125);    // returns 5

Math.log2()メソッド

Math.log2(x)は、xの2を底とする対数を返します。

例

Math.log2(2);    // returns 1

Math.log10()メソッド

Math.log10(x)は、xの10を底とする対数を返します。

例

Math.log10(10);    // returns 1

新しい数値プロパティ

ES6では、次のプロパティがNumberオブジェクトに追加されました。

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

EPSILONの例

let x = Number.EPSILON;

MIN_SAFE_INTEGERの例

let x = Number.MIN_SAFE_INTEGER;

MAX_SAFE_INTEGERの例

let x = Number.MAX_SAFE_INTEGER;

新しい数値メソッド

ES6では、Numberオブジェクトに2つの新しいメソッドが追加されました。

  • Number.isInteger()
  • Number.isSafeInteger()

Number.isInteger() メソッド

Number.isInteger()メソッドが返すtrue引数が整数の場合。

例

Number.isInteger(10);        // returns true Number.isInteger(10.5);      // returns false

Number.isSafeInteger()メソッド

安全な整数は、倍精度数として正確に表現できる整数です。

Number.isSafeInteger()メソッドが返すtrue引数が安全な整数の場合。

例

Number.isSafeInteger(10);    // returns true Number.isSafeInteger(12345678901234567890);  // returns false

安全な整数はすべて-(253 - 1)から+(253 - 1)までの整数です。これは安全です: 9007199254740991。 これは安全ではありません: 9007199254740992。

新しいグローバル メソッド

ES6では、2つの新しいグローバル数値メソッドが追加されました。

  • isFinite()
  • isNaN()

isFinite() メソッド

グローバルなisFinite()メソッドは、引数がInfinityまたはNaNの場合、falseを返します。

それ以外の場合はtrueを返します。:

例

isFinite(10/0);       // returns false isFinite(10/1);       // returns true

isNaN()メソッド

グローバルなisNaN()メソッドが返す引数がtrueの場合はNaN。それ以外の場合はfalseを返します。:

例

isNaN("Hello");       // returns true

オブジェクトのエントリ()


例

配列反復子を作成し、キーと値のペアを反復処理します。

const fruits = ["Banana", "Orange", "Apple", "Mango"]; const f = fruits.entries(); for (let x of f) {   document.getElementById("demo").innerHTML += x; }

entries()メソッドは、キーと値のペアを持つArray Iteratorオブジェクトを返します。

[0, "バナナ"][1, "オレンジ"][2, "リンゴ"][3, "マンゴー"]

entries()メソッドは元の配列を変更しません。

モジュール

モジュールは2つの異なる方法でインポートされます。

名前付きエクスポートからのインポート

ファイルperson.jsから名前付きエクスポートをインポートします。

import { name, age } from "./person.js";

デフォルトのエクスポートからインポート

ファイルmessage.jsからデフォルトのエクスポートをインポートします。

import message from "./message.js";

モジュールの詳細については、次のJavaScript モジュールを参照してください。



チュートリアル