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

by Yu I.

Slide 1

Slide 1 text

Ұٳ.comϨετϥϯͷ εϚʔτϑΥϯݕࡧϖʔδ͕ SPAʹͳΓ·ͨ͠ https://user-ﬁrst.ikyu.co.jp/entry/2018/10/09/080000

Slide 2

Slide 2 text

ࣗݾ঺հ Ҵඌ ༡ • Web ϑϩϯτΤϯυɾΤϯδχΞ • 2016 ೥ 10 ݄ೖࣾ • γεςϜຊ෦ CTO ࣨ ॴଐ • Web ϑϩϯτΤϯυٕज़ج൫୲౰ • εϚʔτϑΥϯ޲͚αΠτͷ Web App Խ΍ͬͯ·͢

Slide 3

Slide 3 text

https://restaurant.ikyu.com/ Ұٳ.com Ϩετϥϯ 2006೥ϦϦʔε ߴ੒௕Λଓ͚ΔϑΝΠϯμΠχϯάͷ༧໿αʔϏε

Slide 4

Slide 4 text

＿⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈＿＞＜＞⼀休.com レストランで＜＞予約したお店なら、間違いない＜＞＜￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣ https://restaurant.ikyu.com/

Slide 5

Slide 5 text

ࠓ೔ͷ͸ͳ͠ 1. ݕࡧϖʔδͷ՝୊ 2. Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ 3. SEO ͱαʔόʔαΠυϨϯμϦϯά 4. ۀ຿՝୊ͱٕज़՝୊ͷ߹க 5. ίϯϙʔωϯτࢦ޲ઃܭ 6. Ϣχόʔαϧ JavaScript 7. ϦχϡʔΞϧͷ੒Ռ

Slide 6

Slide 6 text

ݕࡧϖʔδͷ՝୊

Slide 7

Slide 7 text

⸻ ݕࡧϖʔδͷ՝୊

Slide 8

Slide 8 text

⸻ ݕࡧϖʔδͷ՝୊ ΋ͬͱ࢖͍΍͍͢ UI ʹ! ݕࡧΛμΠφϛοΫʹ! ͳΜ͔஗͍ΑͶ

Slide 9

Slide 9 text

⸻ ݕࡧϖʔδͷ՝୊ ݕࡧΛμΠφϛοΫʹ! ͳΜ͔஗͍ΑͶ

Slide 10

Slide 10 text

࣌͸໭Γɺ 2017 ೥ॳ಄…

Slide 11

Slide 11 text

ϑϨʔϜϫʔΫͲ͏͢Δ?  React ͱ͔ Vue ͱ͔? ߟ͑ͯʔɻ ߟ͑·͢! CTO Θͨ͠

Slide 12

Slide 12 text

Ұٳ.com ϨετϥϯͷϑϩϯτΤϯυମ੍

Slide 13

Slide 13 text

σβΠϯ ઃܭ / ࣮૷ σβΠφʔ ΤϯδχΞ CSS JavaScript αʔόʔ αΠυ HTML ϫΠϠʔ ϑϨʔϜ

Slide 14

Slide 14 text

σβΠϯ ઃܭ / ࣮૷ σβΠφʔ ΤϯδχΞ CSS JavaScript αʔόʔ αΠυ HTML ϫΠϠʔ ϑϨʔϜ CSS ͸࣮࣭σβΠφʔ͕ هड़͢Δ৔߹͕΄ͱΜͲɻ σβΠϯͷௐ੔΋ CSS ௐ੔Ͱߦ͏৔߹͕͋Δɻ

Slide 15

Slide 15 text

σβΠφʔ͕ίʔυΛॻ͚Δ؀ڥ͕ඞཁɻ

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ

Slide 18

Slide 18 text

HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ ެࣜͷ೔ຊޠ༁υΩϡϝϯτ ͕੔උ͞Ε͍ͯΔ

Slide 19

Slide 19 text

HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ ެࣜͷ೔ຊޠ༁υΩϡϝϯτ ͕੔උ͞Ε͍ͯΔ ٕज़తδϟϯϓΛগͳ͘ Ϟμϯ։ൃΛ࢝ΊΒΕͦ͏

Slide 20

Slide 20 text

HTML/CSS/JavaScript Β͍͠ هड़͕Մೳͳ ୯ҰϑΝΠϧίϯϙʔωϯτ ެࣜͷ೔ຊޠ༁υΩϡϝϯτ ͕੔උ͞Ε͍ͯΔ ٕज़తδϟϯϓΛগͳ͘ Ϟμϯ։ൃΛ࢝ΊΒΕͦ͏ ϑϩϯτΤϯυɾΨν੎ͷগͳ͍ Ұٳ.com ϨετϥϯνʔϜʹ࠷ద!

Slide 21

Slide 21 text

Vue.js Λ࠾༻

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

ϋϯόʔΨʔϝχϡʔ

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

ϓϥϯ৘ใϞʔμϧ

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

ΫνίϛɾΞίʔσΟΦϯ

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

ϖʔδ಺ݕࡧϞʔμϧ

Slide 30

Slide 30 text

Vue.js ʹΑΔμΠφϛοΫͳ࣮૷͕ঃʑʹ૿Ճɻ

Slide 31

Slide 31 text

࿩͸໭Γɺ ݕࡧϖʔδͷ՝୊…

Slide 32

Slide 32 text

⸻ ݕࡧϖʔδͷ՝୊ ݕࡧΛμΠφϛοΫʹ! ͳΜ͔஗͍ΑͶ

Slide 33

Slide 33 text

⸻ ݕࡧϖʔδͷ՝୊ 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

Slide 34

Slide 34 text

⸻ ݕࡧϖʔδͷ՝୊ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ

Slide 35

Slide 35 text

⸻ ݕࡧϖʔδͷ՝୊ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ ݕࡧϖʔδΛ࠶ ಡΈࠐΈͯ͠ɺ

Slide 36

Slide 36 text

⸻ ݕࡧϖʔδͷ՝୊ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ ݕࡧϖʔδΛ࠶ ಡΈࠐΈͯ͠ɺ ಈతʹݕࡧ݁Ռ Λඳը͍ͯ͠Δɻ

Slide 37

Slide 37 text

⸻ ݕࡧϖʔδͷ՝୊ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ ݕࡧϖʔδΛ࠶ ಡΈࠐΈͯ͠ɺ ಈతʹݕࡧ݁Ռ Λඳը͍ͯ͠Δɻ ＿⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈＿＞＜＞ SPA なのに＜＞毎回ページリロードするの無駄じゃね＜＞＜￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

Slide 38

Slide 38 text

⸻ ݕࡧϖʔδͷ՝୊ ݕࡧΛμΠφϛοΫʹ! ͳΜ͔஗͍ΑͶ ͪΌΜͱͨ͠ SPA ʹ͠Α͏!

Slide 39

Slide 39 text

⸻ ݕࡧϖʔδͷ՝୊ 2017 ೥຤ࠒʹͻͬͦΓ஀ੜͨ͠ CTO ࣨͷ ՝୊ͱͯ͠ɺ ͜ΕΛղܾ͢Δࣄʹͳͬͨɻ

Slide 40

Slide 40 text

Web ϑϩϯτΤϯυͷ ίϯϙʔωϯτԽ

Slide 41

Slide 41 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ “ͪΌΜͱͨ͠” SPA ͱ͸Կ͔ɻ

Slide 42

Slide 42 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ SPA: Single Page Application

Slide 43

Slide 43 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Beyond “the page” metaphor

Slide 44

Slide 44 text

⸻ 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

Slide 45

