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

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

Transcript

1. ମݧͱઃܭ
   ϑϩϯτΤϯυΤϯδχΞͷೋͭͷ੹຿ʹ͍ͭͯ
   2019.03.15 #FROKAN HANATANI Takuma(@potato4d)
   

   View Slide

2. Agenda
   1. ͸͡Ίʹ
   2. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ
   3. ϑϩϯτΤϯυΤϯδχΞ͔ͩΒͦ͜Ͱ͖Δ͜ͱ
   4. ࣮ྫ͔ΒֶͿϑϩϯτΤϯυΤϯδχΞ͕Ͱ͖Δվળ
   5. ·ͱΊ
   

   View Slide

3. Agenda
   1. ͸͡Ίʹ
   2. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ
   3. ϑϩϯτΤϯυΤϯδχΞ͔ͩΒͦ͜Ͱ͖Δ͜ͱ
   4. ࣮ྫ͔ΒֶͿϑϩϯτΤϯυΤϯδχΞ͕Ͱ͖Δվળ
   5. ·ͱΊ
   

   View Slide

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
   

   View Slide

5. https://github.com/potato4d
   

   View Slide

6. https://github.com/potato4d/
   frokan20190315
   εϥΠυͰݟΔਓ͸ GIF ಈ͔ͳ͍͔
   Βͬͪ͜Ͱ GIF ݟͯ͘Εʂʂʂʂʂ
   

   View Slide

7. ͸͡Ίʹ
   • ࠓ೔ͷΰʔϧ
   • ϑϩϯτΤϯυΤϯδχΞͷ࣮ଶΛద੾ʹ೺Ѳ͢Δ
   • ϑϩϯτΤϯυΤϯδχΞͷڧΈɾऑΈΛద੾ʹ೺Ѳ͢Δ
   • αʔϏε։ൃͱ͍͏ΰʔϧʹ޲͚ͯɺ๬·ཱ͍ͪ͠ډৼΔ෣͍
   ͕Կ͔ͱ͍͏΋ͷͷɺҰͭͷճ౴Λ࣋ͬͯؼͬͯ΋Β͏
   

   View Slide

8. ͸͡Ίʹ
   • ࠓ೔ͷϑϩϯτΤϯυͷΤϯδχΞͷఆٛ
   • HTML / CSS (JSX ΍ Vue ςϯϓϨʔτͰ΋ྑ͍)ίʔσΟϯά
   • ඇ CSS ϑϨʔϜϫʔΫ
   • Ϟμϯ JavaScript ʹΑΔΞϓϦέʔγϣϯ։ൃ
   • ECMAScript / TypeScript Λར༻ͨ͠։ൃ
   • React / Vue / Angular ͳͲͷϑϨʔϜϫʔΫΛར༻ͨ͠։ൃ
   

   View Slide

9. Agenda
   1. ͸͡Ίʹ
   2. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ
   3. ϑϩϯτΤϯυΤϯδχΞ͔ͩΒͦ͜Ͱ͖Δ͜ͱ
   4. ࣮ྫ͔ΒֶͿϑϩϯτΤϯυΤϯδχΞ͕Ͱ͖Δվળ
   5. ·ͱΊ
   

   View Slide

10. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ
    • Web ΞϓϦέʔγϣϯσϕϩούɾΞʔΩςΫτͱͯ࣋͠ଓՄ
    ೳͳ։ൃମ੍Λ࡞Γ্͛Δ੹຿
    • ଟ͘ͷਓ͕͜ͷྖҬ͸ҙ͍ࣝͯ͠Δ
    • ʮϑϨʔϜϫʔΫΛ࢖͏ٕज़ʯ͸ίϞσΟςΟԽ͍ͯ͠Δ
    • ܦݧ͔Β͘Δةػҙࣝ΍ະདྷ༧஌ͱͦͷରࡦʹՁ஋͕͋Δ
    • UI ʹܞΘΔΏ͑ͷมߋͷଟ͞ͱɺͦͷͨΊͷઃܭ
    • ։ൃऀͷϨϕϧࠩҟΛٵऩ͢ΔΑ͏ͳΞʔΩςΫνϟઃܭ
    

    View Slide

11. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ
    • αʔϏεఏڙऀͱͯ͠ɺΑΓΑ͍ମݧΛఏڙ͢Δ੹຿
    • ຊ೔ͷϝΠϯ͸ͪ͜Β
    • FE ͸Ұ൪੡඼ͷΠϯλʔϑΣʔεΛ৮ΔਓؒͱͳΔ
    • (ͨ·ʹա৒ʹ൓Ԡͯ͠͠·͏͜ͱ΋͋Δ͕) FE ͷϢʔβʔମ
    ݧ্ͷෆຬ͸ଟ͘ͷ৔߹Ϣʔβʔ͕ར༻͢Δͱ͖ʹײ͡Δ
    • ͔ͩΒͦ͜ɺখ͞ͳϑϥετϨʔγϣϯͰ΋ଥڠ͠ͳ͍
    • ੹೚ҙࣝΛ͍࣋ͬͯ͘ඞཁ͕͋Δ
    

    View Slide

12. Agenda
    1. ͸͡Ίʹ
    2. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ
    3. ϑϩϯτΤϯυΤϯδχΞ͔ͩΒͦ͜Ͱ͖Δ͜ͱ
    4. ࣮ྫ͔ΒֶͿϑϩϯτΤϯυΤϯδχΞ͕Ͱ͖Δվળ
    5. ·ͱΊ
    

    View Slide

13. FE ͔ͩΒͦ͜Ͱ͖Δ͜ͱ
    • લఏͱͯ͠ɺϑϩϯτΤϯυΤϯδχΞ͸ث༻ශ๡Ͱ͋Δͱ͍͏
    ࣄ࣮Λड͚ࢭΊΔ
    • ϢʔβʔΠϯλʔϑΣʔεʹؔΘΔ͕࣌ؒ͋ΔͨΊɺόοΫΤ
    ϯυͷΤϯδχΞ΄ͲΞʔΩςΫνϟʹਅ伨Ͱ͍ΒΕͳ͍
    • ΋ͪΖΜσβΠφʔ΄Ͳৗʹମݧ΍ΠϯλʔϑΣʔεʹ͍ͭͯ
    ߟ͑Δ࣌ؒΛ࢖͍͑ͯΔΘ͚Ͱ͸ͳ͍
    • ͋͘·Ͱ΋ΞϓϦέʔγϣϯ։ൃΛ͍ͯ͠ΔͨΊɺΫϦΤΠςΟ
    ϒίʔμʔͷΑ͏ͳදݱྗΛৗʹຏ͚ΔΘ͚Ͱ΋ͳ͍
    

    View Slide

14. FE ͔ͩΒͦ͜Ͱ͖Δ͜ͱ
    • ͦͷҰํͰɺͲͷྖҬ΋جૅ஌͕ࣝ͋Γɺֻ͚ࢉ͢Δ͜ͱ͕Ͱ͖
    Δͱ͍͏ڧΈΛ͍࣋ͬͯΔ͜ͱ΋֮ࣗ͢Δ
    • e.g. Sketch Ͱ UI Λ࡞੒͢Δ͜ͱͳͲ΋͋ΓɺΠϯλϥΫγϣ
    ϯྖྖҬΛ୲౰͢Δ͜ͱ͕ଟ͍͜ͱ͔Βϫϯετοϓͷ஌͕ࣝ
    • e.g. API ͱͷͭͳ͗ࠐΈʹΑͬͯഁ୼ͮ͠Β͍ API ͷϒϥοΫ
    ϘοΫεઃܭ΍ڞ༗ϑϩʔ͕
    • e.g. αʔόʔϨεͷจ຺΍ BFF ͷจ຺Ͱ Node ࠾༻͕૿͑ͨ͜
    ͱ΋͋Γɺݱ୅తͳΫϥ΢υ૝ఆͷόοΫΤϯυͷجૅ͕
    

    View Slide

