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
590
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.5k
Alexa, Swiftで スマートスピーカーは実装できる?
motokiee
0
1.5k
iOSの自動化と仕組み化 ~コードと設計に集中する~
motokiee
11
2.9k
入力を型で表現する
motokiee
2
3.8k
Move Fast iOS Development
motokiee
4
3.7k
結婚式を支えた技術 Firebaseを活用したサーバレスiOSアプリケーション開発
motokiee
33
25k
Vision Framework 入門
motokiee
2
1.7k
Lightweight Dependency Injection tips
motokiee
10
2.9k
RxSwift in Practice
motokiee
11
5.6k
Other Decks in Technology
See All in Technology
Application Development WG Intro at AppDeveloperCon
salaboy
0
190
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
Evangelismo técnico: ¿qué, cómo y por qué?
trishagee
0
360
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
110
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
410
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
620
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
880
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
140
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
390
Featured
See All Featured
Become a Pro
speakerdeck
PRO
25
5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Automating Front-end Workflow
addyosmani
1366
200k
How STYLIGHT went responsive
nonsquared
95
5.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Designing Experiences People Love
moore
138
23k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Thoughts on Productivity
jonyablonski
67
4.3k
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͜Μͳײͬ͡Ά͍ʣ
͓ΘΓ