Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フルJSアーキテクトで作るエアークローゼット
Search
@YutamaKotaro
November 13, 2018
2
590
フルJSアーキテクトで作るエアークローゼット
【LIG・エアークローゼット・DMM】3社のフロントエンド開発最新事情
@YutamaKotaro
November 13, 2018
Tweet
Share
More Decks by @YutamaKotaro
See All by @YutamaKotaro
0->1 現場におけるReactNative
yutamakotaro
0
230
ライブラリはしご酒
yutamakotaro
0
170
React + Valtio
yutamakotaro
0
120
My experience for 3 years with React Native
yutamakotaro
0
53
React Nativeと共に歩んだ3年間【TECH STAND #3】
yutamakotaro
1
1.3k
React Native Game Engine in React Native Tech Blog Event
yutamakotaro
1
1.9k
React Native Book
yutamakotaro
0
66
AWS Summit2019 airCloset section
yutamakotaro
1
220
タイタニック ロジスティック回帰
yutamakotaro
0
180
Featured
See All Featured
A better future with KSS
kneath
239
17k
Code Review Best Practice
trishagee
72
19k
The Cult of Friendly URLs
andyhume
79
6.6k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
A Tale of Four Properties
chriscoyier
160
23k
We Have a Design System, Now What?
morganepeng
53
7.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Making Projects Easy
brettharned
119
6.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
ϑϧ+4ΞʔΩςΫτ Ͱ࡞ΔBJS$MPTFU !:VUBNB,PUBSP +JNNZ
ΤΞʔΫϩʔθοτͷϛογϣϯ ʮൃʯͱʮ*5ʯͰ ਓʑͷৗʹ ৽͍͠ϫΫϫΫΛ͢Δ
ΦϯϥΠϯɾϑΝογϣϯϨϯλϧαʔϏεɹ BJS$MPTFU ΤΞʔΫϩʔθοτ w ϓϩͷελΠϦετ͕༸Λબఆ w ΫϦʔχϯάෆཁɺฦ٫ظݶͳ͠ w औΓѻ͍ϒϥϯυҎ্ w
ؾʹೖͬͨΒߪೖՄೳ αʔϏεհ
ϦΞϧɾϑΝογϣϯϨϯλϧγϣοϓ BJS$MPTFUʷ"#-& ΤΞʔΫϩʔθοτʷΤΠϒϧ w ύʔιφϧελΠϦϯάΛମݧՄೳ αʔϏεհ
ΦϯϥΠϯɾύʔιφϧγϣοϐϯάΞϓϦ QJDLTT ϐοΫε w ϓϩͷελΠϦετ͕༸Λબఆ w ͓ख࣋ͪͷΞΠςϜʹ߹ΘͤͯίʔσΟωʔτΛఏҊ w ࣗͰख࣋ͪͷ͓༸ͱ߹ΘͤͯࢼணՄೳ αʔϏεհ
גࣜձࣾΤΞʔΫϩʔθοτ ϓϩμΫτάϧʔϓ$"&νʔϜϦʔμʔ ϢʔλϚͨ͜Ζ͏ ࣗݾհ !:VUBNB,PUBSP
3FBDU/BUJWF͕ಘҙͳΤϯδχΞɻ ීஈΞϓϦέʔγϣϯͷΤϯδχΞ͚ͩͲɺ σʔλαΠΤϯεͷಓาΈதɻ ֶੜ࣌ͷੜଶֶݚڀͰͪΐͬͱษڧͨ͠ͷ Ͱ౷ܭֶͪΐͬͱಘҙɻ 42-ͱϚϤωʔζΞϨϧΪʔ ࣗݾհ
ϓϩμΫτհ
ɾBJS$MPTFUɿ ͓٬༷͚ɻ J04 "OESPJE XFC ɾBJS$MPTFUDPOTPMFɿ ελΠϦετ͞Μ͚ XFC
ɾBJS$MPTFU#BUDIɿ αʔϏεӡ༻༻ͷόον ɾQJDLTTɿ ͓٬༷͚ˍελΠϦετ͞Μ͚ J04 "OESPJE XFC େମͷαʔϏεਤ
େମͷαʔϏε֓ཁ
։ൃମ੍
$"&ʢˡͷͱ͜ʣ ͓٬༷͚ͷαʔϏεͷ։ൃɾӡ༻Λ୲͍ͬͯΔΤϯδχΞνʔϜɻ ϑϩϯτΤϯυΞϓϦ͕ಘҙͳਓׂ͕ͱଟ͍ɻ มͳਓ͕ଟ͍ɻ͔·͍͠ɻ̑ਓɻ #"& ελΠϦετ͞Μ͚ͳͲͷ͚ࣾͷ։ൃɾӡ༻Λ୲͍ͬͯΔΤϯδχΞνʔ ϜɻόοΫΤϯυಘҙͳਓׂ͕ͱଟ͍ɻ ࡾͷ൧ΑΓ42-ɻͨ·ʹ42-Ͱձͯ͠Δɻ̒ਓɻ ։ൃମ੍
$SFBUJWF σβΠφʔνʔϜɻXFCɺΞϓϦ͚ͩ͡Όͳ͘ɺ͓٬༷ʹૹΔಉࠝ ໊σβΠϯͯ͠Δɻ෯͍ɻ͜ͷεϥΠυ͓ئ͍ͨ͠ɻ̏ਓɻ %JSFDUJPO ͍ΘΏΔσΟϨΫγϣϯνʔϜɻਓɻ νʔϜ͚ͩͲɺࠓҰਓɻେมͦ͏ɻXBOUFE ։ൃମ੍
ͱ͜Μͳײ͡Ͱ ։ൃΛ͍ͯ͠·͢ɻ
ࠓ
ɾBJS$MPTFU ͓٬༷͚ɻ J04 XFC ɾQJDLTT ͓٬༷͚ˍελΠϦετ͞Μ͚ J04 "OESPJE XFC
ࠓ͢͜ͱ ͜ͷೋͭͷΞʔΩςΫνϟʹ͍ͭͯ ͠·͢ʂ
BJS$MPTFUͷ ΞʔΩςΫτʹ͍ͭͯ
"1* OPEFKT LPB 4FRVFMJ[F 8FC TTS SFEVY SFEVYUIVOL "QQT SFBDU/BUJWF
SFEVY SFEVYTBHB BJS$MPTFUͷΞʔΩςΫνϟʔʹ͍ͭͯ جຊతʹɺFTMJOUɺNPDIBͱҰ෦QSFUUJFSɺqPXΛ͍ͬͯΔɻ qPXUTʹஔ͖͑༧ఆɾɾɾͪΐͬͱ͕࣌ؒɾɾɾɻ
$JSDMF$*Ͱ FTMJOU qPX NPDIB ͷςετΛ௨͢ɻ ௨ͬͨΒϏϧυͯ͠4ʹΞοϓϩʔυ͢Δɻ BJS$MPTFUͷ$*ϑϩʔ
"OTJCMFͰ 4 &$ʹϦϦʔεɻ͍ͭͰʹ$MPVEGSPOUͷΩϟογϡ আ BJS$MPTFUͷϦϦʔεϑϩʔ
ͱ·͊ ͓͔Γ͍͚ͨͩͨ ͔͠Εͳ͍Ͱ͕͢ɺ
ϑϧ+4ελοΫ
ϑϧ+4Ͱ͍ͬͯ·͢ʂ
ϑϧ+4ͷϝϦοτ
ɾʮͰ͖ͳ͍ʯͱ͍͏͜ͱͳ͍ɻ ʔֶशίετ͕͍ɻ ʔΤσΟλʔπʔϧͳͲ͍·ΘͤΔɻ ʔނʹɺશһ͕ ɹɹϑϩϯτΤϯυɺόοΫΤϯυ྆ํͱ։ൃ ɹɹ͍ͯ͠Δɻ ʔφϨοδΛڞ༗͍͢͠ɻ ϑϧ+4ͷϝϦοτ
ɾʮ͑ͳ͍ʯͱ͍͏͜ͱ͋Μ·Γͳ͍ɻ ʔಉ͡ݴޠͷڧΈɻ ʔॲཧΛ·ͱΊ͑͢͞Εɺ ଞͷϓϩμΫτͰ͑Δɻ ʔ࣮ࡍʹ࣮ߦڥʹґଘ͢ΔॲཧϥΠϒϥϦʹ ؾΛ͏ඞཁ͕͋Δ͚Ͳɾɾɾɾ ϑϧ+4ͷϝϦοτ
QJDLTTͰͷڞ༻Խ
QJDLTTͰͷڞ༻Խ -FSOB NPOPSFQPπʔϧΛͬͯ NPOPSFQPʹ͍ͯ͠Δɻ ͓٬༷͚ͱ͚ࣾͷΞϓϦ έʔγϣϯ͕·ͱ·͍ͬͯΔɻ ։ൃ͢͠͞˕ɻ ɹڞ༗͢͠͞˕ $*ςετͷ࣌ؒ✖ɻ
۩ମతʹͲ͏͍͏͜ͱ͔
QJDLTTͰͷڞ༻Խ $MJFOU"QQ $MJFOU"QJ $POTPMF $POTPMF"QJ
4UPDL "VUI ɾɾɾɾ ͓٬༷͚ΞϓϦɿ$MJFOU ͚ࣾXFCɿ$POTPMF ࡏݿཧαʔϏεɿ4UPDL ೝূαʔϏεɿ"VUI ͱ͍ͬͨײ͡ʹΞϓϦέʔγϣϯ ͱαʔϏε͕͔Ε͍ͯΔɻ ͜Εશ͕ͯҰͭ ͷϦϙδτϦ
QJDLTTͰͷڞ༻Խ $MJFOU"QQ $MJFOU"QJ $POTPMF $POTPMF"QJ
4UPDL "VUI ɾɾɾɾ ΞϓϦέʔγϣϯαʔϏεΛݺ ͼग़͚ͩ͢ɻ ྫ͑ࡏݿαʔϏεʹࡏݿ͕͋Δ ͔Λ͍߹ΘͤΔྫɻ
Ͳ͏ڞ༗Խ͕ ߦͳΘΕ͍ͯΔ͔
QJDLTTͰͷར༻ྫ ࡏݿͷྫɻ QJDLTTελΠϦϯά͞ΕͨΛ ࢦఆʹ͓ಧ͚͢ΔࢼணαʔϏεɻ ελΠϦετ͞ΜΛࢦ໊͢Δ͜ͱ Ͱ͖Δɻ ࡏݿ͕͋Δʹ͓ಧ͚͢Δ͜ͱ͕ Ͱ͖Δɻ
QJDLTTͰͷར༻ྫ ࡏݿͷܾΊํ ొαΠζͷͷࡏݿ ൃૹઌ ελΠϦετ͞Μͷۭ͖ঢ়گ ɾɾɾɾͳͲͳͲ ࡉ͔ͳ͕݅ͨ͘͞Μ͋Δɻ
QJDLTTͰͷར༻ྫ ࡏݿαʔϏεઌ΄Ͳհͨ͠ଞʹ͚ࣾͷγε ςϜͰΘΕ͍ͯΔɻ ྫ͑ɺ ɹɾ$4͕͓٬༷ͷૹرΛมߋ͢Δ ɹɾ$4͕͓٬༷ͷૹՄೳΛ֬ೝ͢Δ ɹɾϓϩδΣΫτνʔϜ͕ࡏݿঢ়گΛ֬ೝ͢Δ ͳͲͷॲཧͰɺࡏݿαʔϏεΛݺͼग़͍ͯ͠Δɻ
TUPDL4FSWJDFΛ࡞ΕɺͲ͜Ͱ͑Δɻ ༷Λίʔυ͕ද͢Α͏ʹͳΔɻ ɹɹνʔϜҧ༷ͬͯΛ֬ೝ͠ͳͯ͘ྑ͘ͳΕΔ Ұճ࡞ΕΈΜͳͤɻ ޮతʹमਖ਼Ͱ͖ΔΑ͏ʹͳΔɻ XFCͱΞϓϦͰ ɹυϝΠϯϩδοΫͷڞ༗͍ͬͯͨ ࠓ69্ͷͨΊɺΞϓϦʹྗ͢Δ͜ͱʹ QJDLTTͰͷར༻ྫ
͞Βʹɺ༷Ճͨ࣌͠NPOPSFQP ɹͳͷͰී௨ʹॻ͖͑ͯɺ ɹ·ͱΊͯϓϧϦΫग़ͤΔɻ TVC.PEVMFͰͪΐͬͱେม͚ͩͲผϞδϡʔϧ ɹʹͳͬͯΔͱͬͱେมɻ ɹNPOPSFQPͩͱͦ͜ΒΜετϨεͳ͠ QJDLTTͰͷར༻ྫ
ͱ·͊ɺ ϝϦοτ͔Γ͑ͯ·͕͢
ϑϧ+4ͷ ϝϦοτ
ɾ͖Δɾɾɾɻ ɹɹͨ·ʹුؾͨ͘͠ͳΔɾɾɾɻ ɾٕज़म࿅͕ਐ·ͳ͍ɻ ɹɹ3FBDU/BUJWF͍ͬͯΔͱ͍͑ɺ ɹɹ0CKFDUJWF$ɺ4XJGUɺ+BWBɾɾɾ ɹɹͷࣝඞཁʹͳΔ͜ͱ͠͠ɻ ɹɹଞͷݴޠʹଞͷݴޠͷΑ͕͋ͬͨ͞Γɾɾɾɻ ϑϧ+4ͷσϝϦοτ
ɾύονϨϕϧͷΞϓσ͕͖͍ͭͱ͖ +4ʹݶͬͨͰͳͳ͍͔͚ͩͲɺ ϞδϡʔϧͷΞοϓσʔτ͕ૣ͍ˍϫΠϧυ͗͢Δ ɹύονϨϕϧͷΞϓσͰ৭ʑಈ͔ͳ͘ͳͬͨΓɾɾ ɹόʔδϣϯݻఆχΩʹͳΔ͔͠ɾɾɾɻ ɹ ϑϧ+4ͷσϝϦοτ
ͦͷଞ νʔϜϚωδϝϯτత ͳͱ͜Ζ
ɾϨϏϡʔׂͱີʹΔɻ ɹઃܭ֓೦ʹԊΘͳ͍࣮/( ظతʹ͍߹Λআ͖ɺ࠶ར༻͢ΔϞδϡʔϧ ɹͷςετΈͬͪΓॻ͘ɻ Ϛωδϝϯτ
ɾςετୈೋͷ༷ॻɻ༷͚ͩͰͳͦ͘ͷ ɹϞδϡʔϧͷ͍ํ͕։ൃऀʹΘ͔ΔΑ͏ʹ Ϛωδϝϯτ
ɾ৽͍ٕ͠ज़ͰऔΓ֎͠Մೳͳͷ ɹೖΕͯΈΔɻ ɹ෦త͔࣮ͭફతʹऔΓΜͰɺΑ͚Εશ໘త ɾ৽͍ٕ͠ज़ͰऔΓ֎͍͠͠ͷ ɹۛຯPSՄೳͳݶΓہॴతʹࢼ͢ Ϛωδϝϯτ
·ͱΊ
ɾϑϧ+4ΞʔΩςΫτ ɹૣ͍ʢ։ൃ͕ʣ ɹ͍҆ʢֶशίετ͕ʣ ɹඒຯ͍ʢίʔυڞ௨Խ͕ʣ ɾ/PEF3FBDU/BUJWF༏लͳͷͰ ɹ͔҆Ζ͏ѱ͔Ζ͏Ͱͳ͍ɻ ·ͱΊ
ɾ͚ͩͲɺຖಉ͡ͷ͔Γ৯ͯͨΒ͖Δ ҙ֎ͱ͍͚ͦ͏͚ͩͲຖমͱ͔ɻ ɾͦ͏͍ͬͨҙຯͰຯ͚Λม͑Δඞཁɻ ৽͍ٕ͠ज़ͷੵۃతಋೖɻ ɹٯʹ͜͏͍ͬͨ৽͍͠औΓΈΛΓ͍͢ ɹͱ͜Ζϑϧ+4ʹͯ͠+4ͷम࿅͕ߴ͍͕Ώ͑ ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