Web5-iwate

1,368 views
1,300 views

Published on

HTML5とか勉強会 in IWATE 2014 で使用したスライド
http://www.html5j-tohoku.org/

Published in: Internet
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,368
On SlideShare
0
From Embeds
0
Number of Embeds
99
Actions
Shares
0
Downloads
10
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Web5-iwate

  1. 1. 8FC ٦8FC׾㢌ִ׷אך䪮遭٦ CZ5PNPZBTBJ EZOBNJT
  2. 2. BCPVUNF 5PNPZBTBJ EZOBNJT .P[JMMB+BQBO .PCJMFDPTZTUFN.BOBHFS 5FDIOJDBM.BSLFUJOH WBOHFMJTU EZOBNJTNP[JMMBKBQBOPSH ! $PNNVOJUZ EZOBNJTKQ !EZOBNJUUFS GBDFCPPLDPNEZOBNJT
  3. 3. כׄ׭ח ➙㔐כ㔳װ؝٦سָ㼰ז׭דׅկ ⦐ⴽ䪮遭כ♨㻝ח铡僇׃תׇ׿կ 莆㄂֮׷ֿה⹧䩛ח鑧׃תׅկ 劤勻涸ז)5.-ך眔㔲㢩דׅկ أٓ؎س⡲䧭꟦חさ׏׋
  4. 4. 劤傈ךزؾحؙ /FUXPSL $PNQPOFOUT 8PSLPX -BOHVBHFT 8FC1*T 94VNNBSZ
  5. 5. /FUXPSL
  6. 6. طحزٙ٦ָؙ㢌׻׷ ؟٦غה׌ֽ鸐⥋ׅ׷儗➿כ穄✪ ؙٗأؔٔآٝ ،فٔ꟦ 鸐⥋װ ؙٓ؎،ٝز꟦ 11 鸐⥋ָ兛鸐ח 欽鷿ח䘔ׄג)551⟃㢩׮鼅䫛肇ח 鋅蕱׃ְعحؙכ如ղה♶銲ח
  7. 7. /FUXPSL4QFDT %FOFEJO)5.- 4FSWFS4FOUWFOUT 8FC4PDLFU QPTU.FTTBHF PUIFS8$TQFDT 8FC35$ 384PDLFU 1VTI 4FSJBM #MVFUPPUI .FTTBHJOH /FU*OGP BOENPSF $41 )551 41%: 26*$
  8. 8. ⿽倯ぢ鸐⥋ 8FC4PDLFU ؟٦غהך⿽倯ぢ鸐⥋ 鯪ꆀر٦ة׾䩛鯪ח鷏「⥋ وٕثًر؍،ر٦ةװؔـآؙؑز ךٔ،ٕة؎ي鸐⥋חכ♶黝 ؟٦غהך鸐⥋儗꟦כنزٕطحؙ OPUF $PNFU穄✪կ 44כ*劢㹋鄲ד㨣ת׵זְ IUUQXXXXPSH53XFCTPDLFUT
  9. 9. ؙٗأؔٔآٝٔا٦أⰟ剣 $SPTT0SJHJO3FTPVSDF4IBSJOH ➭سً؎ַٝ׵KBY鸐⥋׾鏩〳 䖞勻ךKBYכず♧ؔٔآٝ فٗ ز؝ٕծسً؎ٝծه٦ز ꣲ㹀 4BNF0SJHJO1PMJDZ DDFTT$POUSPMMMPX0SJHJO )551 قحتד僇爙ׅ׷ +40/1عحؙכ♶銲ח IUUQXXXXPSH53DPST
  10. 10. OPUF+40/1 +40/׾ؙٗأؔٔآٝד DBMMCBDL MFTTFSQBOEB^ ך״ֲח ؝٦ٕغحؙꟼ侧ח+40/ر٦ة׾ 㙵׭鴥׿׌+4׾TDSJQUةؚד铣׫鴥 ׬ TDSJQUTSDIUUQPUIFSKTPOQKT WBSEBUB@GSPN@PUIFS GVODUJPODBMMCBDL KTPO EBUB@GSPN@PUIFSKTPO ^ إُؗٔذ؍涸חכ鏩ׁ׸זְ
  11. 11. ؙٗأؔٔآًٝحإ٦آ QPTU.FTTBHF ؟٦غ׾穗歋׃זְٗ٦ٕؕדך سً؎ٝ꟦鸐⥋ָ〳腉 㛇劤涸ז،فٔ꟦鸐⥋䩛媮 MPDBUJPOIBTIعحؙ♶銲 IUUQXXXXPSH53XFCNFTTBHJOH
  12. 12. OPUFMPDBUJPOIBTIعحؙ JGSBNFךTSD㾩䚍׾⟃꣬׌ ֽ⹛涸ח剅ֹ䳔ִ׷ MPDBUJPOIBTI⦼ָ㢌׻׷ֿ הד؎كٝزה׃גⴻ倖ׅ׷ ⿽倯ぢד꬗⦜זⳢ椚ָ䗳銲˘
  13. 13. وٕثًر؍،鸐⥋ .FEJB$BQUVSF4USFBN 8FC35$ַ׵HFU6TFSNFEJBָⴓꨄ 갈㡮װؽرؔךٍؗفثٍ 8FC35$ وٕثًر؍،ر٦ةװغ؎شٔ ر٦ةךؙٓ؎،ٝز꟦11鸐⥋ ؽرؔثٍحزװوٕثفٖ؎َ٦ ؜٦يזוח⢪׻׸׷ IUUQXXXXPSH53NFEJBDBQUVSFTUSFBNTIUUQXXXXPSH53XFCSUD
  14. 14. ٗ٦ٖكٕ 5$14PDLFU 6%14PDLFU ه٦ز׾䭷㹀׃ג⟣䠐ך鸐⥋ 8FC؟٦غה׃ג⹛⡲ׅ׷،فٔװ 㹺ꨵה鸐⥋ׅ׷،فٔ׮㹋植 8$דכ3BX4PDLFU1*ָ陽锷ׁ ׸גְ׷ָ'JSFGPY04װ$ISPNF04 ך㹋鄲כ殯ז׷ֿהח岣䠐 #MVFUPPUI 64# 湫䱸ع٦سؐؑ،ה鸐⥋ IUUQXXXXPSH53SBXTPDLFUT
  15. 15. فٗز؝ٕ䲿周 41%: 26*$ ⽃♧5$1䱸竲ד醱侧ؿ؋؎ٕךؙٔؒ أز׾〳腉ח 26*$כ6%1 غ؎شٔفٗز؝ٕծ⮚⯓䏝➰ֹ قحت㖇簭כ植㖈搀⸬⻉⚥ ず♧سً؎ٝח㢳侧ؙٔؒأزׅ׷ה ֹ剣⸬׌ָؙٔؒأز侧⟃♴װسً ؎ٝⴓ侔׃ג׷㜥さ剣⸬דזְ $444QSJUFعحؙװ+4穠さזו ؙٔؒأز侧⵴幾ָ♶銲ח IUUQXXXDISPNJVNPSHTQEZTQEZQSPUPDPM
  16. 16. )551فٗز؝ٕ何鎍 )551 41%:זוך䲿周׾驎תִג)551 ך姻䒭ז䖓竰➬圫瘻㹀⚥ ؟٦غفحءُ堣腉ؙٔؒأزׁ ׸גזֻה׮؟٦غַ׵鷏׶אֽג ✲⵸חٍؗحءׇׁُ׷ )1$,הְֲقحت㖇簭 فٗز؝ٕ鼅䫛׃זָ׵؟٦غ ׾甧ג׷儗➿חז׏גֹ׋ IUUQEBUBUSBDLFSJFUGPSHXHIUUQCJT
  17. 17. $PNQPOFOUT
  18. 18. )5.-8FC$PNQPOFOUT )5.-דכ EJWTQBO㖑柰׾鍑嶊ׅ׷TFDUJPO BSUJDMF OBW ًر؍،銲稆BVEJP WJEFPזו倜׃ְ銲稆׾ 剑㼭ꣲח鷄⸇㹀纏׃׋ 6*ؿٖ٦يٙ٦ؙה׃גכ顆䓲ה鎉ֲ״׶㨣 ת׏גׅ׵ְזְկ ֿךل٦أד/BUJWFفٓحزؿؓ٦ي⚛חז ׷תד➬圫⡲׏ג׋׵ꫬ僰ָ穄׻׷կկկ )5.-ך銲稆כ➬圫דזֻٓ؎ـٓٔה ׃ג㟓װׇ׷״ֲח׃״ֲ )5.-➬圫חז׷הְֲ䠐㔳דכ֮׶תׇ׿
  19. 19. 8FC$PNQPOFOUT 4IBEPX%0.
  20. 20. %0.הأة؎ٕ׾ؕفإٕ⻉׃ $VTUPNMFNFOUT
  21. 21. 杝荈)5.-銲稆ה׃ג䭁䓸㹀纏׃ )5.-*NQPSUT ػح؛٦آה׃גⱄⵃ欽〳腉ח IUUQTHJUIVCDPNXDXFCDPNQPOFOUT
  22. 22. 4IBEPX%0. 銲稆ⰻך%0.خٔ٦׾ꦀ誊 4IBEPX)PTU鋵خٔ٦ח婍׷銲稆 4IBEPX5SFFIPTUך؟ـخٔ٦ 4IBEPX3PPU؟ـخٔ٦ךٕ٦ز ؟ـخٔ٦חכ4IBEPX)PTUַ׵ ך׫،ؙإأ〳腉חז׷ )PTUך㶨銲稆כ*OTFSUJPO 1PJOUח%JTUSJCVUJPOׁ׸׷ IUUQXXXXPSH53TIBEPXEPN
  23. 23. EPDVNFOUUSFF5SFFPG5SFFT IUUQXXXXPSH53TIBEPXEPN
  24. 24. %JTUSJCVUJPO*OTFSUJPO1PJOU
  25. 25. $VTUPNMFNFOUT YFMFNFOU 杝荈ך)5.-銲稆׾㹀纏 傀㶷銲稆׾䭁䓸׃ג銲稆׾涫ꐮ EPDVNFOUSFHJTUFS IUUQXXXXPSH53DVTUPNFMFNFOUT
  26. 26. SFHJTUFSדؕأةي銲稆㹀纏 var proto=HTMLParagraphElement.prototype ! document.register('x-foo', { prototype: Object.create(proto, { firstMember: { get: function() { return foo; }, enumerable: true, configurable: true }, // specify more members // ... }) });
  27. 27. )5.-*NQPSUT MJOLSFMJNQPSU ISFGDPNQPOFOUTIUNM $VTUPNMFNFOU؎ٝه٦ز 杝荈銲稆ך㹀纏׾ؿ؋؎ٕחⴓꨄ ٓ؎ـٓٔה׃ג盖椚׾㺁僒ח IUUQXXXXPSH53IUNMJNQPSUT
  28. 28. OPUF5FNQMBUF銲稆 ذٝفٖ٦ز欽銲稆 ٗ٦س儗ח䲽歗٥Ⳣ椚ׁ׸זְ TDSJQUזו׮㹋遤ׁ׸זְ +4ַ׵DMPOF JOTFSU׃ג⢪ֲ 粸׶鵤׃⢪ֲ)5.-ػة٦ٝ׾ +4דכזֻ )5.-⚥ח㙵׭鴥׫ ؝ًٝز أؙٔفز ذٝف ٖ٦زعحָؙ♶銲ח IUUQXXXXPSHIUNMXHESBGUTIUNMNBTUFSTDSJQUJOHIUNM
  29. 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. 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
  31. 31. 垥彊⻉׾䖉א䗳銲כזְ ! QMBUGPSNKTד1PMZMM 劢㹋鄲ד׮1PMZM֮׶1M 1PMZNFS׮#MJDL׮1PMZGJMMחכⰟ鸐דQMBUGPSNKT׾ⵃ欽ׅ׷
  32. 32. 1PMZNFS #MJDL 1PMZNFS (PPHMF䲿⣘ך垥彊涸ז6*إحز 䖓倯✼䳔1PMZM QMBUGPSNKT 䲿⣘ .BUFSJBM%FTJHOח׮ⵃ欽〳腉 #MJDL .P[JMMB䲿⣘ך.JO6*إحز ַ׵כQMBUGPSNKT׾䱰欽 IUUQXXXQPMZNFSQSPKFDUPSHIUUQNP[CSJDLHJUIVCJP
  33. 33. .BUFSJBM%FTJHO فٓحزؿؓ٦يװرغ؎أ ؟؎ؤח⣛׵׆窟♧ׁ׸׋⡤ 꿀׾㹋植ׅ׷㛇燉ءأذي ֿך湡涸׾㹋植ׅ׷׋׭ 8FCד׮OESPJEד׮ו׿ זرغ؎أד׮ず圫ךِ٦ؠ ⡤꿀׾知⽃ח䲿⣘〳腉חׅ׷ IUUQXXXHPPHMFDPNEFTJHOTQFDNBUFSJBMEFTJHOJOUSPEVDUJPOIUNM
  34. 34. /BUJWFהずׄ⡤꿀׾8FCד /BUJWFהずׄ6*׾1PMZNFSד OESPJEזו׮׫׿ז8FCד
  35. 35. 8PSLPX
  36. 36. .PEFSO8PSLPXX ꧵䕎欰䧭
  37. 37. ! ؽٕس PS
  38. 38. ! ػح؛٦ PS آ盖椚 IUUQZFPNBOJP
  39. 39. ZP꧵䕎欰䧭خ٦ٕ OQNJOTUBMMHZP ZPQSPKFDU ֮׵ײ׷꧵䕎ָⰟ剣ׁ׸ג׷ OHVMBS #BDLCPOF NCFS KFLZJMM CPPUTUSBQ 1PMZNFS NPCJMF XFCBQQ DPSEPWB ⡦ַ׾ئַٗ׵⡲׷ךכ㣐鋉垷 فٗآؙؑز׌ֽח׃ת׃׳ֲ IUUQZFPNBOJP
  40. 40. 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./ֶׁׄ׿ָ׃׳׏׍ױֲ⳿גֻ׷ֶ蘠湡ז؝وٝسٓ؎ٝخ٦ٕ
  41. 41. HVMQؽٕسأؙٔفز OQNJOTUBMMHMPCBMHVMQ HVMQUBTLPUIFSUBTL NBLF BOUך8FC晛 (SVOU׮ず圫׌ָ(VMQؔأأً ⚺銲זٓ؎ـٓٔכ(VMQד׮ 䲧׏גֹ׋׃铣׫剅ֹ׃װְׅ 搀׃דꟚ涪כ罋ִ׵׸זְ
  42. 42. 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
  43. 43. CPXFSػح؛٦آ盖椚 OQNJOTUBMMHCPXFS CPXFSJOTUBMMQBDLBHF CPXFSVQEBUFQBDLBHF ػح؛٦آ盖椚 ٓ؎ـٓٔך⣛㶷䚍盖椚 OQNד׮ְְֽו#PXFSד׃׳ ٓ؎ـٓٔ䩛⹛盖椚כ穄✪ IUUQCPXFSJP
  44. 44. ؔآ؟ٝה궪׫אאꅿ둷錁㻊 ⢪׏גזְ ֮׶䖤זְ
  45. 45. -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
  46. 46. -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
  47. 47. 実装・対応状況 SpiderMonkey がリード V8 がそれに続く JavaScriptCore や IE は限定的 先行するところも一応ある Traceur は結構対応してる TypeScript は限定的な対応だが JavaScript に変換したコードが 綺麗なのがステキ
  48. 48. ECMAScript 5th にコンパイル Traceur Compiler ES Harmony からのコンパイル用 https://github.com/google/traceur-compiler TypeScript ES Harmony の一部+独自拡張 http://typescriptlang.org/ たまに紹介されてる Harmonizr や Six は開発終了したっぽい
  49. 49. default rest parameter モダンな言語では当然の機能 だが Firefox 以外は未サポート default parameter 引数のデフォルト値を設定 rest parameter 残りの引数を配列で受け取る
  50. 50. 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
  51. 51. 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
  52. 52. ブロックスコープ (let, const) ブロックスコープ変数と定数 IE11 でもサポート! Safari は const でも変数になる const は仕様では let 同様ブロッ クスコープの定数だが現在の実装 は var 同様のブロックスコープ
  53. 53. 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
  54. 54. Class 待望の Class です プロトタイプベース OOP の記法に 馴染めない貴方もこれで安心
  55. 55. Class の利用例 // クラスベース OOP でよく見る感じ class Animal { constructor(name) { this.name = name; this.hungry = true; } eat() { this.hungry = false; } run() { this.hungry = trye; } }
  56. 56. Class - extends // 派生クラスの定義がシンプル class LesserPanda extends Animal { constructor(name, tail) { super(name); this.tail = tail; } }
  57. 57. Arrow Function コールバックに便利な関数 シンプルに書ける 矢印なんか格好いい 内外で this が固定される Firefox 22~ 実装 http://d.hatena.ne.jp/teramako/20130321/p1
  58. 58. 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
  59. 59. 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
  60. 60. BTNKTהכ +BWB4DSJQUך؟ـإحز➬圫 傀㶷+BWB4DSJQUؒٝآٝד⹛⡲ 넝䏝ח剑黝⻉〳腉זչػة٦ٝպ ✲⵸؝ٝػ؎ٕ〳腉 㢌侧װ鎘皾穠卓ך㘗כⰋג㔿㹀 㹋遤儗ך㘗然钠װ؝ٝػ؎ٕ♶銲 ؿ؋؎ٕװꟼ侧⽃⡘ד剣⸬⻉ ⱍ걧דVTFBTN㹑鎉 'BTU1BSUT ך刿ח♧鿇 ׾僇俑⻉٥㹀纏׃׋׮ךIUUQBTNKTPSH
  61. 61. BTNKTך鏣鎘䙼䟝 怴皾穠卓׾㔿㹀㘗ח 㘗ך僇爙 OOPUBUJPO ׮傀㶷 +BWB4DSJQUך眔㔲ⰻד遤ֲ 5ZQFESSBZדًٌٔ盖椚 ؖ٦كآ؝ؙٖءّٝ׾㔐鼘 堣唒欰䧭ָ⵸䲿ך鏣鎘 $鎉铂זוַ׵㢌䳔ׅ׷㼎韋 $鎉铂ח鷄ְאֻ׋׭ך鏣鎘IUUQBTNKTPSH
  62. 62. BTNKTָ׮׋׵ׅ׮ך 8FC׾/BUJWFך鸞䏝ח $SBOL4IBGUװ*PO.POLFZך44剑黝 ⻉+*5דך剑黝⻉⸬卓׾然㹋ַאؔ٦ غ٦قحسזֻ⢪ִ׷ ✮庠〳腉זػؿؓ٦وٝأ 农럀濼 ت٦ذ؍عحؙ חֶⴽ׸ 㢳媮+*5ך剑黝⻉ٖكָٕ✮庠♶腉ד 鸞䏝ָ✮庠דֹזְ㉏겗ָזֻז׷ ($ח״׷⨡姺儗꟦ָ涪欰׃זֻז׷ 'BTU1BSUTד֮׷BNTKTז׵然㹋ח鸞ֻIUUQBTNKTPSH
  63. 63. $鎉铂׾--7.ד؝ٝػ؎ٕ $ַ׵*3 ⚥꟦鎉铂 ח㢌䳔 *3$16ꬊ⣛㶷ך،إٝـٔ 㣐⼱ך剑黝⻉Ⳣ椚כֿֿד遤ֲ DMBOHָ遤ֲךכֿךⳢ椚 --7.*3ַ׵/BUJWFח㢌䳔 Y3.זוך堣唒铂׾欰䧭 $鎉铂ا٦أ --7.*3 /BUJWF$PEF
  64. 64. $鎉铂׾+BWB4DSJQUח؝ٝػ؎ٕ $ַ׵*3 ⚥꟦鎉铂 ח㢌䳔 --7.*3ַ׵+4ח㢌䳔 NTDSJQUFOד+4 BTNKT ח 㘗㔿㹀ד05Ⳣ椚〳腉ז؝٦س +4׾/BUJWFח㢌䳔 㘗㔿㹀؝٦س׾넝鸞ח㢌䳔㹋遤 ؎ٝأز٦ٕ儗ח✲⵸㢌䳔׮〳腉 $鎉铂ا٦أ --7.*3 +BWB4DSJQU /BUJWF$PEF
  65. 65. $鎉铂ח鷄ְאְגֹ׋ ! ! ! ! ! ! ! C 言語 (clang) 基準の実行時間 婁וךⳢ椚ד$鎉铂 DMBOH ך⦓⟃ⰻך儗꟦ $鎉铂؝ٝػ؎ٓ꟦ך鸞䏝畸✯חⰅ׶㨣׭׋ IUUQTIBDLTNP[JMMBPSHHBQCFUXFFOBTNKTBOEOBUJWFQFSGPSNBODFHFUTFWFOOBSSPXFS XJUIGMPBUPQUJNJ[BUJPOT 高速
  66. 66. BTNKTVQEBUFT 事前コンパイル (AOT) 余ってる CPU スレッドで AOT アプリではインストール時に AOT してコンパイル済みネイティブコー ドをキャッシュ 単精度演算など専用関数定義 Math.fround, Math.imul など ES6 SIMD 命令などは取組中 4 データ同時処理で 300% 高速化 6QEBUFE
  67. 67. 8FC1*T
  68. 68. 䚈䭁㣐ׅ׷8FC1* 8FC04ך鹌⻉הⰟח䚈䭁㣐 'JSFGPY04 $ISPNF04 8FC04 8FCط؎ذ؍ـז1MBUGPSN 垥彊⻉ה✼䳔䚍חכ铬겗 'JSFGPY04כ㛇劤涸ח垥彊⻉ 8JOEPXTכקר垥彊⻉׃זְ ⯓畭8FC1*Ꟛ涪ך䌢דׅי
  69. 69. 鸐濼 1VTI ! ًؕٓ ! .BSLFUQMBDF ! '.ٓآؔ 04橆㞮鏣㹀 م٦ي㠖秵 ꨵ鑧ծ4.4
  70. 70. 鸐濼 1VTI ! ًؕٓ ! .BSLFUQMBDF ! '.ٓآؔ 04橆㞮鏣㹀 م٦ي㠖秵 ꨵ鑧ծ4.4 طحزծꨵ寑 ! 鸬窃䌘 ! ⹛歗갈嚂 ! 鸐⥋ꆀ盖椚 ! ،فٔך盖椚 ،فٔ꟦鸬䵿 ـٓؐؠ
  71. 71. 鸐濼 1VTI ! ًؕٓ ! .BSLFUQMBDF ! '.ٓآؔ 04橆㞮鏣㹀 م٦ي㠖秵 ꨵ鑧ծ4.4 طحزծꨵ寑 ! 鸬窃䌘 ! ⹛歗갈嚂 ! 鸐⥋ꆀ盖椚 ! ،فٔך盖椚 ،فٔ꟦鸬䵿 ـٓؐؠ ׅץג8FC䪮遭ד
  72. 72. 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*
  73. 73. 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 /PUJDBUJPOT 1BZNFOU 3FTPVSDF-PDL 4FUUJOHT 5JNF$MPDL ♴简岣湡ծ؎ةٔحؙ劢㹋鄲PS䲿周ծIUUQTXJLJNP[JMMBPSH8FC1*
  74. 74. 8FC1* $ISPNF04 ر٦ة 'JMF4ZTUFN .FEJB(BMMFSJFT 4UPSBHF 4ZOD'JMF4ZTUFN ءأذي MBSNT QQ VEJP WFOUT 'JMF4ZTUFN *O *EMF /PUJDBUJPOT 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
  75. 75. 4VNNBSZ
  76. 76. אך㢌⻉ /FUXPSL $PNQPOFOUT 8PSLPX -BOHVBHFT 8FC1*T
  77. 77. אך㢌⻉ /FUXPSL ؟٦غה׌ֽ鸐⥋ׅ׷儗➿כ穄✪ $PNQPOFOUT 8PSLPX -BOHVBHFT 8FC1*T
  78. 78. אך㢌⻉ /FUXPSL $PNQPOFOUT 6*銲稆׾荈㖈ח䭁䓸٥ⱄⵃ欽 8PSLPX -BOHVBHFT 8FC1*T
  79. 79. אך㢌⻉ /FUXPSL $PNQPOFOUT 8PSLPX ػح؛٦آٖكٕד׮ⱄⵃ欽 -BOHVBHFT 8FC1*T
  80. 80. אך㢌⻉ /FUXPSL $PNQPOFOUT 8PSLPX -BOHVBHFT 㣐鋉垷Ꟛ涪ח罣ִ׷鎉铂ח涪㾜 8FC1*T
  81. 81. אך㢌⻉ /FUXPSL $PNQPOFOUT 8PSLPX -BOHVBHFT 8FC1*T 8FC䪮遭ד⡦ד׮乼⡲〳腉ח
  82. 82. 8FCJTUIF/BUJWF1MBUGPSN 8FCָط؎ذ؍ـ ءٝفٕח⡦ד׮⳿勻׷״ֲח غحسظؐعؐכו׿ו׿䐖姺 ط؎ذ؍ـず圫ך鸞䏝׮〳腉ח 8FCָفٓحزؿؓ٦ي ⱄⵃ欽䚍כ䚈鸞ח넝ת׏גֹ׋ 㛙暕זفؚٗٓىؚٝ׮〳腉ח 04ٖكٕך㣐鋉垷Ꟛ涪ָ〳腉
  83. 83. ׉ֿד㤴ׁ׿ծֶ㵄ׁ׿ծ ؔآ؟ٝ׋׍ծ،ٖדׅ״
  84. 84. 'JSFGPY04TU:FBS 8FCJTUIF1MBUGPSN 珏ךرغ؎أ׾ אٍؗٔ،ָ ٠㕂ח㉀欽㾜Ꟛ 䎃剢儗挿 䎃剢ךٔٔ٦أ䖓䎃
  85. 85. 'JSFGPY04ך،٦ؗذؙثٍ 8FCָط؎ذ؍ـ ׅץג8FC䪮遭ד㹋植 8FCח剑黝⻉ 8FCח暴⻉׃׋ءٝفٕ鏣鎘 (BJB(FDLP(POLך㾴 8FCؒٝآٝ(FDLPָ⚥䗰
  86. 86. '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
  87. 87. ػح؛٦آ،فٔח׮㼎䘔 )PTUFE 8FC铣׫鴥׫㘗 وصؿؑأز׾欽䠐ׅ׷׌ֽד،فٔח 鸐䌢8FC؟؎زה㛇劤涸חכずׄ ؎ٝأز٦ׇٕ׆ח⢪ֲֿה׮〳腉 1BDLBHFE تؐٝٗ٦س㘗 ؟؎زⰋ⡤׾;*1׃גػح؛٦آ⻉ و٦؛حز㻢叨ד鷄⸇埄ꣲ׾《䖤〳腉 䖞勻ךأوم،فٔח鵚ְ䕎䒭 サーバ 端末 IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FCQQT1BDLBHFE@BQQT )PTUFE QQT Internet 1BDLBHFE QQT local
  88. 88. ،فٔ䞔㜠ؿ؋؎ٕ剅ֻ׌ֽ )PTUFE 8FC铣׫鴥׫㘗 ؟؎ز
  89. 89. NBOJGFTUXFCBQQ NBOJGFTUXFCBQQ⡲䧭 ،فٔ䞔㜠剅ֻ׌ֽד،فٔח 8FC؟؎زכ׉ךתת 䨱׷نةٝ搀׃דⴽ؟؎زחآٍٝفׅ׷ה䨱׏ג勻׵׸זְךד岣䠐
  90. 90. ،فٔ䞔㜠 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
  91. 91. ;*1ׅ׸לػح؛٦آח 1BDLBHFE تؐٝٗ٦س㘗 ;*1
  92. 92. QBDLBHFNBOJGFTU NBOJGFTUXFCBQQ⡲䧭 )PTUFEQQTך儗הずׄ ؟؎زⰋ⡤׾;*1ׅ׷ QBDLBHFNBOJGFTU׾⡲䧭
  93. 93. ⚅歲ぐ㕂ד竲ղٔٔ٦أ 䎃ך倜醡ㅷה׃ג涪邌ׁ׸׋畭劣ך♧鿇
  94. 94. 倜莆㕂䋐㜥ח׮㼎䘔 4QSFBEUSVN醡⡚⣣呓أوم ؎ٝسדכ爡ַ׵顋㡰 *OUFY$MPVE'93T _ⰼ 4QJDF'JSF0OF3T _ⰼ ⚅歲⚥ך➂ח*OUFOFU畭劣׾ ⭙➂ָأو٦زؿؓٝ劢䨽剣 顋㡰Ꟛ㨣
  95. 95. أوم⟃㢩ח׮갫如㾜Ꟛ ػ٦زش٦ָ実׭׷رغ؎أח갫如㾜Ꟛ .P[JMMB荈魦כ畭劣顋㡰׃זְ
  96. 96. ׀劍䖉ֻ׌ְׁկ ٥٥
  97. 97. 5IBOLT OZ2VFTUJPO CZEZOBNJT !EZOBNJUUFS GBDFCPPLDPNEZOBNJT

×