$30 off During Our Annual Pro Sale. View Details »

Hello React Native

Motoki Narita
February 11, 2017

Hello React Native

Motoki Narita

February 11, 2017
Tweet

More Decks by Motoki Narita

Other Decks in Technology

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