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

iOSDC 2017 Reject Conference

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