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

iOSDC 2017 Reject Conference

Transcript

1. 3FBDU
   /BUJWFͰ
   ։ൃ͢ΔϚϧνϓϥοτϑΥʔϜΞϓϦ .BTBZVLJ
   *XBJ
   !NZC JPTEDSD
2. 3FEVY 3FBDU
   /BUJWFͰ
   ։ൃ͢ΔϚϧνϓϥοτϑΥʔϜΞϓϦ .BTBZVLJ
   *XBJ
   !NZC JPTEDSD
3. ࣗݾ঺հ ؠҪխ޾
   !NZC
 
 ϞόΠϧɾΞϓϦέʔγϣϯɾΤϯδχΞ
 !6OJUZ
   5FDIOPMPHJFT
   +BQBO
 ͦΕҎલ͸8FCσβΠϯɾ։ൃɺ'MBTIίϯ ςϯπ੍࡞ɺJ04ΞϓϦɺήʔϜ੍࡞ͳͲ
   ஶॻʹʮV(6*Ͱ͸͡ΊΔ
   6OJUZ
   6*σβΠϯ ͷڭՊॻʯ
4. 3FBDU
   /BUJWF
5. 6OJUZ
   .FFUVQ w 6OJUZϢʔβʔͷͨΊͷΠϕϯτ
 ΞϓϦʢϑϧ3FBDU
   /BUJWFʣ
   w طଘͷ6OJUZݝਓձٞͱ͍͏
 Πϕϯτ৘ใαΠτ͕ϕʔε
   w ೥݄J04"OESPJEϦϦʔε
   w ઃܭʙϓϩτλΠϓ੍࡞໿ϲ݄ɺ
 J04࣮૷ αʔόʔ"1*Ͱ໿ϲ݄ɺ
 "OESPJE࣮૷ σόοάͰ໿ϲ݄
6. 3FBDU
   /BUJWF
   ࠾༻ͷϞνϕʔγϣϯ
7. ࣌͸೥ॳ಄ʜ w ϚϧνϓϥοτϑΥʔϜʢJ04"OESPJEʣ
   w ωΠςΟϒͷύϑΥʔϚϯεɺؾ͍͍࣋ͪૢ࡞ײ⚡
   w ։ൃ͸গਓ਺ʢ࣮࣭ਓ#ʣ ΠϕϯτΞϓϦʢ6OJUZ
   .FFUVQʣͷ੍࡞ʹ͋ͨͬͯ
   ϑϨʔϜϫʔΫΛݕ౼ʜ
8. $PSEPWBɺ5JUBOJVNͳͲ΋ݕ౼
 ʢ΋ͪΖΜ6OJUZ΋ʣ w $PSEPWB
   
   ΍͸Γ8FC7JFXϕʔεͳͷͰʜ
   w 5JUBOJVN
   
   Ҏલྲྀߦ͚ͬͯͨͲɺΦϫίϯײ͋Δʜ
   w 6OJUZ
   
   ΦʔόʔεϖοΫͳ্ɺ6*Ͱ͸ωΠςΟϒͷύϑΥʔϚϯε͸ग़ͳ͍
   w 
   9BNBSJO'PSNT͸͜ͷͱ͖ଘࡏΛ஌Βͳ͔ͬͨ
   
9. 3FBDU
   /BUJWF w +BWB4DSJQU$PSF্Ͱಈ࡞͠ɺωΠςΟϒͷϏϡʔΛੜ੒
 ˠ
   ͭ·Γ΄΅ωΠςΟϒ
   w ίʔυͷେ൒Λڞ༗ͭͭ͠ɺ֤ϓϥοτϑΥʔϜඪ४ͷ6*ʹ४ڌͰ͖Δ
   w 'BDFCPPL
   (SPVQ
   "QQͳͲͷ࣮੷͕͋Δ
   w 'BDFCPPLͷ044Ͱ҆৺ײ͕͋Δ
   w ͜Ε͔ΒྲྀߦΓͦ͏ʂ
10. ͬ͘͟Γ3FBDU
    /BUJWF
    ʢ 3FEVYʣ
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 ( <div className="container"> <div className="content"> <h1 className="name"> {this.props.name} </h1> <p className="label"> {this.state.label} </p> </div> </div> ) } }
12. 3FEVY w ঢ়ଶ؅ཧͷͨΊͷ+BWB4DSJQU
 ϥΠϒϥϦʢLʣ
 IUUQSFEVYKTPSH
    w σʔλͷྲྀΕΛํ޲ʹ͠ɺ
 ঢ়ଶͷอ࣋ͱߋ৽Λू໿
 ˠ
    ෳࡶͳΞϓϦέʔγϣϯͷ඼࣭ͱ
 ɹ
    ϝϯςφϯεੑͷ޲্
    w 4XJGUքʹ͓͍ͯ΋3F4XJGUͱ࣮ͯ͠ ૷͞ΕΔͳͲɺ஫໨ͷΞʔΩςΫνϟ 4UPSF 6*
 ʢϏϡʔʣ "DUJPO 3FEVDFS %JTQBUDI ߋ৽ Πϕϯτ ߋ৽͞Εͨ4UBUF 4UBUF
 ʢঢ়ଶʣ
