Web標準でつくるガラケーサイト

このスライドは令和元年5 月18日に東京で開催された Inside Frontend #3で発表した資料に簡単な説明を追加したものです。



フィーチャーフォンからデスクトップまですべてのデバイスで動くマインスイーパークローン(proxx.app)を作った経緯と開発の過程を発表しました。

なにか質問があればTwitterで@kosamriまでどうぞ。

スライドのライセンスはCC BY-NC-SA 2.0です。資料等でレファレンスとして使われる際は教えてくれると(本人が)喜びます😊

Transcript

1. ͜ͷεϥΠυ͸ྩ࿨ݩ೥5 ݄18೔ʹ౦ژͰ։࠵͞Εͨ Inside Frontend #3Ͱൃදͨ͠ࢿྉʹ
   ؆୯ͳઆ໌Λ௥Ճͨ͠΋ͷͰ͢ɻ

   

   ͳʹ͔࣭໰͕͋Ε͹TwitterͰ@kosamri·ͰͲ͏ͧɻ
   

   View Slide

2. ͜Μʹͪ͸ʂ͜͞·ΓͰ͢ɻ

   Chrome ͷweb developer ecosystem νʔϜͰಇ͍͍ͯ·͢ɻ
   

   View Slide

3. ࠓ೔͸ջ͔͍͠Ψϥέʔͷ࿩Λ͠ʹ͖·ͨ͠ɻ
   
   Ψϥέʔͱ͍ͬͯ΋ੲͷέʔλΠͰ͸ͳͯ͘ɺࠓɺੈք֤ࠃͰ࣮ࡍʹചΒΕ͍ͯΔʮε
   ϚʔτϑΟʔνϟʔϑΥϯʯͷ࿩Ͱ͢ɻ
   

   View Slide

4. ࠷ۙKaiOSͱ͍͏΢Σϒٕज़ϕʔεͰ࡞ΒΕͨOSΛ౥ࡌ͍ͨ͠ΘΏΔʮΨϥέʔʯ͕ੈք
   ֤ࠃͰൃച͞Ε͍ͯ·͢ɻ
   
   ϒϥ΢β΋ͪΐͬͱݹ͍όʔγϣϯͰ͕͢Ϟμϯͳ΋ͷ͕౥ࡌ͞Ε͓ͯΓɺAppετΞ΋
   ౥ࡌ͍ͯ͠·͋͢ɻ
   

   View Slide

5. ͪͳΈʹcounterpoint research͸ࠓޙ3೥ؒͰ3ԯ7ઍສ୆ͷεϚʔτϑΟʔνϟʔϑΥϯ͕
   ൃച͞ΕΔͱ༧૝͍ͯ͠·͢ɻ
   

   View Slide

6. ιϑτ΢ΣΞ͸·͘͞͠εϚʔτϑΥϯͷΑ͏Ͱ͕͢ɺϋʔυ΢ΣΞ͸΍ͬͺΓΨϥέʔ
   ͱಉ͡Ͱ͢ɻ
   

   View Slide

7. ͜ͷεϚʔτϑΟʔνϟʔϑΥϯͰ΢Σϒϒϥ΢δϯάΛ͢ΔͱͲ͏ݟ͑ΔͰ͠ΐ͏͔ʁ
   

   View Slide

8. Inside Frontend ͷαΠτ͸ଟ෼minimum width͕240pxΑΓେ͖͍ͷ͔ɺϩΰ͕ը໘͔Β
   ᷓΕ͍ͯ·͢ɻ
   

   View Slide

9. Squoosh͸ڈ೥ࢲͷνʔϜͰ࡞ͬͨΞϓϦͰɺʮҰ൪ྑ͘Ͱ͖ͨ΢ΣϒΞϓϦΛʯ໨ࢦ͠
   ͯ৭ʑͳσόΠεͰςετΛ͠ɺϩʔσΟϯάվળ΋͠·͕ͨ͠ɺqvgaͷεΫϦʔϯαΠ
   ζ͸ߟ͍͑ͯͳ͔ͬͨͷͰɺCSS่Ε͕͓͖͍ͯ·͢ɻ
   

   View Slide

10. εϚʔτϑΟʔνϟʔϑΥϯͰϒϥ΢δϯά͢Δͱ࢖͍ʹ͍͘΢ΣαΠτ͹͔ΓͰ͕͢ɺ
    ͖ͪΜͱ࢖͑ΔαΠτ΋͋Γ·͢ʂ
    
    Twitter͕ྑ͍ྫͰɺmobile.twitter.comͰ࢖͑Δػೳ͸͢΂ͯεϚʔτϑΟʔνϟʔϑΥϯ
    Ͱ΋࢖͑·͢ɻ
    

    View Slide

