デザイナーとエンジニアの垣根を超えたフロントエンド開発

Forkwellというサービスの開発について「デザイナーとエンジニアの垣根を超えたフロントエンド開発」という内容で発表させていただきました。
@ HTML5 APP CONFERENCE 2018

Transcript

1. 'PSLXFMM 
   
   )5.-
   "11
   $0/'&3&/$&
   
   σβΠφʔͱΤϯδχΞͷ֞ࠜΛ௒͑ͨ
   ϑϩϯτΤϯυ։ൃ ϦχϡʔΞϧͷཪଆ
2. גࣜձࣾHSPPWFTͷσβΠφʔɻ தݪ
   ැݟେ !GVNJ
   ΤϯδχΞͷ੒௕Λαϙʔτ͢ΔαʔϏε
   ʮ'PSLXFMMʯͷ։ൃʹܞΘͬͯ·͢ɻ ࣗݾ঺հ
3. ࠓճ͓࿩͢Δ಺༰ ໨࣍ 
   શһͰਐΊΔϑϩϯτΤϯυ։ൃ 
   6*σβΠϯͰଥڠ͠ͳ͍
4. 
   'PSLXFMMʹ͍ͭͯ
5. 'PSLXFMMͱ͸ʁ 'PSLXFMM͸
   ੒௕͠ଓ͚ΔΤϯδχΞ
 Λࢧԉ͢ΔαʔϏεͰ͢ɻ
   ɾస৬ࢧԉ ɾϙʔτϑΥϦΦ IUUQTGPSLXFMMDPN
6. 'PSLXFMMͱ͸ʁ 'PSLXFMM͸
   ੒௕͠ଓ͚ΔΤϯδχΞ
 Λࢧԉ͢ΔαʔϏεͰ͢ɻ
   ɾస৬ࢧԉ ɾϙʔτϑΥϦΦ
   ˡ
   3FOFXBM IUUQTGPSLXFMMDPN
7. 'PSLXFMMϙʔτϑΥϦΦ͸
   *5ΤϯδχΞͷͨΊͷ ੒௕ʹͭͳ͕Δ
   ΦʔϓϯͳϙʔτϑΥϦΦ Λ໨ࢦͯ͠࡞Γ·ͨ͠ɻ
   ʢ͋Γͦ͏Ͱҙ֎ͱͳ͍ʣ 'PSLXFMMͱ͸ʁ
8. *5ΤϯδχΞͷͨΊͷΦʔϓϯͳϙʔτϑΥϦΦ ɾࣗݾ঺հαΠτͱͯ͠ʢษڧձɺస৬ʣ ɾଞਓͱൺֱʢଞͷਓ͸ͲΜͳײ͡ʁʣ ɾࠓޙͳΓ͍ͨ࢟Λߟ͑Δʢ্࢘ͱͷPOʣ ࠓޙ΋༷ʑͳػೳΛ௥Ճ͍͖ͯ͠·͢ʂ 'PSLXFMMͱ͸ʁ
9. 
   
   6*։ൃ΋खΛൈ͚ͳ͍ɻ ΑΓଟ͘ͷ*5ΤϯδχΞʹ
   
   
   ࢖ͬͯ΋Β͏ͨΊɺ
10. ࠓճͷϦχϡʔΞϧʹ͋ͨͬͯɺ
    ͲͷΑ͏ʹνʔϜશମͰ6*։ൃʹऔΓ૊Μͩͷ͔
    ͓࿩͍͖ͤͯͨͩ͞·͢ɻ ͳʹ͔গ͠Ͱ΋ࢀߟʹͳΔ৘ใ͕͋Ε͹޾͍Ͱ͢ʜ
11. ̍
    શһͰਐΊΔϑϩϯτΤϯυ։ൃ
12. 'PSLXFMM։ൃνʔϜ ޾͔ෆ޾͔
    ։ൃϝϯόʔશһ͕+BWB4DSJQUΛ
    ॻ͘νʔϜ
