デブサミで使用したスライド (仮) ！後日加筆修正します！

11.
HTML5
CSS3
ECMA6DOM4
HTTP/2

18. 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

19. 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"));
});

20. 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

24. 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 + "!"

25. 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>`

26. 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"
}

27. 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)
};

28. 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" ]

29. [a, b] = [b, a]
var [c,d] = (function f() { return [1,2]; })()
var [e,,[x,y],z=100] =[3,4,[10,20]]

30. 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"

33. class Animal {
constructor(name) {
this.name = name;
this.hungry = true;
}
eat() {
this.hungry = false;
}
run() {
this.hungry = trye;
}
}

34. class LesserPanda extends Animal {
constructor(name, tail) {
super(name);
this.tail = tail;
}
}

35. function Animal(name) {
this.name = name;
this.hungry = true;
}
Animal.prototype.eat = function() {
this.hungry = false;
}
Animal.prototype.run = function() {
this.hungry = true;
}

36. function LesserPanda(name, tail) {
Animal.call(this, name);
this.tail = tail;
}
LesserPanda.prototype
= Object.create(Animal.prototype);
LesserPanda.prototype.constructor = LesserPanda;

39. {
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

40. var browser = "Edge";
{ // block scope
let browser = "Firefox";
}
browser === "Edge";
// ECMAScript 5th
// 変数のスコープは関数スコープしか存在しなかった
var browser = "Edge";
(function(){ // function scope hack...
var browser = "Firefox";
})()
browser === "Edge";

41. {
function browser() { return "Edge"; }
browser() === "Edge"; // true
{
function browser() { return "Firefox"; }
browser() === "Firefox"; // true
}
browser() === "Edge"; // true
}

42. const browser = "Firefox";
const browser = "Internet Explorer";
browser = "Chrome";
console.log(browser); // -> "Firefox"

44. [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

45. 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; })

46. function Person(){
this.age = 0
setInterval(() => {
this.age++ // this は Person オブジェクト
}, 1000)
}
var p = new Person()

49. 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")
// ...取得したデータを使って色々処理
};

52. 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 ここが === での比較と異なるので注意

53. 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

61. 大規模アプリの処理速度では C 言語が圧倒的に早かった
(小規模アプリや一部ベンチ限定なら既に十分高速だった)

62. asm.js 導入直後で C の 2 倍遅い程度、今では数割程度の違い
(Java や C# の処理速度と同程度以上の水準に)