Slide 45 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ “Page” Λͭ͘ΔͷͰ͸ͳ͘ “application” Λͭ͘Δɻ ͦΕͳΒ “page” ੍࡞ͷϫʔΫϑϩʔʹनΘΕ͍ͯͯ ͸͍͚ͳ͍ɻ

Slide 46

Slide 46 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ HTML CSS JavaScript αʔόʔαΠυ ΫϥΠΞϯταΠυ Web “ϖʔδ” ։ൃʹ͓͚Δʮؔ৺ͷ෼཭ʯ

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Component-based design

Slide 50

Slide 50 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷ SFC (୯ҰϑΝΠϧίϯϙʔωϯτ) Λ த৺ʹɺϑϩϯτΤϯυΛઃܭ͢Δ

Slide 51

Slide 51 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ طଘͷ web “ϖʔδ” ߏ੒ʹ૊ΈࠐΉ৔߹ɺ

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ HTML CSS JS αʔόʔαΠυ ΫϥΠΞϯταΠυ Web “ϖʔδ” ͱ “ΞϓϦέʔγϣϯ” ͷಉډ Components Vue.js SFC JS CSS HTML ՄೳͩΖ͏͚Ͳɺੵۃతʹ΍Γ͍ͨߏ੒Ͱ͸ͳ͍ɻ

Slide 54

Slide 54 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ

Slide 55

Slide 55 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ޲։ൃ͕ Ͱ͖Δ

Slide 56

Slide 56 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ޲։ൃ͕ Ͱ͖Δ Vue.js Λϕʔεʹٕज़తδϟϯϓΛ ཈͑ͯ “ΞϓϦέʔγϣϯ” ։ൃ͕ Ͱ͖Δ

Slide 57

Slide 57 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ޲։ൃ͕ Ͱ͖Δ Vue.js Λϕʔεʹٕज़తδϟϯϓΛ ཈͑ͯ “ΞϓϦέʔγϣϯ” ։ൃ͕ Ͱ͖Δ BFF ͱαʔόʔαΠυ ϨϯμϦϯάػೳͷఏڙ

Slide 58

Slide 58 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Vue.js ͷίϯςΩετͰ ίϯϙʔωϯτࢦ޲։ൃ͕ Ͱ͖Δ Vue.js Λϕʔεʹٕज़తδϟϯϓΛ ཈͑ͯ “ΞϓϦέʔγϣϯ” ։ൃ͕ Ͱ͖Δ BFF ͱαʔόʔαΠυ ϨϯμϦϯάػೳͷఏڙ ϑϨʔϜϫʔΫͱͯ͠ఏڙ͞ΕΔ “convention over conﬁguration”

Slide 59

Slide 59 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Nuxt.js ྑ͍ͷͰ͸ɻ

Slide 60

Slide 60 text

⸻ Web ϑϩϯτΤϯυͷίϯϙʔωϯτԽ Nuxt.js ʹΑΔϑϩϯτΤϯυ։ൃ΁ͷ೤ྔ͕ ঃʑʹߴ·͍ͬͯͬͨɻ

Slide 61

Slide 61 text

SEO ͱαʔόʔαΠυ ϨϯμϦϯά

Slide 62

Slide 62 text

Ұٳ.com Ϩετϥϯ͸ ߴ͍੒௕཰Λҡ࣋͢ΔαʔϏεͰ͢ɻ ⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά

Slide 63

Slide 63 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Ұٳ.com Ϩετϥϯͷ੒௕ʹد༩͢Δ େ͖ͳཁૉɺ

Slide 64

Slide 64 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά SEO: Search Engine Optimization

Slide 65

Slide 65 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά

Slide 66

Slide 66 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά 2017 ೥͸Ұૣ͘ Google AMP ϖʔδ΁ରԠɺ ݕࡧ݁Ռ΁ͷ࿐ग़ΛߴΊͨɻ

Slide 67

Slide 67 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Ұٳʹ͸ڧྗͳσδλϧϚʔέςΟϯάνʔϜ͕ ͓Γɺച্ΛݗҾ͍ͯ͠·͢ɻ

