Hello React Native

Presented at https://atnd.org/events/85439

Transcript

1. )FMMP
   3FBDU
   /BUJWF .PUPLJ
   /BSJUB !NPUPLJFF
2. ࣗݾ঺հ w !NPUPLJFF
   w J04ΤϯδχΞ
   w ϝϧΧϦͷ৽نࣄۀख͕͚Δ
 ࢠձࣾι΢κ΢ॴଐ
   w J04%$
   +BQBO
   
   ελοϑ
3. ݄೔ʙ݄೔͸ۭ͚͓͖ͯ·͠ΐ͏
4. 3FBDU
   /BUJWFͱ͸Կ͔
5. 3FBDU
   /BUJWFͱ͸Կ͔ w ೥ʹΦʔϓϯιʔεԽ͞Εͨ'BDFCPPL͕த৺ ͱͳͬͯ։ൃΛਐΊ͍ͯΔ+BWB4DSJQU
   
   3FBDUͳϥ ΠϒϥϦ
   w +BWB4DSJQUͱ3FBDUΛ࢖ͬͯϚϧνϓϥοτϑΥʔϜ J04UW04"OESPJE ͰωΠςΟϒͷ։ൃ͕Ͱ͖Δ
   w +BWB4DSJQUͱ3FBDU͕෼͔͍ͬͯΕ͹ɺͦͷ஌ࣝΛԠ ༻ͯ͠ωΠςΟϒΞϓϦͷ։ൃ͕Ͱ͖Δ
6. +BWB4DSJQU΋3FBDU΋
 ΄ͱΜͲ෼͔Γ·ͤΜa ?P? 
