Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Java script.trend(spec)

11,946 views

Published on

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

Published in: Technology

Java script.trend(spec)

  1. 1. 
 HTML5 CSS3 ECMA6DOM4 HTTP/2
  2. 2. 
 
 
 

  3. 3. 
 

  4. 4.
  5. 5. 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
  6. 6. 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")); });
  7. 7. 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
  8. 8. 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 + "!"
  9. 9. 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>`
  10. 10. 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" }
  11. 11. 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) };
  12. 12. 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" ]
  13. 13. [a, b] = [b, a] var [c,d] = (function f() { return [1,2]; })() var [e,,[x,y],z=100] =[3,4,[10,20]]
  14. 14. 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"
  15. 15. class Animal { constructor(name) { this.name = name; this.hungry = true; } eat() { this.hungry = false; } run() { this.hungry = trye; } }
  16. 16. class LesserPanda extends Animal { constructor(name, tail) { super(name); this.tail = tail; } }
  17. 17. function Animal(name) { this.name = name; this.hungry = true; } Animal.prototype.eat = function() { this.hungry = false; } Animal.prototype.run = function() { this.hungry = true; }
  18. 18. function LesserPanda(name, tail) { Animal.call(this, name); this.tail = tail; } LesserPanda.prototype = Object.create(Animal.prototype); LesserPanda.prototype.constructor = LesserPanda;
  19. 19. { 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
  20. 20. var browser = "Edge"; { // block scope let browser = "Firefox"; } browser === "Edge"; // ECMAScript 5th // 変数のスコープは関数スコープしか存在しなかった var browser = "Edge"; (function(){ // function scope hack... var browser = "Firefox"; })() browser === "Edge";
  21. 21. { function browser() { return "Edge"; } browser() === "Edge"; // true { function browser() { return "Firefox"; } browser() === "Firefox"; // true } browser() === "Edge"; // true }
  22. 22. const browser = "Firefox"; const browser = "Internet Explorer"; browser = "Chrome"; console.log(browser); // -> "Firefox"
  23. 23. [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
  24. 24. 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; })
  25. 25. function Person(){ this.age = 0 setInterval(() => { this.age++ // this は Person オブジェクト }, 1000) } var p = new Person()
  26. 26. 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") // ...取得したデータを使って色々処理 };
  27. 27. 
 
 

  28. 28. 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 ここが === での比較と異なるので注意
  29. 29. 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
  30. 30. 大規模アプリの処理速度では C 言語が圧倒的に早かった (小規模アプリや一部ベンチ限定なら既に十分高速だった)
  31. 31. asm.js 導入直後で C の 2 倍遅い程度、今では数割程度の違い (Java や C# の処理速度と同程度以上の水準に)
  32. 32.

×