11. KaiOSʹಛԽͨ͠ΞϓϦΛ࡞Ε͹ྑ͍ͱࢥ͏͔΋͠Ε·ͤΜ͕ɺΠϯυͳͲͰ͸ܞଳΩϟ
    ϦΞ͕AppετΞΛѲ͍ͬͯͯɺ͔ͭಠࣗͷಈը΍ECαʔϏεΛ͓࣋ͬͯΓɺڝ߹͢Δ
    αʔϏεͩͱAppετΞʹ৐Εͳ͍Մೳੑ͕͋Γ·͢ɻͱ͍͏͜ͱ͸ɺҰ෦ͷαʔϏεɾ
    ϏδωεͰ͸ࠓޙ΢ΣϒαΠτͱͯ͠ఏڙ͢Δ͜ͱ͕ॏཁʹͳΔ͔΋͠Ε·ͤΜɻ
    

    View Slide

12. ͱ͜ΖͰઌఔChrome ͷweb developer ecosystem νʔϜͰಇ͍͍ͯΔͱݴ͍·͕ͨ͠ɺ
    ͦͷதͰ΋ʮ࣮ࡍʹ΢ΣϒΞϓϦΛ࡞ͬͯΈΔʯαϒνʔϜʹॴଐ͍ͯ͠·͢ɻ
    

    View Slide

13. ͜ͷνʔϜͰͷ࠷ॳͷϓϩδΣΫτ͸ڈ೥࡞ͬͨSquooshͱ͍͏ΞϓϦͰ͢ɻWasmΛ
    ࢖ͬͯϒϥ΢β಺Ͱը૾ѹॖ΍ϑΥʔϚοτม׵Λߦ͍·͢ɻ
    

    View Slide

14. νʔϜͰ࣍ͷϓϩδΣΫτΛߟ͑ͨ࣌ʹʮήʔϜ࡞Ζ͏Αʂʯͱ͍͏࿩ʹͳΓ·ͨ͠ɻ
    

    View Slide

15. ৭ʑͳਓʹʮwebͬͯԿ͕ಘҙͰ͔͢ʁʯͱฉ͘ͱ͍͍ͨͯʮυΩϡϝϯτʯͱ͍͏౴͑
    ͕ฦͬͯ͘ΔͷͰਅٯͷ՝୊ʹτϥΠͯ͠Έ͔ͨͬͨͷͱɺήʔϜΛ࡞Δ͜ͱͰ΢Σϒα
    ΠτͰྑ͘௚໘͢Δ՝୊΋ࢼͤΔͱࢥ͔ͬͨΒͰ͢ɻ
    

    View Slide

16. ྫ͑͹Ϣʔβʔ͔Βinput͕͍ͬͺ͍དྷͨΒͲ͏΍ͬͯॲཧ͢Ε͹͍͍ͩΖ͏…ͱ͔
    

    View Slide

17. ΢ΣϒαΠτͰΞχϝʔγϣϯΛΰϦΰϦಈ͔͢͜ͱͬͯग़དྷΔ͔ͳ…ͱ͔Ͱ͢ɻ
    

    View Slide

18. ߋʹεϚʔτϑΟʔνϟʔϑΥϯ͕ࠓޙདྷΔ(͔΋)ͱ͍͏࿩্͕͕͍ͬͯͨͷͰɺσεΫ
    τοϓ͔ΒϑΟʔνϟʔϑΥϯ·Ͱ͢΂ͯͷσόΠεʹରԠ͢Δ͜ͱʹ͠·ͨ͠ɻ
    

    View Slide

19. ࡞ͬͨΞϓϦ͸PROXXͱ͍͏ΞχϝʔγϣϯΛଟ༻ͨ͠ϚΠϯεΠʔύʔͷΫϩʔϯͰ
    ͢ɻ஍ཕͷ୅ΘΓʹʮӉ஦ͰϒϥοΫϗʔϧΛආ͚Δʯͱ͍͏ήʔϜઃఆʹ͍ͯ͠·͢ɻ
    

    View Slide

20. Ͱ͸ɺ࣮ࢪʹͲ͏΍ͬͯ࡞ͬͨݟ͍͖ͯ·͠ΐ͏ɻ
    

    View Slide

21. νʔϜͷεϖοΫͱͯ͠͸͜Μͳײ͡Ͱ͢ɻ
    
    ΞΫηγϏϦςΟͱϑΟʔνϟʔϑΥϯ୲౰ɺWebGL୲౰ɺϕʔεͷ΢ΣϒΞϓϦ୲౰ͱ
    ͍ͬͨͬ͘͟Γͨ͠໾ׂ෼୲Λ͠·ͨ͠ɻ
    

    View Slide

