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
370
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
270
CodePushとReact Nativeで緊急OTAリリース!了解!🚑
myb
2
1.5k
Other Decks in Technology
See All in Technology
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
AWSでRAGを作る法方
sonoda_mj
1
140
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
720
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
120
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
270
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Building Adaptive Systems
keathley
34
2k
Become a Pro
speakerdeck
PRO
15
4.8k
How GitHub (no longer) Works
holman
305
140k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Thoughts on Productivity
jonyablonski
64
4.1k
Bash Introduction
62gerente
607
210k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Gamification - CAS2011
davidbonilla
78
4.9k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
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