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·ͰͲ͏ͧɻ
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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