22. ·ͨɺϓϩδΣΫτΛߦ͏ʹ͋ͨͬͯϝϯόʔͰԿΛେࣄʹ͢Δͷ͔Λ֬ೝ͠·ͨ͠ɻ
    

    View Slide

23. ϕʔεͷߏ੒Λݟ͍͖ͯ·͢ɻ
    

    View Slide

24. ίʔυϕʔε͸ͬ͘͟Γͱ͜Μͳײ͡ͰผΕ͍ͯ·͢ɻήʔϜϩδοΫ͸ήʔϜͷαΠζ
    ΍ϒϥοΫϗʔϧͷҐஔܭࢉͳͲUIϨΠϠʔͱ͸׬શʹ෼཭ͯ͋͠Γɺ͜ͷήʔϜϩδο
    ΫʹStateαʔϏεͱ͍͏؆୯ͳϥούʔΛט·ͤͯUIͱ࿈ܞ͍ͤͯ͞·͢ɻޙ΄Ͳ৮Ε·
    ͕͢ඳըॲཧͷͱ͜Ζ΋෼͚ͯ͋Γ·͢ɻ
    

    View Slide

25. ͜ΕΒΛશ෦ϝΠϯεϨουͰӡ༻ͯ͠΋ྑ͍ͷͰ͕͢ɺ͸͡Ί͔ΒΞχϝʔγϣϯΛΰ
    ϦΰϦಈ͔͍ͨ͠ͱߟ͍͑ͯͯɺશ෦ϝΠϯεϨουͰಈ͔͢ͷ͸ਏ͍ͱߟ͑ͯ…
    
    

    View Slide

26. ήʔϜϩδοΫͱstateαʔϏε͸WebWorker΁Θ͚·ͨ͠ɻ
    

    View Slide

27. Web Worker͸JavaScriptΛϒϥ΢βͷϝΠϯεϨουͱ͸ผͷεϨουͰಈ͔͢͜ͱ͕Ͱ
    ͖Δ࢓૊ΈͰɺpost messageΛ࢖ͬͯεϨουؒͷ΍ΓऔΓΛ͠·͕͢ɺਖ਼௚࢖͍ʹ͍͘
    Ͱ͢ɻ
    

    View Slide

28. ϥοΩʔͳ͜ͱʹνʔϜϝϯόʔͷSurma͕Comlinkͱ͍͏post message Λந৅Խͨ͠ϥ
    ΠϒϥϦΛ࡞͍ͬͯΔͷͰ࠾༻͠·ͨ͠ɻWeb Worker͕͍͍ײ͡ʹ͔ͭ͑ͯ࠷ߴͰ͢ɻ
    

    View Slide

29. ͥͻ࢖ͬͯΈ͍ͯͩ͘͞ɻ
    

    View Slide

30. UIʹ͍ͭͯ͸PreactͰ࡞͍ͬͯ·͢ɻνʔϜͰ࢖ͬͨܦݧ͕͋ͬͨͷͱɺτʔλϧͷαΠ
    ζ͕ଞʹൺ΂ͯখ͍͔͞ΒͰ͢ɻ
    

    View Slide

31. ͍ΘΏΔdivʹશ෦render()ͯ͠ɺbodyʹappend͢Δͱ͍͏γϯάϧϖʔδΞϓϦέʔ
    γϣϯߏ੒Ͱ͕͢ɺͦͷ··ΫϥΠΞϯτʹૹΔͷͰ͸ͳ͘ɺϏϧυ͢Δͱ͖ʹ
    PuppeteerΛ࢖ͬͯpre-renderΛߦ͍ͬͯ·͢ɻ
    

    View Slide

32. Puppeteer͸headless chromeΛεΫϦϓτͰಈ͔͢ϥΠϒϥϦͰ͢ɻ
    
    PuppeteerͰΞΫηεͯ͠ϨϯμϦϯά͞ΕͨHTMLͷ݁ՌΛindex.htmlʹॻ͖ࠐΜͰ͍·
    ͢ɻ
    

    View Slide

33. ͓ͦΒ͘ύϑΥʔϚϯε໘ͰҰ൪ޮՌ͕͋ͬͨͷ͸ΞϓϦͰඳըॲཧΛͨ͜͠ͱͰ͢ɻ
    

    View Slide

34. ࠷ॳ͸TableʹϘλϯΛฒ΂ͯɺGPUΛ࢖͏CSSΞχϝʔγϣϯͰ࣮૷͠Α͏ͱߟ͍͑ͯͨ
    ͷͰ͕͢…
    
    

    

    View Slide

