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

by @YutamaKotaro

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

ϓϩμΫτ঺հ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

େମͷαʔϏε֓ཁ

Slide 11

Slide 11 text

։ൃମ੍

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ͱ͜Μͳײ͡Ͱ ։ൃΛ͍ͯ͠·͢ɻ

Slide 15

Slide 15 text

ࠓ೔͸

Slide 16

Slide 16 text

ɾBJS$MPTFU  ͓٬༷޲͚ɻ J04 XFC ɾQJDLTT  ͓٬༷޲͚ˍελΠϦετ͞Μ޲͚ J04 "OESPJE XFC ࠓ೔࿩͢͜ͱ ͜ͷೋͭͷΞʔΩςΫνϟʹ͍ͭͯ ࿩͠·͢ʂ

Slide 17

Slide 17 text

BJS$MPTFUͷ ΞʔΩςΫτʹ͍ͭͯ

Slide 18

Slide 18 text

"1*  OPEFKT LPB  4FRVFMJ[F  8FC  TTS  SFEVYSFEVYUIVOL "QQT  SFBDU/BUJWF  SFEVYSFEVYTBHB BJS$MPTFUͷΞʔΩςΫνϟʔʹ͍ͭͯ جຊతʹɺFTMJOUɺNPDIBͱҰ෦QSFUUJFSɺqPXΛ࢖͍ͬͯΔɻ qPX͸UTʹஔ͖׵͑༧ఆɾɾɾͪΐͬͱ͕࣌ؒɾɾɾɻ

Slide 19

Slide 19 text

$JSDMF$*Ͱ FTMJOU qPX NPDIB ͷςετΛ௨͢ɻ ௨ͬͨΒϏϧυͯ͠4ʹΞοϓϩʔυ͢Δɻ BJS$MPTFUͷ$*ϑϩʔ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ϑϧ+4ελοΫ

Slide 23

Slide 23 text

ϑϧ+4Ͱ΍͍ͬͯ·͢ʂ

Slide 24

Slide 24 text

ϑϧ+4ͷϝϦοτ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

QJDLTTͰͷڞ༻Խ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

۩ମతʹͲ͏͍͏͜ͱ͔

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

QJDLTTͰͷڞ༻Խ $MJFOU"QQ $MJFOU"QJ $POTPMF $POTPMF"QJ 4UPDL "VUI ɾɾɾɾ ΞϓϦέʔγϣϯ͸αʔϏεΛݺ ͼग़͚ͩ͢ɻ ྫ͑͹ࡏݿαʔϏεʹࡏݿ͕͋Δ ͔Λ໰͍߹ΘͤΔྫɻ

Slide 32

Slide 32 text

Ͳ͏ڞ༗Խ͕ ߦͳΘΕ͍ͯΔ͔

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

ͱ·͊ɺ ϝϦοτ͹͔Γ఻͑ͯ·͕͢

Slide 39

Slide 39 text

ϑϧ+4ͷ ϝϦοτ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

·ͱΊ

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