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

React Nativeで開発するマルチプラットフォームアプリ

React Nativeで開発するマルチプラットフォームアプリ

iOSDC 2017 Reject Conference

Masayuki Iwai

October 13, 2017
Tweet

More Decks by Masayuki Iwai

Other Decks in Technology

Transcript

  1. 3FBDU/BUJWFͰ
    ։ൃ͢ΔϚϧνϓϥοτϑΥʔϜΞϓϦ
    .BTBZVLJ*XBJ!NZC
    JPTEDSD

    View Slide

  2. 3FEVY
    3FBDU/BUJWFͰ
    ։ൃ͢ΔϚϧνϓϥοτϑΥʔϜΞϓϦ
    .BTBZVLJ*XBJ!NZC
    JPTEDSD

    View Slide

  3. ࣗݾ঺հ
    ؠҪխ޾!NZC


    ϞόΠϧɾΞϓϦέʔγϣϯɾΤϯδχΞ

    !6OJUZ5FDIOPMPHJFT+BQBO

    ͦΕҎલ͸8FCσβΠϯɾ։ൃɺ'MBTIίϯ
    ςϯπ੍࡞ɺJ04ΞϓϦɺήʔϜ੍࡞ͳͲ
    ஶॻʹʮV(6*Ͱ͸͡ΊΔ6OJUZ6*σβΠϯ
    ͷڭՊॻʯ

    View Slide

  4. 3FBDU/BUJWF

    View Slide

  5. 6OJUZ.FFUVQ
    w 6OJUZϢʔβʔͷͨΊͷΠϕϯτ

    ΞϓϦʢϑϧ3FBDU/BUJWFʣ
    w طଘͷ6OJUZݝਓձٞͱ͍͏

    Πϕϯτ৘ใαΠτ͕ϕʔε
    w ೥݄J04"OESPJEϦϦʔε
    w ઃܭʙϓϩτλΠϓ੍࡞໿ϲ݄ɺ

    J04࣮૷αʔόʔ"1*Ͱ໿ϲ݄ɺ

    "OESPJE࣮૷σόοάͰ໿ϲ݄

    View Slide

  6. 3FBDU/BUJWF
    ࠾༻ͷϞνϕʔγϣϯ

    View Slide

  7. ࣌͸೥ॳ಄ʜ
    w ϚϧνϓϥοτϑΥʔϜʢJ04"OESPJEʣ
    w ωΠςΟϒͷύϑΥʔϚϯεɺؾ͍͍࣋ͪૢ࡞ײ⚡
    w ։ൃ͸গਓ਺ʢ࣮࣭ਓ#ʣ
    ΠϕϯτΞϓϦʢ6OJUZ.FFUVQʣͷ੍࡞ʹ͋ͨͬͯ
    ϑϨʔϜϫʔΫΛݕ౼ʜ

    View Slide

  8. $PSEPWBɺ5JUBOJVNͳͲ΋ݕ౼

    ʢ΋ͪΖΜ6OJUZ΋ʣ
    w $PSEPWB΍͸Γ8FC7JFXϕʔεͳͷͰʜ
    w 5JUBOJVNҎલྲྀߦ͚ͬͯͨͲɺΦϫίϯײ͋Δʜ
    w 6OJUZΦʔόʔεϖοΫͳ্ɺ6*Ͱ͸ωΠςΟϒͷύϑΥʔϚϯε͸ग़ͳ͍
    w 9BNBSJO'PSNT͸͜ͷͱ͖ଘࡏΛ஌Βͳ͔ͬͨ

    View Slide

  9. 3FBDU/BUJWF
    w +BWB4DSJQU$PSF্Ͱಈ࡞͠ɺωΠςΟϒͷϏϡʔΛੜ੒

    ˠͭ·Γ΄΅ωΠςΟϒ
    w ίʔυͷେ൒Λڞ༗ͭͭ͠ɺ֤ϓϥοτϑΥʔϜඪ४ͷ6*ʹ४ڌͰ͖Δ
    w 'BDFCPPL(SPVQ"QQͳͲͷ࣮੷͕͋Δ
    w 'BDFCPPLͷ044Ͱ҆৺ײ͕͋Δ
    w ͜Ε͔ΒྲྀߦΓͦ͏ʂ

    View Slide

  10. ͬ͘͟Γ3FBDU/BUJWF
    ʢ3FEVYʣ

    View Slide

  11. 3FBDU
    w 'BDFCPPL੡ͷ+BWB4DSJQUϥΠϒϥϦ

    ʢLʣ

    IUUQTSFBDUKTPSH
    w ίϯϙʔωϯτϕʔεͰ6*ʢϏϡʔʣΛߏங
    w +49εΫϦϓτதʹ%0.ͰϏϡʔΛهड़
    w QSPQTͱTUBUFʹج͍ͮͯSFOEFSؔ਺Ͱ
    ϏϡʔΛඳը
    w QSPQT΍TUBUF͕มԽ͢Δͱɺࣗಈతʹ
    Ϗϡʔͷࠩ෼ͷΈ͕࠶ඳը͞ΕΔ
    import React from 'react'
    class App extends React.Component {
    state = {
    label: 'It works!',
    }
    render() {
    return (



    {this.props.name}


    {this.state.label}



    )
    }
    }

    View Slide

  12. 3FEVY
    w ঢ়ଶ؅ཧͷͨΊͷ+BWB4DSJQU

    ϥΠϒϥϦʢLʣ

    IUUQSFEVYKTPSH
    w σʔλͷྲྀΕΛํ޲ʹ͠ɺ

    ঢ়ଶͷอ࣋ͱߋ৽Λू໿

    ˠෳࡶͳΞϓϦέʔγϣϯͷ඼࣭ͱ

    ɹϝϯςφϯεੑͷ޲্
    w 4XJGUքʹ͓͍ͯ΋3F4XJGUͱ࣮ͯ͠
    ૷͞ΕΔͳͲɺ஫໨ͷΞʔΩςΫνϟ
    4UPSF
    6*

    ʢϏϡʔʣ
    "DUJPO
    3FEVDFS
    %JTQBUDI
    ߋ৽
    Πϕϯτ
    ߋ৽͞Εͨ4UBUF
    4UBUF

    ʢঢ়ଶʣ

    View Slide

  13. 3FBDU3FEVY
    w SFBDUSFEVY3FEVYͷ3FBDUόΠϯσΟϯάʢެࣜʣ

    IUUQTHJUIVCDPNSFBDUKTSFBDUSFEVY
    w 3FBDU͸ίϯϙʔωϯτͷঢ়ଶʢQSPQTͱTUBUFʣʹΑͬͯϏϡʔΛඳը͢Δ

    ͷͰɺ૬ੑ͕ྑ͍
    w $POUBJOFS$PNQPOFOUͱ1SFTFOUBUJPOBM$PNQPOFOU

    $POUBJOFS$PNQPOFOU3FEVYͱ࿈ܞ͢Δ

    ʢ4UPSF͔Β4UBUFΛಘͨΓɺ"DUJPOΛEJTQBUDI͢Δʣ

    1SFTFOUBUJPOBM$PNQPOFOU௚઀3FEVYʹؔ༩ͤͣɺQSPQTܦ༝ͰͷΈ

    σʔλΛड͚औΔʢϏϡʔͷඳըʹઐ೦ʣ

    View Slide

  14. 3FBDU/BUJWF
    w 3FBDUΛ༻͍ͯωΠςΟϒΞϓϦέʔγϣϯΛ࡞੒͢ΔͨΊͷϥΠϒϥϦ

    ʢLʣ

    IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF
    w J04"OESPJEʹରԠ

    .JDSPTPGU੡SFBDUOBUJWFXJOEPXTͰ8JOEPXTʢ68181'ʣʹ΋ରԠ
    w +BWB4DSJQU$PSF্Ͱಈ࡞͠ɺωΠςΟϒͷϏϡʔΛੜ੒
    w ඪ४Ͱ7JFXɺ5FYUɺ*NBHFɺ4DSPMM7JFXͳͲͷίϯϙʔωϯτΛఏڙ

    View Slide

  15. 3FBDU/BUJWF
    import React from 'react'
    class App extends React.Component {
    state = {
    label: 'It works!',
    }
    render() {
    return (



    {this.props.name}


    {this.state.label}



    )
    }
    }
    import React from 'react'
    import { ScrollView, View, Text } from 'react-
    native'
    class App extends React.Component {
    state = {
    label: 'It works!',
    }
    render() {
    return (



    {this.props.name}


    {this.state.label}



    )
    }
    }

    View Slide

  16. 3FBDU/BUJWF

    ͕͜͜ྑ͍ʂ

    View Slide

  17. ίϯϙʔωϯτϕʔε͕ྑ͍
    w ίϯϙʔωϯτ୯ҐͰςετͰ͖Δ
    w ։ൃ͕ਐΜͰෳࡶʹͳͬͨ෦෼Λ

    ޙ͔ΒͰ΋෼཭͠΍͍͢
    w ϑΝΠϧ໊ͰϓϥοτϑΥʔϜ͝ͱ
    ʹίϯϙʔωϯτΛಡΈ෼͚ΒΕΔ

    ˠʢྫʣ'PPJPTKTͱ'PPBOESPJEKT
    import React from 'react'
    import { ScrollView, View, Text } from
    'react-native'
    class App extends React.Component {
    state = {
    label: 'It works!',
    }
    render() {
    return (



    {this.props.name}


    {this.state.label}



    )
    }
    }

    View Slide

  18. ίϯϙʔωϯτϕʔε͕ྑ͍
    w ίϯϙʔωϯτ୯ҐͰςετͰ͖Δ
    w ։ൃ͕ਐΜͰෳࡶʹͳͬͨ෦෼Λ

    ޙ͔ΒͰ΋෼཭͠΍͍͢
    w ϑΝΠϧ໊ͰϓϥοτϑΥʔϜ͝ͱ
    ʹίϯϙʔωϯτΛಡΈ෼͚ΒΕΔ

    ˠʢྫʣ'PPJPTKTͱ'PPBOESPJEKT
    import React from 'react'
    import { ScrollView, View, Text } from
    'react-native'
    class App extends React.Component {
    state = {
    label: 'It works!',
    }
    render() {
    return (



    {this.props.name}


    {this.state.label}



    )
    }
    }

    View Slide

  19. ίϯϙʔωϯτϕʔε͕ྑ͍
    w ίϯϙʔωϯτ୯ҐͰςετͰ͖Δ
    w ։ൃ͕ਐΜͰෳࡶʹͳͬͨ෦෼Λ

    ޙ͔ΒͰ΋෼཭͠΍͍͢
    w ϑΝΠϧ໊ͰϓϥοτϑΥʔϜ͝ͱ
    ʹίϯϙʔωϯτΛಡΈ෼͚ΒΕΔ

    ˠʢྫʣ'PPJPTKTͱ'PPBOESPJEKT
    import React from 'react'
    import { ScrollView } from 'react-native'
    import ContentView from 'ContentView'
    class App extends React.Component {
    state = {
    label: 'It works!',
    }
    render() {
    return (

    style={styles.content}
    name={this.props.name}
    label={this.state.label}
    />

    )
    }
    }

    View Slide

  20. 'MFYCPYελΠϧγʔτͰࢥ͍௨ΓͷϨΠΞ΢τ
    w 3FBDU/BUJWFͷϏϡʔͷϨΠΞ΢τ͸

    'MFYCPYʹجͮ͘
    w "VUP-BZPVUͱҧ͍ɺ8FCతͳΞϓϩʔ
    νͰϨεϙϯγϒͳσβΠϯ͕Մೳ
    w Ϗϡʔͷଐੑ͸ελΠϧγʔτͰهड़

    ϨΠΞ΢τʹؔ͢Δଐੑ

    ʢqFY XJEUI IFJHIU NBSHJOFUDʣ

    ࢹ֮తͳଐੑ

    ʢCPSEFS8JEUI PQBDJUZFUDʣ

    View Slide

  21. 'MFYCPYελΠϧγʔτͰࢥ͍௨ΓͷϨΠΞ΢τ
    w 3FBDU/BUJWFͷϏϡʔͷϨΠΞ΢τ͸

    'MFYCPYʹجͮ͘
    w "VUP-BZPVUͱҧ͍ɺ8FCతͳΞϓϩʔ
    νͰϨεϙϯγϒͳσβΠϯ͕Մೳ
    w Ϗϡʔͷଐੑ͸ελΠϧγʔτͰهड़

    ϨΠΞ΢τʹؔ͢Δଐੑ

    ʢqFY XJEUI IFJHIU NBSHJOFUDʣ

    ࢹ֮తͳଐੑ

    ʢCPSEFS8JEUI PQBDJUZFUDʣ
    const styles = StyleSheet.create({
    container: {
    flex: 1,
    backgroundColor: '#f5fcff',
    },
    label: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#262729',
    },
    box: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 100,
    height: 100,
    backgroundColor: '#f1f3f4',
    },
    });

    View Slide

  22. σόοά΋͠΍͍͢
    w ࠶ϏϧυෆཁͰ㵰3ͰKTCVOEMFΛϦϩʔυͰ͖ΔͷͰʢϒϥ΢βײ֮ʣɺ

    τϥΠΤϥʔָ͕

    ※σόοάϏϧυ
    w $ISPNF্Ͱಈ͘3FBDU/BUJWF%FCVHHFS͕෇ଐ

    ˠϒϨΠΫϙΠϯτ΋ுΕΔ͠ɺελοΫτϨʔε΋ݟΒΕΔ
    w SFEVYMPHHFSΛ࢖͏ͱɺ"DUJPOʹΑͬͯมߋ͞ΕΔલޙͷ4UBUFΛݟΒΕΔ

    View Slide

  23. 3FBDU/BUJWFରԠͷύοέʔδ΋ͨ͘͞Μ
    w ๛෋ͳ+BWB4DSJQUϥΠϒϥϦΛར༻Ͱ͖ΔNPNFOUɺOVNFSBMFUD
    w ඪ४Ͱఏڙ͞Ε͍ͯͳ͍ػೳͰ΋ɺάάΔͱେ఍ύοέʔδ͕͋Δ

    ˠ4'4BGBSJ7JFX$POUSPMMFSɺJ#FBDPOɺ'JSFCBTFFUD
    w ͳͯ͘΋ɺωΠςΟϒϞδϡʔϧΛ؆୯ʹ࡞ΕΔ

    ˠ࠷ۙSFBDUOBUJWFTBGFBSFBͱ͍͏ϞδϡʔϧΛ࡞ͬͨ

    IUUQTHJUIVCDPNNJZBCJSFBDUOBUJWFTBGFBSFB

    View Slide

  24. w ίϯϙʔωϯτϕʔε
    w ࢥ͍௨ΓͷϨΠΞ΢τ
    w σόοά͠΍͍͢
    w ύοέʔδ΋ͨ͘͞Μ

    View Slide

  25. ͭ·Γɺ3FBDU/BUJWFͳΒ
    ಈ͘΋ͷΛૣ͘࡞ΕΔʂ

    View Slide

  26. 3FBDU/BUJWF

    ͕͜͜πϥΠʜʂ

    View Slide

  27. +BWB4DSJQUΏ͑ͷͭΒΈ
    w ܕͷͳ͍ੈք

    ͱ͸͍͑5ZQF4DSJQU΍'MPX͕͋Δ

    KTϑΝΠϧͷ··ΞϊςʔγϣϯΛ௥ՃͰ͖ͯ

    ੩తʹνΣοΫͰ͖Δ'MPX͕͍͍ײ͡

    όʔδϣϯͷ૊Έ߹ΘͤʹΑͬͯΤϥʔʹ

    ͳͬͨΓͳΒͳ͔ͬͨΓ͢Δ͜ͱ΋ʜ
    w ࣗ༝౓͕ߴ͍͗ͯ͢ΖΜͳελΠϧͰॻ͚
    ͪΌ͏

    ։ൃϝϯόʔ͕૿͑ͨͱ͖͕৺഑

    "JSCOC͕ެ։͍ͯ͠ΔελΠϧΨΠυΛ

    ϕʔεʹFTMJOUΛઃఆ

    IUUQTHJUIVCDPNBJSCOCKBWBTDSJQU
    import React from 'react'
    import { ScrollView } from 'react-native'
    import ContentView from 'ContentView'
    class App extends React.Component {
    state = {
    label: 10000,
    }
    render() {
    return (

    style={styles.content}
    name={this.props.name}
    label={this.state.label}
    />

    )
    }
    }

    View Slide

  28. +BWB4DSJQUΏ͑ͷͭΒΈ
    w ܕͷͳ͍ੈք

    ͱ͸͍͑5ZQF4DSJQU΍'MPX͕͋Δ

    KTϑΝΠϧͷ··ΞϊςʔγϣϯΛ௥ՃͰ͖ͯ

    ੩తʹνΣοΫͰ͖Δ'MPX͕͍͍ײ͡

    όʔδϣϯͷ૊Έ߹ΘͤʹΑͬͯΤϥʔʹ

    ͳͬͨΓͳΒͳ͔ͬͨΓ͢Δ͜ͱ΋ʜ
    w ࣗ༝౓͕ߴ͍͗ͯ͢ΖΜͳελΠϧͰॻ͚
    ͪΌ͏

    ։ൃϝϯόʔ͕૿͑ͨͱ͖͕৺഑

    "JSCOC͕ެ։͍ͯ͠ΔελΠϧΨΠυΛ

    ϕʔεʹFTMJOUΛઃఆ

    IUUQTHJUIVCDPNBJSCOCKBWBTDSJQU
    import React from 'react'
    import { ScrollView } from 'react-native'
    import ContentView from 'ContentView'
    type Props = {
    name: string, // stringʢnull΍undefined͸ڐՄ͞Εͳ͍ʣ
    };
    type State = {
    label: ?string, // stringʢnullڐՄʣ
    };
    class App extends React.Component {
    state = {
    label: 10000, // ERROR!!
    }
    render(): React.Node {
    return (

    style={styles.content}
    name={this.props.name}
    label={this.state.label}
    />

    )
    }
    }

    View Slide

  29. όʔδϣϯΞοϓ͕ૣ͍
    ͦͷ͏͑มߋ΋ଟ͍
    w ͜ͷ೥൒Ͱ΋ɺˠʢ೥݄ݱࡏ࠷৽ʣ
    w େମͷϚΠφʔόʔδϣϯΞοϓ͸#SFBLJOH$IBOHFTΛؚΜͰ͍Δ

    ࢖͍ͬͯΔύοέʔδʹΑͬͯ͸ϏϧυΤϥʔʹͳΔ͜ͱ΋͋ΔͷͰɺ

    ௚ͨ͠Γ13ૹͬͨΓʜ

    ͦͷ··ϝϯςφϯε͞Εͣʹ์ஔ͞ΕΔύοέʔδ΋΋ͪΖΜ͋Δʜ

    View Slide

  30. ओཁͳίϯϙʔωϯτ͕݁ߏEFQSFDBUFEʹͳΔ
    w /BWJHBUPSͰEFQSFDBUFE

    /BWJHBUPS*04͸࢒͍ͬͯΔ͕"OESPJEͰ࢖͑ͳ͍

    ެࣜͰ΋SFBDUOBWJHBUJPOʢSFBDUDPNNVOJUZʣ΍OBUJWFOBWJHBUJPO
    ʢ"JSCOCʣΛਪ঑
    w -JTU7JFXͰEFQSFDBUFE

    'MBU-JTUɺ4FDUJPO-JTUʹҠߦ
    w .BQ7JFXͰEFQSFDBUFE

    SFBDUOBUJWFNBQTʢ"JSCOCʣਪ঑

    View Slide

  31. ྑ͘΋ѱ͘΋

    'BDFCPPLʹґଘ͍ͯ͠Δ
    w গ͠લʹ"QBDIF4PGUXBSF'PVOEBUJPO͕'BDFCPPLϓϩδΣΫτΛ

    ࢖༻ېࢭʹͯ͠࿩୊ʹͳ͍ͬͯͨ

    ϥΠηϯεͷ৚߲͕໰୊ʹͳ͍͕ͬͯͨɺઌ೔͋ΒͨΊͯ.*5ϥΠηϯεʹ͢Δͱ

    ൃද͞Εͯͻͱ҆৺

    IUUQTDPEFGBDFCPPLDPNQPTUT

    View Slide

  32. ·ͱΊ

    View Slide

  33. 3FBDU/BUJWFʢ3FEVYʣ
    • খن໛ͳϓϩμΫτ͋Δ͍͸νʔϜͰͷϚϧνϓϥοτϑΥʔϜΞϓϦ։ൃʹ
    ࠷ద

    • ୹ظؒͰಈ͘΋ͷ͕࡞ΕΔ - ϓϩτλΠϓ੍࡞ʹ΋

    • ن໛͕େ͖͘ͳͬͯ΋εέʔϧ͸͢Δ

    • ͕…৭ʑͱͭΒΈ͕ग़ͯ͘Δ

    • ͭΒΈΛ৐Γӽ͑ͯؤுΔ͍ͧʂ

    View Slide

  34. 5IBOLZPV

    View Slide