35. ͢΂͕ͯ1ϨΠϠʔʹ͋ΔͱɺϘλϯͻͱͭΛผͷ৭ʹม͑Δ͚ͩͰtableશମ͕paint͞Ε
    Δͱ͍͏Chromeͷόάʹૺ۰͠·ͨ͠
    

    View Slide

36. ͜͏͍ͬͨ৔߹ͷղܾࡦͱͯ͠͸ϨΠϠʔΛ෼͚Δͱ͍͏ॲཧ͕͋Γ·͢ɻ
    

    View Slide

37. ϒϥ΢βͷϨϯμϦϯά͸Compositͱ͍ΞΠσΞΛ࠾༻͓ͯ͠Γɺޙʑಈ͍ͨΓopacity
    ͕มΘͬͨΓ͢Δཁૉ͸ϨΠϠʔʹผ͚͓ͯ͘ͱϨϯμϦϯά͕ૣ͘ͳΓ·͢ɻ
    

    View Slide

38. DevToolsͰ΋LayerύωϧͰͲͷཁૉ͕ϨΠϠʔʹผΕ͍ͯΔ͔֬ೝ͢Δ͜ͱ͕Ͱ͖·͢ɻ
    

    View Slide

39. ϨΠϠʔʹ෼͚Ε͹Paintͷόά͸ճආͰ͖ΔͷͰ͕͢ɺࠓճ͸ϘλϯͻͱͭͻͱͭʹϨΠ
    ϠʔΛ͚ͭΔͱϨΠϠʔ͕૿͑͗ͯ͢ٯʹϝϞϦͷํͰ໰୊ʹͳΔͷͰɺ͜ͷํ๏͸ݟૹ
    Γ·ͨ͠ɻ
    

    View Slide

40. ϒϥ΢βʹඳըΛ͓·͔͔ͤͨͬͨ͠ͷͰ͕͢ɺύϑΥʔϚϯε໘Ͱ೉͜͠ͱ͕Θ͔ͬͨ
    ͋ͷͰɺࣗ෼ͨͪͰCanvasʹඳը͢Δ͜ͱʹ͠·ͨ͠ɻ
    

    View Slide

41. ࣮ࡍ͸όοΫάϥ΢ϯυͷCanvasͱάϦουͷCanvasͱ͍͏2ͭͷCanvasΛॏͶ͍ͯ·
    ͢ɻ(͜Ε͸ࠓޙ1ͭʹϚʔδ͢Δ༧ఆͰ͢)
    

    View Slide

42. ͜ΕΒΛrequestAanimationFrameΛ࢖ͬͯΞχϝʔγϣϯ͍ͤͯ͞·͢ɻ
    

    View Slide

43. requestAnimationFrame͸ϒϥ΢β͕֤ϑϨʔϜΛߋ৽͢ΔλΠϛϯάͰcall backͰ౉͠
    ͨεΫϦϓτΛ࣮ߦͯ͘͠ΕΔAPIͰ͢ɻ
    
    Ξχϝʔγϣϯͷ৔߹͸࠶ىతʹͰݺͼग़͢͜ͱͰຖϑϨʔϜ͝ͱʹඳըίϚϯυΛ࣮ߦ
    ͠·͢ɻ
    

    View Slide

44. ͜ͷลʹ͍ͭͯ΋ͬͱ஌Γ͍ͨਓ͸ɺϒϥ΢β͸Ͳ͏΍ͬͯಈ͍͍ͯΔͷ͔ௐ΂ͨهࣄΛ
    ॻ͍ͨͷͰͥͻࢀߟʹ͍ͯͩ͘͠͞ɻ
    

    View Slide

45. ඳըͰ͸ͦͷଞʹ΋͍͔ͭ͘ରࡦΛ͠·ͨ͠ɻ
    

    View Slide

46. όοΫάϥ΢ϯυͷΞχϝʔγϣϯ͸ݩʑϘέͨσβΠϯͩͬͨͷͰ1/5ͷαΠζͰ࡞੒͠
    Ҿ͖ͷ͹ͯ͠(ͦΕͰ΋શવOK)͍·͢ɻ
    
    ֤ηϧͷΞχϝʔγϣϯ͸εϓϥΠτΛ࡞੒͓ͯ͠ΓɺΫϥΠΞϯταΠυͰੜ੒ͨ͠΋
    ͷΛindexed DBʹอଘ͍ͯ͠·͢ɻʢը૾͸Ұ੾αʔόʔ͔ΒૹΓ·ͤΜʣ
    

    View Slide

47. ΞΫηγϏϦςΟʹ͍ͭͯ΋ؤுͬͯରԠ͠·ͨ͠ɻ
    

    View Slide

