Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native / Alternative な開発ツールの採択について

React Native / Alternative な開発ツールの採択について

#nikkeidenshiban_Sansan の勉強会での発表資料です

Naoya Ito

June 09, 2015
Tweet

More Decks by Naoya Ito

Other Decks in Technology

Transcript

  1. var  Playground  =  React.createClass({      getInitialState:  function()  {  

           return  {              text:  ""          };      },        _onChangeText:  function(text)  {          this.setState({  text:  text  });      },        render:  function()  {          return  (              <View  style={styles.container}>                  <Text  style={styles.welcome}>                      {this.state.text}                  </Text>                  <TextInput                      style={styles.textInput}                      onChangeText={this._onChangeText}  />              </View>          );      }   }); setState() JSX
  2. Na#ve  App  (Cocoa  Touch,  UIKit  ...) React  Na#ve  Library JavaScript

     Engine  (JavaSc#ptCore) React  JS React  Na#ve  JS  Library Your  Applica#on hDp://www.slideshare.net/ModusJesus/intro-­‐to-­‐react-­‐na#ve +4ΛϥϯλΠϜͰಈ͔͠ ωΠςΟϒίʔυΛϒ Ϧοδ
  3. •  ݟͨ໨͸/BUJWF –  Ͱ͖͕͋Γ΋·ͣ·ͣ/BUJWFʹḮ৭ͳ͍΋ͷʹ •  ଎౓͸ʮ/BUJWFʹ͍ۙʯ –  +4Λஞ࣮࣍ߦͯ͠ΔͷͰ/BUJWFͱಉ͡ʹ͸ͳ Βͳ͍ – 

    ࡢࠓͷ୺຤ͷੑೳ޲্΋͋ΓؾʹͳΒͳ͍Ϩϕϧ •  ։ൃͷײ৮ –  0CKFDUJWF$4XJGUͷͦΕͱ͸େ͖͘ҟͳΔ ωΠςΟϒͬΆ͘ͳ͍ 
  4. 3FBDUͷύϥμΠϜ State <View>      <Text>{this.state.text}</Text>      <TextInput  onChangeText={...}

     />      <View>          ...      </View>   </View>   setState() •  ΞϓϦέʔγϣϯͷঢ়ଶΛ4UBUFͰ؅ཧ •  7JFX͸ίϯϙʔωϯτࢦ޲Ͱ਌ࢠπϦʔ •  4UBUF͕มߋ͞ΕΔͱ7JFXͷඞཁՕॴ͕ࣗಈߋ৽
  5. 3FBDU/BUJWF •  3FBDU – ୯७Ͱֶशίετͷ௿͍ΞʔΩςΫνϟ – ௕ظతͳอकੑ ่Εʹ͍͘ઃܭ Λ୲อ •  ΞϓϦέʔγϣϯ΍7JFXͷNVUBCJMJUZ ঢ়ଶ

     ΛͲ͏ѻ͏΂͖͔ʹରͯ͠ղΛఏࣔ •  3FBDU/BUJWF – 3FBDUͱಉ͡΍ΓํͰΞϓϦΛ࡞ΕΔ •  㱺্هϝϦοτΛڗडͰ͖Δ
  6. ࣮ࡍͷ࢖༻ײ •  8FCͷ3FBDUΛ৮ͬͨ͜ͱ͕͋Ε͹͙͢ॻ͚Δ –  3FBDUͷઃܭ࡞๏΍'MVY·Ͱ͙࣮͢ફͰ͖Δ –  -FBSO0ODF͸ҏୡ͡Όͳ͍͔΋ •  ։ൃͷײ৮ͱͯ͠͸ɺ8FCͬΆ͍ – 

    /PEFKT OQNΤίγεςϜ –  $NE3ͰϦϩʔυͱ͔ –  'MFYCPYBOE4UZMJOH •  ϒϦοδͳͷͰ6*ʹ͸ଟগบ͕͋Δ –  3FBDU͕༻ҙͨ͠ίϯϙʔωϯτ
  7. 'BDFCPPL಺ʹ͸ෳ਺ͷ'8 •  3FBDU/BUJWF –  'BDFCPPL(SPVQ •  $PNQPOFOU,JU –  /FXT'FFEFUD – 

    0CKFDUJWF$  –  3FBDU*OTQJSFE •  "TZOD%JTQMBZ,JU –  'BDFCPPLQBQFS –  GQT6*69 3FCVJMEGNFQ ࢀর ʮ3FBDU/BUJWF͕Ϟ όΠϧ։ൃͷܾఆ൛ʯ ͱ͍͏ελϯεͰ͸ͳ ͦ͞͏
  8. "MUFSOBUJWFͳ։ൃπʔϧ •  $PSEPWB چ1IPOF(BQ  –  8FCΞϓϦΛωΠςΟϒͰแΉ –  ͍ΘΏΔʮϋΠϒϦουΞϓϦʯ • 

    5JUBOJVN.PCJMF •  3FBDU/BUJWF •  9BNBSJO –  /&5ςΫϊϩδʔͰ/BUJWF"QQ •  $ BTZODBXBJU -*/2 .77. •  ͋·Γৄ͘͠ͳ͍Ͱ͢  •  3VCZ.PUJPO –  3VCZˠ--7.ͰωΠςΟϒʹ –  ϒϦοδ΍ϥούͰ͸ͳ͍ϐϡΞωΠςΟϒ –  $PDPB1PETͳͲ΋ແཧͳ͘࢖͑Δ ΄͔ʹ΋͍Ζ͍Ζ ͋Δ
  9. έʔεελσΟ •  ;BJN͞Μ –  Ոܭ฽ΞϓϦ •  ઐ໳ՈͰ͸ͳ͍૑ۀऀ͕5JUBOJVNͰ։ൃ –  ʮ+4ͳΒͳΜͱ͔ॻ͚ͨʯΒ͍͠ – 

    ݱߦόʔδϣϯ΋5JUBOJVN –  ສϢʔβʔ"QQ4UPSF෦໳Ґ •  ωΠςΟϒԽ΁ –  J04ŋŋŋ4XJGUͰ࠶։ൃத –  "OESPJEŋŋŋ೥͕Μ͹͕ͬͨ౰࣌ͷ 5JUBOJVNͰ͸඼࣭Λ֬อͰ͖ͣωΠςΟϒ Խ 3FCVJMEGNFQ ࢀর
  10. ߟ࡯ •  ಛ௕ΛΑ͘׆͔ͨ͠έʔε – Ϧʔϯతͳ؍఺͔Β •  ଎͘࡞ͬͯϑΟʔυόοΫΛूΊΔ •  ͢͹΍͘վम •  σβΠϯͷࢼߦࡨޡ

    •  ҰํͰቕͬͨΓ΋ŋŋŋ ʮϓϩͷϓϩάϥϚ޲͚ʯͱ͍͏ ΑΓ͸ʮαʔϏε͕࡞Γ͍ͨαʔ Ϗεࢦ޲ͷਓ޲͚ʯͱ͍͏πʔϧ ͷಛੑΛ͏·͘׆͔ͨ͠
  11. ܏޲ •  ͦΕͧΕͷ4%,ʹ͸ͦΕͧΕಛ௃ •  ಛ௕Λ׆͔ͯ͠։ൃʹ૊ΈࠐΊ͹༗ޮ –  ྫઐ໳஌͕ࣝগͳͯ͘ࡁΉ㱺૑ۀظʹ •  ຊ֨తʹ΍Δͱ૬Ԡͷίετ – 

    ྫ •  ݁ہωΠςΟϒ૚ͷ஌͕ࣝඞཁʹ •  ϥΠϒϥϦ͕௚઀࢖͑ͳ͍㱺ϒϦοδ։ൃ޻਺ •  ϑϨʔϜϫʔΫ࣮૷ͷཧղ •  ϨΠϠ͕ॏͳͬͯͯσόοάͮ͠Β͍ಛघͳσόοΨ •  ωΠςΟϒฒΈͷ࡞ΓࠐΈʹωΠςΟϒΑΓ͕͔͔࣌ؒΔ
  12. ஌తίετ ྫֶशίετਂ௥͍ඞཁػձ  ϓϩμΫτ඼࣭νʔϜ։ൃ ੜ࢈ੑͳͲ ˞ಛఆͷ࣮૷ʹ͍ͭͯϞσϧԽͨ͠΋ͷͰ͸ͳ͘ ͋͘·Ͱߟ͑ํͷϑϨʔϜϫʔΫͰ͢ ͋Δఔ౓ͷ඼࣭ΛٻΊΔ ͱ஌తίετ͕ಉ౳͋Δ ͍͸ٯస͢ΔͱԾఆ

    جૅ඼࣭ͷ΋ͷΛ௿ ίετͰ࡞ΕΔ͜ͱ ͕Ξυόϯςʔδ ネイティブ  (標準) Alterna#ve ૬Ԡͷ඼࣭Λ௥ٻ͢ Δͱɺཁٻίετʹ ͸େ͕ࠩͳ͘ͳΔ ͜ͷล·Ͱཁٻ͢ ΔͳΒ࡞Γସ͑ͨ ํ͕͍͍͔΋
  13. ߟ࡯ •  "MUFSOBUJWFͳಓ۩ʹ͸ͦΕͧΕಛ௕ –  ಛ௕Λઓུతʹ׆͔ͤ͹ϝϦοτ͸େ͖͍ –  /05ۜͷ஄ؙɻਅ໘໨ʹ΍Δͱ૬Ԡͷίετɻܽ఺ΛͲ͏Χόʔ͢Δ ͔ •  3FBDU/BUJWF

    –  ௕ظతͳอकੑΛᨳͬͯ͸͍Δ –  ͕ɺܽ఺෦෼͕௕ظతʹͲ͏ڹ͔͘͸·ͩະ஌਺ •  ݸਓతͳݟղ –  ͦͦ͜͜ͷن໛ͷ։ൃ૊৫͔ͭ௕͘อक͢ΔͳΒશମ࠷ద ڭҭɺ౤ࢿɺ ਓࡐ֬อ ͷ؍఺͔Βඪ४Ͱ͍͍ͷͰ͸ –  খ͞ͳνʔϜɺ૑ۀظɺ୹ೲظҰߟͷ༨஍͋Γ –  झຯŋŋŋ޷͖ͳ෺࢖͑͹ΑΖ͍͠ 3VCZ.PUJPO࢖ͬͯ·͢J