一休.comレストランのスマートフォン検索ページがSPAになりました

一休.com レストランは 2018 年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このスライドでは、その中身について少し紹介させていただきます。

Transcript

1. Ұٳ.comϨετϥϯͷ εϚʔτϑΥϯݕࡧϖʔδ͕ SPAʹͳΓ·ͨ͠ https://user-first.ikyu.co.jp/entry/2018/10/09/080000
2. ࣗݾ঺հ Ҵඌ ༡ • Web ϑϩϯτΤϯυɾΤϯδχΞ • 2016 ೥ 10 ݄ೖࣾ • γεςϜຊ෦ CTO ࣨ ॴଐ • Web ϑϩϯτΤϯυٕज़ج൫୲౰ • εϚʔτϑΥϯ޲͚αΠτͷ Web App Խ΍ͬͯ·͢
3. https://restaurant.ikyu.com/ Ұٳ.com Ϩετϥϯ 2006೥ϦϦʔε ߴ੒௕Λଓ͚ΔϑΝΠϯμΠχϯάͷ༧໿αʔϏε
4.  ＿⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈＿ ＞                ＜ ＞  ⼀休.com レストランで     ＜ ＞  予約したお店なら、間違いない  ＜ ＞                ＜  ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣ https://restaurant.ikyu.com/
5. ࠓ೔ͷ͸ͳ͠ 1. ݕࡧϖʔδͷ՝୊ 2. Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ 3. SEO ͱαʔόʔαΠυϨϯμϦϯά 4. ۀ຿՝୊ͱٕज़՝୊ͷ߹க 5. ίϯϙʔωϯτࢦ޲ઃܭ 6. Ϣχόʔαϧ JavaScript 7. ϦχϡʔΞϧͷ੒Ռ
6. ݕࡧϖʔδͷ՝୊
7. ⸻ ݕࡧϖʔδͷ՝୊
8. ⸻ ݕࡧϖʔδͷ՝୊ ΋ͬͱ࢖͍΍͍͢ UI ʹ! ݕࡧΛμΠφϛοΫʹ! ͳΜ͔஗͍ΑͶ
9. ⸻ ݕࡧϖʔδͷ՝୊ ݕࡧΛμΠφϛοΫʹ! ͳΜ͔஗͍ΑͶ
10. ࣌͸໭Γɺ 2017 ೥ॳ಄…
11. ϑϨʔϜϫʔΫͲ͏͢Δ?
 React ͱ͔ Vue ͱ͔? ߟ͑ͯʔɻ ߟ͑·͢! CTO Θͨ͠