13. 3FBDU 3FEVY w SFBDUSFEVY
    
    3FEVYͷ3FBDUόΠϯσΟϯάʢެࣜʣ
 IUUQTHJUIVCDPNSFBDUKTSFBDUSFEVY
    w 3FBDU͸ίϯϙʔωϯτͷঢ়ଶʢQSPQTͱTUBUFʣʹΑͬͯϏϡʔΛඳը͢Δ
 ͷͰɺ૬ੑ͕ྑ͍
    w $POUBJOFS
    $PNQPOFOUͱ1SFTFOUBUJPOBM
    $PNQPOFOU
 
    $POUBJOFS
    $PNQPOFOU
    
    3FEVYͱ࿈ܞ͢Δ

    
    ʢ4UPSF͔Β4UBUFΛಘͨΓɺ"DUJPOΛEJTQBUDI͢Δʣ
 
    1SFTFOUBUJPOBM
    $PNQPOFOU
    
    ௚઀3FEVYʹؔ༩ͤͣɺQSPQTܦ༝ͰͷΈ

    
    σʔλΛड͚औΔʢϏϡʔͷඳըʹઐ೦ʣ
14. 3FBDU
    /BUJWF w 3FBDUΛ༻͍ͯωΠςΟϒΞϓϦέʔγϣϯΛ࡞੒͢ΔͨΊͷϥΠϒϥϦ
 ʢLʣ
 IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF
    w J04"OESPJEʹରԠ
 .JDSPTPGU੡SFBDUOBUJWFXJOEPXTͰ8JOEPXTʢ68181'ʣʹ΋ରԠ
    w +BWB4DSJQU$PSF্Ͱಈ࡞͠ɺωΠςΟϒͷϏϡʔΛੜ੒
    w ඪ४Ͱ7JFXɺ5FYUɺ*NBHFɺ4DSPMM7JFXͳͲͷίϯϙʔωϯτΛఏڙ
15. 3FBDU
    /BUJWF import React from 'react' class App extends React.Component { state = { label: 'It works!', } render() { return ( <div className="container"> <div className="content"> <h1 className="name"> {this.props.name} </h1> <p className="label"> {this.state.label} </p> </div> </div> ) } } import React from 'react' import { ScrollView, View, Text } from 'react- native' class App extends React.Component { state = { label: 'It works!', } render() { return ( <ScrollView style={styles.container}> <View style={styles.content}> <Text style={styles.name}> {this.props.name} </Text> <Text style={styles.label}> {this.state.label} </Text> </View> </ScrollView> ) } }
