Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フルJSアーキテクトで作るエアークローゼット

6aa82ed11ae69672aca9bff7e25d1044?s=47 @YutamaKotaro
November 13, 2018
410

 フルJSアーキテクトで作るエアークローゼット

【LIG・エアークローゼット・DMM】3社のフロントエンド開発最新事情

6aa82ed11ae69672aca9bff7e25d1044?s=128

@YutamaKotaro

November 13, 2018
Tweet

Transcript

  1. ϑϧ+4ΞʔΩςΫτ Ͱ࡞ΔBJS$MPTFU !:VUBNB,PUBSP +JNNZ

  2. ΤΞʔΫϩʔθοτͷϛογϣϯ ʮൃ૝ʯͱʮ*5ʯͰ ਓʑͷ೔ৗʹ ৽͍͠ϫΫϫΫΛ૑଄͢Δ

  3. ΦϯϥΠϯɾϑΝογϣϯϨϯλϧαʔϏεɹ BJS$MPTFU ΤΞʔΫϩʔθοτ w ϓϩͷελΠϦετ͕༸෰Λબఆ w ΫϦʔχϯάෆཁɺฦ٫ظݶͳ͠ w औΓѻ͍ϒϥϯυ͸Ҏ্ w

    ؾʹೖͬͨΒߪೖ΋Մೳ αʔϏε঺հ
  4. ϦΞϧɾϑΝογϣϯϨϯλϧγϣοϓ BJS$MPTFUʷ"#-& ΤΞʔΫϩʔθοτʷΤΠϒϧ w ύʔιφϧελΠϦϯάΛମݧՄೳ αʔϏε঺հ

  5. ΦϯϥΠϯɾύʔιφϧγϣοϐϯάΞϓϦ QJDLTT ϐοΫε w ϓϩͷελΠϦετ͕༸෰Λબఆ w ͓ख࣋ͪͷΞΠςϜʹ߹ΘͤͯίʔσΟωʔτΛఏҊ w ࣗ୐Ͱख࣋ͪͷ͓༸෰ͱ߹ΘͤͯࢼணՄೳ αʔϏε঺հ

  6. גࣜձࣾΤΞʔΫϩʔθοτ ϓϩμΫτάϧʔϓ$"&νʔϜϦʔμʔ ϢʔλϚͨ͜Ζ͏ ࣗݾ঺հ !:VUBNB,PUBSP

  7. 3FBDU/BUJWF͕ಘҙͳΤϯδχΞɻ ීஈ͸ΞϓϦέʔγϣϯͷΤϯδχΞ͚ͩͲɺ σʔλαΠΤϯεͷಓ΋าΈதɻ ֶੜ࣌୅ͷੜଶֶݚڀͰͪΐͬͱษڧͨ͠ͷ Ͱ౷ܭֶ͸ͪΐͬͱಘҙɻ 42-ͱϚϤωʔζΞϨϧΪʔ ࣗݾ঺հ

  8. ϓϩμΫτ঺հ

  9. ɾBJS$MPTFUɿ
 ͓٬༷޲͚ɻ J04 "OESPJE XFC  ɾBJS$MPTFUDPOTPMFɿ ελΠϦετ͞Μ޲͚ XFC 

    ɾBJS$MPTFU#BUDIɿ αʔϏεӡ༻༻ͷόον ɾQJDLTTɿ
 ͓٬༷޲͚ˍελΠϦετ͞Μ޲͚ J04 "OESPJE XFC  େମͷαʔϏεਤ
  10. େମͷαʔϏε֓ཁ

  11. ։ൃମ੍

  12. $"&ʢˡ๻ͷͱ͜ʣ  ͓٬༷޲͚ͷαʔϏεͷ։ൃɾӡ༻Λ୲͍ͬͯΔΤϯδχΞνʔϜɻ ϑϩϯτΤϯυ΍ΞϓϦ͕ಘҙͳਓׂ͕ͱଟ͍ɻ มͳਓ͕ଟ͍ɻ΍͔·͍͠ɻ̑ਓɻ #"& ελΠϦετ͞Μ޲͚ͳͲͷࣾ಺޲͚ͷ։ൃɾӡ༻Λ୲͍ͬͯΔΤϯδχΞνʔ ϜɻόοΫΤϯυಘҙͳਓׂ͕ͱଟ͍ɻ ࡾ౓ͷ൧ΑΓ42-ɻͨ·ʹ42-Ͱձ࿩ͯ͠Δɻ̒ਓɻ ։ൃମ੍

  13. $SFBUJWF σβΠφʔνʔϜɻXFCɺΞϓϦ͚ͩ͡Όͳ͘ɺ͓٬༷ʹૹΔಉࠝ෺΍ ໊ࢗ΋σβΠϯͯ͠Δɻ෯޿͍ɻ͜ͷεϥΠυ΋͓ئ͍ͨ͠ɻ̏ਓɻ %JSFDUJPO ͍ΘΏΔσΟϨΫγϣϯνʔϜɻਓɻ νʔϜ͚ͩͲɺࠓ͸Ұਓɻେมͦ͏ɻXBOUFE ։ൃମ੍

  14. ͱ͜Μͳײ͡Ͱ ։ൃΛ͍ͯ͠·͢ɻ

  15. ࠓ೔͸

  16. ɾBJS$MPTFU
 ͓٬༷޲͚ɻ J04 XFC  ɾQJDLTT
 ͓٬༷޲͚ˍελΠϦετ͞Μ޲͚ J04 "OESPJE XFC

     ࠓ೔࿩͢͜ͱ ͜ͷೋͭͷΞʔΩςΫνϟʹ͍ͭͯ ࿩͠·͢ʂ
  17. BJS$MPTFUͷ ΞʔΩςΫτʹ͍ͭͯ

  18. "1*
 OPEFKT LPB
 4FRVFMJ[F
 8FC
 TTS
 SFEVY SFEVYUIVOL "QQT
 SFBDU/BUJWF


    SFEVY SFEVYTBHB BJS$MPTFUͷΞʔΩςΫνϟʔʹ͍ͭͯ جຊతʹɺFTMJOUɺNPDIBͱҰ෦QSFUUJFSɺqPXΛ࢖͍ͬͯΔɻ qPX͸UTʹஔ͖׵͑༧ఆɾɾɾͪΐͬͱ͕࣌ؒɾɾɾɻ
  19. $JSDMF$*Ͱ FTMJOU qPX NPDIB ͷςετΛ௨͢ɻ ௨ͬͨΒϏϧυͯ͠4ʹΞοϓϩʔυ͢Δɻ BJS$MPTFUͷ$*ϑϩʔ

  20. "OTJCMFͰ 4 &$ʹϦϦʔεɻ͍ͭͰʹ$MPVEGSPOUͷΩϟογϡ ࡟আ BJS$MPTFUͷϦϦʔεϑϩʔ

  21. ͱ·͊ ͓෼͔Γ͍͚ͨͩͨ ͔΋͠Εͳ͍Ͱ͕͢ɺ

  22. ϑϧ+4ελοΫ

  23. ϑϧ+4Ͱ΍͍ͬͯ·͢ʂ

  24. ϑϧ+4ͷϝϦοτ

  25. ɾʮͰ͖ͳ͍ʯͱ͍͏͜ͱ͸ͳ͍ɻ ʔֶशίετ͕௿͍ɻ ʔΤσΟλʔ΍πʔϧͳͲ΋࢖͍·ΘͤΔɻ ʔނʹɺશһ͕ ɹɹϑϩϯτΤϯυɺόοΫΤϯυ྆ํͱ΋։ൃ ɹɹ͍ͯ͠Δɻ ʔφϨοδΛڞ༗͠΍͍͢ɻ ϑϧ+4ͷϝϦοτ

  26. ɾʮ࢖͑ͳ͍ʯͱ͍͏͜ͱ͸͋Μ·Γͳ͍ɻ ʔಉ͡ݴޠͷڧΈɻ ʔॲཧΛ·ͱΊ͑͢͞Ε͹ɺ ଞͷϓϩμΫτͰ΋࢖͑Δɻ ʔ࣮ࡍʹ͸࣮ߦ؀ڥʹґଘ͢Δॲཧ΍ϥΠϒϥϦʹ ؾΛ࢖͏ඞཁ͕͋Δ͚Ͳɾɾɾɾ ϑϧ+4ͷϝϦοτ

  27. QJDLTTͰͷڞ༻Խ

  28. QJDLTTͰͷڞ༻Խ -FSOB NPOPSFQPπʔϧΛ࢖ͬͯ
 NPOPSFQPʹ͍ͯ͠Δɻ ͓٬༷޲͚ͱࣾ಺޲͚ͷΞϓϦ έʔγϣϯ͕·ͱ·͍ͬͯΔɻ ։ൃ͠΍͢͞˕ɻ
 ɹڞ༗͠΍͢͞˕ $*ςετͷ࣌ؒ✖ɻ

  29. ۩ମతʹͲ͏͍͏͜ͱ͔

  30. QJDLTTͰͷڞ༻Խ  $MJFOU"QQ  $MJFOU"QJ  $POTPMF  $POTPMF"QJ 

    4UPDL  "VUI ɾɾɾɾ ͓٬༷޲͚ΞϓϦɿ$MJFOU ࣾ಺޲͚XFCɿ$POTPMF ࡏݿ؅ཧαʔϏεɿ4UPDL ೝূαʔϏεɿ"VUI ͱ͍ͬͨײ͡ʹΞϓϦέʔγϣϯ ͱαʔϏε͕෼͔Ε͍ͯΔɻ ͜Εશ͕ͯҰͭ
 ͷϦϙδτϦ
  31. QJDLTTͰͷڞ༻Խ  $MJFOU"QQ  $MJFOU"QJ  $POTPMF  $POTPMF"QJ 

    4UPDL  "VUI ɾɾɾɾ ΞϓϦέʔγϣϯ͸αʔϏεΛݺ ͼग़͚ͩ͢ɻ ྫ͑͹ࡏݿαʔϏεʹࡏݿ͕͋Δ ͔Λ໰͍߹ΘͤΔྫɻ
  32. Ͳ͏ڞ༗Խ͕ ߦͳΘΕ͍ͯΔ͔

  33. QJDLTTͰͷར༻ྫ ࡏݿͷྫɻ QJDLTT͸ελΠϦϯά͞Εͨ෰Λ ࢦఆ೔ʹ͓ಧ͚͢ΔࢼணαʔϏεɻ ελΠϦετ͞ΜΛࢦ໊͢Δ͜ͱ ΋Ͱ͖Δɻ ࡏݿ͕͋Δ೔ʹ͓ಧ͚͢Δ͜ͱ͕ Ͱ͖Δɻ

  34. QJDLTTͰͷར༻ྫ ࡏݿͷܾΊํ͸ ొ࿥αΠζͷ෰ͷࡏݿ ൃૹઌ ελΠϦετ͞Μͷۭ͖ঢ়گ ɾɾɾɾͳͲͳͲ ࡉ͔ͳ৚͕݅ͨ͘͞Μ͋Δɻ

  35. QJDLTTͰͷར༻ྫ ࡏݿαʔϏε͸ઌ΄Ͳ঺հͨ͠ଞʹࣾ಺޲͚ͷγε ςϜͰ΋࢖ΘΕ͍ͯΔɻ ྫ͑͹ɺ ɹɾ$4͕͓٬༷ͷ഑ૹر๬೔Λมߋ͢Δ ɹɾ$4͕͓٬༷΁ͷ഑ૹՄೳ೔Λ֬ೝ͢Δ ɹɾϓϩδΣΫτνʔϜ͕ࡏݿঢ়گΛ֬ೝ͢Δ ͳͲͷॲཧͰ͸ɺࡏݿαʔϏεΛݺͼग़͍ͯ͠Δɻ

  36. TUPDL4FSWJDFΛ࡞Ε͹ɺͲ͜Ͱ΋࢖͑Δɻ ࢓༷Λίʔυ͕ද͢Α͏ʹͳΔɻ ɹɹνʔϜҧͬͯ΋࢓༷Λ֬ೝ͠ͳͯ͘΋ྑ͘ͳΕΔ Ұճ࡞Ε͹ΈΜͳ޾ͤɻ ޮ཰తʹमਖ਼Ͱ͖ΔΑ͏ʹͳΔɻ XFCͱΞϓϦͰ ɹυϝΠϯϩδοΫͷڞ༗΋΍͍ͬͯͨ ࠓ͸69޲্ͷͨΊɺΞϓϦʹ஫ྗ͢Δ͜ͱʹ QJDLTTͰͷར༻ྫ

  37. ͞Βʹɺ࢓༷௥Ճͨ࣌͠΋NPOPSFQP ɹͳͷͰී௨ʹॻ͖׵͑ͯɺ ɹ·ͱΊͯϓϧϦΫग़ͤΔɻ TVC.PEVMFͰ΋ͪΐͬͱେม͚ͩͲผϞδϡʔϧ ɹʹͳͬͯΔͱ΋ͬͱେมɻ ɹNPOPSFQPͩͱͦ͜Β΁Μ͸ετϨεͳ͠ QJDLTTͰͷར༻ྫ

  38. ͱ·͊ɺ ϝϦοτ͹͔Γ఻͑ͯ·͕͢

  39. ϑϧ+4ͷ ϝϦοτ

  40. ɾ๞͖Δɾɾɾɻ ɹɹͨ·ʹ͸ුؾͨ͘͠΋ͳΔɾɾɾɻ ɾٕज़म࿅͕ਐ·ͳ͍ɻ ɹɹ3FBDU/BUJWF࢖͍ͬͯΔͱ͸͍͑ɺ ɹɹ0CKFDUJWF$ɺ4XJGUɺ+BWBɾɾɾ ɹɹͷ஌ࣝ͸ඞཁʹͳΔ͜ͱ΋͠͹͠͹ɻ ɹɹଞͷݴޠʹ͸ଞͷݴޠͷΑ͕͋ͬͨ͞Γɾɾɾɻ ϑϧ+4ͷσϝϦοτ

  41. ɾύονϨϕϧͷΞϓσ͕͖͍ͭͱ͖΋ +4ʹݶͬͨ࿩Ͱ͸ͳͳ͍͔΋͚ͩͲɺ ϞδϡʔϧͷΞοϓσʔτ͕ૣ͍ˍϫΠϧυ͗͢Δ ɹύονϨϕϧͷΞϓσͰ৭ʑಈ͔ͳ͘ͳͬͨΓɾɾ ɹόʔδϣϯݻఆχΩʹͳΔ͔͠ɾɾɾɻ ɹ ϑϧ+4ͷσϝϦοτ

  42. ͦͷଞ νʔϜϚωδϝϯτత ͳͱ͜Ζ

  43. ɾϨϏϡʔ͸ׂͱີʹ΍Δɻ ɹઃܭ֓೦ʹԊΘͳ͍࣮૷͸/( ظ೔తʹ΍͹͍৔߹Λআ͖ɺ࠶ར༻͢ΔϞδϡʔϧ ɹͷςετ͸ΈͬͪΓॻ͘ɻ  Ϛωδϝϯτ

  44. ɾςετ͸ୈೋͷ࢓༷ॻɻ࢓༷͚ͩͰͳͦ͘ͷ ɹϞδϡʔϧͷ࢖͍ํ͕։ൃऀʹΘ͔ΔΑ͏ʹ  Ϛωδϝϯτ

  45. ɾ৽͍ٕ͠ज़ͰऔΓ֎͠Մೳͳ΋ͷ͸ ɹೖΕͯΈΔɻ ɹ෦෼త͔࣮ͭફతʹऔΓ૊ΜͰɺΑ͚Ε͹શ໘త ɾ৽͍ٕ͠ज़ͰऔΓ֎͠೉͍͠΋ͷ͸ ɹۛຯPSՄೳͳݶΓہॴతʹࢼ͢ Ϛωδϝϯτ

  46. ·ͱΊ

  47. ɾϑϧ+4ΞʔΩςΫτ͸ ɹૣ͍ʢ։ൃ͕ʣ ɹ͍҆ʢֶशίετ͕ʣ ɹඒຯ͍ʢίʔυڞ௨Խ͕ʣ ɾ/PEF΍3FBDU/BUJWF΋༏लͳͷͰ ɹ͔҆Ζ͏ѱ͔Ζ͏Ͱ͸ͳ͍ɻ ·ͱΊ

  48. ɾ͚ͩͲɺຖ೔ಉ͡΋ͷ͹͔Γ৯΂ͯͨΒ๞͖Δ ҙ֎ͱ͍͚ͦ͏͚ͩͲຖ೔ম೑ͱ͔ɻ ɾͦ͏͍ͬͨҙຯͰຯ෇͚Λม͑Δ޻෉΋ඞཁɻ ৽͍ٕ͠ज़ͷੵۃతಋೖɻ ɹٯʹ͜͏͍ͬͨ৽͍͠औΓ૊ΈΛ΍Γ΍͍͢ ɹͱ͜Ζ΋ϑϧ+4ʹͯ͠+4ͷम࿅౓͕ߴ͍͕Ώ͑ ·ͱΊ

  49. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