15. FE ͔ͩΒͦ͜Ͱ͖Δ͜ͱ
    • ϑϨʔϜϫʔΫ΍ΞʔΩςΫνϟ͕࣋ͯᅥ͞ΕΔࠓ͔ͩΒͦ͜ɺ
    վΊͯԿͷͨΊʹઐ༻ͷྖҬ͕ੜ·Ε͍ͯΔ͔ΛݟͭΊ௚͢
    • ʮϑϩϯτΤϯυΤϯδχΞʯͷʮΤϯδχΞʯΒ͍͠࢓ࣄ͸ɺ
    ϓϩϑΣογϣφϧͱͯ͠ͷجૅεΩϧ
    • جૅεΩϧ͔ͩΒͦ͜ɺຏ͖ଓ͚ͯߴਫ४Ͱ͋Δඞཁ͸͋Δ
    • ҰํͰʮϑϩϯτΤϯυʹܞΘΔΤϯδχΞʯͱͯ͠ɺαʔϏ
    ε΁ͷߩݙ౓ΛߴΊ͍͚ͯΔ෦෼ΛΑΓಈ͖ʹऔΓೖΕ͍ͯ͘
    ͜ͱ͕େ੾
    

    View Slide

16. Agenda
    1. ͸͡Ίʹ
    2. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ
    3. ϑϩϯτΤϯυΤϯδχΞ͔ͩΒͦ͜Ͱ͖Δ͜ͱ
    4. ࣮ྫ͔ΒֶͿϑϩϯτΤϯυΤϯδχΞ͕Ͱ͖Δվળ
    5. ·ͱΊ
    

    View Slide

17. ࠓճ͸ମݧఏҊͷখ͞ͳࣄྫΛ঺հ
    ࣌ؒ΋ͳ͍ͷͰ
    ※ ݱ৔ʹΑͬͯมΘΔͨΊɺ͋͘·Ͱ΋ҰྫͰ͢
    

    View Slide

18. Example #1
    ձһొ࿥ϑϩʔͷ৔߹
    

    View Slide

19. Example #1
    • ࠓճ͸ೖྗ߲໨͕؆୯ͳ΋ͷΛ༻ҙ
    • ࣮ࡍͷ։ൃͰ͸ྫ͑͹ձһొ࿥ͳͲΛ
    ૝ఆ
    • ॏཁ౓ͷ௿͍ॲཧʹ͍ͭͯ͸ܰշʹ
    ಈ͘ͱମݧ͕ྑ͍
    • ͦͷҰํͰ͋·Γʹૣ͘׬݁͢Δ΋
    ͷ͸ॲཧ͕׬͔ྃͨ͠Θ͔ΓͮΒ͍
    ͱ͍͏՝୊͕͋Δ
    • ࠷௿ॲཧ࣌ؒͱॲཧ׬ྃޙͷΠϯλ
    ϥΫγϣϯΛ͚ͭͯ΍Δͱྑ͍
    

    View Slide

20. Example #1
    ࠷௿ॲཧ࣌ؒͱΠϯλϥΫγϣϯΛ௥Ճͨ͠ྫ
    

    View Slide

21. Example #1
    ৽چͰͷಈ࡞ͷൺֱ
    

    View Slide