16. 3FBDU
    /BUJWF
 ͕͜͜ྑ͍ʂ
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 ( <ScrollView style={styles.container}> <View style={styles.content}> <Text style={styles.name}> {this.props.name} </Text> <Text style={styles.label}> {this.state.label} </Text> </View> </ScrollView> ) } }
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 ( <ScrollView style={styles.container}> <View style={styles.content}> <Text style={styles.name}> {this.props.name} </Text> <Text style={styles.label}> {this.state.label} </Text> </View> </ScrollView> ) } }
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 ( <ScrollView style={styles.container}> <ContentView style={styles.content} name={this.props.name} label={this.state.label} /> </ScrollView> ) } }
20. 'MFYCPYελΠϧγʔτͰࢥ͍௨ΓͷϨΠΞ΢τ w 3FBDU
    /BUJWFͷϏϡʔͷϨΠΞ΢τ͸
 'MFYCPYʹجͮ͘
    w "VUP
    -BZPVUͱҧ͍ɺ8FCతͳΞϓϩʔ νͰϨεϙϯγϒͳσβΠϯ͕Մೳ
    w Ϗϡʔͷଐੑ͸ελΠϧγʔτͰهड़
 
    ϨΠΞ΢τʹؔ͢Δଐੑ
 ʢqFY
    XJEUI
    IFJHIU
    NBSHJO
    FUDʣ
 
    ࢹ֮తͳଐੑ
 ʢCPSEFS8JEUI
    PQBDJUZ
    FUDʣ
21. 'MFYCPYελΠϧγʔτͰࢥ͍௨ΓͷϨΠΞ΢τ w 3FBDU
    /BUJWFͷϏϡʔͷϨΠΞ΢τ͸
 'MFYCPYʹجͮ͘
    w "VUP
    -BZPVUͱҧ͍ɺ8FCతͳΞϓϩʔ νͰϨεϙϯγϒͳσβΠϯ͕Մೳ
    w Ϗϡʔͷଐੑ͸ελΠϧγʔτͰهड़
 
    ϨΠΞ΢τʹؔ͢Δଐੑ
 ʢqFY
    XJEUI
    IFJHIU
    NBSHJO
    FUDʣ
 
    ࢹ֮తͳଐੑ
 ʢCPSEFS8JEUI
    PQBDJUZ
    FUDʣ 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', }, });
22. σόοά΋͠΍͍͢ w ࠶ϏϧυෆཁͰ㵰 3ͰKTCVOEMFΛϦϩʔυͰ͖ΔͷͰʢϒϥ΢βײ֮ʣɺ
 τϥΠΤϥʔָ͕
 ※σόοάϏϧυ
    w $ISPNF্Ͱಈ͘3FBDU
    /BUJWF
    %FCVHHFS͕෇ଐ
 ˠ
    ϒϨΠΫϙΠϯτ΋ுΕΔ͠ɺελοΫτϨʔε΋ݟΒΕΔ
    w SFEVYMPHHFSΛ࢖͏ͱɺ"DUJPOʹΑͬͯมߋ͞ΕΔલޙͷ4UBUFΛݟΒΕΔ
23. 3FBDU
    /BUJWFରԠͷύοέʔδ΋ͨ͘͞Μ w ๛෋ͳ+BWB4DSJQUϥΠϒϥϦΛར༻Ͱ͖Δ
    
    NPNFOUɺOVNFSBM
    FUD
    w ඪ४Ͱఏڙ͞Ε͍ͯͳ͍ػೳͰ΋ɺάάΔͱେ఍ύοέʔδ͕͋Δ
 ˠ
    4'4BGBSJ7JFX$POUSPMMFSɺJ#FBDPOɺ'JSFCBTF
    FUD
    w ͳͯ͘΋ɺωΠςΟϒϞδϡʔϧΛ؆୯ʹ࡞ΕΔ
 ˠ
    ࠷ۙSFBDUOBUJWFTBGFBSFBͱ͍͏ϞδϡʔϧΛ࡞ͬͨ
 IUUQTHJUIVCDPNNJZBCJSFBDUOBUJWFTBGFBSFB