13. 'PSLXFMM։ൃνʔϜ ΤϯδχΞ
    ໊ σβΠφʔ
    ໊ "
    ϓϩμΫτϚωʔδϟʔͱ։ൃΛ݉ͶΔϝΨω #
    ύϑΥʔϚϯεվળʹ໨Λ഑ΔϝΨω ϝϯόʔ঺հʢࡶʣ $
    Πϯϑϥ΋ϑϩϯτΤϯυ΋͜ͳ͢ϝΨω
 %
    σβΠϯˍϑϩϯτΤϯυʹ΋ৄ͍͠ϝΨω &
    ࢲɻ6*σβΠϯˍ࣮૷ΛϝΠϯͰ୲౰͢ΔϝΨω
14. Ͳ͏΍ͬͯ΍͍ͬͯΔͷ͔ʁ
    ϝϦοτ͸ʁ શһͰϑϩϯτΤϯυ։ൃ
15. ϑϩϯτΤϯυʹҰ൪ৄ͍͠σβΠφʔʢ%͞Μʣ͕
    ཰ઌͯ͠؀ڥΛ੔͑ͨ
 શһͰϑϩϯτΤϯυ։ൃ 
    ϦχϡʔΞϧϓϩδΣΫτҎલͷऔΓ૊Έ
