Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yu I.
December 12, 2018

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

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

Yu I.

December 12, 2018
Tweet

More Decks by Yu I.

Other Decks in Programming

Transcript

  1. ࣗݾ঺հ Ҵඌ ༡ • Web ϑϩϯτΤϯυɾΤϯδχΞ • 2016 ೥ 10

    ݄ೖࣾ • γεςϜຊ෦ CTO ࣨ ॴଐ • Web ϑϩϯτΤϯυٕज़ج൫୲౰ • εϚʔτϑΥϯ޲͚αΠτͷ Web App Խ΍ͬͯ·͢
  2. ࠓ೔ͷ͸ͳ͠ 1. ݕࡧϖʔδͷ՝୊ 2. Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ 3. SEO ͱαʔόʔαΠυϨϯμϦϯά 4.

    ۀ຿՝୊ͱٕज़՝୊ͷ߹க 5. ίϯϙʔωϯτࢦ޲ઃܭ 6. Ϣχόʔαϧ JavaScript 7. ϦχϡʔΞϧͷ੒Ռ
  3. σβΠϯ ઃܭ / ࣮૷ σβΠφʔ ΤϯδχΞ CSS JavaScript αʔόʔ αΠυ

    HTML ϫΠϠʔ ϑϨʔϜ CSS ͸࣮࣭σβΠφʔ͕ هड़͢Δ৔߹͕΄ͱΜͲɻ σβΠϯͷௐ੔΋ CSS ௐ੔Ͱߦ͏৔߹͕͋Δɻ
  4. ⸻ ݕࡧϖʔδͷ՝୊ 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
  5. ⸻ ݕࡧϖʔδͷ՝୊ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ ݕࡧϖʔδΛ࠶ ಡΈࠐΈͯ͠ɺ ಈతʹݕࡧ݁Ռ Λඳը͍ͯ͠Δɻ _⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈_ >         

             < >       SPA なのに       < > 毎回ページリロードするの無駄じゃね < >                   <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄
  6. ⸻ 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
  7. Components ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js SFC Data αʔόʔαΠυ ΫϥΠΞϯταΠυ Web

    “ΞϓϦέʔγϣϯ” ։ൃʹ͓͚Δʮؔ৺ͷ෼཭ʯ JS CSS HTML JS CSS HTML
  8. Components ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js SFC JS CSS HTML Data

    αʔόʔαΠυ ΫϥΠΞϯταΠυ JS CSS HTML Web “ΞϓϦέʔγϣϯ” ։ൃʹ͓͚Δʮؔ৺ͷ෼཭ʯ
  9. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ HTML CSS JS αʔόʔαΠυ ΫϥΠΞϯταΠυ Web “ϖʔδ”

    ͱ “ΞϓϦέʔγϣϯ” ͷಉډ Components Vue.js SFC JS CSS HTML
  10. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ HTML CSS JS αʔόʔαΠυ ΫϥΠΞϯταΠυ Web “ϖʔδ”

    ͱ “ΞϓϦέʔγϣϯ” ͷಉډ Components Vue.js SFC JS CSS HTML ՄೳͩΖ͏͚Ͳɺੵۃతʹ΍Γ͍ͨߏ੒Ͱ͸ͳ͍ɻ
  11. ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ޲։ൃ͕ Ͱ͖Δ Vue.js Λϕʔεʹٕज़తδϟϯϓΛ ཈͑ͯ

    “ΞϓϦέʔγϣϯ” ։ൃ͕ Ͱ͖Δ BFF ͱαʔόʔαΠυ ϨϯμϦϯάػೳͷఏڙ ϑϨʔϜϫʔΫͱͯ͠ఏڙ͞ΕΔ “convention over configuration”
  12. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ౰࣌ SEO Λ୲౰͢ΔνʔϜʹډͨΘͨ͠ɺ Vue.js Ͱ UI ͷϦονԽΛਐΊͨͯ͘΋

    ࣄۀΠϯύΫτʹؔΘΔ෦෼͸ಈతίϯςϯπԽͰ͖ͳ͍ҝɺ ݁ߏɺᷤ౻͕͋Γ·ͨ͠ɻ
  13. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ࢥ͍೰Ή 2017 ೥΋ޙ൒ʹ͔͔͞͠Δ 8 ݄ɺ Understand rendering

    on Google Search: https://developers.google.com/search/docs/guides/rendering ެ։͞ΕΔɻ
  14. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά tl;dr • Googlebot ͸ Chrome 41 ͰϨϯμϦϯά͞ΕΔ

    • جຊతʹ͸ Chrome 41 ͕ରԠ͢ΔػೳΛαϙʔτ͢Δ • ES6 ͸αϙʔτ͠ͳ͍ (Chrome 41 ͕αϙʔτ͢Δ JavaScript ͸αϙʔτ͢Δ)
  15. ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Chrome Dev Summit 2017 ͕։࠵͞Εͨ 10 ݄ɺ

    End-to-End Polymer Apps with the Modern Web Platform: https://youtu.be/Wu2GCRkDecI?t=1869 ͰಈతίϯςϯπΛαʔνΤϯδϯ΁ఏڙ͢Δํ๏ͷώϯτ͕ࣔ͞ΕΔɻ
  16. Components ⸻ ίϯϙʔωϯτࢦ޲ઃܭ Vue.js SFC JS CSS HTML Data αʔόʔαΠυ

    ΫϥΠΞϯταΠυ JS CSS HTML Web “ΞϓϦέʔγϣϯ” ։ൃʹ͓͚Δʮؔ৺ͷ෼཭ʯ
  17. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ छྨ ໾ׂ άϩʔόϧσʔλ ఆ਺ɺάϩʔόϧม਺ ܕఆٛ TypeScript Ͱఆٛͨ͠ྻڍܕ΍Ϟσϧ ڞ௨/άϩʔόϧϩδοΫ

    UI ίϯϙʔωϯτؒͰڞ௨Խ͍ͨ͠ɺ ύϑΥʔϚϯε্άϩʔόϧԽ͍ͨ͠ ϩδοΫ UI ίϯϙʔωϯτ ϏϡʔɺUI ͱͳΔ෦඼
  18. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ छྨ ໾ׂ άϩʔόϧσʔλ CSS ม਺ ϑΟϧλʔ CSS ϛοΫεΠϯ

    άϩʔόϧελΠϧ ཁૉܕηϨΫλ΁ࢦఆ͢ΔελΠϧ UI ίϯϙʔωϯτ ΫϥεηϨΫλʹର͢ΔελΠϧ
  19. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ϨΠϠʔ ໾ׂ Settings CSS ม਺ Tools CSS ϛοΫεΠϯ

    Generic Ϧηοτ CSS Elements άϩʔόϧ (ཁૉܕηϨΫλʔ΁ͷ) ελΠϧ Objects OOCSS ʹݟΒΕΔ Media Object ܥ UI ίϯϙʔωϯτͷελΠϧ Components ϢʔβʔʹػೳΛఏڙ͢Δ UI ίϯϙʔωϯτͷελΠϧ Trumps ྫ֎త༻๏ͷϨΠϠʔ
  20. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ϨΠϠʔ ໾ׂ Settings CSS ม਺΍ɺఆ਺ͳͲͷσʔλΛѻ͏ɻ Tools CSS ϛοΫεΠϯɺϑΟϧλʔɺ·ͨ͸όϦϡʔΦϒδΣΫτɺ

    DTO ͷΑ͏ͳΞϓϦέʔγϣϯ্ͷܕͱͳΔఆٛΛѻ͏ɻ Generic CSS ཁૉܕηϨΫλʔʹΑΔάϩʔόϧελΠϧఆٛɺΞϓϦέʔ γϣϯશମͰڞ௨Խ͞Εͨॲཧɺάϩʔόϧͳ෭࡞༻Λ࣋ͭϏδω εϩδοΫΛѻ͏ɻ Elements Atoms ͷΑ͏ͳϓϦϛςΟϰͳίϯϙʔωϯτΛѻ͏ɻ͜ΕҎԼͷ ϨΠϠʔͰ Vue.js SFC Λѻ͏ɻ Objects Molecules ͷΑ͏ͳΞϓϦέʔγϣϯ্ͷίϯςΩετΛؚΉίϯ ϙʔωϯτΛѻ͏ɻ Components Organisms ͷΑ͏ͳΞϓϦέʔγϣϯ্ҙຯͷ͋Δػೳ୯Ґͷίϯ ϙʔωϯτΛѻ͏ɻ Trumps ྫ֎ϨΠϠʔ
  21. ⸻ ίϯϙʔωϯτࢦ޲ઃܭ ITCSS Atomic Design Settings Atoms Tools Generic Elements

    Objects Molecules Components Organisms Trumps ITCSS ͩͱ Atoms ϨΠϠʔʹ ౰ͨΔந৅౓Λ ࡉ͔͘෼ྨͰ͖ͦ͏
  22. ⸻ ϦχϡʔΞϧͷ੒Ռ 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