24. w ίϯϙʔωϯτϕʔε
    w ࢥ͍௨ΓͷϨΠΞ΢τ
    w σόοά͠΍͍͢
    w ύοέʔδ΋ͨ͘͞Μ
25. ͭ·Γɺ3FBDU
    /BUJWFͳΒ
    ಈ͘΋ͷΛૣ͘࡞ΕΔʂ
26. 3FBDU
    /BUJWF
 ͕͜͜πϥΠʜʂ
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 ( <ScrollView style={styles.container}> <ContentView style={styles.content} name={this.props.name} label={this.state.label} /> </ScrollView> ) } }
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<Props, State> { state = { label: 10000, // ERROR!! } render(): React.Node { return ( <ScrollView style={styles.container}> <ContentView style={styles.content} name={this.props.name} label={this.state.label} /> </ScrollView> ) } }
29. όʔδϣϯΞοϓ͕ૣ͍
    ͦͷ͏͑มߋ΋ଟ͍ w ͜ͷ೥൒Ͱ΋ɺ
    ˠ
    ʢ೥݄ݱࡏ࠷৽ʣ
    w େମͷϚΠφʔόʔδϣϯΞοϓ͸#SFBLJOH
    $IBOHFTΛؚΜͰ͍Δ
 
    ࢖͍ͬͯΔύοέʔδʹΑͬͯ͸ϏϧυΤϥʔʹͳΔ͜ͱ΋͋ΔͷͰɺ

    
    ௚ͨ͠Γ13ૹͬͨΓʜ
 
    ͦͷ··ϝϯςφϯε͞Εͣʹ์ஔ͞ΕΔύοέʔδ΋΋ͪΖΜ͋Δʜ
30. ओཁͳίϯϙʔωϯτ͕݁ߏEFQSFDBUFEʹͳΔ w /BWJHBUPS
    
    ͰEFQSFDBUFE
 
    /BWJHBUPS*04͸࢒͍ͬͯΔ͕"OESPJEͰ࢖͑ͳ͍
 
    ެࣜͰ΋SFBDUOBWJHBUJPOʢSFBDUDPNNVOJUZʣ΍OBUJWFOBWJHBUJPO ʢ"JSCOCʣΛਪ঑
    w -JTU7JFX
    
    ͰEFQSFDBUFE
 
    'MBU-JTUɺ4FDUJPO-JTUʹҠߦ
    w .BQ7JFX
    
    ͰEFQSFDBUFE
 
    SFBDUOBUJWFNBQTʢ"JSCOCʣਪ঑
31. ྑ͘΋ѱ͘΋
 'BDFCPPLʹґଘ͍ͯ͠Δ w গ͠લʹ"QBDIF
    4PGUXBSF
    'PVOEBUJPO͕'BDFCPPLϓϩδΣΫτΛ
 ࢖༻ېࢭʹͯ͠࿩୊ʹͳ͍ͬͯͨ
 
    ϥΠηϯεͷ৚߲͕໰୊ʹͳ͍͕ͬͯͨɺઌ೔͋ΒͨΊͯ.*5ϥΠηϯεʹ͢Δͱ

    
    ൃද͞Εͯͻͱ҆৺

    
    IUUQTDPEFGBDFCPPLDPNQPTUT
32. ·ͱΊ
33. 3FBDU
    /BUJWFʢ 3FEVYʣ • খن໛ͳϓϩμΫτ͋Δ͍͸νʔϜͰͷϚϧνϓϥοτϑΥʔϜΞϓϦ։ൃʹ ࠷ద • ୹ظؒͰಈ͘΋ͷ͕࡞ΕΔ - ϓϩτλΠϓ੍࡞ʹ΋ • ن໛͕େ͖͘ͳͬͯ΋εέʔϧ͸͢Δ • ͕…৭ʑͱͭΒΈ͕ग़ͯ͘Δ • ͭΒΈΛ৐Γӽ͑ͯؤுΔ͍ͧʂ
34. 5IBOL
    ZPV