Slide 68

Slide 68 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ͦΜͳνʔϜ͕ϑϩϯτΤϯυ։ൃʹٻΊΔ΋ͷɺ

Slide 69

Slide 69 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά SSR: Server-side Rendering

Slide 70

Slide 70 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ϖʔδ্ͷॏཁͳίϯςϯπ͸ crawlable ͢ͳΘͪαʔόʔαΠυͰඳը͞Εͨ੩తίϯςϯπ Ͱ͋Δࣄ͕ٻΊΒΕͨɻ

Slide 71

Slide 71 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ౰࣌ SEO Λ୲౰͢ΔνʔϜʹډͨΘͨ͠ɺ Vue.js Ͱ UI ͷϦονԽΛਐΊͨͯ͘΋ ࣄۀΠϯύΫτʹؔΘΔ෦෼͸ಈతίϯςϯπԽͰ͖ͳ͍ҝɺ ݁ߏɺᷤ౻͕͋Γ·ͨ͠ɻ

Slide 72

Slide 72 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ຊ౰ʹ SSR ͔͠ແ͍ͷ͔ɻ

Slide 73

Slide 73 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά https://twitter.com/igrigorik/status/893574202472644608

Slide 74

Slide 74 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ࢥ͍೰Ή 2017 ೥΋ޙ൒ʹ͔͔͞͠Δ 8 ݄ɺ Understand rendering on Google Search: https://developers.google.com/search/docs/guides/rendering ެ։͞ΕΔɻ

Slide 75

Slide 75 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά tl;dr • Googlebot ͸ Chrome 41 ͰϨϯμϦϯά͞ΕΔ • جຊతʹ͸ Chrome 41 ͕ରԠ͢ΔػೳΛαϙʔτ͢Δ • ES6 ͸αϙʔτ͠ͳ͍ (Chrome 41 ͕αϙʔτ͢Δ JavaScript ͸αϙʔτ͢Δ)

Slide 76

Slide 76 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά https://youtu.be/Wu2GCRkDecI?t=1869

Slide 77

Slide 77 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Chrome Dev Summit 2017 ͕։࠵͞Εͨ 10 ݄ɺ End-to-End Polymer Apps with the Modern Web Platform: https://youtu.be/Wu2GCRkDecI?t=1869 ͰಈతίϯςϯπΛαʔνΤϯδϯ΁ఏڙ͢Δํ๏ͷώϯτ͕ࣔ͞ΕΔɻ

Slide 78

Slide 78 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά …ͱ৭ʑϒϨΠΫεϧʔʹͳΓͦ͏ͳ ൃද͸͋ͬͨͷͰ͕͢ɺ

Slide 79

Slide 79 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ΍ͬͺΓαʔόʔαΠυϨϯμϦϯά͕ ҆৺࣮֬ͩΑͶͱ͍͏ྲྀΕ͸มΘΒͣɻ

Slide 80

Slide 80 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ͔͠͠ɺVue.js ࣮૷͸ࣾ಺Ͱ֦͕ΓΛΈ͍ͤͯͨ ͋Δ೔ɺ

Slide 81

Slide 81 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Vue.js ͬͯαʔόʔαΠυ ϨϯμϦϯάͰ͖ͳ͍ͷ͔ͳɻ (͓ͬ) SEO νʔϜ Τʔε Θͨ͠

Slide 82

Slide 82 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά

Slide 83

Slide 83 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Nuxt.js ྑ͍ͷͰ͸ɻ

Slide 84

Slide 84 text

ۀ຿՝୊ͱٕज़՝୊ͷ߹க

Slide 85