16. 'PSLXFMMελΠϧΨΠυͷ࡞੒ 3BJMTΞϓϦέʔγϣϯͰͷ؀ڥߏங ։ൃʹඞཁͳϥΠϒϥϦΛ࡞੒ˠ )BNM
    4"44
    3FBDU
    ʹΑΔελΠϧΨΠυͰ6*࣮૷ͷޮ཰Խ ΤϯδχΞͱڠྗ͠ͳ͕ΒߏஙΛ͢͢Ίͨ
    &4 #BCFM
    8FCQBDL 8FCQBDLFS
    3FBDU 3FBDU3BJMT
    .PDIB &O[ZNF
    શһͰϑϩϯτΤϯυ։ൃ %͞Μ ੵۃతʹ৘ใڞ༗ɺஸೡʹϨϏϡʔ
17. 3FEVY͕ΦʔόʔεϖοΫͳͷͰ
    ίϯϙʔωϯτ୯ҐͰ4UBUF؅ཧͰ͖ΔίϯϙʔωϯτΛ࡞੒ શһͰϑϩϯτΤϯυ։ൃ
18. શһͰϑϩϯτΤϯυ։ൃ 
    શһ͕ܞΘΔ͜ͱͷڧΈ ྫʣࣗಈੜ੒ϓϩϑΟʔϧͷ
    දࣔίϯϙʔωϯτ࡞੒ͷྲྀΕ
19. 
    ԾσʔλͰࢲʢσβΠφʔʣ͕ϕʔεͱͳΔ3FBDUίϯϙʔωϯτΛ࡞੒
    ɹ
    ˠઃܭͨ͠ਓ͕·ͣݟͨ໨Λ࡞ͬͯ͠·͏ શһͰϑϩϯτΤϯυ։ൃ ίϯϙʔωϯτ࣮૷ͷྲྀΕ 
    ΤϯδχΞ͕αʔόʔαΠυ͔ΒσʔλΛ౉͢
    ɹ
    ˍදࣔ಺༰Λ૊ΈཱͯΔ෦෼Λ࣮૷ 
    ϑϩϯτΤϯυಘҙͳσβΠφʔΛத৺ʹ
    ɹ
    ϝϯόʔΈΜͳͰϨϏϡʔ
20. શһͰϑϩϯτΤϯυ։ൃ શһ͕ϑϩϯτΤϯυ΁ͷཧղΛ͓࣋ͬͯ͘͜ͱͰ
    ͦΕͧΕͷڧΈΛ׆͔ͯ͠ޮ཰తͳ6*։ൃ͕Ͱ͖Δ 'SPOUFOE 6*
    %FTJHO 4FSWFS
    4JEF
21. ɾͦͷࣄฑʹੵۃతͳϦʔμʔ ·ͱΊ
    ͦͷ ɾҰॹʹऔΓ૊ΜͰ͘ΕΔϑΥϩϫʔ ΍Γ͍ͨਓ͕Ի಄ΛͱΔͱεϜʔζɻ੹೚͸νʔϜͰͱΔɻ
 ϑΥϩϫʔ͕͍ͳ͍ͱػೳɾλεΫ͕ଐਓԽ͢Δɻ
    ΈΜͳ͕ੵۃతͰͳͯ͘΋͍͍ɺಋೖ΁ͷ߹ҙ͕ඞཁɻ શһͰϑϩϯτΤϯυ։ൃ ཰ઌ͢ΔϦʔμʔˍϑΥϩʔ͢ΔϝϯόʔͲͪΒ΋େࣄ
22. ɾຎࡲ͕ੜ͡ʹ͍͘ ·ͱΊ
    ͦͷ ɾαʔϏεઃܭͷٞ࿦͕ਂ·Δ ڞ௨ཧղ͕͋ΔͨΊɺ͍ΘΏΔσβΠφʔΤϯδχΞରཱͷΑ͏ͳ
    ໰୊͕ൃੜ͠ʹ͍͘
    6*࣮૷ʹશһ͕ؔΘΔ͜ͱͰɺαʔϏεઃܭʢ69ʣͷٞ࿦͕ਂ·Δ ͔ͭ۩ମతͳ࣮૷ઃܭ·Ͱ͢͹΍͘མͱ͠ࠐΉ͜ͱ͕Ͱ͖Δ શһͰϑϩϯτΤϯυ։ൃ αʔϏεʢ։ൃʣͷํ޲ੑ͕ఆΊ΍͍͢
23. 
    6*σβΠϯͰଥڠ͠ͳ͍
24. ɾΞ΢τϓοτͷެ։Λָʹ͍ͨ͠ 6*Ͱଥڠ͠ͳ͍͜ͱ ϙʔτϑΥϦΦͷ6*Ͱ໨ࢦͨ͜͠ͱ ɾΤϯδχΞʹ΋ྑ͍ҹ৅Λ࣋ͬͯ΋Β͑Δ6*σβΠϯ ɾଥڠͷͳ͍σβΠϯΛ໨ࢦ͢ 344ɺϦϙδτϦɺεϥΠυͳͲΛखܰʹ·ͱΊͯެ։Ͱ͖ΔΑ͏ʹ γϯϓϧʹɺ͔ͭҹ৅ʹ࢒Δݟͨ໨ʢΧϥʔɺΩϟϥΫλʔʣ
25. ɾΞ΢τϓοτͷެ։Λָʹ͍ͨ͠ ϙʔτϑΥϦΦͷ6*Ͱ໨ࢦͨ͜͠ͱ ɾΤϯδχΞʹ΋ྑ͍ҹ৅Λ࣋ͬͯ΋Β͑Δ6*σβΠϯ ɾଥڠͷͳ͍σβΠϯΛ໨ࢦ͢ʁ 344ɺϦϙδτϦɺεϥΠυͳͲΛखܰʹ·ͱΊͯެ։Ͱ͖ΔΑ͏ʹ γϯϓϧʹɺ͔ͭҹ৅ʹ࢒Δݟͨ໨ʢΧϥʔɺΩϟϥΫλʔʣ 6*Ͱଥڠ͠ͳ͍͜ͱ
26. ʺ ଥڠͷͳ͍σβΠϯ ׬ᘳͳσβΠϯ 6*Ͱଥڠ͠ͳ͍͜ͱ
27. ʹ ଥڠͷͳ͍σβΠϯ Ձ஋ݕূ͕Ͱ͖Δ
    ϨϕϧͷσβΠϯ 6*Ͱଥڠ͠ͳ͍͜ͱ
28. ʮͱʹ͔͘ૣ͘ϦϦʔεͯ͠ɺϢʔβʔͷ൓ԠΛΈΑ͏ʯ 6*Ͱଥڠ͠ͳ͍͜ͱ աڈͷࢲୡ Ͱ͖Δͱ͜·ͰɺͰϦϦʔε
29. ͲͪΒ͔൑அͰ͖ͳ͍ʜ
    ˣ
    Ձ஋ݕূ͕Ͱ͖ͳ͍ʂ ࢥͬͨΑ͏ͳ൓Ԡ͕ͳ͔ͬͨ৔߹ʜ "
    ఏڙͨ͠ػೳʹ
    Ձ஋Λײͯ͡΋Β͑ͳ͔ͬͨɻ #
    6*͕࢖͍ͮΒ͍ͨΊɺՁ஋͕
    Ϣʔβʔʹ఻ΘΒͳ͔ͬͨɻ PS 6*Ͱଥڠ͠ͳ͍͜ͱ
30. ࠷খػೳ͕໰୊ͳ͘࢖͑ΔϨϕϧͷ6*ʢ.71ʣͱ͸ɺ ɾϓϩϑΟʔϧΛ҆৺ͯ͠ΈΜͳʹެ։Ͱ͖Δ
    ɾ(JU)VC΍ϒϩά΍εϥΠυαʔϏεͱ࿈ܞͯ͠ΞϐʔϧͰ͖Δ ৽نϢʔβʔ͕͜ͷػೳΛ໰୊ͳ͘࢖͑Δ͜ͱɺͦ͜͸ଥڠ͠ͳ͍ɻ 6*Ͱଥڠ͠ͳ͍͜ͱ
31. ͱ͸͍͑࣌ؒʹ੍ݶ΋͋ΔʜՁ஋͕Ϣʔβʔʹಧ͘͜ͱ͕ୈҰ ɾຊ౰͸"KBYͰߋ৽͍͚ͨ͠Ͳɺී௨ͷTVCNJUͰՁ஋͸ఏڙͰ͖Δ ɾਤ΍ΞχϝʔγϣϯΛ࢖ͬͯઆ໌͍͚ͨ͠ͲɺςΩετͰ΋఻ΘΔ 6*Ͱଥڠ͠ͳ͍͜ͱ
32. #FGPSFɿʮͰ͖Δ͜ͱʯʮͦͷͨΊʹ͢Δ͜ͱʯ͕Θ͔Βͳ͍ʜ 6*Ͱଥڠ͠ͳ͍͜ͱ
33. 6*Ͱଥڠ͠ͳ͍͜ͱ /PXɿΘ͔Γ΍͘͢͸ͳ͍ɺͨͩ͠ʮͰ͖Δ͜ͱʯʮͦͷϝϦοτʯ͸ඞͣ఻͑Δ
34. ଥڠ͠ͳ͍ͨΊʹ
    ͦͷ̍ 6*σβΠϯϞοΫͷϨϏϡʔ 6*Ͱଥڠ͠ͳ͍͜ͱ ɾσβΠφʔ͔ΒͷϨϏϡʔ Θ͔Γ΍͢͞ɾ఻ΘΓ΍͢͞ɺσβΠϯͷόϥϯεʢݟͨ໨ʣ ɾΤϯδχΞ͔ΒͷϨϏϡʔ λʔήοτͱͯ͠ͷࢹ఺ɺ࣮૷͠΍͢͞ɺψέϞϨͷνΣοΫ
35. ଥڠ͠ͳ͍ͨΊʹ
    ͦͷ̍ 6*σβΠϯϞοΫͷϨϏϡʔ 6*Ͱଥڠ͠ͳ͍͜ͱ ɾޮ཰తˍޮՌͷ͋ΔϨϏϡʔํ๏Λ୳Δ 6*σβΠϯҊΛݟͳ͕ΒͷϨϏϡʔձ πʔϧΛ࢖ͬͨඇಉظϨϏϡʔʢྫɿ*O7JTJPOʣ ࣮૷ͪ͠Όͬͯ(JU)VC্ͰίʔυˍσβΠϯϨϏϡʔ υοάϑʔσΟϯάձ
36. ɾϨϏϡϫʔͷ৺ߏ͑ ଥڠ͠ͳ͍ͨΊʹ
    ͦͷ ϨϏϡʔΛؾܰʹґཔͰ͖Δۭؾͮ͘Γ ୲౰ऀ΁ͷϦεϖΫτɻ࡞ͬͨਓ΁ͷܟҙɻ ࢦఠͰ͸ͳ͘ఏҊͬͯߟ͑Δͷྑ͘ͳ͍Ͱ͔͢ʁ
    ɾϨϏϡΠʔͷ৺ߏ͑ ϨϏϡʔͱ͸ਓͰ͸ͳ͘Ξ΢τϓοτʹରͯ͠ͷ΋ͷ ֆจࣈͷྑ͞ ͓͢͢Ίຊɿ ΈΜͳͰ͸͡ΊΔσβΠϯ൷ධ
    6*Ͱଥڠ͠ͳ͍͜ͱ
37. ɾσβΠφʔ͕࣮૷·Ͱ୲౰͢Δ৔߹ʢࠓճͷࢲʣ ଥڠ͠ͳ͍ͨΊʹ
    ͓·͚ σβΠϯϞοΫΞοϓ͸Ͳ͜·Ͱ࡞ΓࠐΉͷ͔ʁ ࢲ͸࣮૷·Ͱ୲౰͢ΔͷͰɺਖ਼ৗܥʢجຊύλʔϯʣ͕Ͱ͖͍ͯΕ͹
    ͋ͱ͸࣮૷ͰΧόʔ͢Δ৔߹͕ଟ͍ ΞχϝʔγϣϯͳΜ͔΋ίϝϯτͰදݱ͢ΔͷΈ ɾσβΠφʔ͕࣮૷ʹ͔͔ΘΒͳ͍৔߹ ༷ʑͳঢ়گͷϞοΫΞοϓΛ࡞͓ͬͯ͘ඞཁ͕͋Γͦ͏ ϓϩτλΠϓͷ࡞੒΍ৄࡉͳࢿྉʢ;FQMJO౳ʣΛར༻͢Δ΄͏͕͍͍৔߹΋ 6*Ͱଥڠ͠ͳ͍͜ͱ
38. ଥڠ͠ͳ͍ࣄͷҙຯ΍ํ๏͸ͳΜͱͳ͘Θ͔͚ͬͨͲʜ 6*Ͱଥڠ͠ͳ͍͜ͱ σβΠϯ൑அͬͯ೉͘͠Ͷʁʂʁʁ ҙݟͷ૬ҧɺͲ͜·Ͱ͕ଥڠͳͷ͔ʁɺͳͲͳͲ Α࣭͘໰͞ΕΔ͜ͱ
39. ɾσβΠϯ͸σβΠφʔ͕੹೚Λ࣋ͭ ·ͱΊ σβΠϯʢ6*ʣΛ࡞Δͷ͕σβΠφʔͰ͸ͳ͍ɻ
    ੈʹग़͢Ξ΢τϓοτʹ੹೚Λ࣋ͭͷ͕ओͳ໾ׂɻ ҆৺͍ͯͩ͘͠͞ɺͦͷͨΊʹσβΠφʔ͕͍·͢Α 6*Ͱଥڠ͠ͳ͍͜ͱ %#ઃܭ΍ΠϯϑϥʹΤϯδχΞ͕ࡋྔΛ࣋ͭͷͱಉ͡ɻ
    σβΠϯʹ͍ͭͯ͸σβΠφʔʹ͓೚͍ͤͩ͘͞ɻ
40. શһͰਐΊΔϑϩϯτΤϯυ։ൃ ࠓ೔ͷ·ͱΊ ɾ཰ઌ͢ΔϦʔμʔˍϑΥϩʔ͢ΔϝϯόʔͲͪΒ΋େࣄ 6*Ͱଥڠ͠ͳ͍͜ͱ 6*σβΠϯͰଥڠ͠ͳ͍ ɾαʔϏεʢ։ൃʣͷํ޲ੑ͕ఆΊ΍͍͢ ɾՁ஋ݕূ͕Ͱ͖ΔϨϕϧ·Ͱଥڠ͠ͳ͍ ɾઐ໳ՈͰ͋ΔσβΠφʔΛத৺ʹ
41. ࠓޙ΋νʔϜͷΈΜͳͰվળΛਐΊ͍͖ͯ·͢ɻ ΋͠͝ҙݟͳͲ͋Γ·ͨ͠Β
    'PSLXFMMϖʔδ΁ͷ͓໰͍߹Θͤ΍
    5XJUUFSͳͲͰ͝࿈བྷ͍͚ͨͩΔͱخ͍͠Ͱ͢ʂ ࠷ޙʹ IUUQTQPSUGPMJPGPSLXFMMDPN IUUQTUXJUUFSDPN'PSLXFMM@KB
42. ͓ΘΓ