Hello React Native

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

Transcript

1. )FMMP3FBDU/BUJWF
   .PUPLJ/BSJUB
   !NPUPLJFF
   

   View Slide

2. ࣗݾ঺հ
   w !NPUPLJFF
   w J04ΤϯδχΞ
   w ϝϧΧϦͷ৽نࣄۀख͕͚Δ

   ࢠձࣾι΢κ΢ॴଐ
   w J04%$+BQBOελοϑ
   

   View Slide

3. ݄೔ʙ݄೔͸ۭ͚͓͖ͯ·͠ΐ͏
   

   View Slide

4. 3FBDU/BUJWFͱ͸Կ͔
   

   View Slide

5. 3FBDU/BUJWFͱ͸Կ͔
   w ೥ʹΦʔϓϯιʔεԽ͞Εͨ'BDFCPPL͕த৺
   ͱͳͬͯ։ൃΛਐΊ͍ͯΔ+BWB4DSJQU3FBDUͳϥ
   ΠϒϥϦ
   w +BWB4DSJQUͱ3FBDUΛ࢖ͬͯϚϧνϓϥοτϑΥʔϜ
   J04UW04"OESPJE
   ͰωΠςΟϒͷ։ൃ͕Ͱ͖Δ
   w +BWB4DSJQUͱ3FBDU͕෼͔͍ͬͯΕ͹ɺͦͷ஌ࣝΛԠ
   ༻ͯ͠ωΠςΟϒΞϓϦͷ։ൃ͕Ͱ͖Δ
   

   View Slide

6. +BWB4DSJQU΋3FBDU΋

   ΄ͱΜͲ෼͔Γ·ͤΜa ?P?
   
   

   View Slide

7. Ͱ͸ͳͥ͜ͷ࿩Λ͢Δͷ͔ʁ
   

   View Slide

8. IUUQTFOHJOFFSJOHJOTUBHSBNDPNSFBDUOBUJWFBUJOTUBHSBNEEBBD
   

   View Slide

