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
610
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.9k
Alexa, Swiftで スマートスピーカーは実装できる?
motokiee
0
1.6k
iOSの自動化と仕組み化 ~コードと設計に集中する~
motokiee
11
3k
入力を型で表現する
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
3k
RxSwift in Practice
motokiee
11
5.8k
Other Decks in Technology
See All in Technology
AWSのマルチアカウント管理 ベストプラクティス最新版 2025 / Multi-Account management on AWS best practice 2025
ohmura
4
290
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
180
AWSの新機能検証をやる時こそ、Amazon Qでプロンプトエンジニアリングを駆使しよう
duelist2020jp
1
170
ブラウザのレガシー・独自機能を愛でる-Firefoxの脆弱性4選- / Browser Crash Club #1
masatokinugawa
1
460
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
110
CBになったのでEKSのこともっと知ってもらいたい!
daitak
1
160
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
230
Amazon S3 Tables + Amazon Athena / Apache Iceberg
okaru
0
270
JPOUG Tech Talk #12 UNDO Tablespace Reintroduction
nori_shinoda
2
140
QA/SDETの現在と、これからの挑戦
imtnd
0
120
バックオフィス向け toB SaaS バクラクにおけるレコメンド技術活用 / recommender-systems-in-layerx-bakuraku
yuya4
6
540
20250413_湘南kaggler会_音声認識で使うのってメルス・・・なんだっけ?
sugupoko
1
480
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.6k
Fireside Chat
paigeccino
37
3.4k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
Code Reviewing Like a Champion
maltzj
522
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
How to train your dragon (web standard)
notwaldorf
90
6k
Faster Mobile Websites
deanohume
306
31k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
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͜Μͳײͬ͡Ά͍ʣ
͓ΘΓ