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
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
Github Copilot エージェントモードで試してみた
ochtum
0
100
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.5k
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
210
Postman AI エージェントビルダー最新情報
nagix
0
110
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
340
AIのAIによるAIのための出力評価と改善
chocoyama
2
550
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
170
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
630
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
340
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Designing for Performance
lara
609
69k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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