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
React Nativeで開発するマルチプラットフォームアプリ
Search
Masayuki Iwai
October 13, 2017
Technology
3
390
React Nativeで開発するマルチプラットフォームアプリ
iOSDC 2017 Reject Conference
Masayuki Iwai
October 13, 2017
Tweet
Share
More Decks by Masayuki Iwai
See All by Masayuki Iwai
Recap Accessibility in WWDC 2019
myb
5
320
CodePushとReact Nativeで緊急OTAリリース!了解!🚑
myb
2
1.7k
Other Decks in Technology
See All in Technology
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
aeonpeople
0
220
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
990
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
470
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
250
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
300
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
170
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
1
210
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
3
510
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
2
280
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
9
2.7k
テストを軸にした生き残り術
kworkdev
PRO
0
190
Featured
See All Featured
Scaling GitHub
holman
463
140k
Making Projects Easy
brettharned
117
6.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Music & Morning Musume
bryan
46
6.8k
The Invisible Side of Design
smashingmag
301
51k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
187
54k
Code Review Best Practice
trishagee
70
19k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Transcript
3FBDU/BUJWFͰ ։ൃ͢ΔϚϧνϓϥοτϑΥʔϜΞϓϦ .BTBZVLJ*XBJ!NZC JPTEDSD
3FEVY 3FBDU/BUJWFͰ ։ൃ͢ΔϚϧνϓϥοτϑΥʔϜΞϓϦ .BTBZVLJ*XBJ!NZC JPTEDSD
ࣗݾհ ؠҪխ!NZC ϞόΠϧɾΞϓϦέʔγϣϯɾΤϯδχΞ !6OJUZ5FDIOPMPHJFT+BQBO ͦΕҎલ8FCσβΠϯɾ։ൃɺ'MBTIίϯ ςϯπ੍࡞ɺJ04ΞϓϦɺήʔϜ੍࡞ͳͲ ஶॻʹʮV(6*Ͱ͡ΊΔ6OJUZ6*σβΠϯ ͷڭՊॻʯ
3FBDU/BUJWF
6OJUZ.FFUVQ w 6OJUZϢʔβʔͷͨΊͷΠϕϯτ ΞϓϦʢϑϧ3FBDU/BUJWFʣ w طଘͷ6OJUZݝਓձٞͱ͍͏ ΠϕϯτใαΠτ͕ϕʔε w ݄J04"OESPJEϦϦʔε w
ઃܭʙϓϩτλΠϓ੍࡞ϲ݄ɺ J04࣮ αʔόʔ"1*Ͱϲ݄ɺ "OESPJE࣮ σόοάͰϲ݄
3FBDU/BUJWF ࠾༻ͷϞνϕʔγϣϯ
࣌ॳ಄ʜ w ϚϧνϓϥοτϑΥʔϜʢJ04"OESPJEʣ w ωΠςΟϒͷύϑΥʔϚϯεɺؾ͍͍࣋ͪૢ࡞ײ⚡ w ։ൃগਓʢ࣮࣭ਓ#ʣ ΠϕϯτΞϓϦʢ6OJUZ.FFUVQʣͷ੍࡞ʹ͋ͨͬͯ ϑϨʔϜϫʔΫΛݕ౼ʜ
$PSEPWBɺ5JUBOJVNͳͲݕ౼ ʢͪΖΜ6OJUZʣ w $PSEPWBΓ8FC7JFXϕʔεͳͷͰʜ w 5JUBOJVNҎલྲྀߦ͚ͬͯͨͲɺΦϫίϯײ͋Δʜ w 6OJUZΦʔόʔεϖοΫͳ্ɺ6*ͰωΠςΟϒͷύϑΥʔϚϯεग़ͳ͍ w
9BNBSJO'PSNT͜ͷͱ͖ଘࡏΛΒͳ͔ͬͨ
3FBDU/BUJWF w +BWB4DSJQU$PSF্Ͱಈ࡞͠ɺωΠςΟϒͷϏϡʔΛੜ ˠͭ·Γ΄΅ωΠςΟϒ w ίʔυͷେΛڞ༗ͭͭ͠ɺ֤ϓϥοτϑΥʔϜඪ४ͷ6*ʹ४ڌͰ͖Δ w 'BDFCPPL(SPVQ"QQͳͲͷ࣮͕͋Δ w 'BDFCPPLͷ044Ͱ҆৺ײ͕͋Δ
w ͜Ε͔ΒྲྀߦΓͦ͏ʂ
ͬ͘͟Γ3FBDU/BUJWF ʢ 3FEVYʣ
3FBDU w 'BDFCPPLͷ+BWB4DSJQUϥΠϒϥϦ ʢLʣ IUUQTSFBDUKTPSH w ίϯϙʔωϯτϕʔεͰ6*ʢϏϡʔʣΛߏங w +49εΫϦϓτதʹ%0.ͰϏϡʔΛهड़ w
QSPQTͱTUBUFʹج͍ͮͯSFOEFSؔͰ ϏϡʔΛඳը w QSPQTTUBUF͕มԽ͢Δͱɺࣗಈతʹ ϏϡʔͷࠩͷΈ͕࠶ඳը͞ΕΔ import React from 'react' class App extends React.Component { state = { label: 'It works!', } render() { return ( <div className="container"> <div className="content"> <h1 className="name"> {this.props.name} </h1> <p className="label"> {this.state.label} </p> </div> </div> ) } }
3FEVY w ঢ়ଶཧͷͨΊͷ+BWB4DSJQU ϥΠϒϥϦʢLʣ IUUQSFEVYKTPSH w σʔλͷྲྀΕΛํʹ͠ɺ ঢ়ଶͷอ࣋ͱߋ৽Λू ˠෳࡶͳΞϓϦέʔγϣϯͷ࣭ͱ ɹϝϯςφϯεੑͷ্
w 4XJGUքʹ͓͍ͯ3F4XJGUͱ࣮ͯ͠ ͞ΕΔͳͲɺͷΞʔΩςΫνϟ 4UPSF 6* ʢϏϡʔʣ "DUJPO 3FEVDFS %JTQBUDI ߋ৽ Πϕϯτ ߋ৽͞Εͨ4UBUF 4UBUF ʢঢ়ଶʣ
3FBDU 3FEVY w SFBDUSFEVY3FEVYͷ3FBDUόΠϯσΟϯάʢެࣜʣ IUUQTHJUIVCDPNSFBDUKTSFBDUSFEVY w 3FBDUίϯϙʔωϯτͷঢ়ଶʢQSPQTͱTUBUFʣʹΑͬͯϏϡʔΛඳը͢Δ ͷͰɺ૬ੑ͕ྑ͍ w $POUBJOFS$PNQPOFOUͱ1SFTFOUBUJPOBM$PNQPOFOU
$POUBJOFS$PNQPOFOU3FEVYͱ࿈ܞ͢Δ ʢ4UPSF͔Β4UBUFΛಘͨΓɺ"DUJPOΛEJTQBUDI͢Δʣ 1SFTFOUBUJPOBM$PNQPOFOU3FEVYʹؔ༩ͤͣɺQSPQTܦ༝ͰͷΈ σʔλΛड͚औΔʢϏϡʔͷඳըʹઐ೦ʣ
3FBDU/BUJWF w 3FBDUΛ༻͍ͯωΠςΟϒΞϓϦέʔγϣϯΛ࡞͢ΔͨΊͷϥΠϒϥϦ ʢLʣ IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF w J04"OESPJEʹରԠ .JDSPTPGUSFBDUOBUJWFXJOEPXTͰ8JOEPXTʢ68181'ʣʹରԠ w +BWB4DSJQU$PSF্Ͱಈ࡞͠ɺωΠςΟϒͷϏϡʔΛੜ
w ඪ४Ͱ7JFXɺ5FYUɺ*NBHFɺ4DSPMM7JFXͳͲͷίϯϙʔωϯτΛఏڙ
3FBDU/BUJWF import React from 'react' class App extends React.Component {
state = { label: 'It works!', } render() { return ( <div className="container"> <div className="content"> <h1 className="name"> {this.props.name} </h1> <p className="label"> {this.state.label} </p> </div> </div> ) } } import React from 'react' import { ScrollView, View, Text } from 'react- native' class App extends React.Component { state = { label: 'It works!', } render() { return ( <ScrollView style={styles.container}> <View style={styles.content}> <Text style={styles.name}> {this.props.name} </Text> <Text style={styles.label}> {this.state.label} </Text> </View> </ScrollView> ) } }
3FBDU/BUJWF ͕͜͜ྑ͍ʂ
ίϯϙʔωϯτϕʔε͕ྑ͍ w ίϯϙʔωϯτ୯ҐͰςετͰ͖Δ w ։ൃ͕ਐΜͰෳࡶʹͳͬͨ෦Λ ޙ͔ΒͰ͍͢͠ w ϑΝΠϧ໊ͰϓϥοτϑΥʔϜ͝ͱ ʹίϯϙʔωϯτΛಡΈ͚ΒΕΔ ˠʢྫʣ'PPJPTKTͱ'PPBOESPJEKT
import React from 'react' import { ScrollView, View, Text } from 'react-native' class App extends React.Component { state = { label: 'It works!', } render() { return ( <ScrollView style={styles.container}> <View style={styles.content}> <Text style={styles.name}> {this.props.name} </Text> <Text style={styles.label}> {this.state.label} </Text> </View> </ScrollView> ) } }
ίϯϙʔωϯτϕʔε͕ྑ͍ w ίϯϙʔωϯτ୯ҐͰςετͰ͖Δ w ։ൃ͕ਐΜͰෳࡶʹͳͬͨ෦Λ ޙ͔ΒͰ͍͢͠ w ϑΝΠϧ໊ͰϓϥοτϑΥʔϜ͝ͱ ʹίϯϙʔωϯτΛಡΈ͚ΒΕΔ ˠʢྫʣ'PPJPTKTͱ'PPBOESPJEKT
import React from 'react' import { ScrollView, View, Text } from 'react-native' class App extends React.Component { state = { label: 'It works!', } render() { return ( <ScrollView style={styles.container}> <View style={styles.content}> <Text style={styles.name}> {this.props.name} </Text> <Text style={styles.label}> {this.state.label} </Text> </View> </ScrollView> ) } }
ίϯϙʔωϯτϕʔε͕ྑ͍ w ίϯϙʔωϯτ୯ҐͰςετͰ͖Δ w ։ൃ͕ਐΜͰෳࡶʹͳͬͨ෦Λ ޙ͔ΒͰ͍͢͠ w ϑΝΠϧ໊ͰϓϥοτϑΥʔϜ͝ͱ ʹίϯϙʔωϯτΛಡΈ͚ΒΕΔ ˠʢྫʣ'PPJPTKTͱ'PPBOESPJEKT
import React from 'react' import { ScrollView } from 'react-native' import ContentView from 'ContentView' class App extends React.Component { state = { label: 'It works!', } render() { return ( <ScrollView style={styles.container}> <ContentView style={styles.content} name={this.props.name} label={this.state.label} /> </ScrollView> ) } }
'MFYCPYελΠϧγʔτͰࢥ͍௨ΓͷϨΠΞτ w 3FBDU/BUJWFͷϏϡʔͷϨΠΞτ 'MFYCPYʹجͮ͘ w "VUP-BZPVUͱҧ͍ɺ8FCతͳΞϓϩʔ νͰϨεϙϯγϒͳσβΠϯ͕Մೳ w ϏϡʔͷଐੑελΠϧγʔτͰهड़ ϨΠΞτʹؔ͢Δଐੑ
ʢqFY XJEUI IFJHIU NBSHJOFUDʣ ࢹ֮తͳଐੑ ʢCPSEFS8JEUI PQBDJUZFUDʣ
'MFYCPYελΠϧγʔτͰࢥ͍௨ΓͷϨΠΞτ w 3FBDU/BUJWFͷϏϡʔͷϨΠΞτ 'MFYCPYʹجͮ͘ w "VUP-BZPVUͱҧ͍ɺ8FCతͳΞϓϩʔ νͰϨεϙϯγϒͳσβΠϯ͕Մೳ w ϏϡʔͷଐੑελΠϧγʔτͰهड़ ϨΠΞτʹؔ͢Δଐੑ
ʢqFY XJEUI IFJHIU NBSHJOFUDʣ ࢹ֮తͳଐੑ ʢCPSEFS8JEUI PQBDJUZFUDʣ const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5fcff', }, label: { fontSize: 30, fontWeight: 'bold', color: '#262729', }, box: { justifyContent: 'center', alignItems: 'center', width: 100, height: 100, backgroundColor: '#f1f3f4', }, });
σόοά͍͢͠ w ࠶ϏϧυෆཁͰ㵰 3ͰKTCVOEMFΛϦϩʔυͰ͖ΔͷͰʢϒϥβײ֮ʣɺ τϥΠΤϥʔָ͕ ※σόοάϏϧυ w $ISPNF্Ͱಈ͘3FBDU/BUJWF%FCVHHFS͕ଐ ˠϒϨΠΫϙΠϯτுΕΔ͠ɺελοΫτϨʔεݟΒΕΔ w
SFEVYMPHHFSΛ͏ͱɺ"DUJPOʹΑͬͯมߋ͞ΕΔલޙͷ4UBUFΛݟΒΕΔ
3FBDU/BUJWFରԠͷύοέʔδͨ͘͞Μ w ๛ͳ+BWB4DSJQUϥΠϒϥϦΛར༻Ͱ͖ΔNPNFOUɺOVNFSBMFUD w ඪ४Ͱఏڙ͞Ε͍ͯͳ͍ػೳͰɺάάΔͱେύοέʔδ͕͋Δ ˠ4'4BGBSJ7JFX$POUSPMMFSɺJ#FBDPOɺ'JSFCBTFFUD w ͳͯ͘ɺωΠςΟϒϞδϡʔϧΛ؆୯ʹ࡞ΕΔ ˠ࠷ۙSFBDUOBUJWFTBGFBSFBͱ͍͏ϞδϡʔϧΛ࡞ͬͨ IUUQTHJUIVCDPNNJZBCJSFBDUOBUJWFTBGFBSFB
w ίϯϙʔωϯτϕʔε w ࢥ͍௨ΓͷϨΠΞτ w σόοά͍͢͠ w ύοέʔδͨ͘͞Μ
ͭ·Γɺ3FBDU/BUJWFͳΒ ಈ͘ͷΛૣ͘࡞ΕΔʂ
3FBDU/BUJWF ͕͜͜πϥΠʜʂ
+BWB4DSJQUΏ͑ͷͭΒΈ w ܕͷͳ͍ੈք ͱ͍͑5ZQF4DSJQU'MPX͕͋Δ KTϑΝΠϧͷ··ΞϊςʔγϣϯΛՃͰ͖ͯ ੩తʹνΣοΫͰ͖Δ'MPX͕͍͍ײ͡ όʔδϣϯͷΈ߹ΘͤʹΑͬͯΤϥʔʹ ͳͬͨΓͳΒͳ͔ͬͨΓ͢Δ͜ͱʜ w ࣗ༝͕ߴ͍͗ͯ͢ΖΜͳελΠϧͰॻ͚
ͪΌ͏ ։ൃϝϯόʔ͕૿͑ͨͱ͖͕৺ "JSCOC͕ެ։͍ͯ͠ΔελΠϧΨΠυΛ ϕʔεʹFTMJOUΛઃఆ IUUQTHJUIVCDPNBJSCOCKBWBTDSJQU import React from 'react' import { ScrollView } from 'react-native' import ContentView from 'ContentView' class App extends React.Component { state = { label: 10000, } render() { return ( <ScrollView style={styles.container}> <ContentView style={styles.content} name={this.props.name} label={this.state.label} /> </ScrollView> ) } }
+BWB4DSJQUΏ͑ͷͭΒΈ w ܕͷͳ͍ੈք ͱ͍͑5ZQF4DSJQU'MPX͕͋Δ KTϑΝΠϧͷ··ΞϊςʔγϣϯΛՃͰ͖ͯ ੩తʹνΣοΫͰ͖Δ'MPX͕͍͍ײ͡ όʔδϣϯͷΈ߹ΘͤʹΑͬͯΤϥʔʹ ͳͬͨΓͳΒͳ͔ͬͨΓ͢Δ͜ͱʜ w ࣗ༝͕ߴ͍͗ͯ͢ΖΜͳελΠϧͰॻ͚
ͪΌ͏ ։ൃϝϯόʔ͕૿͑ͨͱ͖͕৺ "JSCOC͕ެ։͍ͯ͠ΔελΠϧΨΠυΛ ϕʔεʹFTMJOUΛઃఆ IUUQTHJUIVCDPNBJSCOCKBWBTDSJQU import React from 'react' import { ScrollView } from 'react-native' import ContentView from 'ContentView' type Props = { name: string, // stringʢnullundefinedڐՄ͞Εͳ͍ʣ }; type State = { label: ?string, // stringʢnullڐՄʣ }; class App extends React.Component<Props, State> { state = { label: 10000, // ERROR!! } render(): React.Node { return ( <ScrollView style={styles.container}> <ContentView style={styles.content} name={this.props.name} label={this.state.label} /> </ScrollView> ) } }
όʔδϣϯΞοϓ͕ૣ͍ ͦͷ͏͑มߋଟ͍ w ͜ͷͰɺˠʢ݄ݱࡏ࠷৽ʣ w େମͷϚΠφʔόʔδϣϯΞοϓ#SFBLJOH$IBOHFTΛؚΜͰ͍Δ ͍ͬͯΔύοέʔδʹΑͬͯϏϧυΤϥʔʹͳΔ͜ͱ͋ΔͷͰɺ ͨ͠Γ13ૹͬͨΓʜ ͦͷ··ϝϯςφϯε͞Εͣʹ์ஔ͞ΕΔύοέʔδͪΖΜ͋Δʜ
ओཁͳίϯϙʔωϯτ͕݁ߏEFQSFDBUFEʹͳΔ w /BWJHBUPSͰEFQSFDBUFE /BWJHBUPS*04͍ͬͯΔ͕"OESPJEͰ͑ͳ͍ ެࣜͰSFBDUOBWJHBUJPOʢSFBDUDPNNVOJUZʣOBUJWFOBWJHBUJPO ʢ"JSCOCʣΛਪ w -JTU7JFXͰEFQSFDBUFE 'MBU-JTUɺ4FDUJPO-JTUʹҠߦ w
.BQ7JFXͰEFQSFDBUFE SFBDUOBUJWFNBQTʢ"JSCOCʣਪ
ྑ͘ѱ͘ 'BDFCPPLʹґଘ͍ͯ͠Δ w গ͠લʹ"QBDIF4PGUXBSF'PVOEBUJPO͕'BDFCPPLϓϩδΣΫτΛ ༻ېࢭʹͯ͠ʹͳ͍ͬͯͨ ϥΠηϯεͷ߲͕ʹͳ͍͕ͬͯͨɺઌ͋ΒͨΊͯ.*5ϥΠηϯεʹ͢Δͱ ൃද͞Εͯͻͱ҆৺ IUUQTDPEFGBDFCPPLDPNQPTUT
·ͱΊ
3FBDU/BUJWFʢ 3FEVYʣ • খنͳϓϩμΫτ͋Δ͍νʔϜͰͷϚϧνϓϥοτϑΥʔϜΞϓϦ։ൃʹ ࠷ద • ظؒͰಈ͘ͷ͕࡞ΕΔ - ϓϩτλΠϓ੍࡞ʹ •
ن͕େ͖͘ͳͬͯεέʔϧ͢Δ • ͕…৭ʑͱͭΒΈ͕ग़ͯ͘Δ • ͭΒΈΛΓӽ͑ͯؤுΔ͍ͧʂ
5IBOLZPV