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
Hello React Native
Search
Motoki Narita
February 11, 2017
Technology
8
630
Hello React Native
Presented at
https://atnd.org/events/85439
Motoki Narita
February 11, 2017
Tweet
Share
More Decks by Motoki Narita
See All by Motoki Narita
Mercari 10years iOS Development
motokiee
5
4.5k
Alexa, Swiftで スマートスピーカーは実装できる?
motokiee
0
1.9k
iOSの自動化と仕組み化 ~コードと設計に集中する~
motokiee
11
3k
入力を型で表現する
motokiee
2
3.9k
Move Fast iOS Development
motokiee
4
3.9k
結婚式を支えた技術 Firebaseを活用したサーバレスiOSアプリケーション開発
motokiee
33
26k
Vision Framework 入門
motokiee
2
1.9k
Lightweight Dependency Injection tips
motokiee
10
3.2k
RxSwift in Practice
motokiee
11
6k
Other Decks in Technology
See All in Technology
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
mikimatsumoto
0
190
IaaS/SaaS管理における SREの実践 - SRE Kaigi 2026
bbqallstars
4
1.7k
Webhook best practices for rock solid and resilient deployments
glaforge
1
270
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
rvirus0817
1
1.2k
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
maaaato
0
120
顧客の言葉を、そのまま信じない勇気
yamatai1212
1
340
日本の85%が使う公共SaaSは、どう育ったのか
taketakekaho
1
140
2026年はチャンキングを極める!
shibuiwilliam
9
1.9k
今日から始めるAmazon Bedrock AgentCore
har1101
4
390
Context Engineeringが企業で不可欠になる理由
hirosatogamo
PRO
3
410
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
aeonpeople
1
180
usermode linux without MMU - fosdem2026 kernel devroom
thehajime
0
220
Featured
See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
0
140
Information Architects: The Missing Link in Design Systems
soysaucechin
0
770
GraphQLとの向き合い方2022年版
quramy
50
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.4k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
200
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.8k
A Modern Web Designer's Workflow
chriscoyier
698
190k
Statistics for Hackers
jakevdp
799
230k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
930
sira's awesome portfolio website redesign presentation
elsirapls
0
140
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Music & Morning Musume
bryan
47
7.1k
Transcript
)FMMP3FBDU/BUJWF .PUPLJ/BSJUB !NPUPLJFF
ࣗݾհ w !NPUPLJFF w J04ΤϯδχΞ w ϝϧΧϦͷ৽نࣄۀख͕͚Δ ࢠձࣾικॴଐ w J04%$+BQBOελοϑ
݄ʙ݄ۭ͚͓͖ͯ·͠ΐ͏
3FBDU/BUJWFͱԿ͔
3FBDU/BUJWFͱԿ͔ w ʹΦʔϓϯιʔεԽ͞Εͨ'BDFCPPL͕த৺ ͱͳͬͯ։ൃΛਐΊ͍ͯΔ+BWB4DSJQU3FBDUͳϥ ΠϒϥϦ w +BWB4DSJQUͱ3FBDUΛͬͯϚϧνϓϥοτϑΥʔϜ J04UW04"OESPJE ͰωΠςΟϒͷ։ൃ͕Ͱ͖Δ w
+BWB4DSJQUͱ3FBDU͕͔͍ͬͯΕɺͦͷࣝΛԠ ༻ͯ͠ωΠςΟϒΞϓϦͷ։ൃ͕Ͱ͖Δ
+BWB4DSJQU3FBDU ΄ͱΜͲ͔Γ·ͤΜa ?P?
Ͱͳͥ͜ͷΛ͢Δͷ͔ʁ
IUUQTFOHJOFFSJOHJOTUBHSBNDPNSFBDUOBUJWFBUJOTUBHSBNEEBBD
3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ w ͔݁Βݴ͏ͱ3FBDU/BUJWFΛಋೖͨ͜͠ͱʹਲͬ ͯJ04ͱ"OESPJE྆ํͰΑΓ͍։ൃ͕Ͱ͖ΔΑ͏ ʹͳͬͨ w -JWF3FMPBEBOE)PU3FMPBEJOHͳͲͷ͓͔͛ w IUUQTZPVUVCFV2[7J,'VD
3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ w طଘͷΞϓϦʹ౷߹͢Δ͜ͱΛࢦͨ͠ w طଘͷΞϓϦʹΈࠐΉͷεΫϥο νͰΉΑΓେมͦ͏ͩͱࢥͬͨ w Ұ൪؆୯ͦ͏ͳը໘ͰऔΓΉ͜ͱ ʹͨ͠ w
ϓογϡ௨ͷઃఆը໘ w ͱͱ8FC7JFX w 6*͕୯७ w αʔόͰ༁͍ͯͨ͠
3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ w ಋೖʹࡍͯ͠ىಈͱ͔ͪΌΜͱܭଌͨ͠ w 3FBDU/BUJWFىಈ࣌ʹΦʔόʔϔου͕ੜ͡Δ w +BWB4DSJQU$PSFͷ+BWB4DSJQU#VOEMFͷΠϯδΣΫτ w ωΠςΟϒϞδϡʔϧͷॳظԽ w
7JFX.BOBHFSͳͲͳͲ͕ݪҼ w ͜ΕΒΛܭଌ w &EJU1SPpMFΛ3FBDU/BUJWFԽͨ͠ w ͦͷաఔͰز͔ͭͷ3FBDU/BUJWFͷίϯϙʔωϯτΛ࡞ͬͨ
3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ w ଞʹ3FBDU/BUJWFͷϦετͷύϑΥʔϚϯεΛଌΔ ͨΊʹ1IPUPT0G3FBDU/BUJWFʹͨ͠ʢ͍·ͷ *OTUBHSBNʹݟ͚ͭΒΕͳ͔͚ͬͨͲΩʔϫʔυʹ Ұகͨ͠ߘࣸਅͷϦετͬΆ͍ʣ w ଞʹ͍͔ͭ͘ͷϓϩμΫτνʔϜ͕3FBDU/BUJWFͰ ػೳΛϦϦʔεͨ͠
3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ w 1PTU1SPNPUF w ߘΛࠂԽ͢Δػೳ w IUUQTZPVUVCF%W.%(&EMH w 4BWF w
อଘػೳ w $IFDLQPJOUT w ෆ৹ͳૢ࡞͕͋ͬͨ߹ʹαʔόͷτ ϦΨʔͰදࣔ͞ΕΔը໘ w ͜ͷը໘8FC7JFXͩͬͨ w $PNNFOU.PEFSBUJPO w ίϝϯτͷϑΟϧλϦϯάػೳ w -FBE(FO"ET w ࠂओͱใΛڞ༗͢Δػೳʢʁʣ
3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ w ػೳʹΑͬͯҎ্ίʔυΛڞ༗͍ͯ͠Δ w ڞ༗͞Ε͍ͯΔίʔυͷׂ߹ w 1PTU1SPNPUF w 4.4$BQUDIB$IFDLQPJOU w
$PNNFOU.PEFSBUJPO w -FBE(FO"ET w 1VTI/PUJpDBUJPO4FUUJOHT
͜ͷهࣄΛಡΜͰࢥͬͨ͜ͱ
͋ɺҰ෦͚ͩΈࠐΉ͜ͱ Ͱ͖ΔΜͩ
ϝϦοτ͋Δ͔ w 3FBDU/BUJWFͷଘࡏ͍͚ͬͯͨͲϝϦοτ͕શ͘ײ͡Β Εͳ͔ͬͨ w εΫϥονͰ࡞Βͳ͚ΕͳΒͳ͍ͱࢥ͍ࠐΜͰ͍ͨ w ΫϩεϓϥοτϑΥʔϜͰશͯ։ൃͨͿΜແཧ w J04ͱ"OESPJEͷࢥͷҧ͍ͱ͔
w *OTUBHSBNΈ͍ͨʹ෦తͰ͋ΕΞϦͰʁ w ϓογϡ௨ͷઃఆը໘ͷΑ͏ͳෳࡶͳ6*͕ཁٻ͞Εͳ ͍Α͏ͳը໘ͰJ04"OESPJEͰڞ௨Խ͢ΔϝϦοτ͋Γ ͦ͏
ͬͯΈΑ͏
3FBDUͱʢࡶʹʣ w એݴతʹ8FCͷ6*ίϯϙʔωϯτΛॻ͘͜ͱ͕Ͱ͖Δ w σʔλ͕มߋ͞Εͨ࣌มߋ͞Εͨͷ͚ͩΛ࠶ඳը͢Δ w 3FBDU/BUJWF3FBDUͷΈΛͬͯωΠςΟϒʢJ04"OESPJEʣͷ ίʔυΛॻ͘͜ͱ͕Ͱ͖Δͷ w 3FBDUΛ͏ͱঢ়ଶཧͷΈΛ࣋ͬͨ6*ίϯϙʔωϯτΛߏஙͰ͖Δ
w QSPQTͰσʔλΛड͚औΔ͜ͱ͕Ͱ͖ɺ෦ঢ়ଶσʔλΛTUBUFͰอ࣋͢Δ w IUUQTGBDFCPPLHJUIVCJPSFBDU w TUBUF͕มԽ͢Δͱ࠶ඳը͞ΕΔʢ#JOEJOHʣ w 3FBDUJWF
3FBDU/BUJWFͷJ04։ൃʹඞཁͳͷ w OPEF w XBUDINBO w 9DPEF w 3FBDU/BUJWF͕αϙʔτ͢Δ04όʔδϣϯ w
J04Ҏ্ʢ"OESPJEҎ্ʣ w ڥઃఆʹ͍ͭͯϒϩάʹ·ͱΊ͍ͯ·͢ w IUUQTNPUPLJFFHJUIVCJPCMPH HFUUJOHTUBSUFESFBDUOBUJWFIUNM
৽نϓϩδΣΫτͷ࡞ $ react-native init YidevProject $ cd YidevProject $ react-native
run-ios
%FNP
-JWF3FMPBEBOE)PU3FMPBEJOHͰϏϧυͪ࣌ؒͳ͠Ͱ ϨΠΞτͷमਖ਼ͳͲ͕Մೳ
%FNP
6*ίϯϙʔωϯτͷυΩϡϝϯτ w 3FBDU/BUJWFͰ༻Մೳͳ6* ίϯϙʔωϯτͷυΩϡϝϯ τ͕༻ҙ͞Ε͍ͯΔ w ωΠςΟϒʹଘࡏ͢Δશͯͷ ϓϩύςΟ͕αϙʔτ͞Εͯ ͍ΔΘ͚Ͱͳ͍ʢͬΆ͍ʣ IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFEPDTUFYUIUNM
3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ
3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ w ҎԼͰৄ͘͠આ໌͞Ε͍ͯΔ w IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFEPDT JOUFHSBUJPOXJUIFYJTUJOHBQQTIUNM w ͜ͷखॱͰͬͯΈͨ
ݕূόʔδϣϯ w 9DPEF w SFBDU w SFBDUOBUJWF
w SFBDUͱSFBDUOBUJWFΛೖΕΔͨΊʹQBDLBHFKTPO ΛϓϩδΣΫτͷϧʔτʹՃ 3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ { "name": "sample", "version": "0.0.1", "private":
true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "react": "15.4.2", "react-native": "0.41.2" } } ˞ 3FBDU/BUJWFͷ*OUFHSBUJPOXJUIFYJTUJOHBQQTͷQBDLBHFKTPOڥ͕ݹ͍ͷͰҙ ˞ ্ه9DPEFͰݕূͨ͠ࡍͷEFQFOEFJODJFTͷઃఆ
w 1PEpMFॻ͍ͯQPEJOTUBMM w ඞཁʹԠͯ͡TVCTQFDΛՃ w OPEF@NPEVMFTSFBDUOBUJWF3FBDUQPETQFD w ඞཁͳTVCTQFD͕ͳ͍߹ɺϏϧυͰ͖Δ͕XBSOJOHܯࠂ͕ग़ΔΑ͏ʹͳͬ ͍ͯΔ 3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ
target 'YourXcodeProject' do pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'RCTText', 'RCTNetwork', 'RCTWebSocket', # needed for debugging ] end
w JOEFYJPTKTΛ༻ҙͯ͠+BWB4DSJQUΛॻ͍͍ͯ͘ w 3FBDU/BUJWFͷίϯϙʔωϯτͱJ04ͷωΠςΟϒ ͷ7JFXΛ݁ͼ͚ͭΔඞཁ͕͋Δ w ˠ3$53PPU7JFXʹ݁ͼ͚ͭΔ w JOEFYJPTKT෦ʹϞδϡʔϧΛఆٛͯ͠ɺ 3$53PPU7JFXͱͦͷϞδϡʔϧΛ݁ͼ͚ͭΔ
3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc]
initWithBundleURL : jsCodeLocation moduleName : @"Hello" initialProperties : @{ @"scores" : @[ @{ @"name" : @"React", @"value": @"15.4.2" }, @{ @"name" : @"React Native", @"value": @"0.41.2" } ] } launchOptions : nil]; UIViewController *vc = [[UIViewController alloc] init]; vc.view = rootView; [self.navigationController pushViewController: vc animated: YES]; 7JFX$POUSPMMFSN
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc]
initWithBundleURL : jsCodeLocation moduleName : @"Hello" initialProperties : @{ @"scores" : @[ @{ @"name" : @"React", @"value": @"15.4.2" }, @{ @"name" : @"React Native", @"value": @"0.41.2" } ] } launchOptions : nil]; UIViewController *vc = [[UIViewController alloc] init]; vc.view = rootView; [self.navigationController pushViewController: vc animated: YES]; 7JFX$POUSPMMFSN
JOEFYJPTKT
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc]
initWithBundleURL : jsCodeLocation moduleName : @"Hello" initialProperties : @{ @"scores" : @[ @{ @"name" : @"React", @"value": @"15.4.2" }, @{ @"name" : @"React Native", @"value": @"0.41.2" } ] } launchOptions : nil]; UIViewController *vc = [[UIViewController alloc] init]; vc.view = rootView; [self.navigationController pushViewController: vc animated: YES]; 7JFX$POUSPMMFSN
JOEFYJPTKT
%FNP
w ભҠઌͷը໘ͷWJFX͚ͩΛ3FBDU /BUJWFͰ࣮ w ϞʔμϧΛ্ཱͪ͛Δͱ͖ʹগ͠ ͕͔͔࣌ؒͬͯ͠·͏
w 3FBDU/BUJWF͕ඪ४Ͱఏڙ͍ͯ͠Δ6*ίϯϙʔωϯτҎ্ͷΑ͏ͳ͜ ͱΛ۪ʹ͍ͬͯΔ w 04͝ͱʹJ04"OESPJEͰผʑͷ࣮͕ඞཁ w IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCNBTUFS-JCSBSJFT $PNQPOFOUT"DUJWJUZ*OEJDBUPS"DUJWJUZ*OEJDBUPSKT-- w શͯڞ௨ͷ࣮͕Ͱ͖ΔΘ͚Ͱͳ͍
w ยํͷ04ʹ͔͠ଘࡏ͠ͳ͍Α͏ͳίϯϙʔωϯτ)PHF*04 )PHF"OESPJEΈ͍ͨʹ໋໊͞Ε͍ͯΔͬΆ͍ w IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFUSFFNBTUFS-JCSBSJFT $PNQPOFOUT
ϥΠϒϥϦ݁ߏͨ͘͞Μ͋Δʢ໊લ͕શ෦ࣅͯΔʜʣ
·ͱΊ
·ͱΊ w 3FBDU/BUJWFطଘͷΞϓϦʹΈࠐΉ͜ͱ͕Ͱ͖Δ w 3FBDUͰએݴతʹॻ͘͜ͱ͕Ͱ͖ΔͷͰɺγϯϓϧͳ࣮ ʹͳΔ w ωΠςΟϒΞϓϦͷࣝͳ͠ʹ։ൃͰ͖Δͱ͍͏Θ͚Ͱ ͳͦ͞͏ w
વ04ͷࠩҟ͋ͬͯશͯڞ௨ԽͰͰ͖ΔΘ͚Ͱͳ͍ w ͘͢͝γϯϓϧͳը໘Ͱ6*ʹͩ͜ΘΔඞཁͳ͍ը໘ɺ ͔ͭίʔυΛ04·͍ͨͰڞ௨Խ͍ͤͨ͞߹ʹྑ͍͔
Ͳ͏͍͏৫ʹ͍͍ͯΔͷ͔ʁ
J04 "OESPJE αʔϏε ϝϦοτͳͦ͞͏ νʔϜ͕04Ͱ͔Ε͍ͯͯػೳผʑʹ։ൃ͞ΕΔ
"ػೳ #ػೳ αʔϏεʢJ04"OESPJE8FCʣ ϝϦοτ͋Δ͔ʁ ػೳ͝ͱʹ͔Εͯ։ൃΛߦ͏νʔϜʢ*OTUBHSBN͜Μͳײͬ͡Ά͍ʣ
͓ΘΓ