Pro Yearly is on sale from $80 to $50! »

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

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

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

A54b31d4ebbce222dff88a5c42bac033?s=128

Potato4d(Hanatani Takuma)

March 15, 2019
Tweet

Transcript

  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. ʮϑϩϯτΤϯυʯ͕ ͳͥઐ໳ྖҬͱͳͬͨͷ͔Λࢥ͍ग़ͦ͏