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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

https://github.com/potato4d

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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