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
600
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
3.8k
Alexa, Swiftで スマートスピーカーは実装できる?
motokiee
0
1.5k
iOSの自動化と仕組み化 ~コードと設計に集中する~
motokiee
11
2.9k
入力を型で表現する
motokiee
2
3.8k
Move Fast iOS Development
motokiee
4
3.8k
結婚式を支えた技術 Firebaseを活用したサーバレスiOSアプリケーション開発
motokiee
33
25k
Vision Framework 入門
motokiee
2
1.8k
Lightweight Dependency Injection tips
motokiee
10
2.9k
RxSwift in Practice
motokiee
11
5.7k
Other Decks in Technology
See All in Technology
RECRUIT TECH CONFERENCE 2025 プレイベント【高橋】
recruitengineers
PRO
0
160
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
140
現場で役立つAPIデザイン
nagix
33
12k
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
8
1.5k
Cloud Spanner 導入で実現した快適な開発と運用について
colopl
1
610
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
1.1k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
360
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
250
AndroidデバイスにFTPサーバを建立する
e10dokup
0
250
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.4k
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
580
速くて安いWebサイトを作る
nishiharatsubasa
10
12k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
A better future with KSS
kneath
238
17k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Designing for humans not robots
tammielis
250
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Code Reviewing Like a Champion
maltzj
521
39k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
How to train your dragon (web standard)
notwaldorf
91
5.8k
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͜Μͳײͬ͡Ά͍ʣ
͓ΘΓ