48. ϏδϡΞϧ͚ͩߟ͑Ε͹ɺCanvasͰήʔϜΛ࡞Δ͜ͱ͸ग़དྷΔͷͰ͕͢ɺ͜ΕͩͱεΫ
    ϦʔϯϦʔμʔରԠ౳͕େมͰ͢ɻ
    

    View Slide

49. ͦͷͨΊɺ࣮͸tableͱbuttonͷHTMLཁૉϨΠϠʔΛಁ໌ͰॏͶ͍ͯ·͢ɻ
    

    View Slide

50. HTMLཁૉΛ৐ͤΔ͜ͱͰɺཁૉʹϑΥʔΧεͨ͠Γ֤Ϙλϯʹevent listnersΛ͚ͭͨΓ
    ͢Δ͜ͱ͕Ͱ͖ͯศརͰ͢ɻ
    

    View Slide

51. ϒϥ΢β͸HTMLͷཁૉʹͨ͘͞ΜͷΞΫηγϏϦςΟػೳ͕ೖ͍ͬͯΔͷͰͦͷԸܙʹ
    ༬͔͍ͬͯ·͢ɻ
    

    View Slide

52. εΫϦʔϯϦʔμʔͰΞΫηε͢Δͱ”hidden”ͷ෦෼͚͕ͩࢲୡͷίʔυͰ͚ͭͨlabel
    ͰɺͦͷଞͷҐஔ৘ใ౳͸શ෦ϒϥ΢β͕ఏڙͯ͘͠Ε·ͨ͠ɻ
    

    View Slide

53. TableཁૉΛ࢖͍ͬͯΔͷͰrole=gridΛઃఆ͢Δ͜ͱͰࠓfocusͷ͋ΔηϧͷҐஔΛಡΈ্
    ͛ͯ͘ΕΔΑ͏ʹͳΓ·͢ɻ
    

    View Slide

54. …ຊ౰͸role=gridΛೖΕΔ͚ͩͰରԠͯ͘͠ΕΔ͸ͣͳͷͰ͕͢ɺϒϥ΢β͕͏·͘ೝࣝ
    ͯ͘͠Εͳ͔ͬͨͷͰrole=rowͱrole=gridcell΋arrtibuteʹॻ͖ࠐΜͰ͍·͢ɻ
    

    View Slide

55. ήʔϜͷάϦουʹ͸roving tabindexͱ͍͏ख๏Λ࠾༻͠·ͨ͠ɻ
    

    View Slide

56. Ϙλϯ͕ͨ͘͞ΜฒΜͰ͍ΔͷͰɺͦͷ··ͩͱΩʔϘʔυૢ࡞Ͱ͢΂ͯͷϘλϯʹ
    ϑΥʔΧε͔ͯ͠ΒͰͳ͍ͱάϦου֎ͷϘλϯ΍ϦϯΫʹ౸ୡͰ͖·ͤΜɻ
    

    View Slide

57. ͦ͜ͰάϦουͷதͰϑΥʔΧεͰ͖ΔϘλϯ(tablindex=0)͸Ұ͚ͭͩͰͦͷଞ͸ϑΥʔ
    ΧεͰ͖ͳ͍Α͏ʹͯ͠໼ҹΩʔͰૢ࡞ͨ࣌͠ʹ0ͱ-1ͷҐஔΛͣΒ͍ͯ͠·͢ɻ
    

    View Slide

58. ͜͏͢Δ͜ͱͰTabΛҰճԡͤ͹ϑΥʔΧεΛάϦου֎ʹग़͢͜ͱ͕ग़དྷΔΑ͏ʹͳΓ
    ·͢ɻ
    

    View Slide

59. ϑΥʔΧεϦϯάʹ͍ͭͯ͸ʮϚ΢εૢ࡞ͷਓʹ͸ݟͤͨ͘ͳ͍ɺͰ΋ΩʔϘʔυૢ࡞ͷ
    ਓʹ͸ग़͍ͨ͠ʯͱ͍͏෦෼ͷ࣮૷ʹɺfocus-visibleͷpolyfilΛ࢖͍ͬͯ·͢ɻ
    

    View Slide

60. ΞΫηγϏϦςΟʹ͍ͭͯ͸web.devʹνϡʔτϦΞϧ͕͋ΔͷͰݟͯΈ͍ͯͩ͘͞ɻ
    

    View Slide

61. ϓϩδΣΫτ൒͹Ͱ͸σεΫτοϓͱKaiOSͰςετ͓ͯ͠Γ͏·͘ಈ͍͍ͯͨͷͰ͕͢
    ϩʔεϖοΫͳAndroidεϚϗͰ͸ಈ͔ͳ͍ͱ͍͏ࣄଶʹ௚໘͠·ͨ͠ɻ
    

    View Slide