7. Ͱ͸ͳͥ͜ͷ࿩Λ͢Δͷ͔ʁ
8. IUUQTFOHJOFFSJOHJOTUBHSBNDPNSFBDUOBUJWFBUJOTUBHSBNEEBBD
9. 3FBDU
   /BUJWF
   BU
   *OTUBHSBN
   ͬ͘͟Γ w ݁࿦͔Βݴ͏ͱ3FBDU
   /BUJWFΛಋೖͨ͜͠ͱʹਲͬ ͯJ04ͱ"OESPJE྆ํͰΑΓ଎͍։ൃ͕Ͱ͖ΔΑ͏ ʹͳͬͨ
   w -JWF
   3FMPBE
   BOE
   )PU
   3FMPBEJOHͳͲͷ͓͔͛
   w IUUQTZPVUVCFV2[7J,'VD
10. 3FBDU
    /BUJWF
    BU
    *OTUBHSBN
    ͬ͘͟Γ w طଘͷΞϓϦʹ౷߹͢Δ͜ͱΛ໨ࢦͨ͠
    w طଘͷΞϓϦʹ૊ΈࠐΉͷ͸εΫϥο νͰ૊ΉΑΓ΋େมͦ͏ͩͱࢥͬͨ
    w Ұ൪؆୯ͦ͏ͳը໘ͰऔΓ૊Ή͜ͱ ʹͨ͠
    w ϓογϡ௨஌ͷઃఆը໘
    w ΋ͱ΋ͱ8FC7JFX
    w 6*͕୯७
    w αʔόͰ຋༁͍ͯͨ͠
11. 3FBDU
    /BUJWF
    BU
    *OTUBHSBN
    ͬ͘͟Γ w ಋೖʹࡍͯ͠ىಈ଎౓ͱ͔ͪΌΜͱܭଌͨ͠
    w 3FBDU
    /BUJWF
    ىಈ࣌ʹΦʔόʔϔου͕ੜ͡Δ
    w +BWB4DSJQU$PSF΁ͷ+BWB4DSJQU
    #VOEMFͷΠϯδΣΫτ
    w ωΠςΟϒϞδϡʔϧͷॳظԽ
    w 7JFX
    .BOBHFS
    ͳͲͳͲ͕ݪҼ
    w ͜ΕΒΛܭଌ
    w &EJU
    1SPpMFΛ3FBDU
    /BUJWFԽͨ͠
    w ͦͷաఔͰز͔ͭͷ3FBDU
    /BUJWFͷίϯϙʔωϯτΛ࡞ͬͨ
12. 3FBDU
    /BUJWF
    BU
    *OTUBHSBN
    ͬ͘͟Γ w ଞʹ΋3FBDU
    /BUJWFͷϦετͷύϑΥʔϚϯεΛଌΔ ͨΊʹ1IPUPT
    0G΋3FBDU
    /BUJWFʹͨ͠ʢ͍·ͷ *OTUBHSBNʹ͸ݟ͚ͭΒΕͳ͔͚ͬͨͲΩʔϫʔυʹ Ұகͨ͠౤ߘࣸਅͷϦετͬΆ͍ʣ
    w ଞʹ΋͍͔ͭ͘ͷϓϩμΫτνʔϜ͕3FBDU
    /BUJWFͰ ػೳΛϦϦʔεͨ͠
13. 3FBDU
    /BUJWF
    BU
    *OTUBHSBN
    ͬ͘͟Γ w 1PTU
    1SPNPUF
    w ౤ߘΛ޿ࠂԽ͢Δػೳ
    w IUUQTZPVUVCF%W.%(&EMH
    w 4BWF
    w อଘػೳ
    w $IFDLQPJOUT
    w ෆ৹ͳૢ࡞͕͋ͬͨ৔߹ʹαʔόͷτ ϦΨʔͰදࣔ͞ΕΔը໘
    w ͜ͷը໘΋8FC7JFXͩͬͨ
    w $PNNFOU
    .PEFSBUJPO
    w ίϝϯτͷϑΟϧλϦϯάػೳ
    w -FBE
    (FO
    "ET
    w ޿ࠂओͱ৘ใΛڞ༗͢Δػೳʢʁʣ
14. 3FBDU
    /BUJWF
    BU
    *OTUBHSBN
    ͬ͘͟Γ w ػೳʹΑͬͯ͸Ҏ্ίʔυΛڞ༗͍ͯ͠Δ
    w ڞ༗͞Ε͍ͯΔίʔυͷׂ߹
    w 1PTU
    1SPNPUF
    
    w 4.4
    $BQUDIB
    $IFDLQPJOU
    
    w $PNNFOU
    .PEFSBUJPO
    
    w -FBE
    (FO
    "ET
    
    w 1VTI
    /PUJpDBUJPO
    4FUUJOHT
    
15. ͜ͷهࣄΛಡΜͰࢥͬͨ͜ͱ
16. ͋ɺҰ෦͚ͩ૊ΈࠐΉ͜ͱ΋
    Ͱ͖ΔΜͩ
17. ϝϦοτ͋Δ͔΋ w 3FBDU
    /BUJWFͷଘࡏ͸஌͍͚ͬͯͨͲϝϦοτ͕શ͘ײ͡Β Εͳ͔ͬͨ
    w εΫϥονͰ࡞Βͳ͚Ε͹ͳΒͳ͍ͱࢥ͍ࠐΜͰ͍ͨ
    w ΫϩεϓϥοτϑΥʔϜͰશͯ։ൃ͸ͨͿΜແཧ
    w J04ͱ"OESPJEͷࢥ૝ͷҧ͍ͱ͔
    w *OTUBHSBNΈ͍ͨʹ෦෼తͰ͋Ε͹ΞϦͰ͸ʁ
    w ϓογϡ௨஌ͷઃఆը໘ͷΑ͏ͳෳࡶͳ6*͕ཁٻ͞Εͳ ͍Α͏ͳը໘Ͱ͸J04"OESPJEͰڞ௨Խ͢ΔϝϦοτ͋Γ ͦ͏
18. ΍ͬͯΈΑ͏
19. 3FBDUͱ͸ʢࡶʹʣ w એݴతʹ8FCͷ6*ίϯϙʔωϯτΛॻ͘͜ͱ͕Ͱ͖Δ
    w σʔλ͕มߋ͞Εͨ࣌͸มߋ͞Εͨ΋ͷ͚ͩΛ࠶ඳը͢Δ
    w 3FBDU
    /BUJWF͸3FBDUͷ࢓૊ΈΛ࢖ͬͯωΠςΟϒʢJ04"OESPJEʣͷ ίʔυΛॻ͘͜ͱ͕Ͱ͖Δ΋ͷ
    w 3FBDUΛ࢖͏ͱঢ়ଶ؅ཧͷ࢓૊ΈΛ࣋ͬͨ6*ίϯϙʔωϯτΛߏஙͰ͖Δ
    w QSPQTͰσʔλΛड͚औΔ͜ͱ͕Ͱ͖ɺ಺෦ঢ়ଶσʔλΛTUBUFͰอ࣋͢Δ
    w IUUQTGBDFCPPLHJUIVCJPSFBDU
    w TUBUF͕มԽ͢Δͱ࠶ඳը͞ΕΔʢ#JOEJOHʣ
    w 3FBDUJWF
20. 3FBDU
    /BUJWFͷJ04։ൃʹඞཁͳ΋ͷ w OPEF
    w XBUDINBO
    w 9DPEF
    w 3FBDU
    /BUJWF͕αϙʔτ͢Δ04όʔδϣϯ
    w J04
    
    Ҏ্ʢ"OESPJE
    Ҏ্ʣ
    w ؀ڥઃఆʹ͍ͭͯ͸ϒϩάʹ·ͱΊ͍ͯ·͢
    w IUUQTNPUPLJFFHJUIVCJPCMPH HFUUJOHTUBSUFESFBDUOBUJWFIUNM
21. ৽نϓϩδΣΫτͷ࡞੒ $ react-native init YidevProject $ cd YidevProject $ react-native run-ios
22. %FNP
23. -JWF
    3FMPBE
    BOE
    )PU
    3FMPBEJOHͰϏϧυ଴ͪ࣌ؒͳ͠Ͱ ϨΠΞ΢τͷमਖ਼ͳͲ͕Մೳ
24. %FNP
25. 6*ίϯϙʔωϯτͷυΩϡϝϯτ w 3FBDU
    /BUJWFͰ࢖༻Մೳͳ6* ίϯϙʔωϯτͷυΩϡϝϯ τ͕༻ҙ͞Ε͍ͯΔ
    w ωΠςΟϒʹଘࡏ͢Δશͯͷ ϓϩύςΟ͕αϙʔτ͞Εͯ ͍ΔΘ͚Ͱ͸ͳ͍ʢͬΆ͍ʣ IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFEPDTUFYUIUNM
26. 3FBDU
    /BUJWFΛطଘ1+ʹಋೖ͢Δ
27. 3FBDU
    /BUJWFΛطଘ1+ʹಋೖ͢Δ w ҎԼͰৄ͘͠આ໌͞Ε͍ͯΔ
    w IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFEPDT JOUFHSBUJPOXJUIFYJTUJOHBQQTIUNM
    w ͜ͷखॱͰ΍ͬͯΈͨ
28. ݕূόʔδϣϯ
    w 9DPEF
    
    w SFBDU
    
    w SFBDUOBUJWF
    
29. 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ͷ
    *OUFHSBUJPO
    XJUI
    FYJTUJOH
    BQQT
    ͷQBDLBHFKTPO͸؀ڥ͕ݹ͍ͷͰ஫ҙ
    ˞ ্ه͸9DPEF
    
    Ͱݕূͨ͠ࡍͷEFQFOEFJODJFTͷઃఆ
30. w 1PEpMFॻ͍ͯ
    QPE
    JOTUBMM
    w ඞཁʹԠͯ͡TVCTQFDΛ௥Ճ
    w OPEF@NPEVMFT
    
    SFBDUOBUJWF
    
    3FBDUQPETQFD
    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
31. w JOEFYJPTKTΛ༻ҙͯ͠+BWB4DSJQUΛॻ͍͍ͯ͘
    w 3FBDU
    /BUJWFͷίϯϙʔωϯτͱJ04ͷωΠςΟϒ ͷ7JFXΛ݁ͼ͚ͭΔඞཁ͕͋Δ
    w ˠ
    3$53PPU7JFXʹ݁ͼ͚ͭΔ
    w JOEFYJPTKT಺෦ʹϞδϡʔϧΛఆٛͯ͠ɺ 3$53PPU7JFXͱͦͷϞδϡʔϧΛ݁ͼ͚ͭΔ 3FBDU
    /BUJWFΛطଘ1+ʹಋೖ͢Δ
32. 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
33. 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
34. JOEFYJPTKT
35. 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
36. JOEFYJPTKT
37. %FNP
38. w ભҠઌͷը໘ͷWJFX͚ͩΛ3FBDU
    /BUJWFͰ࣮૷
    w ϞʔμϧΛ্ཱͪ͛Δͱ͖ʹগ͠ ͕͔͔࣌ؒͬͯ͠·͏
39. 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
40. ϥΠϒϥϦ݁ߏͨ͘͞Μ͋Δʢ໊લ͕શ෦ࣅͯΔʜʣ
41. ·ͱΊ
42. ·ͱΊ w 3FBDU
    /BUJWF͸طଘͷΞϓϦʹ૊ΈࠐΉ͜ͱ͕Ͱ͖Δ
    w 3FBDUͰએݴతʹॻ͘͜ͱ͕Ͱ͖ΔͷͰɺγϯϓϧͳ࣮૷ ʹͳΔ
    w ωΠςΟϒΞϓϦͷ஌ࣝͳ͠ʹ։ൃͰ͖Δͱ͍͏Θ͚Ͱ͸ ͳͦ͞͏
    w ౰વ04ͷࠩҟ΋͋ͬͯશͯڞ௨ԽͰͰ͖ΔΘ͚Ͱ͸ͳ͍
    w ͘͢͝γϯϓϧͳը໘Ͱ6*ʹͩ͜ΘΔඞཁ΋ͳ͍ը໘ɺ
 ͔ͭίʔυΛ04·͍ͨͰڞ௨Խ͍ͤͨ͞৔߹ʹ΋ྑ͍͔΋
43. Ͳ͏͍͏૊৫ʹ޲͍͍ͯΔͷ͔ʁ
44. J04 "OESPJE αʔϏε ϝϦοτͳͦ͞͏ νʔϜ͕04Ͱ෼͔Ε͍ͯͯػೳ΋ผʑʹ։ൃ͞ΕΔ
45. "ػೳ #ػೳ αʔϏεʢJ04"OESPJE8FCʣ ϝϦοτ͋Δ͔΋ʁ ػೳ͝ͱʹ෼͔Εͯ։ൃΛߦ͏νʔϜʢ*OTUBHSBN΋͜Μͳײͬ͡Ά͍ʣ
46. ͓ΘΓ