もっく日記

書いておぼえるためのブログ

Babelのes2015：メモ

書かないと覚えないのでとにかくメモしていきます。

varとletとconst

var:変数。同スコープ中での再宣言も値の代入もできる。

var i = 0; //OK
var i = 1; //OK
i = 2; //OK

let:同スコープ中で再宣言はできない。値の代入はできる。

let i = 0; //OK
let i = 1; //NG
i = 2; //OK

const:定数。同スコープ中で再宣言も値の代入もできない。

const i = 0; //OK
const i = 1; //NG
i = 2; //NG

参考

BabelのLearn ES6を学んでいく（２ - Qiita

exportとimport

変数やモジュールやクラスを別ファイルにしたときの「es2015」の書き方です。

export：変数などを呼び出す側

//module.js（export側）
var num = 1;
const name = "なまえ";
function hoge() { return  "ABC" };

export{num, name, hoge};

import：読み込み側

//main.js（import側）
import {num, name, hoge} from './module';

console.log(num); //1
console.log(name); //なまえ
console.log(hoge()); //ABC

default export

default exportを使うと、import側で{num, name, hoge}みたいに対象を{}で囲わなくてよくなります。 こっちを使うことが多くなりそうです。

//module.js（export側）
export default {
  num : 1,
  name: "なまえなまえ",
  hoge: () => {return "ABC"}
}; 
//main.js（import側）
import Variable from './module'; 

console.log(Variable.num); //1
console.log(Variable.name); //なまえ
console.log(Variable.hoge()); //ABC

参考

class

class CustomBox{
    constructor () {
        this.setListener();
    }

    setListener () {
        console.log("でました")
    }
}
const custombox = new CustomBox();//実行

参考

extends（classの継承）

//読み込み側
import Klass from './Klass'; //クラスの読み込み
const klass = new Klass(); //クラスの実行
//Klass.js
class Superklass {
  constructor () {
    console.log("super");
  }
};

export default class Subklass extends Superklass {
  constructor () {
    super();//<-これがないとエラーになる
    this.init();
  }

  init () {
    console.log("sub")
  }
}

参考