62. ͦ΋ͦ΋ϑΟʔνϟʔϑΥϯ͸ඇྗͳϋʔυ΢ΣΞͰ΋ಈ͔͢ϐΫηϧͷ਺͕ݶΒΕ͍ͯ
    ΔͷͰ͋Δఔ౓ಈ͖·͢ɻ
    
    ͜Ε͕εϚʔτϑΥϯʹͳΔͱɺͪΐͬͱྑ͍ϋʔυͰ΋ಈ͔͢ϐΫηϧ਺͕਺ഒʹͳ
    ΓɺΪϒΞοϓͯ͠͠·͍·͢ɻ
    

    View Slide

63. ݩʑΞΫηγϏϦςΟͰprefers reduced motionରԠͷͨΊΞχϝʔγϣϯແ͠ͷόʔ
    δϣϯ΋࡞Δඞཁ͕͋ͬͨͷͰɺͦΕΛ࢖ͬͯඇྗͳσόΠεʹ͸࠷ॳ͔ΒΞχϝʔγϣ
    ϯແ͠Ͱग़͢Α͏ʹ͠·ͨ͠ɻhighp fragment shader͕࢖͑Δ͔Ͱ൑அ͍ͯ͠·͢ɻ
    

    View Slide

64. Inputʹ͍ͭͯ΋σόΠεʹΑ༷ͬͯʑͳ΋ͷʹରԠ͍ͯ͠·͢ɻ
    

    View Slide

65. ʮΫϦοΫͯ͠ηϧΛ։͚ΔʯͱʮηϧʹϑϥάΛཱͯΔʯͱ͍͏2ͭͷίΞૢ࡞ΛσόΠ
    εʹΑͬͯ৭ʑͳํ๏Ͱఏڙ͍ͯ͠·͢ɻ
    

    View Slide

66. ͨͩ͠ύϑΥʔϚϯεΛߟ͑ͨ࣌ʹݟૹͬͨUX΋༗Γ·͢ɻPinch Zoom͸ϒϥ΢βඪ४
    ͷεΫϩʔϧΛ࠾༻͢ΔͨΊʹݟૹΓ(εΫϩʔϧʹ଎͘൓Ԡ͢Δ͜ͱΛ༏ઌ)ɺμϒϧλο
    ϓ͸ͨͱ͑γϯάϧλοϓͰ΋μϒϧλοϓ͔Ͳ͏͔ͷ֬ೝͷͨΊʹ଴ͨͳͯ͘͸͍͚ͳ
    ͍ͷͰݟૹΓ·ͨ͠ɻ
    

    View Slide

67. ͞ΒʹɺϑΟʔνϟʔϑΥϯͰ͸͜ΕΒͷૢ࡞͕࢖͑ͳ͍ͷͰ…
    

    View Slide

68. ਺ࣈΩʔʹΞΫγϣϯΛׂΓ౰ͯΔ͜ͱͰରԠ͠·ͨ͠ɻ

    ͦͷଞʹ΋ϑΟʔνϟʔϑΥϯ޲͚ͷσβΠϯΛ͍͔ͭ͘ఏڙ͍ͯ͠·͢ɻ
    

    View Slide

69. Ϛ΢ε΋͋ΔͷͰ͕͢ɺը໘͕খ͘͞ήʔϜதʹͲͷηϧ͕ࠓબ୒͞Ε͍ͯΔͷ͔ݟͮΒ
    ͍ͷͰɺখ͍͞ը໘ͷ৔߹͸ϑΥʔΧεΛݟ͑ΔΑ͏ʹ͍ͯ͠·͢ɻΞΫηγϏϦςΟͰ
    ΩʔϘʔυૢ࡞ରԠͰ࡞ͬͨ෺ΛqvgaαΠζͷը໘ʹ͸σϑΥϧτͰग़͢Α͏ʹͳ͍ͬͯ
    ·͢ɻ
    

    View Slide

70. աڈͷΨϥέʔαΠτΛࢀߟʹͯ͠ɺΩʔૢ࡞ͷΨΠυ΋දࣔͤ͞·ͨ͠ɻ
    

    View Slide

71. Ϣʔβʔ͕සൟʹ࢖͏ػೳʹ͍ͭͯ͸γϣʔτΧοτΛ͚͍ͭͯ·͢ɻ(ʮμΠΞϩάΛด
    ͡ΔʯͳͲ)
    

    View Slide

72. ͜ͷγϣʔτΧοτ͕ແ͍ͱɺ௕͍μΠΞϩάΛಡΜͰ͍Δ࣌ʹɺด͡Δʹ͸ʮͣʔͬͱ
    ্·ͰεΫϩʔϧ͔ͯ͠ΒॳΊͯ✗ϘλϯΛΫϦοΫͰ͖Δɻʯͱ͍ͬͨΠέ͍ͯͳ͍UX
    ʹͳͬͯ͠·͍·͢ɻ
    

    View Slide

