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

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. σβΠφʔ͕ίʔυΛॻ͚Δ؀ڥ͕ඞཁɻ

16. None

17. HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ

18. HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ ެࣜͷ೔ຊޠ༁υΩϡϝϯτ ͕੔උ͞Ε͍ͯΔ

19. HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ ެࣜͷ೔ຊޠ༁υΩϡϝϯτ ͕੔උ͞Ε͍ͯΔ ٕज़తδϟϯϓΛগͳ͘ Ϟμϯ։ൃΛ࢝ΊΒΕͦ͏

20. HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ ެࣜͷ೔ຊޠ༁υΩϡϝϯτ ͕੔උ͞Ε͍ͯΔ ٕज़తδϟϯϓΛগͳ͘ Ϟμϯ։ൃΛ࢝ΊΒΕͦ͏ ϑϩϯτΤϯυɾΨν੎ͷগͳ͍ Ұٳ.com

    ϨετϥϯνʔϜʹ࠷ద!

21. Vue.js Λ࠾༻

22. None

23. ϋϯόʔΨʔϝχϡʔ

24. None

25. ϓϥϯ৘ใϞʔμϧ

26. None

27. ΫνίϛɾΞίʔσΟΦϯ

28. None

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