Mais conteúdo relacionado Semelhante a Web5-iwate (12) Web5-iwate8. 倯ぢ鸐⥋
8FC4PDLFU
؟٦غהך倯ぢ鸐⥋
鯪ꆀر٦ة䩛鯪ח鷏「⥋
وٕثًر؍،ر٦ةװؔـآؙؑز
ךٔ،ٕة؎ي鸐⥋חכ♶黝
؟٦غהך鸐⥋儗כنزٕطحؙ
OPUF
$PNFU穄✪կ
44כ*劢㹋鄲ד㨣תזְ
IUUQXXXXPSH53XFCTPDLFUT
15. فٗز؝ٕ䲿周
41%:
26*$
⽃♧5$1䱸竲ד醱侧ؿ؋؎ٕךؙٔؒ
أز〳腉ח 26*$כ6%1
غ؎شٔفٗز؝ٕծ⮚⯓䏝➰ֹ
قحت㖇簭כ植㖈搀⸬⻉⚥
ず♧سً؎ٝח㢳侧ؙٔؒأزׅה
ֹ剣⸬ָؙٔؒأز侧⟃♴װسً
؎ٝⴓ侔׃ג㜥さ剣⸬דזְ
$444QSJUFعحؙװ+4穠さזו
ؙٔؒأز侧幾ָ♶銲ח
IUUQXXXDISPNJVNPSHTQEZTQEZQSPUPDPM
18. )5.-8FC$PNQPOFOUT
)5.-דכ
EJWTQBO㖑柰鍑嶊ׅTFDUJPO
BSUJDMF
OBW
ًر؍،銲稆BVEJP
WJEFPזו倜׃ְ銲稆
剑㼭ꣲח鷄⸇㹀纏׃
6*ؿٖ٦يٙ٦ؙה׃גכ顆䓲ה鎉ֲ״㨣
תגְׅזְկ
ֿךل٦أד/BUJWFفٓحزؿؓ٦ي⚛חז
תד➬圫⡲גꫬ僰ָ穄կկկ
)5.-ך銲稆כ➬圫דזֻٓ؎ـٓٔה
׃ג㟓װׇ״ֲח׃״ֲ
)5.-➬圫חזהְֲ䠐㔳דכ֮תׇ
29. UFNQMBUF
script
var data = [
{ name: 'Pillar', color: 'Ticked Tabby', legs: 3 },
{ name: 'Hedral', color: 'Tuxedo', legs: 4 },
];
/script
table
tr
thName thColor thLegs
template id=row
trtdtdtd
/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
IUUQXXXXPSHIUNMXHESBGUTIUNMNBTUFSTDSJQUJOHIUNM
30. head
script src=platform.js/script
link rel=import
href=paper-tabs.html
...
/head
body
...
paper-tabs selected=0 noink nobar
paper-tabITEM ONE/paper-tab
paper-tabITEM TWO/paper-tab
paper-tabITEM THREE/paper-tab
/paper-tabs
...
/body
39. !
ػح؛٦ PS
آ盖椚
IUUQZFPNBOJP
41. ZP
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 `
:0./ֶָׁׄ׃׳ױֲ⳿גֶֻ蘠湡ז؝وٝسٓ؎ٝخ٦ٕ
43. HVMQػ؎فדⳢ椚籬ּ
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']);
IUUQTHJUIVCDPNHVMQKTHVMQ
46. -BOHVBHFT
Draft
Ecma/TC39/2013/0xx
ECMA-262
6th Edition / Draft November 8, 2013
ECMAScript Language
Specification
Reference number
ECMA-123:2009
© Ecma International 2009
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
47. -BOHVBHFTWPMVUJPO
$.4DSJQUUI
UI
涪׃僒ְٌتٝז圓俑
$MBTT
.PEVMF
1SPNJTF㼪Ⰵ
ꬊず劍Ⳣ椚זו剅ֹװֻׅ
涸嗚鏾 㹋遤儗דכזֻ؝ٝػ؎
ٕ儗חדֹֽؒٓ٦嗚⳿
BTNKT
넝鸞㹋遤〳腉ז鎸岀㹀纏
Draft
Ecma/TC39/2013/0xx
ECMA-262
6th Edition / Draft November 8, 2013
Reference number
ECMA-123:2009
© Ecma International 2009
http://wiki.ecmascript.org/doku.php?id=harmony:harmony
ECMAScript Language
Specification
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
48. 実装・対応状況
SpiderMonkey がリード
V8 がそれに続く
JavaScriptCore や IE は限定的
先行するところも一応ある
Traceur は結構対応してる
TypeScript は限定的な対応だが
JavaScript に変換したコードが
綺麗なのがステキ
49. ECMAScript 5th にコンパイル
Traceur Compiler
ES Harmony からのコンパイル用
https://github.com/google/traceur-compiler
TypeScript
ES Harmony の一部+独自拡張
http://typescriptlang.org/
たまに紹介されてる Harmonizr や Six は開発終了したっぽい
50. default rest parameter
モダンな言語では当然の機能
だが Firefox 以外は未サポート
default parameter
引数のデフォルト値を設定
rest parameter
残りの引数を配列で受け取る
51. 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
52. 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
53. ブロックスコープ (let, const)
ブロックスコープ変数と定数
IE11 でもサポート!
Safari は const でも変数になる
const は仕様では let 同様ブロッ
クスコープの定数だが現在の実装
は var 同様のブロックスコープ
54. let
{
// let 定義: ブロックスコープ
let a = 1, b = 10;
// let 式・文: let (...) に続く式・文中だけで有効
let (a = 100, c = 300) console.log(a); // - 100
// for 文などでの let
for (let a=0; a3; a++) {
console.log(a+b); // - 10, 11, 12
}
console.log(a); // - 1
}
console.log(a); // × ReferenceError: a is not
// defined
56. Class の利用例
// クラスベース OOP でよく見る感じ
class Animal {
constructor(name) {
this.name = name;
this.hungry = true;
}
eat() {
this.hungry = false;
}
run() {
this.hungry = trye;
}
}
57. Class - extends
// 派生クラスの定義がシンプル
class LesserPanda extends Animal {
constructor(name, tail) {
super(name);
this.tail = tail;
}
}
59. 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=n1 ?n*f(n-1):1)=(f))();
factorial(10); // 3628800
http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax
60. 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
66. $鎉铂ח鷄ְאְגֹ
!
!
!
!
!
!
!
C 言語 (clang) 基準の実行時間
婁וךⳢ椚ד$鎉铂 DMBOH
ך⦓⟃ⰻך儗
$鎉铂؝ٝػ؎ٓך鸞䏝畸✯חⰅ㨣
IUUQTIBDLTNP[JMMBPSHHBQCFUXFFOBTNKTBOEOBUJWFQFSGPSNBODFHFUTFWFOOBSSPXFS
XJUIGMPBUPQUJNJ[BUJPOT
高速
67. BTNKTVQEBUFT
事前コンパイル (AOT)
余ってる CPU スレッドで AOT
アプリではインストール時に AOT
してコンパイル済みネイティブコー
ドをキャッシュ
単精度演算など専用関数定義
Math.fround, Math.imul など ES6
SIMD 命令などは取組中
4 データ同時処理で 300% 高速化
6QEBUFE
72. 鸐濼 1VTI
!
ًؕٓ
!
.BSLFUQMBDF
!
'.ٓآؔ
04橆㞮鏣㹀
م٦ي㠖秵
ꨵ鑧ծ4.4
طحزծꨵ寑
!
鸬窃䌘
!
⹛歗갈嚂
!
鸐⥋ꆀ盖椚
!
،فٔך盖椚
،فٔ鸬䵿
ـٓؐؠ
73. 鸐濼 1VTI
!
ًؕٓ
!
.BSLFUQMBDF
!
'.ٓآؔ
04橆㞮鏣㹀
م٦ي㠖秵
ꨵ鑧ծ4.4
طحزծꨵ寑
!
鸬窃䌘
!
⹛歗갈嚂
!
鸐⥋ꆀ盖椚
!
،فٔך盖椚
،فٔ鸬䵿
ـٓؐؠ
ׅץג8FC䪮遭ד
74. 8FC1* 'JSFGPY04
鸐⥋הطحزٙ٦ؙ
/FUXPSL*OGPSNBUJPO
..4
.PCJMF$POOFDUJPO
/FUXPSL
4UBUT
Serial
4JNQMF1VTI
4.4
4ZTUFN9)3
5$14PDLFU
5FMFQIPOZ
UDB Diagram Socket
7PJDFNBJM
8J'J
*OGPSNBUJPO
رغ؎أװإٝ؟٦ⵖ䖴
NCJFOU-JHIU4FOTPS
#BUUFSZ4UBUVT
#MVFUPPUI
$BNFSB
%FWJDF0SJFOUBUJPO
'.3BEJP
(FPMPDBUJPO
/'$
1PJOUFS
-PDL
1PXFS.BOBHFNFOU
Print
1SPYJNJUZ4FOTPS
4DSFFO
0SJFOUBUJPO
USB
7JCSBUJPO
WebCL
8FC(-
WebGL2
♴简岣湡ծ؎ةٔحؙ劢㹋鄲PS䲿周ծIUUQTXJLJNP[JMMBPSH8FC1*
75. 8FC1* 'JSFGPY04
ر٦ةך盖椚הⰟ剣
SDIJWF
DeviceIndexedDB
'JMF)BOEMF
*OEFYFE%#
$POUBDUT
%BUB4UPSF
%FWJDF4UPSBHF
USB File Reading
،فٔ盖椚ה،فٔ鸐⥋
QQT
*OUFSQQ$PNNVOJDBUJPO
1FSNJTTJPOT
8FC
DUJWJUJFT
WebSocket Over Apps
ءأذي
MBSN
#BDLHSPVOE4FSWJDFT
#SPXTFS
*EMF
,FZCPBSE
*.
-PH
/PUJDBUJPOT
1BZNFOU
3FTPVSDF-PDL
4FUUJOHT
5JNF$MPDL
♴简岣湡ծ؎ةٔحؙ劢㹋鄲PS䲿周ծIUUQTXJLJNP[JMMBPSH8FC1*
76. 8FC1* $ISPNF04
ر٦ة
'JMF4ZTUFN
.FEJB(BMMFSJFT
4UPSBHF
4ZOD'JMF4ZTUFN
ءأذي
MBSNT
QQ
VEJP
WFOUT
'JMF4ZTUFN
*O
*EMF
/PUJDBUJPOT
1FSNJTTJPOT
1PXFS
3VOUJNF
4ZTUFN
8BMMQBQFS
رغ؎أװإٝ؟٦
#MVFUPPUI
$P1SFTFODF
-PDBUJPO
)*%
4FSJBM
4PDLFU
64#
ِ٦ؠ؎ٝة٦ؿؑ؎أ
DDFTTJCJMJUZ'FBUVSFT
$PNNBOET
$POUFYU.FOVT
5FYU5P4QFFDI
(PPHMF
(PPHMF$MPVE.FTTBHJOH
*EFOUJUZ
1VTI.FTTBHJOH
♴简#FUB1*IUUQTEFWFMPQFSDISPNFDPNBQQTBQJ@JOEFY
88. 'JSFGPY04̒OESPJE
8FCח剑黝⻉
ءٝفٕأو٦ز
Internet
Packaged App
(Local File)
Hosted App
(Web Site)
Web Platform
Device API
System API
Gecko
Java App
Native
Library
Internet
WebView
Contents
Chrome
(Browser App)
App Framework
Dalvik VM
Android
Runtime
Native
Interface
Blink SGL etc...
Libraries
ⱄⵃ欽
Kernel HAL Kernel HAL
89. ػح؛٦آ،فٔח㼎䘔
)PTUFE 8FC铣鴥㘗
وصؿؑأز欽䠐ֽׅד،فٔח
鸐䌢8FC؟؎زה㛇劤涸חכずׄ
؎ٝأز٦ׇٕ׆ח⢪ֲֿה〳腉
1BDLBHFE تؐٝٗ٦س㘗
؟؎زⰋ⡤;*1׃גػح؛٦آ⻉
و٦؛حز㻢叨ד鷄⸇埄ꣲ《䖤〳腉
䖞勻ךأوم،فٔח鵚ְ䕎䒭
サーバ
端末
IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FCQQT1BDLBHFE@BQQT
)PTUFE
QQT
Internet
1BDLBHFE
QQT
local
92. ،فٔ䞔㜠 NBOJGFTUXFCBQQ
{
name: フォクすけアプリ,
description: あのフォクすけが遂にアプリに!,
launch_path: /index.html,
icons: {
128: /icons/foxkeh-128.png
},
developer: {
name: dynamis,
url: http://dynamis.jp/
}
}
// 注意: ローカルで / - /index.html 変換はない
IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDTQQT.BOJGFTU