Slide 85 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά 2017 ೥ͷ͜͏͍ͬͨྲྀΕͷதͰ; • ίϯϙʔωϯτࢦ޲։ൃͱ͍͏ٕज़՝୊ • αʔόʔαΠυϨϯμϦϯάͱ͍͏ۀ຿՝୊ ͱ͍͏ 2 ͭͷ՝୊ղܾεΠʔτεϙοτͱͯ͠ Nuxt.js ͕ࣾ಺ Ͱ஫໨͞ΕΔΑ͏ʹɻ

Slide 86

Slide 86 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά ݕࡧΛμΠφϛοΫʹ! ͳΜ͔஗͍ΑͶ ͪΌΜͱͨ͠ SPA ʹ͠Α͏!

Slide 87

Slide 87 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά

Slide 88

Slide 88 text

⸻ SEO ͱαʔόʔαΠυϨϯμϦϯά Nuxt.js ͷ࠾༻Λܾஅ

Slide 89

Slide 89 text

ίϯϙʔωϯτࢦ޲ઃܭ

Slide 90

Slide 90 text

Components ⸻ ίϯϙʔωϯτࢦ޲ઃܭ Vue.js SFC JS CSS HTML Data αʔόʔαΠυ ΫϥΠΞϯταΠυ JS CSS HTML Web “ΞϓϦέʔγϣϯ” ։ൃʹ͓͚Δʮؔ৺ͷ෼཭ʯ

Slide 91

Slide 91 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ Component-based design

Slide 92

Slide 92 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ Ұٳ.com Ϩετϥϯʹ͓͚Δ “ίϯϙʔωϯτ”

Slide 93

Slide 93 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ

Slide 94

Slide 94 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ • σʔλɺςϯϓϨʔτɺϩδοΫɺελΠϧɺͦΕͧΕؔ࿈ੑ ͕ਂ͍΋ͷಉ࢜ΛϞδϡʔϧԽ • ϑΝΠϧλΠϓʹΑΔॎׂΓͰ͸ͳ͘ɺؔ࿈ੑʹΑΔϑΝΠϧ λΠϓԣஅͷ۲ࢗ͠ͰάϧʔϓԽ • ϑϩϯτΤϯυ࣮૷ͷ͋ΒΏΔΞηοτΛίϯϙʔωϯτͱ ଊ͑ͯ؅ཧ

Slide 95

Slide 95 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ ͢΂ͯΛίϯϙʔωϯτͱͯ͠ଊ͑ͨ࣌ʹ ු͖۷Γͱͳͬͨίϯϙʔωϯτͷछྨ

Slide 96

Slide 96 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ ϓϩάϥϜ্ඞཁͳཻ౓

Slide 97

Slide 97 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ छྨ ໾ׂ άϩʔόϧσʔλ ఆ਺ɺάϩʔόϧม਺ ܕఆٛ TypeScript Ͱఆٛͨ͠ྻڍܕ΍Ϟσϧ ڞ௨/άϩʔόϧϩδοΫ UI ίϯϙʔωϯτؒͰڞ௨Խ͍ͨ͠ɺ ύϑΥʔϚϯε্άϩʔόϧԽ͍ͨ͠ ϩδοΫ UI ίϯϙʔωϯτ ϏϡʔɺUI ͱͳΔ෦඼

Slide 98

Slide 98 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ ελΠϧ্ඞཁͳཻ౓

Slide 99

Slide 99 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ छྨ ໾ׂ άϩʔόϧσʔλ CSS ม਺ ϑΟϧλʔ CSS ϛοΫεΠϯ άϩʔόϧελΠϧ ཁૉܕηϨΫλ΁ࢦఆ͢ΔελΠϧ UI ίϯϙʔωϯτ ΫϥεηϨΫλʹର͢ΔελΠϧ

Slide 100

Slide 100 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ ͜ΕΒΛద౰ʹϨΠϠʔԽͰ͖Δ ࢓૊Έͬͯͳ͍͔ͳ

Slide 101

Slide 101 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ https://www.skillshare.com/classes/Modern-CSS-Writing-Better-Cleaner-More-Scalable-Code/771669373