73. PWAͳͷͰServiceWorkerΛ͔ͭͬͯΦϑϥΠϯΞΫηεʹରԠ͍ͯ͠·͢ɻ
    

    View Slide

74. Ξοϓσʔτ͕͋ͬͨ࣌ʹʮϦϩʔυ͍ͯͩ͘͠͞ʯͱ͍Ξφ΢ϯεΛग़͢͜ͱ͕ଟ͍Ͱ
    ͕͢ɺࠓճ͸ήʔϜͳͷͰɺͰ͖Δ͚ͩϢʔβʔͷʮήʔϜΛ͍ͨ͠ʯॠؒΛःΒͳ͍Α
    ͏ʹ…
    

    View Slide

75. ελʔτϘλϯͷதʹΞοϓσʔτͷϩδοΫΛຒΊࠐΈ·ͨ͠ɻ
    

    View Slide

76. ελʔτͨ࣌͠ʹ৽͍͠όʔδϣϯ͕͋Ε͹औ͖ͬͯͯΠϯετʔϧ͠ɺ׬ྃͨ͠Β௚઀
    ήʔϜը໘ͷදࣔΛ͠·͢ɻͭ·ΓɺϢʔβʔ͕͜ͷήʔϜը໘ʹߦ͖ண͘ͱ͖ʹ͸͢Ͱ
    ʹ৽͍͠όʔγϣϯ͕දࣔ͞ΕΔ࢓૊ΈͰ͢ɻ
    

    View Slide

77. ϩʔσΟϯάʹ͍ͭͯ͸݁ߏ৻ॏʹରԠ͠·ͨ͠ɻ
    

    View Slide

78. ·ͣ࠷ॳʹૹΒΕΔindex.html͸20kbɺ͜Ε͸Ұ൪࠷ॳʹϢʔβʔ͕઀͢Δ΋ͷશ෦͕
    ೖ͍ͬͯ·͢ɻ
    

    View Slide

79. ͭ·Γ͜ͷը໘…
    

    View Slide

80. …͍΍ɺΞχϝʔγϣϯ͸lazy load͢ΔͷͰ͜ͷը໘Ͱ͢ɻ

    ΢ΣϒϑΥϯτΛ࢖͍ͬͯ·͕͢ɺ࢖͍ͬͯΔΞϧϑΝϕοτ͚ͩαϒηοτͯ͠ɺΠϯ
    ϥΠϯͰindex.htmlʹຒΊࠐΜͩΓ͍ͯ͠·͢ɻ
    

    View Slide

81. ͦͷଞඞཁʹͳΔίʔυ͸͢΂ͯޙ͔Β෼͚ͯૹΓ·͢ɻ
    

    View Slide

82. ࠓճ͸RollupΛ࠾༻͠·ͨ͠ɻ
    

    View Slide

83. ͱ͍͏ͷ΋ɺComlink͕ڞ௨dependencyͱͯ͋͠ΔͷͰ͕͢…
    

    View Slide

84. webpackͩͱಉ͡ίʔυͳͷʹ2ͭͷchunkͱͯ͠ѻΘΕͯ͠·͍·͢ɻ
    

    View Slide

85. ͋ͱ, webpack͸νʔϜͰ΋͍·͍ͪ௫Ίͳͯ͘ɺӡ༻͕ਏ͔ͬͨܦݧ͕͋ΔͷͰࠓճ͸
    ύε͠·ͨ͠ɻ
    

    View Slide

86. RollupͰ͸࠷ॳ͔Β1ͭͷchunkͱͯ͠ѻͬͯ͘ΕΔͷͰσʔλͷ࡟ݮ͕Ͱ͖Δͷͱɺ
    

    View Slide

87. ϓϥάΠϯͷγεςϜ͕Θ͔Γ΍͘͢ɺϓϩδΣΫτʹ߹ͬͨߏ੒ʹͳΔΑ͏ʹࣗ৴Λ
    ΋ͬͯΧελϚΠζ͕Ͱ͖·ͨ͠ɻ
    

    View Slide

88. ͪͳΈʹworkerͰ͸JSϞδϡʔϧ͕·ͩ࢖͑ͳ͍ͷͰɺRollupͷΞ΢τϓοτʹ͋Θͤͨ
    AMDϩʔμʔͷΑ͏ͳ΋ͷΛ࢖͍ͬͯ·͢ɻ͜Ε΋ϓϥάΠϯͱͯ͠࡞Γ·ͨ͠ɻ
    

    View Slide