22. Example #1
    • ࠓճͷ΋ͷ͸Ϩεϙϯε͕ߴ଎ͳ API
    Λ͋͑ͯଟগ஗Ԇͤ͞ΔςΫχοΫ
    • ٯʹ஗͍΋ͷΛૣ͘ݟͤΔͱ͖ʹ΋׆
    ༻Ͱ͖Δ
    • API ઃܭͱ૬ஊͯ͠σʔλΛ෼ׂɺ
    ΤϯυϙΠϯτΛ૿΍͢
    • ෼ׂͨ͠தͰΫϦςΟΧϧͳ෦෼ͩ
    ͚ΛࣄલʹಡΈɺޙ͸ஞ࣍ಡΈࠐΉ
    • ϩʔυͷऔΓѻ͍͸ SPA ։ൃͷΩϞ
    ͱͳΔ෦෼ͳͷͰɺద੾ͳܗΛߟ͑Δ
    

    View Slide

23. Example #1
    • ͱ͸͍͑ݱ࣮
    • ͦ΋ͦ΋ϩʔσΟϯάσβΠϯ͕૝
    ఆ͞Ε͍ͯͳ͍৔߹ͳͲ΋͋Δ
    • ஗ԆಡΈࠐΈ͕ը໘͕ΨΫοͱͳΔ
    ͕ίϯςϯπαΠζ͕Θ͔Βͳ͍ͳ
    Ͳ΋͋Δ
    • Ͱ͖ΔൣғͰ
    

    View Slide

24. Example #2
    ΞϓϦέʔγϣϯͷ Boostrap ࣌ͷڍಈ
    

    View Slide

25. Example #2
    • ىಈը໘ͱͯ͠࠷௿ݶͷཁ݅͸
    ຬ͍ͨͯ͠Δ
    • ਅͬനʹͳΒͣɺύΩοͱ੾Γ
    ସΘΔ
    • ͜Ε͸͜ΕͰྑ͍͕ɺϑΣʔ
    υΞ΢τ͋Δ͍͸ϑΣʔυΠ
    ϯΛଟগೖΕͯ΍Δͱ΋͏গ
    ͠ྑ͘ͳΔ
    

    View Slide

26. Example #2
    εϓϥογϡεΫϦʔϯతʹͨ͠ྫɻ྆ํೖΕΔͱগ͠Ϋυ͍͜ͱ΋ɻ
    

    View Slide

27. Example #2
    ϑΣʔυΞ΢τΛ཈͑ͨྫɻഽײద੾ͳײ֮
    

    View Slide

28. Example #2
    ৽چͰͷಈ࡞ͷൺֱ
    

    View Slide

29. Example #2
    • ͦ΋ͦ΋ը໘͕ਅͬനͷ৔߹ͳͲ͸࠷
    ௿ݶϩΰͳͲ͸ਖ਼͘͠ද͓ࣔͯ͘͠
    • ͜͜΋࿙Ε΍͍͢ͷͰ஫ҙ
    • ௥ՃͰࢹ֮త FB ͕ඞཁͳ৔߹ʹ͸͜
    ͏͍ͬͨվળҊ΋ߟ͑Δ
    • ΋ͪΖΜ؅ཧγεςϜͳͲϊΠζͱ
    ͳΔ
    • Moneytree(Web)Ͱ΋Ξχϝʔγϣ
    ϯ & ϑΣʔυ͸࢖ΘΕ͍ͯΔഽײ
    

    View Slide

30. Example #2
    • ࠓճ͸σεΫτοϓ SPA ͷ૝ఆͩͬͨ
    ͕ɺϞόΠϧͳΒผͷΞϓϩʔν΋͋
    Δ
    • PWA Ͱಈ͔ͤΔͳΒ࠷௿ݶͷ
    manifest ͕͋Ε͹ىಈ࣌ͷ΋ͷ͸ଟ
    গఏڙ͞ΕΔ
    • App Shell ύλʔϯΛ࣮૷͢Δ
    • UI ͷϑϨʔϜͱίϯςϯπΛΘ͚
    ͯɺίϯςϯπΛ஗ԆಡΈࠐΈ
    • Web ։ൃऀͷҾ͖ग़͠΋׆༻͢Δ
    

    View Slide

