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
データエンジニアリング 4年前と変わったこと、 4年前と変わらないこと
tanakarian
1
130
M365アカウント侵害時の初動対応
lhazy
0
210
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
150
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
820
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
1
270
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
560
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
3.3k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
26
7.3k
Digitization部 紹介資料
sansan33
PRO
1
4.6k
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
430
室長の逆襲 :データ活用の陣地を増やすためのヒント
masatoshi0205
0
120
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
300
21k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Adopting Sorbet at Scale
ufuk
77
9.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Typedesign – Prime Four
hannesfritz
42
2.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Into the Great Unknown - MozCon
thekraken
40
1.9k
For a Future-Friendly Web
brad_frost
179
9.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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