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
500
フルJSアーキテクトで作るエアークローゼット
【LIG・エアークローゼット・DMM】3社のフロントエンド開発最新事情
@YutamaKotaro
November 13, 2018
Tweet
Share
More Decks by @YutamaKotaro
See All by @YutamaKotaro
0->1 現場におけるReactNative
yutamakotaro
0
130
ライブラリはしご酒
yutamakotaro
0
130
React + Valtio
yutamakotaro
0
110
My experience for 3 years with React Native
yutamakotaro
0
43
React Nativeと共に歩んだ3年間【TECH STAND #3】
yutamakotaro
1
1.2k
React Native Game Engine in React Native Tech Blog Event
yutamakotaro
1
1.5k
React Native Book
yutamakotaro
0
54
AWS Summit2019 airCloset section
yutamakotaro
1
200
タイタニック ロジスティック回帰
yutamakotaro
0
150
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Automating Front-end Workflow
addyosmani
1357
200k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
For a Future-Friendly Web
brad_frost
172
9k
A better future with KSS
kneath
231
16k
Bash Introduction
62gerente
605
210k
We Have a Design System, Now What?
morganepeng
43
6.8k
Facilitating Awesome Meetings
lara
43
5.6k
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ͷम࿅͕ߴ͍͕Ώ͑ ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