$30 off During Our Annual Pro Sale. View Details »

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

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

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



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

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

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

Mariko Kosaka

May 18, 2019
Tweet

More Decks by Mariko Kosaka

Other Decks in Technology

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