Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
フルJSアーキテクトで作るエアークローゼット
Search
@YutamaKotaro
November 13, 2018
650
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
フルJSアーキテクトで作るエアークローゼット
【LIG・エアークローゼット・DMM】3社のフロントエンド開発最新事情
@YutamaKotaro
November 13, 2018
More Decks by @YutamaKotaro
See All by @YutamaKotaro
0->1 現場におけるReactNative
yutamakotaro
0
270
ライブラリはしご酒
yutamakotaro
0
210
React + Valtio
yutamakotaro
0
150
My experience for 3 years with React Native
yutamakotaro
0
92
React Nativeと共に歩んだ3年間【TECH STAND #3】
yutamakotaro
1
1.4k
React Native Game Engine in React Native Tech Blog Event
yutamakotaro
1
2.1k
React Native Book
yutamakotaro
0
100
AWS Summit2019 airCloset section
yutamakotaro
1
250
タイタニック ロジスティック回帰
yutamakotaro
0
200
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.9k
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
510
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
2
2k
Building AI with AI
inesmontani
PRO
1
1.3k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
620
Typedesign – Prime Four
hannesfritz
42
3.2k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Designing for Performance
lara
612
70k
Documentation Writing (for coders)
carmenintech
77
5.6k
The SEO identity crisis: Don't let AI make you average
varn
0
580
Measuring & Analyzing Core Web Vitals
bluesmoon
9
1k
Scaling GitHub
holman
464
140k
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ͷम࿅͕ߴ͍͕Ώ͑ ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