Component-based Design for Ikyu users

BASE 様主催、Atomic Design 勉強会で、一休.comレストランから発表させて頂いた資料になります。

ユーザーが感覚的に使えるサービスを目指す「一休.comレストラン」コンポーネント指向開発の今

Atomic Designを実現するコンポーネント指向開発のいま
https://base.connpass.com/event/122517/

#atomic_shibuya

Transcript

1. Ϣʔβʔ͕ײ֮తʹ࢖͑ΔαʔϏεΛ໨ࢦ͢ ʮҰٳ.comϨετϥϯʯ ίϯϙʔωϯτࢦ޲։ൃͷࠓ
2. https://restaurant.ikyu.com/
3. このサービスで予約したお店なら 間違いない!! https://restaurant.ikyu.com/ Ұٳ.comϨετϥϯ ߴ੒௕Λଓ͚ΔϑΝΠϯμΠχϯάͷ༧໿αʔϏε 2006 Released
4. ࠓ೔ͷ͸ͳ͠ 1 ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ 2 Atomic Design ͔Β࠾༻ͨ͠Τοηϯε 3 νʔϜσβΠφʔ͕໨ࢦ͢σβΠϯ 4 ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
5. ίϯϙʔωϯτࢦ޲ઃܭ ಋೖͷετʔϦʔ
7. ͳΜ͔஗͍ɾɾɾ ݕࡧΛμΠφϛοΫʹʂ
8. ͳΜ͔஗͍ɾɾɾ ݕࡧΛμΠφϛοΫʹʂ ͪΌΜͱͨ͠SPAʹ͠Α͏ʂ
9. ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
10. Nuxt.js ʹΑΔϑϩϯτΤϯυج൫ͷ ࡮৽Λελʔτ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
11. Component-based design ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
12. Ұٳ.com Ϩετϥϯʹ͓͚Δ “ίϯϙʔωϯτ” ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
13. ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
14. ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ 1 σʔλɺςϯϓϨʔτɺϩδοΫɺελΠϧɺ ɹͦΕͧΕؔ࿈ੑ͕ਂ͍΋ͷಉ࢜ΛϞδϡʔϧԽ 2 ϑΝΠϧλΠϓʹΑΔॎׂΓͰ͸ͳ͘ɺ ɹؔ࿈ੑʹΑΔϑΝΠϧλΠϓԣஅͷ۲ࢗ͠ͰάϧʔϓԽ 3 ϑϩϯτΤϯυ࣮૷ͷ͋ΒΏΔΞηοτΛ ɹίϯϙʔωϯτͱଊ͑ͯ؅ཧ
15. ͢΂ͯΛίϯϙʔωϯτͱͯ͠ ଊ͑ͨ࣌ʹු͖۷Γͱͳͬͨ ίϯϙʔωϯτͷछྨ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
16. छྨ ໾ׂ άϩʔόϧσʔλ ఆ਺ɺάϩʔόϧม਺ ܕఆٛ TypeScript Ͱఆٛͨ͠ྻڍܕ΍Ϟσϧ ڞ௨/άϩʔόϧϩδοΫ UI ίϯϙʔωϯτؒͰڞ௨Խ͍ͨ͠ɺ ύϑΥʔϚϯε্άϩʔόϧԽ͍ͨ͠ ϩδοΫ UI ίϯϙʔωϯτ ϏϡʔɺUI ͱͳΔ෦඼ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ ϓϩάϥϜ্ඞཁͳཻ౓
17. छྨ ໾ׂ άϩʔόϧσʔλ CSS ม਺ ϑΟϧλʔ CSS ϛοΫεΠϯ άϩʔόϧελΠϧ ཁૉܕηϨΫλ΁ࢦఆ͢ΔελΠϧ UI ίϯϙʔωϯτ ΫϥεηϨΫλʹର͢ΔελΠϧ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ ελΠϧ্ඞཁͳཻ౓
18. ͜ΕΒΛద౰ʹϨΠϠʔԽͰ͖Δ ࢓૊Έͬͯͳ͍͔ͳʁ ϓϩάϥϜ্ ඞཁͳཻ౓ ελΠϧ্ ඞཁͳཻ౓ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
19. ITCSS Λ࠾༻ https://www.skillshare.com/classes/Modern-CSS-Writing-Better-Cleaner-More-Scalable-Code/771669373 ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
20. ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
21. Inverted Triangle (ٯࡾ֯ܗ) Ͱ ਤࣔ͞Εͨந৅ԽͷதͰ ద੾ʹϨΠϠʔԽ͍ͯ͜͠͏ ͱ͍͏ΞʔΩςΫνϟ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
22. ϨΠϠʔ ໾ׂ Settings CSS ม਺ Tools CSS ϛοΫεΠϯ Generic Ϧηοτ CSS Elements άϩʔόϧ (ཁૉܕηϨΫλʔ΁ͷ) ελΠϧ Objects OOCSS ʹݟΒΕΔ Media Object ܥ UI ίϯϙʔωϯτͷελΠϧ Components ϢʔβʔʹػೳΛఏڙ͢Δ UI ίϯϙʔωϯτͷελΠϧ Trumps ྫ֎త༻๏ͷϨΠϠʔ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
23. ϨΠϠʔ ໾ׂ Settings CSS ม਺΍ɺఆ਺ͳͲͷσʔλΛѻ͏ɻ Tools CSS ϛοΫεΠϯɺϑΟϧλʔɺ·ͨ͸όϦϡʔΦϒδΣΫτɺ DTO ͷΑ͏ͳΞϓϦέʔγϣϯ্ͷܕͱͳΔఆٛΛѻ͏ɻ Generic CSS ཁૉܕηϨΫλʔʹΑΔάϩʔόϧελΠϧఆٛɺΞϓϦέʔ γϣϯશମͰڞ௨Խ͞Εͨॲཧɺάϩʔόϧͳ෭࡞༻Λ࣋ͭϏδω εϩδοΫΛѻ͏ɻ Elements Atoms ͷΑ͏ͳϓϦϛςΟϰͳίϯϙʔωϯτΛѻ͏ɻ͜ΕҎԼͷ ϨΠϠʔͰ Vue.js SFC Λѻ͏ɻ Objects Molecules ͷΑ͏ͳΞϓϦέʔγϣϯ্ͷίϯςΩετΛؚΉίϯ ϙʔωϯτΛѻ͏ɻ Components Organisms ͷΑ͏ͳΞϓϦέʔγϣϯ্ҙຯͷ͋Δػೳ୯Ґͷίϯ ϙʔωϯτΛѻ͏ɻ Trumps ྫ֎ϨΠϠʔ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ Ұٳ.comϨετϥϯͱͯ͠ͷղऍ
24. શͯΛίϯϙʔωϯτͱଊ͑ͨ Ұٳ.com Ϩετϥϯͷߏ੒ʹ ͜ͷߟ͑Λద༻ … ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
25. 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 ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
26. SVNTQFFEJOEFY ͷܭଌ஋ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
27. ଎͘ͳͬͨʂΘʔ͍ ͔͠͠ɺ KPI ͱͯ͠ॏཁͳ CVR վળʹ͸ͭͳ͕Βͣ… ࡮৽ͷՁ஋͸Կͩͬͨͷ͔ʁ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
28. Market-oriented ʹͳΔҝͷ Product-oriented User First ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ
29. • ࠶ར༻ੑɺੜ࢈ੑͷ޲্ɺείʔϓ؅ཧͳͲͷ։ൃऀϝϦοτ • αʔϏεͱϢʔβʔͷର࿩ΠϯλʔϑΣʔεҰ؏ੑڧԽͷ࢓૊ΈΛ֫ಘ • αʔϏεϒϥϯυڧԽͷ࢓૊Έ֫ಘ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ ܧଓతͳϢʔβʔϏϦςΟվળͷ جૅΛ֫ಘ
30. Atomic Design ͔Β࠾༻ͨ͠ Τοηϯε
31. ͱ͜ΖͰ ITCSS ͡Όͳͯ͘ɺ ͦ͜͸ Atomic Design ͡Όͳ͍ͷ͔ʁ Atomic Design͔Β࠾༻ͨ͠Τοηϯε
32. Atomic Design͔Β࠾༻ͨ͠Τοηϯε
33. ॏཁͳͷ͸ɺ Atomic Design Methodology ΍ ITCSS ͷ࣋ͭϝϯλϧϞσϧɻ Atomic Design͔Β࠾༻ͨ͠Τοηϯε ϨΠϠʔߏ଄Λ࣋ͭ FLOCSS ΍ SMACSS Ͱ΍ͬͯΈͯ΋ྑ͍ͱࢥ͏
34. Atomic Design Methodology ʹ৐͔ͬΕ͹ ͏·͘෼ྨͰ͖Δ༁Ͱ͸ͳ͍ Atomic Design͔Β࠾༻ͨ͠Τοηϯε
35. ITCSS Atomic Design Settings Atoms Tools Generic Elements Objects Molecules Components Organisms Trumps Atomic Design͔Β࠾༻ͨ͠Τοηϯε
36. ITCSS Atomic Design Settings Atoms Tools Generic Elements Objects Molecules Components Organisms Trumps ITCSS ͷϨΠϠʔ໊΍ϨΠϠʔ֦ு͸ ར༻ऀଆͰࣗ༝ʹ࠶ఆٛͰ͖Δ ɹTrumps ͸։ൃ్্ͷચ࿅͞Εͯ ɹ͍ͳ͍ίϯϙʔωϯτஔ͖৔ͱͯ͠΋ศར ITCSS ͩͱ Atoms ϨΠϠʔʹ౰ͨΔ ந৅౓Λࡉ͔͘෼ྨͰ͖ͦ͏ Atomic Design͔Β࠾༻ͨ͠Τοηϯε
37. ITCSS Atomic Design Settings Atoms Tools Generic Elements Objects Molecules Components Organisms Trumps νʔϜʹඞཁͳ෼ྨΛ νʔϜͰ߹ҙΛऔΔ͜ͱ͕ॏཁ Atomic Design͔Β࠾༻ͨ͠Τοηϯε
38. UI/UX νʔϜͷσβΠφʔ͕ ໨ࢦ͢σβΠϯ
39. UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ Ҋ͍݅ͬͺ͍ʂ ͋ͷҊ݅ɺ͜ͷҊ݅΋σβΠϯɺσβΠϯ Designer Designer
40. Designer Designer UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ ໨ઌҊ݅΋େࣄ͚ͩͲ Ұٳ.comϨετϥϯͷσβΠϯͷ ํ޲ੑΛߟ͑Α͏ʂ
42. Ұٳ.comϨετϥϯͷσβΠϯͷ ݴޠԽΛ։࢝ UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ
43. ΧϥʔεΩʔϜ λΠϙάϥϑΟ ΠϯλʔϑΣʔεσβΠϯ ☐ άϦουγεςϜ ϕʔεϥΠϯ ࢄΒ͔͍ͬͯΔͷͰ੔ཧ͠Α͏ʂ UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ
44. UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ
45. UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ σβΠφʔͷҙࢥܾఆΛ ελΠϧΨΠυԽ
46. ΧϥʔεΩʔϜ λΠϙάϥϑΟ ΠϯλʔϑΣʔεσβΠϯ ☐ άϦουγεςϜ ϕʔεϥΠϯ ΧϥʔύϨοτΛఆٛɺطଘ࣮૷ͷۙࣅ৭Λ੔ཧ౷߹ UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ
47. ΧϯϓΛίϯϙʔωϯτԽ ͢Δ࣌ͷΠγϡʔ
48. ΧϥʔεΩʔϜ λΠϙάϥϑΟ ΠϯλʔϑΣʔεσβΠϯ ☐ άϦουγεςϜ ϕʔεϥΠϯ ڞ௨ͷϘλϯσβΠϯΛఆٛ ͍ͨ͠ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
49. σβΠϯΧϯϓΛ ࡞ͬͯ΋Βͬͨ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
50. Ͳ͏΍ͬͯίϯϙʔωϯτԽ͢Δͷ͕ ྑ͍ͩΖ͏? ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
51. <button-positive-xs/> <button-positive-s/> <button-positive-m/> <button-positive-l/> <button-cv-xs/> <button-cv-s/> <button-cv-m/> <button-cv-l/> <button-cv-xl/> <button-negative-xs/> <button-negative-s/> <button-negative-m/> <button-negative-l/> <button-neutral-xs/> <button-neutral-s/> <button-neutral-m/> <button-neutral-l/> ݸผʹίϯϙʔωϯτԽ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
52. <button-positive size=“…”/> <button-cv size=“…”/> <button-negative size=“…”/> <button-neutral size=“…”/> αΠζ͚ͩଐੑԽͯ͠ Ϙλϯͷ໾ׂ͝ͱʹ ίϯϙʔωϯτԽ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
53. <button role=“…” size=“…” /> Ϙλϯͱͯ͠ͷػೳ͸ڞ௨ ͳͷͰ໾ׂͱαΠζͱ΋ʹ ଐੑԽ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
54. αΠζ͸Ͳ͏ఆٛ͢Δͷ͕ྑ͍ͩΖ͏ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
55. ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
56. ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
57. ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
58. ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
59. ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
60. ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
61. ΧϥʔεΩʔϜ λΠϙάϥϑΟ ΠϯλʔϑΣʔεσβΠϯ άϦουγεςϜ ϕʔεϥΠϯ ͜Εͷલʹɾɾɾ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ άϦουγεςϜ͕ ίϯϙʔωϯτఆٛʹඞਢͳͷͰ͸? άϦουͷϕʔεϥΠϯ͸ɾɾɾʁ όʔςΟΧϧϦζϜͷఆٛ΋ඞཁͳͷͰ͸ʁ
62. ίϯϙʔωϯτࢦ޲ઃܭʹۙಓͳ͠ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ
63. Ұٳ.com ϨετϥϯͷϑϩϯτΤϯυ͸ Web Β͘͠ɺϓϩάϨογϰʹ վળΛଓ͚ͯߦ͖·͢
64. ϒϩά΍ͬͯ·͢ https://user-first.ikyu.co.jp/
65. σβΠφʔ/ΤϯδχΞ΋࠾༻த! https://www.ikyu.co.jp/recruit/