Slide 102

Slide 102 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ ITCSS ͱ͍͏ͷ͕͋ΔΒ͍͠

Slide 103

Slide 103 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ tl;dr • ॊೈͰҠߦ͠΍͍͢ߏ੒ • BEM ͳͲͷ CSS ํ๏࿦ͱͷޓ׵ੑ • ίϯϙʔωϯτࢦ޲ͷ CSS ΞʔΩςΫνϟ

Slide 104

Slide 104 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ

Slide 105

Slide 105 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ Inverted Triangle (ٯࡾ֯ܗ) Ͱਤࣔ͞Εͨ ந৅ԽͷதͰద੾ʹϨΠϠʔԽ͍ͯ͜͠͏ͱ͍͏ ΞʔΩςΫνϟ

Slide 106

Slide 106 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ

Slide 107

Slide 107 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ ϨΠϠʔ ໾ׂ Settings CSS ม਺ Tools CSS ϛοΫεΠϯ Generic Ϧηοτ CSS Elements άϩʔόϧ (ཁૉܕηϨΫλʔ΁ͷ) ελΠϧ Objects OOCSS ʹݟΒΕΔ Media Object ܥ UI ίϯϙʔωϯτͷελΠϧ Components ϢʔβʔʹػೳΛఏڙ͢Δ UI ίϯϙʔωϯτͷελΠϧ Trumps ྫ֎త༻๏ͷϨΠϠʔ

Slide 108

Slide 108 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ શͯΛίϯϙʔωϯτͱଊ͑ͨ Ұٳ.com Ϩετϥϯͷߏ੒ʹɺ ͜ͷߟ͑Λద༻ͯ͠ΈΔ

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ ͋ΓͳΜ͡Όͳ͍͔

Slide 111

Slide 111 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ

Slide 112

Slide 112 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ ITCSS Atomic Design Settings Atoms Tools Generic Elements Objects Molecules Components Organisms Trumps

Slide 113

Slide 113 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ ITCSS Atomic Design Settings Atoms Tools Generic Elements Objects Molecules Components Organisms Trumps ITCSS ͩͱ Atoms ϨΠϠʔʹ ౰ͨΔந৅౓Λ ࡉ͔͘෼ྨͰ͖ͦ͏

Slide 114

Slide 114 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ ͋ΓͳΜ͡Όͳ͍͔

Slide 115

Slide 115 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ

Slide 116

Slide 116 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ ϑϩϯτΤϯυͷϨΠϠʔυΞʔΩςΫνϟ ͱͯ͠࠾༻ɻ

Slide 117

Slide 117 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ

Slide 118

Slide 118 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ

Slide 119

Slide 119 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ

Slide 120

Slide 120 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ

Slide 121

Slide 121 text

⸻ ίϯϙʔωϯτࢦ޲ઃܭ

Slide 122

Slide 122 text

ϦχϡʔΞϧͷ੒Ռ

Slide 123

Slide 123 text

⸻ ϦχϡʔΞϧͷ੒Ռ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ

Slide 124

Slide 124 text

⸻ ϦχϡʔΞϧͷ੒Ռ ݕࡧ৚݅Λมߋ ͢Δͨͼʹɺ ௚઀ɺಈతʹݕࡧ ݁ՌΛඳը! ϖʔδϦϩʔυ͸ ͤͣʹɺ

Slide 125

Slide 125 text

⸻ ϦχϡʔΞϧͷ੒Ռ 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

Slide 126

Slide 126 text

⸻ϦχϡʔΞϧͷ੒Ռ SVNTQFFEJOEFY ͷܭଌ஋

Slide 127

Slide 127 text

Ұٳ.com ϨετϥϯͷϑϩϯτΤϯυ͸ Web Β͘͠ɺ ϓϩάϨογϰʹվળΛଓ͚ͯߦ͖·͢

Slide 128

Slide 128 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