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

15f492c0208722911c8225f31f2671be?s=47 Yu I.
December 12, 2018

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

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

15f492c0208722911c8225f31f2671be?s=128

Yu I.

December 12, 2018
Tweet

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