89. πʔϧ͚ͩͰ͢΂ͯղܾͰ͖Δ෺Ͱ΋ͳ͘ɺ݁ߏ৻ॏʹϩʔσΟϯάվળʹ͸औΓ૊Έ·
    ͨ͠ɻ
    

    View Slide

90. ྑ͚Ε͹͜ͷϓϧϦΫΛݟͯΈ͍ͯͩ͘͞ɻ
    

    View Slide

91. ྫ͑͹ήʔϜͷ্ʹ͋ΔτοϓόʔͰ͕͢ɺ
    

    View Slide

92. λΠϚʔͳͲϞϦϞϦͷػೳ͕ೖ͍ͬͯΔͷʹɺτοϓϖʔδͰ͸ͦ͏͍ͬͨػೳ͸Ұ੾
    ඞཁͳ͍ͨͩͷϩΰόφʔͰ͢ɻ
    

    View Slide

93. ͦ͜Ͱશ෦੝Γͷίϯϙʔωϯτͱόφʔ͚ͩͷγϯϓϧίϯϙʔωϯτʹ෼͚ͯɺ࠷ॳ
    ʹૹΔϑΝΠϧαΠζͷ࡟ݮΛ͠·ͨ͠ɻ
    

    View Slide

94. ͪͳΈʹϓϧϦΫΛૹΔ͝ͱʹTravisͰαΠζϨϙʔτͷεΫϦϓτΛಈ͔ͯ͠ɺϑΝΠϧ
    ໊΍αΠζมߋͷ֬ೝΛߦ͍ͬͯ·͢ɻ
    

    View Slide

95. ࠷ޙʹɺࠓճͷܦݧͯ͠ษڧʹͳͬͨ͜ͱ͸Ҏ্ͷ3఺Ͱ͢ɻϓϩδΣΫτͰԿΛ༏ઌ͢Δ
    ͷ͔ܾΊͨ͜ͱͰɺσβΠϯͷΞΠσΞ(μϒϧλοϓͱ͔)͕ग़ͯ΋ͲͪΒ͕ྑ͍͔ݴ͍߹
    ͏͜ͱͳ͙͘͢ʹҙࢥܾఆ͕Ͱ͖·ͨ͠ɻ·ͨweb workerແ͠Ͱ͸௿εϖοΫͳϩʔΤϯ
    υσόΠεͰಈ͘ήʔϜΛͭ͘Δ͜ͱ͸೉͔ͬͨ͠ͱײ͍ͯ͡·͢ɻ
    

    View Slide

96. ͨͩྑ͘πΠολʔͰʮ͜ΜͳΞϓϦ͕࡞ΕΔͷ͸ϒϥ΢βϕϯμʔʹॴଐ͍ͯ͠Δνʔ
    Ϝ͚ͩͩʯͱݴΘΕΔͷͰ͕͢ɺผʹͳʹ͔ಛผͳ͜ͱΛ͍ͯ͠ΔΘ͚Ͱ΋ϒϥ΢βΤϯ
    δχΞ͕ಛผͳຐ๏Λ͔͚ͯ͘ΕͨΘ͚Ͱ΋͋Γ·ͤΜɻ
    

    View Slide

97. ڧ͍ͯݴ͏ͳΒɺνʔϜͷҙࣝͱͯ͠ʮΤϯδχΞ͕࡞Γ΍͍͢ɾσβΠϯ͕දݱ͠΍͢
    ͍ʯΑΓ΋ʮϢʔβʔ͕࢖͍΍͍͢ʯΛѹ౗తʹ༏ઌͯ͠ҙࢥܾఆΛ͍ͯ͠·͢ɻ

    ͦ͏͍͏ҙࣝΛࣗવͱ࣋ͯΔจԽ͕͋Δͷ͸͋͋Γ͕͍ͨͰ͢ɻ
    

    View Slide

98. ͱ͍ͬͯ΋ࣄۀձࣾͷϓϩμΫτӡӦͱ͸ҧ͏͜ͱ΋ଟ͍ͷͰɺࠓޙ΋࣮ࡍʹϓϩμΫτ
    νʔϜ͕௚໘͢ΔͰ͋Ζ͏՝୊(ྫ͑͹޿ࠂͱ͔)ʹτϥΠͯ͠Έ͍ͨͱࢥ͍ͬͯ·͢ɻ
    

    View Slide

99. ࡞ͬͨήʔϜ͸proxx.appͰ༡Ϳ͜ͱ͕Ͱ͖·͢ɻ

    ίʔυ͸શ෦githubʹ্͍͛ͯΔͷͰɺͥͻࢀߟʹͯ͠Έ͍ͯͩ͘͞ɻ
    

    View Slide

100. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
     

     View Slide