体験と設計 フロントエンドエンジニアの二つの責務について #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. 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
  2. 8.

    ͸͡Ίʹ • ࠓ೔ͷϑϩϯτΤϯυͷΤϯδχΞͷఆٛ • HTML / CSS (JSX ΍ Vue

    ςϯϓϨʔτͰ΋ྑ͍)ίʔσΟϯά • ඇ CSS ϑϨʔϜϫʔΫ • Ϟμϯ JavaScript ʹΑΔΞϓϦέʔγϣϯ։ൃ • ECMAScript / TypeScript Λར༻ͨ͠։ൃ • React / Vue / Angular ͳͲͷϑϨʔϜϫʔΫΛར༻ͨ͠։ൃ
  3. 10.

    ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ • Web ΞϓϦέʔγϣϯσϕϩούɾΞʔΩςΫτͱͯ࣋͠ଓՄ ೳͳ։ൃମ੍Λ࡞Γ্͛Δ੹຿ • ଟ͘ͷਓ͕͜ͷྖҬ͸ҙ͍ࣝͯ͠Δ • ʮϑϨʔϜϫʔΫΛ࢖͏ٕज़ʯ͸ίϞσΟςΟԽ͍ͯ͠Δ •

    ܦݧ͔Β͘Δةػҙࣝ΍ະདྷ༧஌ͱͦͷରࡦʹՁ஋͕͋Δ • UI ʹܞΘΔΏ͑ͷมߋͷଟ͞ͱɺͦͷͨΊͷઃܭ • ։ൃऀͷϨϕϧࠩҟΛٵऩ͢ΔΑ͏ͳΞʔΩςΫνϟઃܭ
  4. 11.

    ϑϩϯτΤϯυΤϯδχΞͷ੹຿ͷ෼ղ • αʔϏεఏڙऀͱͯ͠ɺΑΓΑ͍ମݧΛఏڙ͢Δ੹຿ • ຊ೔ͷϝΠϯ͸ͪ͜Β • FE ͸Ұ൪੡඼ͷΠϯλʔϑΣʔεΛ৮ΔਓؒͱͳΔ • (ͨ·ʹա৒ʹ൓Ԡͯ͠͠·͏͜ͱ΋͋Δ͕)

    FE ͷϢʔβʔମ ݧ্ͷෆຬ͸ଟ͘ͷ৔߹Ϣʔβʔ͕ར༻͢Δͱ͖ʹײ͡Δ • ͔ͩΒͦ͜ɺখ͞ͳϑϥετϨʔγϣϯͰ΋ଥڠ͠ͳ͍ • ੹೚ҙࣝΛ͍࣋ͬͯ͘ඞཁ͕͋Δ
  5. 14.

    FE ͔ͩΒͦ͜Ͱ͖Δ͜ͱ • ͦͷҰํͰɺͲͷྖҬ΋جૅ஌͕ࣝ͋Γɺֻ͚ࢉ͢Δ͜ͱ͕Ͱ͖ Δͱ͍͏ڧΈΛ͍࣋ͬͯΔ͜ͱ΋֮ࣗ͢Δ • e.g. Sketch Ͱ UI

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

    Example #1 • ࠓճ͸ೖྗ߲໨͕؆୯ͳ΋ͷΛ༻ҙ • ࣮ࡍͷ։ൃͰ͸ྫ͑͹ձһొ࿥ͳͲΛ ૝ఆ • ॏཁ౓ͷ௿͍ॲཧʹ͍ͭͯ͸ܰշʹ ಈ͘ͱମݧ͕ྑ͍

    • ͦͷҰํͰ͋·Γʹૣ͘׬݁͢Δ΋ ͷ͸ॲཧ͕׬͔ྃͨ͠Θ͔ΓͮΒ͍ ͱ͍͏՝୊͕͋Δ • ࠷௿ॲཧ࣌ؒͱॲཧ׬ྃޙͷΠϯλ ϥΫγϣϯΛ͚ͭͯ΍Δͱྑ͍
  7. 22.

    Example #1 • ࠓճͷ΋ͷ͸Ϩεϙϯε͕ߴ଎ͳ API Λ͋͑ͯଟগ஗Ԇͤ͞ΔςΫχοΫ • ٯʹ஗͍΋ͷΛૣ͘ݟͤΔͱ͖ʹ΋׆ ༻Ͱ͖Δ •

    API ઃܭͱ૬ஊͯ͠σʔλΛ෼ׂɺ ΤϯυϙΠϯτΛ૿΍͢ • ෼ׂͨ͠தͰΫϦςΟΧϧͳ෦෼ͩ ͚ΛࣄલʹಡΈɺޙ͸ஞ࣍ಡΈࠐΉ • ϩʔυͷऔΓѻ͍͸ SPA ։ൃͷΩϞ ͱͳΔ෦෼ͳͷͰɺద੾ͳܗΛߟ͑Δ
  8. 29.

    Example #2 • ͦ΋ͦ΋ը໘͕ਅͬനͷ৔߹ͳͲ͸࠷ ௿ݶϩΰͳͲ͸ਖ਼͘͠ද͓ࣔͯ͘͠ • ͜͜΋࿙Ε΍͍͢ͷͰ஫ҙ • ௥ՃͰࢹ֮త FB

    ͕ඞཁͳ৔߹ʹ͸͜ ͏͍ͬͨվળҊ΋ߟ͑Δ • ΋ͪΖΜ؅ཧγεςϜͳͲϊΠζͱ ͳΔ • Moneytree(Web)Ͱ΋Ξχϝʔγϣ ϯ & ϑΣʔυ͸࢖ΘΕ͍ͯΔഽײ
  9. 30.

    Example #2 • ࠓճ͸σεΫτοϓ SPA ͷ૝ఆͩͬͨ ͕ɺϞόΠϧͳΒผͷΞϓϩʔν΋͋ Δ • PWA

    Ͱಈ͔ͤΔͳΒ࠷௿ݶͷ manifest ͕͋Ε͹ىಈ࣌ͷ΋ͷ͸ଟ গఏڙ͞ΕΔ • App Shell ύλʔϯΛ࣮૷͢Δ • UI ͷϑϨʔϜͱίϯςϯπΛΘ͚ ͯɺίϯςϯπΛ஗ԆಡΈࠐΈ • Web ։ൃऀͷҾ͖ग़͠΋׆༻͢Δ
  10. 35.

    ·ͱΊ 1 • ʮϑϩϯτΤϯυΤϯδχΞʯʹ͸ೋͭͷ੹຿͕ଘࡏ͢Δ • ΞϓϦέʔγϣϯσϕϩούͱͯ͠ͷίʔυΛकΔ੹຿ • αʔϏεΛͭͬͯ͘Ώ͘ϝϯόʔͱͯ͠ͷମݧͷఏএ੹຿ • ϑϩϯτΤϯυΤϯδχΞ͸໢ཏతɺ͋Δ͍͸ث༻ශ๡Ͱ͋Δ

    • ͦΕͧΕͷྖҬͷΤΩεύʔτʹ͸উͯͳ͍͜ͱΛ֮ࣗ͢Δ • ҰํͰΞϚνϡΞҎ্ʹ஌͕ࣝ͋Γɺֻ͚ࢉ͕ಘҙͱ֮ࣗ͢Δ • ্هΛҙ͍ࣝͯ͘͜͠ͱ͕ɺ৽ͨͳՁ஋ͱͳΔ
  11. 36.

    ·ͱΊ 2 • ࣮ࡍͷମݧྫͷ঺հ • ϩʔσΟϯάͷվળγνϡΤʔγϣϯ • εϓϥογϡεΫϦʔϯ࣮૷ʹΑΔϩʔυετϨεͷ௿ݮ • ࣍ͷεςοϓ

    • σβΠϯܥɺಛʹ UI ͷݱ৔తͳ΋ͷΑΓɺσβΠϯࢥߟʹۙ ͍෦෼ΛΩϟονΞοϓ͍ͯ͘͠ • ϓϩμΫτ։ൃʹదٓऔΓೖΕ͍ͯ͘