Hello React Native

)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͕෼͔͍ͬͯΕ͹ɺͦͷ஌ࣝΛԠ ༻ͯ͠ωΠςΟϒΞϓϦͷ։ൃ͕Ͱ͖Δ

+BWB4DSJQU΋3FBDU΋  ΄ͱΜͲ෼͔Γ·ͤΜ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ͷϦετͷύϑΥʔϚϯεΛଌΔ ͨΊʹ1IPUPT0G΋3FBDU/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/BUJWF͸3FBDUͷ࢓૊ΈΛ࢖ͬͯωΠςΟϒʢ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

-JWF3FMPBEBOE)PU3FMPBEJOHͰϏϧυ଴ͪ࣌ؒͳ͠Ͱ ϨΠΞ΢τͷमਖ਼ͳͲ͕Մೳ

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

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

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΋͜Μͳײͬ͡Ά͍ʣ

͓ΘΓ

Hello React Native

Hello React Native

More Decks by Motoki Narita

Other Decks in Technology

Featured

Transcript