Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
一休.comレストランのスマートフォン検索ページがSPAになりました
Search
Yu I.
December 12, 2018
Programming
2
3.5k
一休.comレストランのスマートフォン検索ページがSPAになりました
一休.com レストランは 2018 年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このスライドでは、その中身について少し紹介させていただきます。
Yu I.
December 12, 2018
Tweet
Share
More Decks by Yu I.
See All by Yu I.
Component-based Design for Ikyu users
japboy
0
2.3k
Legacy development meets webpack
japboy
3
790
Reinventing LAMP with Vagrant
japboy
0
120
Web app with functional programming
japboy
0
100
Other Decks in Programming
See All in Programming
CursorはMCPを使った方が良いぞ
taigakono
1
240
童醫院敏捷轉型的實踐經驗
cclai999
0
210
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
110
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
280
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
6.1k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
980
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
10k
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
640
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Rails Girls Zürich Keynote
gr2m
94
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Agile that works and the tools we love
rasmusluckow
329
21k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
A Tale of Four Properties
chriscoyier
160
23k
Practical Orchestrator
shlominoach
188
11k
The Language of Interfaces
destraynor
158
25k
Transcript
Ұٳ.comϨετϥϯͷ εϚʔτϑΥϯݕࡧϖʔδ͕ SPAʹͳΓ·ͨ͠ https://user-first.ikyu.co.jp/entry/2018/10/09/080000
ࣗݾհ Ҵඌ ༡ • Web ϑϩϯτΤϯυɾΤϯδχΞ • 2016 10
݄ೖࣾ • γεςϜຊ෦ CTO ࣨ ॴଐ • Web ϑϩϯτΤϯυٕज़ج൫୲ • εϚʔτϑΥϯ͚αΠτͷ Web App Խͬͯ·͢
https://restaurant.ikyu.com/ Ұٳ.com Ϩετϥϯ 2006ϦϦʔε ߴΛଓ͚ΔϑΝΠϯμΠχϯάͷ༧αʔϏε
_⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈_ > < > ⼀休.com レストランで < > 予約したお店なら、間違いない < > <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^ ̄
https://restaurant.ikyu.com/
ࠓͷͳ͠ 1. ݕࡧϖʔδͷ՝ 2. Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ 3. SEO ͱαʔόʔαΠυϨϯμϦϯά 4.
ۀ՝ͱٕज़՝ͷ߹க 5. ίϯϙʔωϯτࢦઃܭ 6. Ϣχόʔαϧ JavaScript 7. ϦχϡʔΞϧͷՌ
ݕࡧϖʔδͷ՝
⸻ ݕࡧϖʔδͷ՝
⸻ ݕࡧϖʔδͷ՝ ͬͱ͍͍͢ UI ʹ! ݕࡧΛμΠφϛοΫʹ! ͳΜ͔͍ΑͶ
⸻ ݕࡧϖʔδͷ՝ ݕࡧΛμΠφϛοΫʹ! ͳΜ͔͍ΑͶ
࣌Γɺ 2017 ॳ಄…
ϑϨʔϜϫʔΫͲ͏͢Δ? React ͱ͔ Vue ͱ͔? ߟ͑ͯʔɻ ߟ͑·͢! CTO Θͨ͠
Ұٳ.com ϨετϥϯͷϑϩϯτΤϯυମ੍
σβΠϯ ઃܭ / ࣮ σβΠφʔ ΤϯδχΞ CSS JavaScript αʔόʔ αΠυ
HTML ϫΠϠʔ ϑϨʔϜ
σβΠϯ ઃܭ / ࣮ σβΠφʔ ΤϯδχΞ CSS JavaScript αʔόʔ αΠυ
HTML ϫΠϠʔ ϑϨʔϜ CSS ࣮࣭σβΠφʔ͕ هड़͢Δ߹͕΄ͱΜͲɻ σβΠϯͷௐ CSS ௐͰߦ͏߹͕͋Δɻ
σβΠφʔ͕ίʔυΛॻ͚Δڥ͕ඞཁɻ
None
HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ
HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ ެࣜͷຊޠ༁υΩϡϝϯτ ͕උ͞Ε͍ͯΔ
HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ ެࣜͷຊޠ༁υΩϡϝϯτ ͕උ͞Ε͍ͯΔ ٕज़తδϟϯϓΛগͳ͘ Ϟμϯ։ൃΛ࢝ΊΒΕͦ͏
HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ ެࣜͷຊޠ༁υΩϡϝϯτ ͕උ͞Ε͍ͯΔ ٕज़తδϟϯϓΛগͳ͘ Ϟμϯ։ൃΛ࢝ΊΒΕͦ͏ ϑϩϯτΤϯυɾΨνͷগͳ͍ Ұٳ.com
ϨετϥϯνʔϜʹ࠷ద!
Vue.js Λ࠾༻
None
ϋϯόʔΨʔϝχϡʔ
None
ϓϥϯใϞʔμϧ
None
ΫνίϛɾΞίʔσΟΦϯ
None
ϖʔδݕࡧϞʔμϧ
Vue.js ʹΑΔμΠφϛοΫͳ࣮͕ঃʑʹ૿Ճɻ
Γɺ ݕࡧϖʔδͷ՝…
⸻ ݕࡧϖʔδͷ՝ ݕࡧΛμΠφϛοΫʹ! ͳΜ͔͍ΑͶ
⸻ ݕࡧϖʔδͷ՝ 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
⸻ ݕࡧϖʔδͷ՝ ݕࡧ݅Λมߋ ͢Δͨͼʹɺ
⸻ ݕࡧϖʔδͷ՝ ݕࡧ݅Λมߋ ͢Δͨͼʹɺ ݕࡧϖʔδΛ࠶ ಡΈࠐΈͯ͠ɺ
⸻ ݕࡧϖʔδͷ՝ ݕࡧ݅Λมߋ ͢Δͨͼʹɺ ݕࡧϖʔδΛ࠶ ಡΈࠐΈͯ͠ɺ ಈతʹݕࡧ݁Ռ Λඳը͍ͯ͠Δɻ
⸻ ݕࡧϖʔδͷ՝ ݕࡧ݅Λมߋ ͢Δͨͼʹɺ ݕࡧϖʔδΛ࠶ ಡΈࠐΈͯ͠ɺ ಈతʹݕࡧ݁Ռ Λඳը͍ͯ͠Δɻ _⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈_ >
< > SPA なのに < > 毎回ページリロードするの無駄じゃね < > <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄
⸻ ݕࡧϖʔδͷ՝ ݕࡧΛμΠφϛοΫʹ! ͳΜ͔͍ΑͶ ͪΌΜͱͨ͠ SPA ʹ͠Α͏!
⸻ ݕࡧϖʔδͷ՝ 2017 ࠒʹͻͬͦΓੜͨ͠ CTO ࣨͷ ՝ͱͯ͠ɺ ͜ΕΛղܾ͢Δࣄʹͳͬͨɻ
Web ϑϩϯτΤϯυͷ ίϯϙʔωϯτԽ
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ “ͪΌΜͱͨ͠” SPA ͱԿ͔ɻ
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ SPA: Single Page Application
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Beyond “the page” metaphor
⸻ 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
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ “Page” Λͭ͘ΔͷͰͳ͘ “application” Λͭ͘Δɻ ͦΕͳΒ “page” ੍࡞ͷϫʔΫϑϩʔʹनΘΕ͍ͯͯ
͍͚ͳ͍ɻ
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ HTML CSS JavaScript αʔόʔαΠυ ΫϥΠΞϯταΠυ Web “ϖʔδ”
։ൃʹ͓͚Δʮؔ৺ͷʯ
Components ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js SFC Data αʔόʔαΠυ ΫϥΠΞϯταΠυ Web
“ΞϓϦέʔγϣϯ” ։ൃʹ͓͚Δʮؔ৺ͷʯ JS CSS HTML JS CSS HTML
Components ⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js SFC JS CSS HTML Data
αʔόʔαΠυ ΫϥΠΞϯταΠυ JS CSS HTML Web “ΞϓϦέʔγϣϯ” ։ൃʹ͓͚Δʮؔ৺ͷʯ
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Component-based design
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷ SFC (୯ҰϑΝΠϧίϯϙʔωϯτ) Λ த৺ʹɺϑϩϯτΤϯυΛઃܭ͢Δ
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ طଘͷ web “ϖʔδ” ߏʹΈࠐΉ߹ɺ
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ HTML CSS JS αʔόʔαΠυ ΫϥΠΞϯταΠυ Web “ϖʔδ”
ͱ “ΞϓϦέʔγϣϯ” ͷಉډ Components Vue.js SFC JS CSS HTML
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ HTML CSS JS αʔόʔαΠυ ΫϥΠΞϯταΠυ Web “ϖʔδ”
ͱ “ΞϓϦέʔγϣϯ” ͷಉډ Components Vue.js SFC JS CSS HTML ՄೳͩΖ͏͚ͲɺੵۃతʹΓ͍ͨߏͰͳ͍ɻ
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ։ൃ͕ Ͱ͖Δ
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ։ൃ͕ Ͱ͖Δ Vue.js Λϕʔεʹٕज़తδϟϯϓΛ ͑ͯ
“ΞϓϦέʔγϣϯ” ։ൃ͕ Ͱ͖Δ
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ։ൃ͕ Ͱ͖Δ Vue.js Λϕʔεʹٕज़తδϟϯϓΛ ͑ͯ
“ΞϓϦέʔγϣϯ” ։ൃ͕ Ͱ͖Δ BFF ͱαʔόʔαΠυ ϨϯμϦϯάػೳͷఏڙ
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ։ൃ͕ Ͱ͖Δ Vue.js Λϕʔεʹٕज़తδϟϯϓΛ ͑ͯ
“ΞϓϦέʔγϣϯ” ։ൃ͕ Ͱ͖Δ BFF ͱαʔόʔαΠυ ϨϯμϦϯάػೳͷఏڙ ϑϨʔϜϫʔΫͱͯ͠ఏڙ͞ΕΔ “convention over configuration”
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Nuxt.js ྑ͍ͷͰɻ
⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Nuxt.js ʹΑΔϑϩϯτΤϯυ։ൃͷྔ͕ ঃʑʹߴ·͍ͬͯͬͨɻ
SEO ͱαʔόʔαΠυ ϨϯμϦϯά
Ұٳ.com Ϩετϥϯ ߴ͍Λҡ࣋͢ΔαʔϏεͰ͢ɻ ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Ұٳ.com Ϩετϥϯͷʹد༩͢Δ େ͖ͳཁૉɺ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά SEO: Search Engine Optimization
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά 2017 Ұૣ͘ Google AMP ϖʔδରԠɺ ݕࡧ݁Ռͷ࿐ग़ΛߴΊͨɻ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ҰٳʹڧྗͳσδλϧϚʔέςΟϯάνʔϜ͕ ͓Γɺച্ΛݗҾ͍ͯ͠·͢ɻ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ͦΜͳνʔϜ͕ϑϩϯτΤϯυ։ൃʹٻΊΔͷɺ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά SSR: Server-side Rendering
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ϖʔδ্ͷॏཁͳίϯςϯπ crawlable ͢ͳΘͪαʔόʔαΠυͰඳը͞Εͨ੩తίϯςϯπ Ͱ͋Δࣄ͕ٻΊΒΕͨɻ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ࣌ SEO Λ୲͢ΔνʔϜʹډͨΘͨ͠ɺ Vue.js Ͱ UI ͷϦονԽΛਐΊͨͯ͘
ࣄۀΠϯύΫτʹؔΘΔ෦ಈతίϯςϯπԽͰ͖ͳ͍ҝɺ ݁ߏɺᷤ౻͕͋Γ·ͨ͠ɻ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ຊʹ SSR ͔͠ແ͍ͷ͔ɻ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά https://twitter.com/igrigorik/status/893574202472644608
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ࢥ͍Ή 2017 ޙʹ͔͔͞͠Δ 8 ݄ɺ Understand rendering
on Google Search: https://developers.google.com/search/docs/guides/rendering ެ։͞ΕΔɻ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά tl;dr • Googlebot Chrome 41 ͰϨϯμϦϯά͞ΕΔ
• جຊతʹ Chrome 41 ͕ରԠ͢ΔػೳΛαϙʔτ͢Δ • ES6 αϙʔτ͠ͳ͍ (Chrome 41 ͕αϙʔτ͢Δ JavaScript αϙʔτ͢Δ)
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά https://youtu.be/Wu2GCRkDecI?t=1869
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Chrome Dev Summit 2017 ͕։࠵͞Εͨ 10 ݄ɺ
End-to-End Polymer Apps with the Modern Web Platform: https://youtu.be/Wu2GCRkDecI?t=1869 ͰಈతίϯςϯπΛαʔνΤϯδϯఏڙ͢Δํ๏ͷώϯτ͕ࣔ͞ΕΔɻ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά …ͱ৭ʑϒϨΠΫεϧʔʹͳΓͦ͏ͳ ൃද͋ͬͨͷͰ͕͢ɺ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ͬͺΓαʔόʔαΠυϨϯμϦϯά͕ ҆৺࣮֬ͩΑͶͱ͍͏ྲྀΕมΘΒͣɻ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ͔͠͠ɺVue.js ࣮ࣾͰ֦͕ΓΛΈ͍ͤͯͨ ͋Δɺ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Vue.js ͬͯαʔόʔαΠυ ϨϯμϦϯάͰ͖ͳ͍ͷ͔ͳɻ (͓ͬ) SEO νʔϜ Τʔε
Θͨ͠
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Nuxt.js ྑ͍ͷͰɻ
ۀ՝ͱٕज़՝ͷ߹க
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά 2017 ͷ͜͏͍ͬͨྲྀΕͷதͰ; • ίϯϙʔωϯτࢦ։ൃͱ͍͏ٕज़՝ • αʔόʔαΠυϨϯμϦϯάͱ͍͏ۀ՝ ͱ͍͏
2 ͭͷ՝ղܾεΠʔτεϙοτͱͯ͠ Nuxt.js ͕ࣾ Ͱ͞ΕΔΑ͏ʹɻ
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ݕࡧΛμΠφϛοΫʹ! ͳΜ͔͍ΑͶ ͪΌΜͱͨ͠ SPA ʹ͠Α͏!
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά
⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Nuxt.js ͷ࠾༻Λܾஅ
ίϯϙʔωϯτࢦઃܭ
Components ⸻ ίϯϙʔωϯτࢦઃܭ Vue.js SFC JS CSS HTML Data αʔόʔαΠυ
ΫϥΠΞϯταΠυ JS CSS HTML Web “ΞϓϦέʔγϣϯ” ։ൃʹ͓͚Δʮؔ৺ͷʯ
⸻ ίϯϙʔωϯτࢦઃܭ Component-based design
⸻ ίϯϙʔωϯτࢦઃܭ Ұٳ.com Ϩετϥϯʹ͓͚Δ “ίϯϙʔωϯτ”
⸻ ίϯϙʔωϯτࢦઃܭ
⸻ ίϯϙʔωϯτࢦઃܭ • σʔλɺςϯϓϨʔτɺϩδοΫɺελΠϧɺͦΕͧΕؔ࿈ੑ ͕ਂ͍ͷಉ࢜ΛϞδϡʔϧԽ • ϑΝΠϧλΠϓʹΑΔॎׂΓͰͳ͘ɺؔ࿈ੑʹΑΔϑΝΠϧ λΠϓԣஅͷ۲͠ͰάϧʔϓԽ • ϑϩϯτΤϯυ࣮ͷ͋ΒΏΔΞηοτΛίϯϙʔωϯτͱ
ଊ͑ͯཧ
⸻ ίϯϙʔωϯτࢦઃܭ ͯ͢Λίϯϙʔωϯτͱͯ͠ଊ͑ͨ࣌ʹ ු͖۷Γͱͳͬͨίϯϙʔωϯτͷछྨ
⸻ ίϯϙʔωϯτࢦઃܭ ϓϩάϥϜ্ඞཁͳཻ
⸻ ίϯϙʔωϯτࢦઃܭ छྨ ׂ άϩʔόϧσʔλ ఆɺάϩʔόϧม ܕఆٛ TypeScript Ͱఆٛͨ͠ྻڍܕϞσϧ ڞ௨/άϩʔόϧϩδοΫ
UI ίϯϙʔωϯτؒͰڞ௨Խ͍ͨ͠ɺ ύϑΥʔϚϯε্άϩʔόϧԽ͍ͨ͠ ϩδοΫ UI ίϯϙʔωϯτ ϏϡʔɺUI ͱͳΔ෦
⸻ ίϯϙʔωϯτࢦઃܭ ελΠϧ্ඞཁͳཻ
⸻ ίϯϙʔωϯτࢦઃܭ छྨ ׂ άϩʔόϧσʔλ CSS ม ϑΟϧλʔ CSS ϛοΫεΠϯ
άϩʔόϧελΠϧ ཁૉܕηϨΫλࢦఆ͢ΔελΠϧ UI ίϯϙʔωϯτ ΫϥεηϨΫλʹର͢ΔελΠϧ
⸻ ίϯϙʔωϯτࢦઃܭ ͜ΕΒΛదʹϨΠϠʔԽͰ͖Δ Έͬͯͳ͍͔ͳ
⸻ ίϯϙʔωϯτࢦઃܭ https://www.skillshare.com/classes/Modern-CSS-Writing-Better-Cleaner-More-Scalable-Code/771669373
⸻ ίϯϙʔωϯτࢦઃܭ ITCSS ͱ͍͏ͷ͕͋ΔΒ͍͠
⸻ ίϯϙʔωϯτࢦઃܭ tl;dr • ॊೈͰҠߦ͍͢͠ߏ • BEM ͳͲͷ CSS ํ๏ͱͷޓੑ
• ίϯϙʔωϯτࢦͷ CSS ΞʔΩςΫνϟ
⸻ ίϯϙʔωϯτࢦઃܭ
⸻ ίϯϙʔωϯτࢦઃܭ Inverted Triangle (ٯࡾ֯ܗ) Ͱਤࣔ͞Εͨ நԽͷதͰదʹϨΠϠʔԽ͍ͯ͜͠͏ͱ͍͏ ΞʔΩςΫνϟ
⸻ ίϯϙʔωϯτࢦઃܭ
⸻ ίϯϙʔωϯτࢦઃܭ ϨΠϠʔ ׂ Settings CSS ม Tools CSS ϛοΫεΠϯ
Generic Ϧηοτ CSS Elements άϩʔόϧ (ཁૉܕηϨΫλʔͷ) ελΠϧ Objects OOCSS ʹݟΒΕΔ Media Object ܥ UI ίϯϙʔωϯτͷελΠϧ Components ϢʔβʔʹػೳΛఏڙ͢Δ UI ίϯϙʔωϯτͷελΠϧ Trumps ྫ֎త༻๏ͷϨΠϠʔ
⸻ ίϯϙʔωϯτࢦઃܭ શͯΛίϯϙʔωϯτͱଊ͑ͨ Ұٳ.com Ϩετϥϯͷߏʹɺ ͜ͷߟ͑Λద༻ͯ͠ΈΔ
⸻ ίϯϙʔωϯτࢦઃܭ ϨΠϠʔ ׂ Settings CSS มɺఆͳͲͷσʔλΛѻ͏ɻ Tools CSS ϛοΫεΠϯɺϑΟϧλʔɺ·ͨόϦϡʔΦϒδΣΫτɺ
DTO ͷΑ͏ͳΞϓϦέʔγϣϯ্ͷܕͱͳΔఆٛΛѻ͏ɻ Generic CSS ཁૉܕηϨΫλʔʹΑΔάϩʔόϧελΠϧఆٛɺΞϓϦέʔ γϣϯશମͰڞ௨Խ͞Εͨॲཧɺάϩʔόϧͳ෭࡞༻Λ࣋ͭϏδω εϩδοΫΛѻ͏ɻ Elements Atoms ͷΑ͏ͳϓϦϛςΟϰͳίϯϙʔωϯτΛѻ͏ɻ͜ΕҎԼͷ ϨΠϠʔͰ Vue.js SFC Λѻ͏ɻ Objects Molecules ͷΑ͏ͳΞϓϦέʔγϣϯ্ͷίϯςΩετΛؚΉίϯ ϙʔωϯτΛѻ͏ɻ Components Organisms ͷΑ͏ͳΞϓϦέʔγϣϯ্ҙຯͷ͋Δػೳ୯Ґͷίϯ ϙʔωϯτΛѻ͏ɻ Trumps ྫ֎ϨΠϠʔ
⸻ ίϯϙʔωϯτࢦઃܭ ͋ΓͳΜ͡Όͳ͍͔
⸻ ίϯϙʔωϯτࢦઃܭ
⸻ ίϯϙʔωϯτࢦઃܭ ITCSS Atomic Design Settings Atoms Tools Generic Elements
Objects Molecules Components Organisms Trumps
⸻ ίϯϙʔωϯτࢦઃܭ ITCSS Atomic Design Settings Atoms Tools Generic Elements
Objects Molecules Components Organisms Trumps ITCSS ͩͱ Atoms ϨΠϠʔʹ ͨΔநΛ ࡉ͔͘ྨͰ͖ͦ͏
⸻ ίϯϙʔωϯτࢦઃܭ ͋ΓͳΜ͡Όͳ͍͔
⸻ ίϯϙʔωϯτࢦઃܭ
⸻ ίϯϙʔωϯτࢦઃܭ ϑϩϯτΤϯυͷϨΠϠʔυΞʔΩςΫνϟ ͱͯ͠࠾༻ɻ
⸻ ίϯϙʔωϯτࢦઃܭ
⸻ ίϯϙʔωϯτࢦઃܭ
⸻ ίϯϙʔωϯτࢦઃܭ
⸻ ίϯϙʔωϯτࢦઃܭ
⸻ ίϯϙʔωϯτࢦઃܭ
ϦχϡʔΞϧͷՌ
⸻ ϦχϡʔΞϧͷՌ ݕࡧ݅Λมߋ ͢Δͨͼʹɺ
⸻ ϦχϡʔΞϧͷՌ ݕࡧ݅Λมߋ ͢Δͨͼʹɺ ɺಈతʹݕࡧ ݁ՌΛඳը! ϖʔδϦϩʔυ ͤͣʹɺ
⸻ ϦχϡʔΞϧͷՌ 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
⸻ϦχϡʔΞϧͷՌ SVNTQFFEJOEFY ͷܭଌ
Ұٳ.com ϨετϥϯͷϑϩϯτΤϯυ Web Β͘͠ɺ ϓϩάϨογϰʹվળΛଓ͚ͯߦ͖·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