Web5-iwate
93
description
HTML5とか勉強会 in IWATE 2014 で使用したスライド http://www.html5j-tohoku.org/
Transcript of Web5-iwate
var proto=HTMLParagraphElement.prototype !
document.register('x-foo', { prototype: Object.create(proto, { firstMember: { get: function() { return "foo"; }, enumerable: true, configurable: true }, // specify more members // ... }) });
<script> var data = [ { name: 'Pillar', color: 'Ticked Tabby', legs: 3 }, { name: 'Hedral', color: 'Tuxedo', legs: 4 }, ]; </script> <table> <tr> <th>Name <th>Color <th>Legs <template id="row"> <tr><td><td><td> </template> </table> <script> var template = document.querySelector('#row'); for (var i = 0; i < data.length; i += 1) { var cat = data[i]; var clone = template.content.cloneNode(true); var cells = clone.querySelectorAll('td'); cells[0].textContent = cat.name; cells[1].textContent = cat.color; cells[2].textContent = cat.legs; template.parentNode.appendChild(clone); } </script>
<head> <script src="platform.js"></script> <link rel="import" href="paper-tabs.html"> ... </head> <body> ... <paper-tabs selected="0" noink nobar> <paper-tab>ITEM ONE</paper-tab> <paper-tab>ITEM TWO</paper-tab> <paper-tab>ITEM THREE</paper-tab> </paper-tabs> ... </body>
> yo [?] 'Allo dynamis! What would you like to do? Get me out of here!!! _-----_ | | .---------------------------------------. |--(o)--| | Bye from us! Chat soon. | `---------´ | | ( _´U`_ ) | The Yeoman Team | /___A___\ | https://github.com/yeoman/yeoman#team | | ~ | '---------------------------------------' __'.___.'__ ´ ` |° ´ Y `
var gulp = require('gulp'); var coffee = require('gulp-coffee'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var sourcemaps = require('gulp-sourcemaps'); var paths = { scripts: ['client/js/**/*.coffee'] }; !gulp.task('scripts', function() { return gulp.src(paths.scripts) .pipe(sourcemaps.init()) .pipe(coffee()).pipe(uglify()) .pipe(concat('all.min.js')) .pipe(sourcemaps.write()) .pipe(gulp.dest('build/js')); }); !gulp.task('watch', function() { gulp.watch(paths.scripts, ['scripts']); }); !gulp.task('default', ['watch', 'scripts']);
Reference number ECMA-123:2009
© Ecma International 2009
ECMA-262 6th Edition / Draft November 8, 2013
ECMAScript Language Specification
Draft
Ecma/TC39/2013/0xx
Draft Report Errors and Issues at: https://bugs.ecmascript.org
Product: Draft for 6th Edition Component: choose an appropriate one Version: Rev 21, November 8, 2013 Draft
http://wiki.ecmascript.org/doku.php?id=harmony:harmony
Reference number ECMA-123:2009
© Ecma International 2009
ECMA-262 6th Edition / Draft November 8, 2013
ECMAScript Language Specification
Draft
Ecma/TC39/2013/0xx
Draft Report Errors and Issues at: https://bugs.ecmascript.org
Product: Draft for 6th Edition Component: choose an appropriate one Version: Rev 21, November 8, 2013 Draft
実装・対応状況
SpiderMonkey がリード V8 がそれに続く JavaScriptCore や IE は限定的 先行するところも一応ある
Traceur は結構対応してる TypeScript は限定的な対応だが JavaScript に変換したコードが綺麗なのがステキ
ECMAScript 5th にコンパイル
Traceur Compiler ES Harmony からのコンパイル用 https://github.com/google/traceur-compiler
TypeScript ES Harmony の一部＋独自拡張 http://typescriptlang.org/
たまに紹介されてる Harmonizr や Six は開発終了したっぽい
default & rest parameter
モダンな言語では当然の機能 だが Firefox 以外は未サポート
default parameter 引数のデフォルト値を設定
rest parameter 残りの引数を配列で受け取る
default parameter
e = document.body; // 何か適当な要素 function setBackgroundColor(element, color='orange') { element.style.backgroundColor = color; } setBackgroundColor(e); // オレンジに setBackgroundColor(e, 'blue'); // 青に setBackgroundColor(e, undefined); // オレンジに !
// デフォルト値は呼び出し毎に生成される // 同一オブジェクトが渡される Python などとは違う function getObject(o={}) { return o; } getObject() == getObject() // -> false
http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values
rest parameter
function f(a, b, ...args) { return args; } f("IE", "Chrome"); // -> [] f("IE", "Chrome", "Firefox"); // -> ["Firefox"] !
// rest arguments は Array のメソッドが使える // [].slice.call(arguments) ハックとか不要に function sortRestArgs(...args) { var sortedArgs = args.sort(); return sortedArgs; }
http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters
ブロックスコープ (let, const)
ブロックスコープ変数と定数 IE11 でもサポート！ Safari は const でも変数になる const は仕様では let 同様ブロックスコープの定数だが現在の実装は var 同様のブロックスコープ
let
{ // let 定義: ブロックスコープ let a = 1, b = 10; // let 式・文: let (...) に続く式・文中だけで有効 let (a = 100, c = 300) console.log(a); // -> 100 // for 文などでの let 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
Class
待望の Class です プロトタイプベース OOP の記法に馴染めない貴方もこれで安心
Class の利用例
// クラスベース OOP でよく見る感じ class Animal { constructor(name) { this.name = name; this.hungry = true; } eat() { this.hungry = false; } run() { this.hungry = trye; } }
Class - extends
// 派生クラスの定義がシンプル class LesserPanda extends Animal { constructor(name, tail) { super(name); this.tail = tail; } }
Arrow Function
コールバックに便利な関数 シンプルに書ける 矢印なんか格好いい 内外で this が固定される
Firefox 22~ 実装
http://d.hatena.ne.jp/teramako/20130321/p1
Arrow Function
// return するだけのコールバックがシンプルに [1,2,3].map(x => x * x); // ES5 ではこう書く必要があった: // [1,2,3].map(function (x) { return x * x; }); !
// 引数が 1 つ以外の場合は引数を () で括る setInterval(() => { alert("HEY! 提督ぅー！alertしてもイイけどサー、時間と場所をわきまえなヨー！"); }, Math.random()*10*1000); !
// n! (nの階乗) を求める関数もシンプルに var factorial=((f=n=>n>1 ?n*f(n-1):1)=>(f))(); factorial(10); // 3628800
http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax
Arrow Function における this
// this は矢印関数を囲むスコープのものにバインド // コールバック利用時に self=this とか不要になる function Person(){ this.age = 0; setInterval(() => { this.age++; // this は Person オブジェクト }, 1000); } var p = new Person(); !
// 注: strict mode でも this はレキシカルに bind // 済みとして振る舞うので undefined にならない
https://developer.mozilla.org/docs/Web/JavaScript/Reference/arrow_functions
!
!
!
!
!
!
!
C 言語 (clang) 基準の実行時間
高速
事前コンパイル (AOT) 余ってる CPU スレッドで AOT アプリではインストール時に AOT してコンパイル済みネイティブコードをキャッシュ
単精度演算など専用関数定義 Math.fround, Math.imul など ES6
SIMD 命令などは取組中 4 データ同時処理で 300% 高速化
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
Internet
Kernel & HAL Kernel & HAL
Web Platform
GeckoDevice API System API
Packaged App(Local File)
Hosted App(Web Site)
App Framework
LibrariesBlink SGL etc...
AndroidRuntime
Native Interface
Dalvik VM
Java App
Native Library
Chrome (Browser App)
InternetWebView Contents
{ "name": "フォクすけアプリ",
"description": "あのフォクすけが遂にアプリに！", "launch_path": "/index.html", "icons": { "128": "/icons/foxkeh-128.png" }, "developer": { "name": "dynamis", "url": "http://dynamis.jp/" } } // 注意: ローカルで / -> /index.html 変換はない
