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.1k
一休.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
1.9k
Legacy development meets webpack
japboy
3
740
Reinventing LAMP with Vagrant
japboy
0
100
Web app with functional programming
japboy
0
89
Other Decks in Programming
See All in Programming
上手な探索的テストとその上達方法について
matsu802
4
650
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.8k
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
120
「コンパイル時のユニットテスト」導入するとユニットテストを 書かなくてよくなるのか?
tomohisa
9
2.2k
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
14k
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
160
Why 1 + 1 = 2 in Swift?
1plus4
1
240
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
120
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.8k
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
120
Featured
See All Featured
Building an army of robots
kneath
300
41k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
The Mythical Team-Month
searls
214
42k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Documentation Writing (for coders)
carmenintech
59
3.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
Being A Developer After 40
akosma
56
580k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Web Components: a chance to create the future
zenorocha
304
41k
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 Β͘͠ɺ ϓϩάϨογϰʹվળΛଓ͚ͯߦ͖·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