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

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

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

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

B4afc7d853d7f1cb6a253d3c7183c05a?s=128

Naoya Ito

June 09, 2015
Tweet

Transcript

  1. 3FBDU/BUJWF "MUFSOBUJWFͳ։ൃπʔϧͷ࠾ ୒ʹ͍ͭͯ /BPZB*UP  ೔ܦిࢠ൛Y4BOTBOJ04"OESPJEΞϓϦ։ൃऀษڧձ7PM

  2. 3FBDU/BUJWF

  3. 3FBDU/BUJWF •  +BWB4DSJQU – ϥϯλΠϜͰ+4㱺/BUJWF6*ΛϒϦοδ – "QQMJDBUJPOTSVOOFBSGVMMTQFFE •  3FBDUͱಉ͡࡞๏ – -FBSO0ODF 8SJUF"OZXIFSF • 

    044
  4. 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
  5. ΤσΟλ͸޷͖ͳ΋ͷ Ͱ $NE 3ͰϦϩʔυ ίϯιʔϧ Ϗϧυ͸9DPEF

  6. 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ΛϥϯλΠϜͰಈ͔͠ ωΠςΟϒίʔυΛϒ Ϧοδ
  7. •  ݟͨ໨͸/BUJWF –  Ͱ͖͕͋Γ΋·ͣ·ͣ/BUJWFʹḮ৭ͳ͍΋ͷʹ •  ଎౓͸ʮ/BUJWFʹ͍ۙʯ –  +4Λஞ࣮࣍ߦͯ͠ΔͷͰ/BUJWFͱಉ͡ʹ͸ͳ Βͳ͍ – 

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

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

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

    /PEFKT OQNΤίγεςϜ –  $NE3ͰϦϩʔυͱ͔ –  'MFYCPYBOE4UZMJOH •  ϒϦοδͳͷͰ6*ʹ͸ଟগบ͕͋Δ –  3FBDU͕༻ҙͨ͠ίϯϙʔωϯτ
  11. ͱ͜ΖͰŋŋŋ ͜ͷΞʔΩςΫνϟͲͬ ͔Ͱݟͨ͜ͱͳ͍Ͱ͔͢ 

  12. 8SJUF0ODF "EBQU"OZXIFSF 5JUBOJVN4%, 5JUBOJVN.PCJMFͱݺ ͹Ε͍ͯͨ 

  13. hDps://speakerdeck.com/masuidrive/yuan-­‐mou-­‐evuanzierisutoga-­‐jian-­‐rureactna#ve

  14. None
  15. 3FBDU/BUJWFͷτϨʔυΦϑ •  ྨࣅͷΞʔΩςΫνϟ๊͕͑Δͷͱಉ༷ͷ ՝୊ –  ΍ͬͺΓͳʔ  •  +4ͰϒϦοδ͍ͯ͠Δ͜ͱʹΑΔܽ఺͸ ౰વ͋Δ

    – ௚઀ωΠςΟϒΛݺ΂ͳ͍ – '8PO'8ͷδϨϯϚ
  16. ϦϦʔεલ͸͍͢͝෺Λ૝૾ ͚ͯͨ͠Ͳɺ࣮ࡍग़ͨ΋ͷ͸ ʮ͏Μɺ·͋ݱ࣮తʹ͸ͦ͏ ͩΑͶʯతͳ *5ۀք͋Δ͋Δ

  17. 'BDFCPPL಺ʹ͸ෳ਺ͷ'8 •  3FBDU/BUJWF –  'BDFCPPL(SPVQ •  $PNQPOFOU,JU –  /FXT'FFEFUD – 

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

    5JUBOJVN.PCJMF •  3FBDU/BUJWF •  9BNBSJO –  /&5ςΫϊϩδʔͰ/BUJWF"QQ •  $ BTZODBXBJU -*/2 .77. •  ͋·Γৄ͘͠ͳ͍Ͱ͢  •  3VCZ.PUJPO –  3VCZˠ--7.ͰωΠςΟϒʹ –  ϒϦοδ΍ϥούͰ͸ͳ͍ϐϡΞωΠςΟϒ –  $PDPB1PETͳͲ΋ແཧͳ͘࢖͑Δ ΄͔ʹ΋͍Ζ͍Ζ ͋Δ
  19. ࡢࠓͷঢ়گ •  ೥ࠒͷύϑΥʔϚϯεతͳ໰୊͸͋ ·ΓݟΒΕͳ͍ – ୺຤ੑೳ͕޲্ͨ͠ – ࣮૷͕੒ख़͖ͯͨ͠ •  ϑϨʔϜϫʔΫPOϑϨʔϜϫʔΫʹ৐Δ ͔൱͔ 

  20. έʔεελσΟ •  'BCMJDࣾ͞Μͷ'SJM –  ঁੑ޲͚ϑϦϚΞϓϦ •  ૑ۀظʹ։ൃ଎౓ॏࢹͰ 5JUBOJVN –  ωΠςΟϒͷܦݧ΋͕͋ͬͨػಈੑ

    ॏࢹͰ5JUBOJVNʹ •  ੒௕ˠΤϯδχΞ࠾༻ˠωΠ ςΟϒͰϦϓϨΠε –  ։ൃϲ݄
  21. hDps://speakerdeck.com/ninjinkun/zhong-­‐gui-­‐mo-­‐ioskai-­‐fa-­‐tokodorebiyu

  22. தͷਓᐌ͘ •  ʮ5JUBOJVN͸σβΠφʔ͕௚઀+4࿔ͬͯσβ ΠϯมߋͰ͖ͨͷͰɺϑϦϧΈ͍ͨͳϏδϡΞ ϧσβΠϯॏࢹͷϓϩμΫτʹ͸ϑΟοτͯ͠ Δଆ໘΋͋ͬͨɺͱ͍͏࿩΋͋Γ·͢ʯ •  ʮ্ཱͪ͛ظ͔ΒσβΠϯॏࢹͰߦ͚ͨͷ͸ 5JUBOJVNͷ͓͔͛΋͋ͬͨΑ͏Ͱ͢ʯ

  23. έʔεελσΟ •  ;BJN͞Μ –  Ոܭ฽ΞϓϦ •  ઐ໳ՈͰ͸ͳ͍૑ۀऀ͕5JUBOJVNͰ։ൃ –  ʮ+4ͳΒͳΜͱ͔ॻ͚ͨʯΒ͍͠ – 

    ݱߦόʔδϣϯ΋5JUBOJVN –  ສϢʔβʔ"QQ4UPSF෦໳Ґ •  ωΠςΟϒԽ΁ –  J04ŋŋŋ4XJGUͰ࠶։ൃத –  "OESPJEŋŋŋ೥͕Μ͹͕ͬͨ౰࣌ͷ 5JUBOJVNͰ͸඼࣭Λ֬อͰ͖ͣωΠςΟϒ Խ 3FCVJMEGNFQ ࢀর
  24. தͷਓᐌ͘ •  5JUBOJVNͰ࡞ͬͨ"OEPSJE൛͸Α͘Ϋϥο γϡͯ͠େมͩͬͨ –  Ϋϥογϡ͕ݪҼͰϨϏϡʔ͕఺ •  ωΠςΟϒ൛ʹͯ͠ϨϏϡʔվળ –  ʮམͪͳ͘ͳͬͨʯʮ଎͘ͳͬͨʯʮݟͨ໨͕ྑ͘

    ͳͬͨʯ –  ͨͩ͠ଞͷࢪࡦ΋Ұॹʹ࣮ࢪͨ͠ͷͰ఺਺্͕͕ͬ ͨͷ͸࡞Γ௚͕͠શͯͱ͍͏Θ͚Ͱ͸ͳ͍ͱͷ͜ͱ 
  25. ߟ࡯ •  ಛ௕ΛΑ͘׆͔ͨ͠έʔε – Ϧʔϯతͳ؍఺͔Β •  ଎͘࡞ͬͯϑΟʔυόοΫΛूΊΔ •  ͢͹΍͘վम •  σβΠϯͷࢼߦࡨޡ

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

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

    جૅ඼࣭ͷ΋ͷΛ௿ ίετͰ࡞ΕΔ͜ͱ ͕Ξυόϯςʔδ ネイティブ  (標準) Alterna#ve ૬Ԡͷ඼࣭Λ௥ٻ͢ Δͱɺཁٻίετʹ ͸େ͕ࠩͳ͘ͳΔ ͜ͷล·Ͱཁٻ͢ ΔͳΒ࡞Γସ͑ͨ ํ͕͍͍͔΋
  28. ࠾Γ্͛ͳ͔ͬͨ͜ͱ •  ͦ΋ͦ΋ΫιΞϓϦ͸ಓ۩ͷ໰୊ͳͷ͔  –  ϞόΠϧΞϓϦͷ6*69΁ͷແཧղͱ͔ –  8FCͷ੒ޭମݧΛࣺͯΒΕͳ͍ͱ͔ –  "OESPJEͱJ04Λಉ͡ʹ͠ΖΈ͍ͨͳཁٻͱ͔

    •  ͕͢͞ʹ೥ʹ΋ͳͬͯͦΜͳ͜ͱݴ͏ਓ͸ŋŋŋ
  29. ߟ࡯ •  "MUFSOBUJWFͳಓ۩ʹ͸ͦΕͧΕಛ௕ –  ಛ௕Λઓུతʹ׆͔ͤ͹ϝϦοτ͸େ͖͍ –  /05ۜͷ஄ؙɻਅ໘໨ʹ΍Δͱ૬Ԡͷίετɻܽ఺ΛͲ͏Χόʔ͢Δ ͔ •  3FBDU/BUJWF

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