JavaScriptのES6を改めて学ぶ

みなさん、こんにちは。

最近、夜に食べるラーメンの美味しさを改めて思い知った渋谷です。

業務でJavaScriptを書いている時に、今までなんとなくES6で書いていたので改めて調べた内容をまとめました。
ES6全ての仕様を説明するわけではないので、気になる方はこちらの公式サイトで確認してください。

ES6とは

ECMAScript標準の最新バージョンのこと。ECMAScript2015ともいう。ブラウザに関しては
まだ対応していないものもあるので、こちらで確認してください。

変数宣言

• let・・・変数内に値を再設定出来る
• const・・・変数を再設定出来ない

■例）

// ES5
var name = "渋谷";


// ES6
const name = "渋谷"；

let name = "渋谷";
name = "新宿";
console.log(name)　// 新宿

注）letとconstは同じスコープ内でしか機能しないので、注意してください。

アロー関数

アロー関数を使うことにより、かなり読みやすくなります。

// ES5
function sayName(name) {
    return name;
}
console.log(sayName('渋谷')); // 渋谷

// ES6
const sayName = name => {
    return name;
}
console.log(sayName('渋谷')); // 渋谷

無名関数も同様にES6で書けるようになります。

// ES5
document.getElementById("button").onclick = function() {
    // 処理
};

// ES6
document.getElementById("button").onclick = () => {
    // 処理
};

jQueryを使っている時によく書くDOMの構築が完了した時に中身が実行される↓も、ES6で書くことでかなりスッキリします。

// ES5
$(function(){
    // 処理
});

// ES6
$(() => {
    // 処理
});

テンプレートリテラル

ES6からはテンプレートリテラルが使えるようになりました。
${変数}をバッククォートで囲えば+を使わなくても文字連結をすることが出来ます。

const name = "渋谷";

// ES5
console.log(name + "さん、こんにちは。");

// ES6
console.log(`${name}さん、こんにちは。`);

配列とオブジェクト

オブジェクトと配列の扱いもかなりシンプルになしました。

// ES5
const shibuya = {
    first_name: '太郎',
    last_name: '渋谷',
    age: 24
};

let first_name = shibuya.first_name;
let last_name = shibuya.last_name;
let age = shibuya.age;
console.log(first_name);
console.log(last_name);
console.log(age);

// ES6
let {
    first_name,
    last_name,
    age
} = shibuya
console.log(first_name);
console.log(last_name);
console.log(age);

まとめ

今回は普段使いそうな記述を紹介しましたが、ここで紹介したのはごくごく一部です。特に配列やオブジェクトの操作は多くの書き方があります。
今後JavaScriptを使う際は、一度ES6での記述方法を調べてから実装に取り掛かろうと思います。