Post on 16-Apr-2017
transcript
var gulp = require("gulp"); var babel = require("gulp-babel"); var concat = require("gulp-concat");
gulp.task("default", function () { return gulp.src("src/**/*.js") .pipe(babel()) .pipe(concat("all.js")) .pipe(gulp.dest("dist")); });
$ npm install gulp-babel babel-preset-es2015 gulp-concat gulp-sourcemaps --save-dev $ echo '{ "presets": ["es2015"] }' > .babelrc
var gulp = require("gulp"); var sourcemaps = require("gulp-sourcemaps"); var babel = require("gulp-babel"); var concat = require("gulp-concat");
gulp.task("default", function () { return gulp.src("src/**/*.js") .pipe(sourcemaps.init()) .pipe(babel()) .pipe(concat("all.js")) .pipe(sourcemaps.write(".")) .pipe(gulp.dest("dist")); });
import gulp from "gulp" import babel from "gulp-babel" import concat from "gulp-concat"
gulp.task("default", () => { return gulp.src("src/**/*.js") .pipe(babel()) .pipe(concat("all.js")) .pipe(gulp.dest("dist")); }); // これくらいのサンプルじゃ嬉しくも何ともないけど...
$ npm install babel-core babel-preset-es2015 gulp-babel gulp-concat --save-dev $ echo '{ "presets": ["es2015"] }' > .babelrc
var color = "Red" var browsers = { fx: "Firefox", op: "Opera" }
var secret = `${color} Panda is ${browsers.fx}! ${color} Browser is ${browsers.op}!`
// ECMAScript 5th // 文字列はひたすら + 演算子で連結 secret = color + " Panda is " + browsers.fx + "!\n" + color + " Browser is " + browsers.op + "!"
var tag = `<a href="...">Can't stop using ES6!</a>`
var re = `"[^"]*"|'[^']*'`
var list = `<ul> <li>firefox <li>red panda <li>lesser panda <li>petit panda </li>`
function panda(s = "lesser") { return `${s} panda` } panda() === "lesser panda" panda("red") === "red panda"
// ECMAScript 5th function panda(s) { if (s === undefined) { s = "lesser" } return s + "panda" }
function log(x, y, ...rest) { console.log(x, y, rest) } log(1, 2, 3, 4, 5) // 1 2 [3, 4, 5] log(0) // 0 undefinded []
// ECMAScript 5th function log(x, y) { var a = Array.prototype.slice.call(arguments, 2) console.log (x, y, a) };
var array = [ "hello", true, 7 ] var params = [ 1, 2, ...array ] sum(1, 2, ...params) === 9
var str = "fox" var chars = [ ...str ] // [ "f", "o", "x" ]
// ECMAScript 5th var array = [ "hello", true, 7 ] var params = [ 1, 2 ].concat(array) sum.apply(null, [ 1, 2 ].concat(params)) === 9
var str = "fox" var chars = str.split("") // [ "f", "o", "x" ]
[a, b] = [b, a]
var [c,d] = (function f() { return [1,2]; })()
var [e,,[x,y],z=100] =[3,4,[10,20]]
var fx={ name:"Firefox", vendor:"Mozilla", ver:26 } var ch={ name:"Chrome", vendor:"Google", ver:31 } var browsers={ firefox: fx, chrome: ch }
var { name: n, ver: v } = fx // -> n="Firefox", v=26
(function ({ vendor: ven }) { console.log(ven) })(fx); // -> "Mozilla"
class Animal { constructor(name) { this.name = name; this.hungry = true; } eat() { this.hungry = false; } run() { this.hungry = trye; } }
class LesserPanda extends Animal { constructor(name, tail) { super(name); this.tail = tail; } }
function Animal(name) { this.name = name; this.hungry = true; } Animal.prototype.eat = function() { this.hungry = false; } Animal.prototype.run = function() { this.hungry = true; }
function LesserPanda(name, tail) { Animal.call(this, name); this.tail = tail; } LesserPanda.prototype = Object.create(Animal.prototype); LesserPanda.prototype.constructor = LesserPanda;
{
let a = 1, b = 10;
let (a = 100, c = 300) console.log(a); // -> 100
for (let a=0; a<3; a++) { console.log(a+b); // -> 10, 11, 12 } console.log(a); // -> 1 } console.log(a); // × ReferenceError: a is not defined
var browser = "Edge"; { // block scope let browser = "Firefox"; } browser === "Edge";
// ECMAScript 5th // 変数のスコープは関数スコープしか存在しなかった var browser = "Edge"; (function(){ // function scope hack... var browser = "Firefox"; })() browser === "Edge";
{ function browser() { return "Edge"; } browser() === "Edge"; // true { function browser() { return "Firefox"; } browser() === "Firefox"; // true } browser() === "Edge"; // true }
const browser = "Firefox";
const browser = "Internet Explorer";
browser = "Chrome"; console.log(browser); // -> "Firefox"
[1,2,3].map(x => x * x);
setInterval(() => { alert("HEY! 提督ぅー！alertしてもイイけどサー、時間と場所をわきまえなヨー！"); }, Math.random()*10*1000);
var factorial=((f=n=>n>1 ?n*f(n-1):1)=>(f))(); factorial(10); // 3628800
odds = evens.map(v => v + 1) pairs = evens.map(v => ({ even: v, odd: v + 1 })) nums = evens.map((v, i) => v + i)
halfs = evens.map(v => { return v / 2 })
// ECMAScript 5th odds = evens.map(function (v) { return v + 1; }) pairs = evens.map(function (v) { return { even: v, odd: v + 1 } }) nums = evens.map(function (v, i) { return v + i; })
function Person(){ this.age = 0 setInterval(() => { this.age++ // this は Person オブジェクト }, 1000) } var p = new Person()
function doFirstAsync(fileurl) { return new Promise(function(resolve,reject) { $.ajax({ src: fileurl, dataType: "json" }).done(function(data){ resolve(data); }); } } async function task(param) { await new Promise((resolve) => { setTimeout(resolve,1000); }); let first = await doFirstAsync(".../first.json") let second = await doSecondAsync(".../second.json") let third = await doThirdAsync(".../third.json") // ...取得したデータを使って色々処理 };
var set = new Set() // 集合に追加・確認・削除 set.add("Firefox") set.add("Thunderbird") set.add(+0);set.add(NaN) set.has("Firefox") // -> true set.has("Sunbird") // -> false set.delete("Firefox") set.has("Firefox") // -> false // -0 と +0 は同値と見なす (初期実装と異なる), NaN は自身と一致 // 初期の仕様・実装では -0 と +0 は区別されていたが変更された set.has(-0) // -> true set.has(NaN) // -> true ここが === での比較と異なるので注意
var map = new Map() var str = "Mozilla", obj = {}, func = function(){} // Map に値を格納 map.set(str, "Firefox") map.set(obj, "Thunderbird") map.set(func, "Japan") // キーに対応する値を取得 map.get(str) // -> "Firefox" map.get(obj) // -> "Thunderbird" map.get(func) // -> "Japan" // 設定したキーと引数の比較は == ではないので注意 map.get("Mozilla") // -> "Firefox" map.get({}) // -> undefined map.get(function(){}) // -> undefined
大規模アプリの処理速度では C 言語が圧倒的に早かった (小規模アプリや一部ベンチ限定なら既に十分高速だった)
asm.js 導入直後で C の 2 倍遅い程度、今では数割程度の違い (Java や C# の処理速度と同程度以上の水準に)