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

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

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



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

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

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

F9dca45f7e9e63b3b9dbd3b2cf61bd69?s=128

Mariko Kosaka

May 18, 2019
Tweet

Transcript

  1. ͜ͷεϥΠυ͸ྩ࿨ݩ೥5 ݄18೔ʹ౦ژͰ։࠵͞Εͨ Inside Frontend #3Ͱൃදͨ͠ࢿྉʹ ؆୯ͳઆ໌Λ௥Ճͨ͠΋ͷͰ͢ɻ
 
 ͳʹ͔࣭໰͕͋Ε͹TwitterͰ@kosamri·ͰͲ͏ͧɻ

  2. ͜Μʹͪ͸ʂ͜͞·ΓͰ͢ɻ
 Chrome ͷweb developer ecosystem νʔϜͰಇ͍͍ͯ·͢ɻ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  68. ਺ࣈΩʔʹΞΫγϣϯΛׂΓ౰ͯΔ͜ͱͰରԠ͠·ͨ͠ɻ
 ͦͷଞʹ΋ϑΟʔνϟʔϑΥϯ޲͚ͷσβΠϯΛ͍͔ͭ͘ఏڙ͍ͯ͠·͢ɻ

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

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

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

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

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

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

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

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

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

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

  79. ͭ·Γ͜ͷը໘…

  80. …͍΍ɺΞχϝʔγϣϯ͸lazy load͢ΔͷͰ͜ͷը໘Ͱ͢ɻ
 ΢ΣϒϑΥϯτΛ࢖͍ͬͯ·͕͢ɺ࢖͍ͬͯΔΞϧϑΝϕοτ͚ͩαϒηοτͯ͠ɺΠϯ ϥΠϯͰindex.htmlʹຒΊࠐΜͩΓ͍ͯ͠·͢ɻ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  99. ࡞ͬͨήʔϜ͸proxx.appͰ༡Ϳ͜ͱ͕Ͱ͖·͢ɻ
 ίʔυ͸શ෦githubʹ্͍͛ͯΔͷͰɺͥͻࢀߟʹͯ͠Έ͍ͯͩ͘͞ɻ

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