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
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
260
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
1
410
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
580
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1k
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
890
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Thoughts on Productivity
jonyablonski
70
4.8k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Invisible Side of Design
smashingmag
301
51k
Navigating Team Friction
lara
189
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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