ES5の書き方
ES6 (ES2015)
ES2015の「関数」
アロー関数 (ES6)
const foo = (引数) => {関数内処理};
const foo = (param) => {
console.log(param);
};
foo(1);
以前
function foo(param) {
console.log(param);
}
無名関数なので、引数に関数を指定するような処理に直接記述することもできます。
=> 例えば、clickEventのリスナー。
clickEventのリスナー
ES6
button.addEventListener('click', ()=>{
クリック時の処理
});
以前
button.addEventListener('click', function(){
クリック時の処理
});
ES2015の「文字列の結合」
ES6 (「バッククォートと${}」で)
let price = 100;
console.log(`この商品の金額は税抜で${price}円となります。`);
以前 (「+」記号を用いて)
let price = 100;
console.log('この商品の金額は税抜で' + price + '円となります。');
ES2015の「クラス宣言」
ES6 (constructorも使える)
class Profile {
constructor() {
this.name = '太郎';
}
desc() {
console.log(`${this.name}はお人好しでカワイイです。`);
}
}
let person = new Profile();
console.log(person.name); // 太郎
person.desc(); // 太郎はお人好しでカワイイです。
以前 (Prototypeを用いて)
function Profile() {
this.name = '太郎'; // プロパティ
}
Profile.prototype.desc = function() { // メソッド
console.log(this.name + 'はお人好しでカワイイです。');
};
var person = new Profile();
person.desc();
[ES2015] ECMAScriptモジュール（ESモジュール、JSモジュール）
ECMAScriptモジュールは、export文によって変数や関数などをエクスポートできます。
また、import文を使って別のモジュールからエクスポートされたものをインポートできます。
インポートとエクスポートはそれぞれに 名前つき と デフォルト という2種類の方法があります。
名前つきインポート
指定したモジュールから名前を指定して選択的にインポートできます。
次の例では my-module.jsから名前つきエクスポートされたオブジェクトの
名前を指定して名前つきインポートしています。
import文のあとに続けて{}を書き、
その中にインポートしたい名前つきエクスポートの名前を入れます。
複数の値をインポートしたい場合は、
それぞれの名前をカンマで区切ります。
my-module.js
export const foo = "foo";
export function bar() { }
named-import.js
// 名前つきエクスポートされたfooとbarをインポートする
import { foo, bar } from "./my-module.js";
console.log(foo); // => "foo"
console.log(bar); // => "bar"
