体験と設計 フロントエンドエンジニアの二つの責務について #FROKAN

2019.03.15 #FROKAN HANATANI Takuma(@potato4d)
Sample and GIF image repo: https://github.com/potato4d/frokan20190315

1. ମݧͱઃܭ ϑϩϯτΤϯυΤϯδχΞͷೋͭͷ੹຿ʹ͍ͭͯ 2019.03.15 #FROKAN HANATANI Takuma(@potato4d)
2. Agenda 1. ͸͡Ίʹ 2. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ 3. ϑϩϯτΤϯυΤϯδχΞ͔ͩΒͦ͜Ͱ͖Δ͜ͱ 4. ࣮ྫ͔ΒֶͿϑϩϯτΤϯυΤϯδχΞ͕Ͱ͖Δվળ 5. ·ͱΊ
3. Agenda 1. ͸͡Ίʹ 2. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ 3. ϑϩϯτΤϯυΤϯδχΞ͔ͩΒͦ͜Ͱ͖Δ͜ͱ 4. ࣮ྫ͔ΒֶͿϑϩϯτΤϯυΤϯδχΞ͕Ͱ͖Δվળ 5. ·ͱΊ
4. HANATANI Takuma (@potato4d) • Freelance as "ElevenBack" (2017.07 ~) / LINE Corp (2018.12 ~) • Contribute to • Vue.js, React.js, Nuxt.js japanese document maintainer • Nuxt.js contributor • Web Application Developer • — Vue.js, Nuxt.js, Node.js(with TypeScript), Serverless • — User Interface, Micro Interaction, Product Development
5. https://github.com/potato4d
6. https://github.com/potato4d/ frokan20190315 εϥΠυͰݟΔਓ͸ GIF ಈ͔ͳ͍͔ Βͬͪ͜Ͱ GIF ݟͯ͘Εʂʂʂʂʂ
7. ͸͡Ίʹ • ࠓ೔ͷΰʔϧ • ϑϩϯτΤϯυΤϯδχΞͷ࣮ଶΛద੾ʹ೺Ѳ͢Δ • ϑϩϯτΤϯυΤϯδχΞͷڧΈɾऑΈΛద੾ʹ೺Ѳ͢Δ • αʔϏε։ൃͱ͍͏ΰʔϧʹ޲͚ͯɺ๬·ཱ͍ͪ͠ډৼΔ෣͍ ͕Կ͔ͱ͍͏΋ͷͷɺҰͭͷճ౴Λ࣋ͬͯؼͬͯ΋Β͏
8. ͸͡Ίʹ • ࠓ೔ͷϑϩϯτΤϯυͷΤϯδχΞͷఆٛ • HTML / CSS (JSX ΍ Vue ςϯϓϨʔτͰ΋ྑ͍)ίʔσΟϯά • ඇ CSS ϑϨʔϜϫʔΫ • Ϟμϯ JavaScript ʹΑΔΞϓϦέʔγϣϯ։ൃ • ECMAScript / TypeScript Λར༻ͨ͠։ൃ • React / Vue / Angular ͳͲͷϑϨʔϜϫʔΫΛར༻ͨ͠։ൃ
9. Agenda 1. ͸͡Ίʹ 2. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ 3. ϑϩϯτΤϯυΤϯδχΞ͔ͩΒͦ͜Ͱ͖Δ͜ͱ 4. ࣮ྫ͔ΒֶͿϑϩϯτΤϯυΤϯδχΞ͕Ͱ͖Δվળ 5. ·ͱΊ
10. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ • Web ΞϓϦέʔγϣϯσϕϩούɾΞʔΩςΫτͱͯ࣋͠ଓՄ ೳͳ։ൃମ੍Λ࡞Γ্͛Δ੹຿ • ଟ͘ͷਓ͕͜ͷྖҬ͸ҙ͍ࣝͯ͠Δ • ʮϑϨʔϜϫʔΫΛ࢖͏ٕज़ʯ͸ίϞσΟςΟԽ͍ͯ͠Δ • ܦݧ͔Β͘Δةػҙࣝ΍ະདྷ༧஌ͱͦͷରࡦʹՁ஋͕͋Δ • UI ʹܞΘΔΏ͑ͷมߋͷଟ͞ͱɺͦͷͨΊͷઃܭ • ։ൃऀͷϨϕϧࠩҟΛٵऩ͢ΔΑ͏ͳΞʔΩςΫνϟઃܭ
11. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ • αʔϏεఏڙऀͱͯ͠ɺΑΓΑ͍ମݧΛఏڙ͢Δ੹຿ • ຊ೔ͷϝΠϯ͸ͪ͜Β • FE ͸Ұ൪੡඼ͷΠϯλʔϑΣʔεΛ৮ΔਓؒͱͳΔ • (ͨ·ʹա৒ʹ൓Ԡͯ͠͠·͏͜ͱ΋͋Δ͕) FE ͷϢʔβʔମ ݧ্ͷෆຬ͸ଟ͘ͷ৔߹Ϣʔβʔ͕ར༻͢Δͱ͖ʹײ͡Δ • ͔ͩΒͦ͜ɺখ͞ͳϑϥετϨʔγϣϯͰ΋ଥڠ͠ͳ͍ • ੹೚ҙࣝΛ͍࣋ͬͯ͘ඞཁ͕͋Δ
12. Agenda 1. ͸͡Ίʹ 2. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ 3. ϑϩϯτΤϯυΤϯδχΞ͔ͩΒͦ͜Ͱ͖Δ͜ͱ 4. ࣮ྫ͔ΒֶͿϑϩϯτΤϯυΤϯδχΞ͕Ͱ͖Δվળ 5. ·ͱΊ
13. FE ͔ͩΒͦ͜Ͱ͖Δ͜ͱ • લఏͱͯ͠ɺϑϩϯτΤϯυΤϯδχΞ͸ث༻ශ๡Ͱ͋Δͱ͍͏ ࣄ࣮Λड͚ࢭΊΔ • ϢʔβʔΠϯλʔϑΣʔεʹؔΘΔ͕࣌ؒ͋ΔͨΊɺόοΫΤ ϯυͷΤϯδχΞ΄ͲΞʔΩςΫνϟʹਅ伨Ͱ͍ΒΕͳ͍ • ΋ͪΖΜσβΠφʔ΄Ͳৗʹମݧ΍ΠϯλʔϑΣʔεʹ͍ͭͯ ߟ͑Δ࣌ؒΛ࢖͍͑ͯΔΘ͚Ͱ͸ͳ͍ • ͋͘·Ͱ΋ΞϓϦέʔγϣϯ։ൃΛ͍ͯ͠ΔͨΊɺΫϦΤΠςΟ ϒίʔμʔͷΑ͏ͳදݱྗΛৗʹຏ͚ΔΘ͚Ͱ΋ͳ͍
14. FE ͔ͩΒͦ͜Ͱ͖Δ͜ͱ • ͦͷҰํͰɺͲͷྖҬ΋جૅ஌͕ࣝ͋Γɺֻ͚ࢉ͢Δ͜ͱ͕Ͱ͖ Δͱ͍͏ڧΈΛ͍࣋ͬͯΔ͜ͱ΋֮ࣗ͢Δ • e.g. Sketch Ͱ UI Λ࡞੒͢Δ͜ͱͳͲ΋͋ΓɺΠϯλϥΫγϣ ϯྖྖҬΛ୲౰͢Δ͜ͱ͕ଟ͍͜ͱ͔Βϫϯετοϓͷ஌͕ࣝ • e.g. API ͱͷͭͳ͗ࠐΈʹΑͬͯഁ୼ͮ͠Β͍ API ͷϒϥοΫ ϘοΫεઃܭ΍ڞ༗ϑϩʔ͕ • e.g. αʔόʔϨεͷจ຺΍ BFF ͷจ຺Ͱ Node ࠾༻͕૿͑ͨ͜ ͱ΋͋Γɺݱ୅తͳΫϥ΢υ૝ఆͷόοΫΤϯυͷجૅ͕
15. FE ͔ͩΒͦ͜Ͱ͖Δ͜ͱ • ϑϨʔϜϫʔΫ΍ΞʔΩςΫνϟ͕࣋ͯᅥ͞ΕΔࠓ͔ͩΒͦ͜ɺ վΊͯԿͷͨΊʹઐ༻ͷྖҬ͕ੜ·Ε͍ͯΔ͔ΛݟͭΊ௚͢ • ʮϑϩϯτΤϯυΤϯδχΞʯͷʮΤϯδχΞʯΒ͍͠࢓ࣄ͸ɺ ϓϩϑΣογϣφϧͱͯ͠ͷجૅεΩϧ • جૅεΩϧ͔ͩΒͦ͜ɺຏ͖ଓ͚ͯߴਫ४Ͱ͋Δඞཁ͸͋Δ • ҰํͰʮϑϩϯτΤϯυʹܞΘΔΤϯδχΞʯͱͯ͠ɺαʔϏ ε΁ͷߩݙ౓ΛߴΊ͍͚ͯΔ෦෼ΛΑΓಈ͖ʹऔΓೖΕ͍ͯ͘ ͜ͱ͕େ੾
16. Agenda 1. ͸͡Ίʹ 2. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ 3. ϑϩϯτΤϯυΤϯδχΞ͔ͩΒͦ͜Ͱ͖Δ͜ͱ 4. ࣮ྫ͔ΒֶͿϑϩϯτΤϯυΤϯδχΞ͕Ͱ͖Δվળ 5. ·ͱΊ
17. ࠓճ͸ମݧఏҊͷখ͞ͳࣄྫΛ঺հ ࣌ؒ΋ͳ͍ͷͰ ※ ݱ৔ʹΑͬͯมΘΔͨΊɺ͋͘·Ͱ΋ҰྫͰ͢
18. Example #1 ձһొ࿥ϑϩʔͷ৔߹
19. Example #1 • ࠓճ͸ೖྗ߲໨͕؆୯ͳ΋ͷΛ༻ҙ • ࣮ࡍͷ։ൃͰ͸ྫ͑͹ձһొ࿥ͳͲΛ ૝ఆ • ॏཁ౓ͷ௿͍ॲཧʹ͍ͭͯ͸ܰշʹ ಈ͘ͱମݧ͕ྑ͍ • ͦͷҰํͰ͋·Γʹૣ͘׬݁͢Δ΋ ͷ͸ॲཧ͕׬͔ྃͨ͠Θ͔ΓͮΒ͍ ͱ͍͏՝୊͕͋Δ • ࠷௿ॲཧ࣌ؒͱॲཧ׬ྃޙͷΠϯλ ϥΫγϣϯΛ͚ͭͯ΍Δͱྑ͍
20. Example #1 ࠷௿ॲཧ࣌ؒͱΠϯλϥΫγϣϯΛ௥Ճͨ͠ྫ
21. Example #1 ৽چͰͷಈ࡞ͷൺֱ
22. Example #1 • ࠓճͷ΋ͷ͸Ϩεϙϯε͕ߴ଎ͳ API Λ͋͑ͯଟগ஗Ԇͤ͞ΔςΫχοΫ • ٯʹ஗͍΋ͷΛૣ͘ݟͤΔͱ͖ʹ΋׆ ༻Ͱ͖Δ • API ઃܭͱ૬ஊͯ͠σʔλΛ෼ׂɺ ΤϯυϙΠϯτΛ૿΍͢ • ෼ׂͨ͠தͰΫϦςΟΧϧͳ෦෼ͩ ͚ΛࣄલʹಡΈɺޙ͸ஞ࣍ಡΈࠐΉ • ϩʔυͷऔΓѻ͍͸ SPA ։ൃͷΩϞ ͱͳΔ෦෼ͳͷͰɺద੾ͳܗΛߟ͑Δ
23. Example #1 • ͱ͸͍͑ݱ࣮ • ͦ΋ͦ΋ϩʔσΟϯάσβΠϯ͕૝ ఆ͞Ε͍ͯͳ͍৔߹ͳͲ΋͋Δ • ஗ԆಡΈࠐΈ͕ը໘͕ΨΫοͱͳΔ ͕ίϯςϯπαΠζ͕Θ͔Βͳ͍ͳ Ͳ΋͋Δ • Ͱ͖ΔൣғͰ
24. Example #2 ΞϓϦέʔγϣϯͷ Boostrap ࣌ͷڍಈ
25. Example #2 • ىಈը໘ͱͯ͠࠷௿ݶͷཁ݅͸ ຬ͍ͨͯ͠Δ • ਅͬനʹͳΒͣɺύΩοͱ੾Γ ସΘΔ • ͜Ε͸͜ΕͰྑ͍͕ɺϑΣʔ υΞ΢τ͋Δ͍͸ϑΣʔυΠ ϯΛଟগೖΕͯ΍Δͱ΋͏গ ͠ྑ͘ͳΔ
26. Example #2 εϓϥογϡεΫϦʔϯతʹͨ͠ྫɻ྆ํೖΕΔͱগ͠Ϋυ͍͜ͱ΋ɻ
27. Example #2 ϑΣʔυΞ΢τΛ཈͑ͨྫɻഽײద੾ͳײ֮
28. Example #2 ৽چͰͷಈ࡞ͷൺֱ
29. Example #2 • ͦ΋ͦ΋ը໘͕ਅͬനͷ৔߹ͳͲ͸࠷ ௿ݶϩΰͳͲ͸ਖ਼͘͠ද͓ࣔͯ͘͠ • ͜͜΋࿙Ε΍͍͢ͷͰ஫ҙ • ௥ՃͰࢹ֮త FB ͕ඞཁͳ৔߹ʹ͸͜ ͏͍ͬͨվળҊ΋ߟ͑Δ • ΋ͪΖΜ؅ཧγεςϜͳͲϊΠζͱ ͳΔ • Moneytree(Web)Ͱ΋Ξχϝʔγϣ ϯ & ϑΣʔυ͸࢖ΘΕ͍ͯΔഽײ
30. Example #2 • ࠓճ͸σεΫτοϓ SPA ͷ૝ఆͩͬͨ ͕ɺϞόΠϧͳΒผͷΞϓϩʔν΋͋ Δ • PWA Ͱಈ͔ͤΔͳΒ࠷௿ݶͷ manifest ͕͋Ε͹ىಈ࣌ͷ΋ͷ͸ଟ গఏڙ͞ΕΔ • App Shell ύλʔϯΛ࣮૷͢Δ • UI ͷϑϨʔϜͱίϯςϯπΛΘ͚ ͯɺίϯςϯπΛ஗ԆಡΈࠐΈ • Web ։ൃऀͷҾ͖ग़͠΋׆༻͢Δ
31. Example #1 FYI: App Shell ͸͜Μͳײ͡
32. Next Step • ࣮ફ͍ͯ͘͠৔߹͸σβΠϯؔ࿈ͷॻ੶Λோ ΊΔͱྑ͍ • Ϣʔβʔͷૢ࡞ʹର͢ΔϑΟʔυόοΫʹ ͍ͭͯ͸ɺࠓ೔ͷϩʔυͷྫͷجʹ΋ͳͬ ͍ͯΔʮΠϯλʔϑΣʔεσβΠϯͷ࣮ફ ڭࣨʯ͕Φεεϝ • ࠓͰ͍͏ʮσβΠϯࢥߟʯʹ͍ۙ΋ͷֶ͕ ͼ΍͍͢
33. Next Step • ͦͷ΄͔ɺ΋͏গ͠ϚΫϩͳࢹ఺Λಘ͍ͨ৔ ߹͸ʮ༥͚ΔσβΠϯʯͳͲ΋ྑ͍ • ΠϯλʔϑΣʔεͷ͜Ε·Ͱͱࠓͷঢ়گʹ ͍ͭͯ෯޿͘ॻ͔Ε͍ͯΔ • ݱঢ়ͷΩϟονΞοϓ΍ҰาҾ͍ͨ໨Ͱվ ΊͯσβΠϯΛߟ͑Δͱ͖ʹॏๅ͢Δ
34. Agenda 1. ͸͡Ίʹ 2. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ 3. ϑϩϯτΤϯυΤϯδχΞ͔ͩΒͦ͜Ͱ͖Δ͜ͱ 4. ࣮ྫ͔ΒֶͿϑϩϯτΤϯυΤϯδχΞ͕Ͱ͖Δվળ 5. ·ͱΊ
35. ·ͱΊ 1 • ʮϑϩϯτΤϯυΤϯδχΞʯʹ͸ೋͭͷ੹຿͕ଘࡏ͢Δ • ΞϓϦέʔγϣϯσϕϩούͱͯ͠ͷίʔυΛकΔ੹຿ • αʔϏεΛͭͬͯ͘Ώ͘ϝϯόʔͱͯ͠ͷମݧͷఏএ੹຿ • ϑϩϯτΤϯυΤϯδχΞ͸໢ཏతɺ͋Δ͍͸ث༻ශ๡Ͱ͋Δ • ͦΕͧΕͷྖҬͷΤΩεύʔτʹ͸উͯͳ͍͜ͱΛ֮ࣗ͢Δ • ҰํͰΞϚνϡΞҎ্ʹ஌͕ࣝ͋Γɺֻ͚ࢉ͕ಘҙͱ֮ࣗ͢Δ • ্هΛҙ͍ࣝͯ͘͜͠ͱ͕ɺ৽ͨͳՁ஋ͱͳΔ
36. ·ͱΊ 2 • ࣮ࡍͷମݧྫͷ঺հ • ϩʔσΟϯάͷվળγνϡΤʔγϣϯ • εϓϥογϡεΫϦʔϯ࣮૷ʹΑΔϩʔυετϨεͷ௿ݮ • ࣍ͷεςοϓ • σβΠϯܥɺಛʹ UI ͷݱ৔తͳ΋ͷΑΓɺσβΠϯࢥߟʹۙ ͍෦෼ΛΩϟονΞοϓ͍ͯ͘͠ • ϓϩμΫτ։ൃʹదٓऔΓೖΕ͍ͯ͘
37. ʮϑϩϯτΤϯυʯ͕ ͳͥઐ໳ྖҬͱͳͬͨͷ͔Λࢥ͍ग़ͦ͏