9. 3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ
   w ݁࿦͔Βݴ͏ͱ3FBDU/BUJWFΛಋೖͨ͜͠ͱʹਲͬ
   ͯJ04ͱ"OESPJE྆ํͰΑΓ଎͍։ൃ͕Ͱ͖ΔΑ͏
   ʹͳͬͨ
   w -JWF3FMPBEBOE)PU3FMPBEJOHͳͲͷ͓͔͛
   w IUUQTZPVUVCFV2[7J,'VD
   

   View Slide

10. 3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ
    w طଘͷΞϓϦʹ౷߹͢Δ͜ͱΛ໨ࢦͨ͠
    w طଘͷΞϓϦʹ૊ΈࠐΉͷ͸εΫϥο
    νͰ૊ΉΑΓ΋େมͦ͏ͩͱࢥͬͨ
    w Ұ൪؆୯ͦ͏ͳը໘ͰऔΓ૊Ή͜ͱ
    ʹͨ͠
    w ϓογϡ௨஌ͷઃఆը໘
    w ΋ͱ΋ͱ8FC7JFX
    w 6*͕୯७
    w αʔόͰ຋༁͍ͯͨ͠
    

    View Slide

11. 3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ
    w ಋೖʹࡍͯ͠ىಈ଎౓ͱ͔ͪΌΜͱܭଌͨ͠
    w 3FBDU/BUJWFىಈ࣌ʹΦʔόʔϔου͕ੜ͡Δ
    w +BWB4DSJQU$PSF΁ͷ+BWB4DSJQU#VOEMFͷΠϯδΣΫτ
    w ωΠςΟϒϞδϡʔϧͷॳظԽ
    w 7JFX.BOBHFSͳͲͳͲ͕ݪҼ
    w ͜ΕΒΛܭଌ
    w &EJU1SPpMFΛ3FBDU/BUJWFԽͨ͠
    w ͦͷաఔͰز͔ͭͷ3FBDU/BUJWFͷίϯϙʔωϯτΛ࡞ͬͨ
    

    View Slide

12. 3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ
    w ଞʹ΋3FBDU/BUJWFͷϦετͷύϑΥʔϚϯεΛଌΔ
    ͨΊʹ1IPUPT0G΋3FBDU/BUJWFʹͨ͠ʢ͍·ͷ
    *OTUBHSBNʹ͸ݟ͚ͭΒΕͳ͔͚ͬͨͲΩʔϫʔυʹ
    Ұகͨ͠౤ߘࣸਅͷϦετͬΆ͍ʣ
    w ଞʹ΋͍͔ͭ͘ͷϓϩμΫτνʔϜ͕3FBDU/BUJWFͰ
    ػೳΛϦϦʔεͨ͠
    

    View Slide

13. 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 ޿ࠂओͱ৘ใΛڞ༗͢Δػೳʢʁʣ
    

    View Slide

14. 3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ
    w ػೳʹΑͬͯ͸Ҏ্ίʔυΛڞ༗͍ͯ͠Δ
    w ڞ༗͞Ε͍ͯΔίʔυͷׂ߹
    w 1PTU1SPNPUF
    w 4.4$BQUDIB$IFDLQPJOU
    w $PNNFOU.PEFSBUJPO
    w -FBE(FO"ET
    w 1VTI/PUJpDBUJPO4FUUJOHT
    

    View Slide

15. ͜ͷهࣄΛಡΜͰࢥͬͨ͜ͱ
    

    View Slide

16. ͋ɺҰ෦͚ͩ૊ΈࠐΉ͜ͱ΋
    Ͱ͖ΔΜͩ
    

    View Slide

17. ϝϦοτ͋Δ͔΋
    w 3FBDU/BUJWFͷଘࡏ͸஌͍͚ͬͯͨͲϝϦοτ͕શ͘ײ͡Β
    Εͳ͔ͬͨ
    w εΫϥονͰ࡞Βͳ͚Ε͹ͳΒͳ͍ͱࢥ͍ࠐΜͰ͍ͨ
    w ΫϩεϓϥοτϑΥʔϜͰશͯ։ൃ͸ͨͿΜແཧ
    w J04ͱ"OESPJEͷࢥ૝ͷҧ͍ͱ͔
    w *OTUBHSBNΈ͍ͨʹ෦෼తͰ͋Ε͹ΞϦͰ͸ʁ
    w ϓογϡ௨஌ͷઃఆը໘ͷΑ͏ͳෳࡶͳ6*͕ཁٻ͞Εͳ
    ͍Α͏ͳը໘Ͱ͸J04"OESPJEͰڞ௨Խ͢ΔϝϦοτ͋Γ
    ͦ͏
    

    View Slide

18. ΍ͬͯΈΑ͏
    

    View Slide

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
    

    View Slide

20. 3FBDU/BUJWFͷJ04։ൃʹඞཁͳ΋ͷ
    w OPEF
    w XBUDINBO
    w 9DPEF
    w 3FBDU/BUJWF͕αϙʔτ͢Δ04όʔδϣϯ
    w J04Ҏ্ʢ"OESPJEҎ্ʣ
    w ؀ڥઃఆʹ͍ͭͯ͸ϒϩάʹ·ͱΊ͍ͯ·͢
    w IUUQTNPUPLJFFHJUIVCJPCMPH
    HFUUJOHTUBSUFESFBDUOBUJWFIUNM
    

    View Slide

21. ৽نϓϩδΣΫτͷ࡞੒
    $ react-native init YidevProject
    $ cd YidevProject
    $ react-native run-ios
    

    View Slide

22. %FNP
    

    View Slide

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

    View Slide

24. %FNP
    

    View Slide

25. 6*ίϯϙʔωϯτͷυΩϡϝϯτ
    w 3FBDU/BUJWFͰ࢖༻Մೳͳ6*
    ίϯϙʔωϯτͷυΩϡϝϯ
    τ͕༻ҙ͞Ε͍ͯΔ
    w ωΠςΟϒʹଘࡏ͢Δશͯͷ
    ϓϩύςΟ͕αϙʔτ͞Εͯ
    ͍ΔΘ͚Ͱ͸ͳ͍ʢͬΆ͍ʣ
    IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFEPDTUFYUIUNM
    

    View Slide

26. 3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ
    

    View Slide

27. 3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ
    w ҎԼͰৄ͘͠આ໌͞Ε͍ͯΔ
    w IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFEPDT
    JOUFHSBUJPOXJUIFYJTUJOHBQQTIUNM
    w ͜ͷखॱͰ΍ͬͯΈͨ
    

    View Slide

28. ݕূόʔδϣϯ
    w 9DPEF
    w SFBDU
    w SFBDUOBUJWF
    

    View Slide

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ͷ*OUFHSBUJPOXJUIFYJTUJOHBQQTͷQBDLBHFKTPO͸؀ڥ͕ݹ͍ͷͰ஫ҙ
    ˞ ্ه͸9DPEFͰݕূͨ͠ࡍͷEFQFOEFJODJFTͷઃఆ
    

    View Slide

30. 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
    

    View Slide

31. w JOEFYJPTKTΛ༻ҙͯ͠+BWB4DSJQUΛॻ͍͍ͯ͘
    w 3FBDU/BUJWFͷίϯϙʔωϯτͱJ04ͷωΠςΟϒ
    ͷ7JFXΛ݁ͼ͚ͭΔඞཁ͕͋Δ
    w ˠ3$53PPU7JFXʹ݁ͼ͚ͭΔ
    w JOEFYJPTKT಺෦ʹϞδϡʔϧΛఆٛͯ͠ɺ
    3$53PPU7JFXͱͦͷϞδϡʔϧΛ݁ͼ͚ͭΔ
    3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ
    

    View Slide

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
    

    View Slide

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
    

    View Slide

34. JOEFYJPTKT
    

    View Slide

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
    

    View Slide

36. JOEFYJPTKT
    

    View Slide

37. %FNP
    

    View Slide

38. w ભҠઌͷը໘ͷWJFX͚ͩΛ3FBDU
    /BUJWFͰ࣮૷
    w ϞʔμϧΛ্ཱͪ͛Δͱ͖ʹগ͠
    ͕͔͔࣌ؒͬͯ͠·͏
    

    View Slide

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
    

    View Slide

40. ϥΠϒϥϦ݁ߏͨ͘͞Μ͋Δʢ໊લ͕શ෦ࣅͯΔʜʣ
    

    View Slide

41. ·ͱΊ
    

    View Slide

42. ·ͱΊ
    w 3FBDU/BUJWF͸طଘͷΞϓϦʹ૊ΈࠐΉ͜ͱ͕Ͱ͖Δ
    w 3FBDUͰએݴతʹॻ͘͜ͱ͕Ͱ͖ΔͷͰɺγϯϓϧͳ࣮૷
    ʹͳΔ
    w ωΠςΟϒΞϓϦͷ஌ࣝͳ͠ʹ։ൃͰ͖Δͱ͍͏Θ͚Ͱ͸
    ͳͦ͞͏
    w ౰વ04ͷࠩҟ΋͋ͬͯશͯڞ௨ԽͰͰ͖ΔΘ͚Ͱ͸ͳ͍
    w ͘͢͝γϯϓϧͳը໘Ͱ6*ʹͩ͜ΘΔඞཁ΋ͳ͍ը໘ɺ

    ͔ͭίʔυΛ04·͍ͨͰڞ௨Խ͍ͤͨ͞৔߹ʹ΋ྑ͍͔΋
    

    View Slide

43. Ͳ͏͍͏૊৫ʹ޲͍͍ͯΔͷ͔ʁ
    

    View Slide

44. J04 "OESPJE
    αʔϏε
    ϝϦοτͳͦ͞͏
    νʔϜ͕04Ͱ෼͔Ε͍ͯͯػೳ΋ผʑʹ։ൃ͞ΕΔ
    

    View Slide

45. "ػೳ #ػೳ
    αʔϏεʢJ04"OESPJE8FCʣ
    ϝϦοτ͋Δ͔΋ʁ
    ػೳ͝ͱʹ෼͔Εͯ։ൃΛߦ͏νʔϜʢ*OTUBHSBN΋͜Μͳײͬ͡Ά͍ʣ
    

    View Slide

46. ͓ΘΓ
    

    View Slide