31. Example #1
    FYI: App Shell ͸͜Μͳײ͡
    

    View Slide

32. Next Step
    • ࣮ફ͍ͯ͘͠৔߹͸σβΠϯؔ࿈ͷॻ੶Λோ
    ΊΔͱྑ͍
    • Ϣʔβʔͷૢ࡞ʹର͢ΔϑΟʔυόοΫʹ
    ͍ͭͯ͸ɺࠓ೔ͷϩʔυͷྫͷجʹ΋ͳͬ
    ͍ͯΔʮΠϯλʔϑΣʔεσβΠϯͷ࣮ફ
    ڭࣨʯ͕Φεεϝ
    • ࠓͰ͍͏ʮσβΠϯࢥߟʯʹ͍ۙ΋ͷֶ͕
    ͼ΍͍͢
    

    View Slide

33. Next Step
    • ͦͷ΄͔ɺ΋͏গ͠ϚΫϩͳࢹ఺Λಘ͍ͨ৔
    ߹͸ʮ༥͚ΔσβΠϯʯͳͲ΋ྑ͍
    • ΠϯλʔϑΣʔεͷ͜Ε·Ͱͱࠓͷঢ়گʹ
    ͍ͭͯ෯޿͘ॻ͔Ε͍ͯΔ
    • ݱঢ়ͷΩϟονΞοϓ΍ҰาҾ͍ͨ໨Ͱվ
    ΊͯσβΠϯΛߟ͑Δͱ͖ʹॏๅ͢Δ
    

    View Slide

34. Agenda
    1. ͸͡Ίʹ
    2. ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ
    3. ϑϩϯτΤϯυΤϯδχΞ͔ͩΒͦ͜Ͱ͖Δ͜ͱ
    4. ࣮ྫ͔ΒֶͿϑϩϯτΤϯυΤϯδχΞ͕Ͱ͖Δվળ
    5. ·ͱΊ
    

    View Slide

35. ·ͱΊ 1
    • ʮϑϩϯτΤϯυΤϯδχΞʯʹ͸ೋͭͷ੹຿͕ଘࡏ͢Δ
    • ΞϓϦέʔγϣϯσϕϩούͱͯ͠ͷίʔυΛकΔ੹຿
    • αʔϏεΛͭͬͯ͘Ώ͘ϝϯόʔͱͯ͠ͷମݧͷఏএ੹຿
    • ϑϩϯτΤϯυΤϯδχΞ͸໢ཏతɺ͋Δ͍͸ث༻ශ๡Ͱ͋Δ
    • ͦΕͧΕͷྖҬͷΤΩεύʔτʹ͸উͯͳ͍͜ͱΛ֮ࣗ͢Δ
    • ҰํͰΞϚνϡΞҎ্ʹ஌͕ࣝ͋Γɺֻ͚ࢉ͕ಘҙͱ֮ࣗ͢Δ
    • ্هΛҙ͍ࣝͯ͘͜͠ͱ͕ɺ৽ͨͳՁ஋ͱͳΔ
    

    View Slide

36. ·ͱΊ 2
    • ࣮ࡍͷମݧྫͷ঺հ
    • ϩʔσΟϯάͷվળγνϡΤʔγϣϯ
    • εϓϥογϡεΫϦʔϯ࣮૷ʹΑΔϩʔυετϨεͷ௿ݮ
    • ࣍ͷεςοϓ
    • σβΠϯܥɺಛʹ UI ͷݱ৔తͳ΋ͷΑΓɺσβΠϯࢥߟʹۙ
    ͍෦෼ΛΩϟονΞοϓ͍ͯ͘͠
    • ϓϩμΫτ։ൃʹదٓऔΓೖΕ͍ͯ͘
    

    View Slide

37. ʮϑϩϯτΤϯυʯ͕
    ͳͥઐ໳ྖҬͱͳͬͨͷ͔Λࢥ͍ग़ͦ͏
    

    View Slide