12. Ұٳ.com ϨετϥϯͷϑϩϯτΤϯυମ੍
13. σβΠϯ ઃܭ / ࣮૷ σβΠφʔ ΤϯδχΞ CSS JavaScript αʔόʔ αΠυ HTML ϫΠϠʔ ϑϨʔϜ
14. σβΠϯ ઃܭ / ࣮૷ σβΠφʔ ΤϯδχΞ CSS JavaScript αʔόʔ αΠυ HTML ϫΠϠʔ ϑϨʔϜ CSS ͸࣮࣭σβΠφʔ͕ هड़͢Δ৔߹͕΄ͱΜͲɻ σβΠϯͷௐ੔΋ CSS ௐ੔Ͱߦ͏৔߹͕͋Δɻ
15. σβΠφʔ͕ίʔυΛॻ͚Δ؀ڥ͕ඞཁɻ
17. HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ
18. HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ ެࣜͷ೔ຊޠ༁υΩϡϝϯτ ͕੔උ͞Ε͍ͯΔ
19. HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ ެࣜͷ೔ຊޠ༁υΩϡϝϯτ ͕੔උ͞Ε͍ͯΔ ٕज़తδϟϯϓΛগͳ͘ Ϟμϯ։ൃΛ࢝ΊΒΕͦ͏
20. HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ ެࣜͷ೔ຊޠ༁υΩϡϝϯτ ͕੔උ͞Ε͍ͯΔ ٕज़తδϟϯϓΛগͳ͘ Ϟμϯ։ൃΛ࢝ΊΒΕͦ͏ ϑϩϯτΤϯυɾΨν੎ͷগͳ͍ Ұٳ.com ϨετϥϯνʔϜʹ࠷ద!
21. Vue.js Λ࠾༻
23. ϋϯόʔΨʔϝχϡʔ
25. ϓϥϯ৘ใϞʔμϧ
27. ΫνίϛɾΞίʔσΟΦϯ
29. ϖʔδ಺ݕࡧϞʔμϧ
30. Vue.js ʹΑΔμΠφϛοΫͳ࣮૷͕ঃʑʹ૿Ճɻ
31. ࿩͸໭Γɺ ݕࡧϖʔδͷ՝୊…
32. ⸻ ݕࡧϖʔδͷ՝୊ ݕࡧΛμΠφϛοΫʹ! ͳΜ͔஗͍ΑͶ
33. ⸻ ݕࡧϖʔδͷ՝୊ Time to First Byte avg. 4.0s First Contentful Paint avg. 5.0s First Meaningful Paint avg. 9.5s Time to Interactive avg. 10.0s Good 3G
34. ⸻ ݕࡧϖʔδͷ՝୊ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ
35. ⸻ ݕࡧϖʔδͷ՝୊ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ ݕࡧϖʔδΛ࠶ ಡΈࠐΈͯ͠ɺ
36. ⸻ ݕࡧϖʔδͷ՝୊ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ ݕࡧϖʔδΛ࠶ ಡΈࠐΈͯ͠ɺ ಈతʹݕࡧ݁Ռ Λඳը͍ͯ͠Δɻ
37. ⸻ ݕࡧϖʔδͷ՝୊ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ ݕࡧϖʔδΛ࠶ ಡΈࠐΈͯ͠ɺ ಈతʹݕࡧ݁Ռ Λඳը͍ͯ͠Δɻ ＿⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈＿ ＞                   ＜ ＞       SPA なのに       ＜ ＞ 毎回ページリロードするの無駄じゃね ＜ ＞                   ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣
38. ⸻ ݕࡧϖʔδͷ՝୊ ݕࡧΛμΠφϛοΫʹ! ͳΜ͔஗͍ΑͶ ͪΌΜͱͨ͠ SPA ʹ͠Α͏!
39. ⸻ ݕࡧϖʔδͷ՝୊ 2017 ೥຤ࠒʹͻͬͦΓ஀ੜͨ͠ CTO ࣨͷ ՝୊ͱͯ͠ɺ ͜ΕΛղܾ͢Δࣄʹͳͬͨɻ
40. Web ϑϩϯτΤϯυͷ ίϯϙʔωϯτԽ
41. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ “ͪΌΜͱͨ͠” SPA ͱ͸Կ͔ɻ
42. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ SPA: Single Page Application
43. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Beyond “the page” metaphor
44. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ […] the way things are named very much impacts how they're perceived and utilized. ⸻ Chapter 1. Designing Systems “Our paginated past”, Atomic Design by Brad Frost
45. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ “Page” Λͭ͘ΔͷͰ͸ͳ͘ “application” Λͭ͘Δɻ ͦΕͳΒ “page” ੍࡞ͷϫʔΫϑϩʔʹनΘΕ͍ͯͯ ͸͍͚ͳ͍ɻ
46. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ HTML CSS JavaScript αʔόʔαΠυ ΫϥΠΞϯταΠυ Web “ϖʔδ” ։ൃʹ͓͚Δʮؔ৺ͷ෼཭ʯ
47. Components ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js SFC Data αʔόʔαΠυ ΫϥΠΞϯταΠυ Web “ΞϓϦέʔγϣϯ” ։ൃʹ͓͚Δʮؔ৺ͷ෼཭ʯ JS CSS HTML JS CSS HTML
48. Components ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js SFC JS CSS HTML Data αʔόʔαΠυ ΫϥΠΞϯταΠυ JS CSS HTML Web “ΞϓϦέʔγϣϯ” ։ൃʹ͓͚Δʮؔ৺ͷ෼཭ʯ
49. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Component-based design
50. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷ SFC (୯ҰϑΝΠϧίϯϙʔωϯτ) Λ த৺ʹɺϑϩϯτΤϯυΛઃܭ͢Δ
51. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ طଘͷ web “ϖʔδ” ߏ੒ʹ૊ΈࠐΉ৔߹ɺ
52. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ HTML CSS JS αʔόʔαΠυ ΫϥΠΞϯταΠυ Web “ϖʔδ” ͱ “ΞϓϦέʔγϣϯ” ͷಉډ Components Vue.js SFC JS CSS HTML
53. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ HTML CSS JS αʔόʔαΠυ ΫϥΠΞϯταΠυ Web “ϖʔδ” ͱ “ΞϓϦέʔγϣϯ” ͷಉډ Components Vue.js SFC JS CSS HTML ՄೳͩΖ͏͚Ͳɺੵۃతʹ΍Γ͍ͨߏ੒Ͱ͸ͳ͍ɻ
54. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ
55. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ޲։ൃ͕ Ͱ͖Δ
56. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ޲։ൃ͕ Ͱ͖Δ Vue.js Λϕʔεʹٕज़తδϟϯϓΛ ཈͑ͯ “ΞϓϦέʔγϣϯ” ։ൃ͕ Ͱ͖Δ
57. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ޲։ൃ͕ Ͱ͖Δ Vue.js Λϕʔεʹٕज़తδϟϯϓΛ ཈͑ͯ “ΞϓϦέʔγϣϯ” ։ൃ͕ Ͱ͖Δ BFF ͱαʔόʔαΠυ ϨϯμϦϯάػೳͷఏڙ
58. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ޲։ൃ͕ Ͱ͖Δ Vue.js Λϕʔεʹٕज़తδϟϯϓΛ ཈͑ͯ “ΞϓϦέʔγϣϯ” ։ൃ͕ Ͱ͖Δ BFF ͱαʔόʔαΠυ ϨϯμϦϯάػೳͷఏڙ ϑϨʔϜϫʔΫͱͯ͠ఏڙ͞ΕΔ “convention over configuration”
59. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Nuxt.js ྑ͍ͷͰ͸ɻ
60. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Nuxt.js ʹΑΔϑϩϯτΤϯυ։ൃ΁ͷ೤ྔ͕ ঃʑʹߴ·͍ͬͯͬͨɻ
61. SEO ͱαʔόʔαΠυ ϨϯμϦϯά
62. Ұٳ.com Ϩετϥϯ͸ ߴ͍੒௕཰Λҡ࣋͢ΔαʔϏεͰ͢ɻ ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά
63. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Ұٳ.com Ϩετϥϯͷ੒௕ʹد༩͢Δ େ͖ͳཁૉɺ
64. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά SEO: Search Engine Optimization
65. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά
66. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά 2017 ೥͸Ұૣ͘ Google AMP ϖʔδ΁ରԠɺ ݕࡧ݁Ռ΁ͷ࿐ग़ΛߴΊͨɻ
67. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Ұٳʹ͸ڧྗͳσδλϧϚʔέςΟϯάνʔϜ͕ ͓Γɺച্ΛݗҾ͍ͯ͠·͢ɻ
68. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ͦΜͳνʔϜ͕ϑϩϯτΤϯυ։ൃʹٻΊΔ΋ͷɺ
69. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά SSR: Server-side Rendering
70. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ϖʔδ্ͷॏཁͳίϯςϯπ͸ crawlable ͢ͳΘͪαʔόʔαΠυͰඳը͞Εͨ੩తίϯςϯπ Ͱ͋Δࣄ͕ٻΊΒΕͨɻ
71. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ౰࣌ SEO Λ୲౰͢ΔνʔϜʹډͨΘͨ͠ɺ Vue.js Ͱ UI ͷϦονԽΛਐΊͨͯ͘΋ ࣄۀΠϯύΫτʹؔΘΔ෦෼͸ಈతίϯςϯπԽͰ͖ͳ͍ҝɺ ݁ߏɺᷤ౻͕͋Γ·ͨ͠ɻ
72. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ຊ౰ʹ SSR ͔͠ແ͍ͷ͔ɻ
73. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά https://twitter.com/igrigorik/status/893574202472644608
74. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ࢥ͍೰Ή 2017 ೥΋ޙ൒ʹ͔͔͞͠Δ 8 ݄ɺ Understand rendering on Google Search: https://developers.google.com/search/docs/guides/rendering ެ։͞ΕΔɻ
75. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά tl;dr • Googlebot ͸ Chrome 41 ͰϨϯμϦϯά͞ΕΔ • جຊతʹ͸ Chrome 41 ͕ରԠ͢ΔػೳΛαϙʔτ͢Δ • ES6 ͸αϙʔτ͠ͳ͍ (Chrome 41 ͕αϙʔτ͢Δ JavaScript ͸αϙʔτ͢Δ)
76. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά https://youtu.be/Wu2GCRkDecI?t=1869
77. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Chrome Dev Summit 2017 ͕։࠵͞Εͨ 10 ݄ɺ End-to-End Polymer Apps with the Modern Web Platform: https://youtu.be/Wu2GCRkDecI?t=1869 ͰಈతίϯςϯπΛαʔνΤϯδϯ΁ఏڙ͢Δํ๏ͷώϯτ͕ࣔ͞ΕΔɻ
78. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά …ͱ৭ʑϒϨΠΫεϧʔʹͳΓͦ͏ͳ ൃද͸͋ͬͨͷͰ͕͢ɺ
79. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ΍ͬͺΓαʔόʔαΠυϨϯμϦϯά͕ ҆৺࣮֬ͩΑͶͱ͍͏ྲྀΕ͸มΘΒͣɻ
80. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ͔͠͠ɺVue.js ࣮૷͸ࣾ಺Ͱ֦͕ΓΛΈ͍ͤͯͨ ͋Δ೔ɺ
81. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Vue.js ͬͯαʔόʔαΠυ ϨϯμϦϯάͰ͖ͳ͍ͷ͔ͳɻ (͓ͬ) SEO νʔϜ Τʔε Θͨ͠
82. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά
83. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Nuxt.js ྑ͍ͷͰ͸ɻ
84. ۀ຿՝୊ͱٕज़՝୊ͷ߹க
85. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά 2017 ೥ͷ͜͏͍ͬͨྲྀΕͷதͰ; • ίϯϙʔωϯτࢦ޲։ൃͱ͍͏ٕज़՝୊ • αʔόʔαΠυϨϯμϦϯάͱ͍͏ۀ຿՝୊ ͱ͍͏ 2 ͭͷ՝୊ղܾεΠʔτεϙοτͱͯ͠ Nuxt.js ͕ࣾ಺ Ͱ஫໨͞ΕΔΑ͏ʹɻ
86. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ݕࡧΛμΠφϛοΫʹ! ͳΜ͔஗͍ΑͶ ͪΌΜͱͨ͠ SPA ʹ͠Α͏!
87. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά
88. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Nuxt.js ͷ࠾༻Λܾஅ
89. ίϯϙʔωϯτࢦ޲ઃܭ
90. Components ⸻ ίϯϙʔωϯτࢦ޲ઃܭ Vue.js SFC JS CSS HTML Data αʔόʔαΠυ ΫϥΠΞϯταΠυ JS CSS HTML Web “ΞϓϦέʔγϣϯ” ։ൃʹ͓͚Δʮؔ৺ͷ෼཭ʯ
91. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ Component-based design
92. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ Ұٳ.com Ϩετϥϯʹ͓͚Δ “ίϯϙʔωϯτ”
93. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ
94. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ • σʔλɺςϯϓϨʔτɺϩδοΫɺελΠϧɺͦΕͧΕؔ࿈ੑ ͕ਂ͍΋ͷಉ࢜ΛϞδϡʔϧԽ • ϑΝΠϧλΠϓʹΑΔॎׂΓͰ͸ͳ͘ɺؔ࿈ੑʹΑΔϑΝΠϧ λΠϓԣஅͷ۲ࢗ͠ͰάϧʔϓԽ • ϑϩϯτΤϯυ࣮૷ͷ͋ΒΏΔΞηοτΛίϯϙʔωϯτͱ ଊ͑ͯ؅ཧ
95. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ͢΂ͯΛίϯϙʔωϯτͱͯ͠ଊ͑ͨ࣌ʹ ු͖۷Γͱͳͬͨίϯϙʔωϯτͷछྨ
96. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ϓϩάϥϜ্ඞཁͳཻ౓
97. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ छྨ ໾ׂ άϩʔόϧσʔλ ఆ਺ɺάϩʔόϧม਺ ܕఆٛ TypeScript Ͱఆٛͨ͠ྻڍܕ΍Ϟσϧ ڞ௨/άϩʔόϧϩδοΫ UI ίϯϙʔωϯτؒͰڞ௨Խ͍ͨ͠ɺ ύϑΥʔϚϯε্άϩʔόϧԽ͍ͨ͠ ϩδοΫ UI ίϯϙʔωϯτ ϏϡʔɺUI ͱͳΔ෦඼
98. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ελΠϧ্ඞཁͳཻ౓
99. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ छྨ ໾ׂ άϩʔόϧσʔλ CSS ม਺ ϑΟϧλʔ CSS ϛοΫεΠϯ άϩʔόϧελΠϧ ཁૉܕηϨΫλ΁ࢦఆ͢ΔελΠϧ UI ίϯϙʔωϯτ ΫϥεηϨΫλʹର͢ΔελΠϧ
100. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ͜ΕΒΛద౰ʹϨΠϠʔԽͰ͖Δ ࢓૊Έͬͯͳ͍͔ͳ
101. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ https://www.skillshare.com/classes/Modern-CSS-Writing-Better-Cleaner-More-Scalable-Code/771669373
102. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ITCSS ͱ͍͏ͷ͕͋ΔΒ͍͠
103. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ tl;dr • ॊೈͰҠߦ͠΍͍͢ߏ੒ • BEM ͳͲͷ CSS ํ๏࿦ͱͷޓ׵ੑ • ίϯϙʔωϯτࢦ޲ͷ CSS ΞʔΩςΫνϟ
104. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ
105. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ Inverted Triangle (ٯࡾ֯ܗ) Ͱਤࣔ͞Εͨ ந৅ԽͷதͰద੾ʹϨΠϠʔԽ͍ͯ͜͠͏ͱ͍͏ ΞʔΩςΫνϟ
106. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ
107. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ϨΠϠʔ ໾ׂ Settings CSS ม਺ Tools CSS ϛοΫεΠϯ Generic Ϧηοτ CSS Elements άϩʔόϧ (ཁૉܕηϨΫλʔ΁ͷ) ελΠϧ Objects OOCSS ʹݟΒΕΔ Media Object ܥ UI ίϯϙʔωϯτͷελΠϧ Components ϢʔβʔʹػೳΛఏڙ͢Δ UI ίϯϙʔωϯτͷελΠϧ Trumps ྫ֎త༻๏ͷϨΠϠʔ
108. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ શͯΛίϯϙʔωϯτͱଊ͑ͨ Ұٳ.com Ϩετϥϯͷߏ੒ʹɺ ͜ͷߟ͑Λద༻ͯ͠ΈΔ
109. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ϨΠϠʔ ໾ׂ Settings CSS ม਺΍ɺఆ਺ͳͲͷσʔλΛѻ͏ɻ Tools CSS ϛοΫεΠϯɺϑΟϧλʔɺ·ͨ͸όϦϡʔΦϒδΣΫτɺ DTO ͷΑ͏ͳΞϓϦέʔγϣϯ্ͷܕͱͳΔఆٛΛѻ͏ɻ Generic CSS ཁૉܕηϨΫλʔʹΑΔάϩʔόϧελΠϧఆٛɺΞϓϦέʔ γϣϯશମͰڞ௨Խ͞Εͨॲཧɺάϩʔόϧͳ෭࡞༻Λ࣋ͭϏδω εϩδοΫΛѻ͏ɻ Elements Atoms ͷΑ͏ͳϓϦϛςΟϰͳίϯϙʔωϯτΛѻ͏ɻ͜ΕҎԼͷ ϨΠϠʔͰ Vue.js SFC Λѻ͏ɻ Objects Molecules ͷΑ͏ͳΞϓϦέʔγϣϯ্ͷίϯςΩετΛؚΉίϯ ϙʔωϯτΛѻ͏ɻ Components Organisms ͷΑ͏ͳΞϓϦέʔγϣϯ্ҙຯͷ͋Δػೳ୯Ґͷίϯ ϙʔωϯτΛѻ͏ɻ Trumps ྫ֎ϨΠϠʔ
110. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ͋ΓͳΜ͡Όͳ͍͔
111. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ
112. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ITCSS Atomic Design Settings Atoms Tools Generic Elements Objects Molecules Components Organisms Trumps
113. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ITCSS Atomic Design Settings Atoms Tools Generic Elements Objects Molecules Components Organisms Trumps ITCSS ͩͱ Atoms ϨΠϠʔʹ ౰ͨΔந৅౓Λ ࡉ͔͘෼ྨͰ͖ͦ͏
114. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ͋ΓͳΜ͡Όͳ͍͔
115. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ
116. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ϑϩϯτΤϯυͷϨΠϠʔυΞʔΩςΫνϟ ͱͯ͠࠾༻ɻ
117. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ
118. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ
119. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ
120. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ
121. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ
122. ϦχϡʔΞϧͷ੒Ռ
123. ⸻ ϦχϡʔΞϧͷ੒Ռ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ
124. ⸻ ϦχϡʔΞϧͷ੒Ռ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ ௚઀ɺಈతʹݕࡧ ݁ՌΛඳը! ϖʔδϦϩʔυ͸ ͤͣʹɺ
125. ⸻ ϦχϡʔΞϧͷ੒Ռ Time to First Byte avg. 4.0s 0.4s First Contentful Paint avg. 5.0s 1.1s First Meaningful Paint avg. 9.5s 4.8s Time to Interactive avg. 10.0s 8.0s Good 3G
126. ⸻ϦχϡʔΞϧͷ੒Ռ SVNTQFFEJOEFY ͷܭଌ஋
127. Ұٳ.com ϨετϥϯͷϑϩϯτΤϯυ͸ Web Β͘͠ɺ ϓϩάϨογϰʹվળΛଓ͚ͯߦ͖·͢
128. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