JavaScript ES6 について知っておくべきこと

JavaScript ES6 には、コードをより現代的で読みやすいものにする非常に便利な機能がいくつかあります.この記事では、ES6 の最も重要な機能のいくつかについて説明します.そうすれば、あなたも書くことを減らして、より多くのことを行うことができます.

const と let

var、let、および const の使用に関する別のブログ記事を既に書いているので、ここでは詳しく説明しません.要点は、Javascript の頼りになる識別子は const でなければならないということです.ただし、(たとえば、for ループ、switch ステートメント、またはアルゴリズム スワッピングで) 再割り当てする必要があることがわかっている、または考えられる場合は、let を使用します.

テンプレート リテラル

テンプレート リテラルは、値を連結しなくても文字列を作成できるため、非常に便利です.例えば、

const book = {
    name: 'The Martian'
}
console.log('You are reading ' + book.name + '., \n and this is a new line…'

次のコードを使用して、以前の console.log の構文を改善できます.

console.log(`You are reading ${book.name}., 
    and this is a new line…`)

テンプレート リテラルはバックティックで囲まれていることに注意してください.変数値を補間するには、ドル記号と中括弧内に変数名を設定するだけです.
例で見たように、テンプレート リテラルは複数行の文字列にも使用できます.もう \n を使用する必要はありません.キーボードで Enter キーを押すだけで、文字列を新しい行に移動できます.

アロー関数

アロー関数は、関数の構文を単純化するのに最適です.例えば:

function myFunc(name) {
    return 'Hello' + name
}
console.log(myFunc('World'))

ES6 では、次のように単純化できます.

const myFunc = name => {
    return `Hello ${name}`
}

または、この例のように関数に 1 つのステートメントがある場合は、次のようにキーワード return と中かっこを省略して、さらに単純化できます.

const myFunc = name => `Hello ${name}`

さらに、関数が引数を受け取らない場合は、空の括弧を使用できます.

const hello = () => console.log('Hello!')

デフォルト パラメータ

ES6 では、関数のデフォルトのパラメーター値を定義できます.

function sum(x = 1, y = 2) {
    return x + y
}
console.log(sum(3)) // 5

上記の例では、パラメーターとして y を渡していないため、デフォルトで 2 の値が設定されます.つまり、3 + 2 === 5 です.

破壊

破壊により、一度に複数の変数を初期化できます.

let [x, y] = ['a', 'b']

配列の分解を使用すると、temp 個の変数を作成する必要なく、一度に値を交換することもできます.これは、アルゴリズムの並べ替えに非常に役立ちます.

[x, y] = [y, x]

もう 1 つの便利な機能は、プロパティ ショートハンドと呼ばれます.

let [x, y] = ['a', 'b']
let obj = {x, y}
console.log(obj) // { x: 'a', y: 'b' }

最後に紹介する機能は、短縮メソッド名と呼ばれるものです.これにより、オブジェクト内の関数をプロパティであるかのように宣言できます.

const hello = {
    name: 'World', 
    printHello() {
        console.log('Hello')
    }
}
console.log(hello.printoHello())

Spread および Rest 演算子

ES5 では、apply() 関数を使用して配列をパラメーターに変換できました. ES6 には、この目的のために拡散演算子 (...) があります.たとえば、3 つの値を合計する sum 関数を考えてみます.

let params = [3, 4, 5]
console.log(sum(...params))

拡散演算子は、次のように残りのパラメーターとしても使用できます.

function restParameter(x, y, ...a) {
    return (x + y) * a.length
}
console.log(restParameter(1, 2, 'hello', true, 7)) // 9

クラス

ES6 では、クラスを宣言するためのよりクリーンな方法も導入されました.次の点を考慮してください.

function Book(title, author) {
    this.title = title
    this.author = author
}
Book.prototype.printTitle = function() {
    console.log(this.title)
}

ES6 では、次のように構文を単純化できます.

class Book {
    constructor(title, author) {
        This.title = title
        this.author = author
    }
    printAuthor() {
        console.log(this.author)
    }
}

ES6 では、キーワード extends を使用して、クラス間の継承に簡略化された構文を使用できます.次の例でわかるように、コンストラクター内でキーワード super を使用して constructor スーパークラスを参照することもできます.

class ITBook extends Book {
    constructor(title, author, technology) {
        super(title, author)
        this.technology = technology
    }
}

結論

このガイドが、ES6 の非常に便利な機能であると私が考えるいくつかの機能を確認するのに役立つことを願っています.さらに読みたい場合は、役立つリソースをいくつか紹介します.
ES6 Refresher by Said of freeCodeCamp
JavaScript code with ES6、Loiane Groner 著、教科書「Learning JavaScript Data Structures and Algorithms」より