Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Yu I. Yu I.
December 12, 2018
Programming
3.9k
2

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

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

Avatar for Yu I.

Yu I.

December 12, 2018

More Decks by Yu I.

See All by Yu I.
Component-based Design for Ikyu users
Avatar for Yu I. japboy
0
2.4k
Legacy development meets webpack
Avatar for Yu I. japboy
3
820
Reinventing LAMP with Vagrant
Avatar for Yu I. japboy
0
150
Web app with functional programming
Avatar for Yu I. japboy
0
140

Other Decks in Programming

See All in Programming
GemmaをJevのように使ってみる / Use Gemma like Jev
Avatar for Naoki Kishida kishida
5
800
コードで差別化できない時代の ソフトウェアエンジニアリング / Software Engineering in an Era Where Code Doesn’t Differentiate
Avatar for Naoki Kishida kishida
2
180
ジョジョの世界をXRで再現する
Avatar for mofurune mofurune
0
170
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
220
Workers Cache を知る
Avatar for syumai syumai
0
370
[2026-10-09]一枚の布で作らなくてもいい。 信頼性は「パッチワーク」で紡がれる～既存の運用と新しい可能性をつなぎ合わせてきたCREの話～
Avatar for tosite tosite
0
100
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
5
4k
Event is what happens
Avatar for MOROHASHI Kyosuke moro
2
960
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
170
The Rails Doctrine Decade
Avatar for Koichi ITO koic
2
600
Railsバージョンを4倍にした話
Avatar for OPTiM optim
0
460
KiroのSpecで「五目並べ」を作ってみる
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
380

Featured

See All Featured
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.5k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
620
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
2
950
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
330
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
430
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
440
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
2
740

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