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

3FBDU/BUJWF

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

var  Playground  =  React.createClass({      getInitialState:  function()  {          return  {              text:  ""          };      },        _onChangeText:  function(text)  {          this.setState({  text:  text  });      },        render:  function()  {          return  (                                                      {this.state.text}                                                            );      }   }); setState() JSX

ΤσΟλ͸޷͖ͳ΋ͷ Ͱ $NE3ͰϦϩʔυ ίϯιʔϧ Ϗϧυ͸9DPEF

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ΛϥϯλΠϜͰಈ͔͠ ωΠςΟϒίʔυΛϒ Ϧοδ

•  ݟͨ໨͸/BUJWF –  Ͱ͖͕͋Γ΋·ͣ·ͣ/BUJWFʹḮ৭ͳ͍΋ͷʹ •  ଎౓͸ʮ/BUJWFʹ͍ۙʯ –  +4Λஞ࣮࣍ߦͯ͠ΔͷͰ/BUJWFͱಉ͡ʹ͸ͳ Βͳ͍ –  ࡢࠓͷ୺຤ͷੑೳ޲্΋͋ΓؾʹͳΒͳ͍Ϩϕϧ •  ։ൃͷײ৮ –  0CKFDUJWF$4XJGUͷͦΕͱ͸େ͖͘ҟͳΔ ωΠςΟϒͬΆ͘ͳ͍

3FBDUͷύϥμΠϜ State      {this.state.text}                      ...           setState() •  ΞϓϦέʔγϣϯͷঢ়ଶΛ4UBUFͰ؅ཧ •  7JFX͸ίϯϙʔωϯτࢦ޲Ͱ਌ࢠπϦʔ •  4UBUF͕มߋ͞ΕΔͱ7JFXͷඞཁՕॴ͕ࣗಈߋ৽

3FBDU/BUJWF •  3FBDU – ୯७Ͱֶशίετͷ௿͍ΞʔΩςΫνϟ – ௕ظతͳอकੑ ่Εʹ͍͘ઃܭ Λ୲อ •  ΞϓϦέʔγϣϯ΍7JFXͷNVUBCJMJUZ ঢ়ଶ ΛͲ͏ѻ͏΂͖͔ʹରͯ͠ղΛఏࣔ •  3FBDU/BUJWF – 3FBDUͱಉ͡΍ΓํͰΞϓϦΛ࡞ΕΔ •  㱺্هϝϦοτΛڗडͰ͖Δ

࣮ࡍͷ࢖༻ײ •  8FCͷ3FBDUΛ৮ͬͨ͜ͱ͕͋Ε͹͙͢ॻ͚Δ –  3FBDUͷઃܭ࡞๏΍'MVY·Ͱ͙࣮͢ફͰ͖Δ –  -FBSO0ODF͸ҏୡ͡Όͳ͍͔΋ •  ։ൃͷײ৮ͱͯ͠͸ɺ8FCͬΆ͍ –  /PEFKTOQNΤίγεςϜ –  $NE3ͰϦϩʔυͱ͔ –  'MFYCPYBOE4UZMJOH •  ϒϦοδͳͷͰ6*ʹ͸ଟগบ͕͋Δ –  3FBDU͕༻ҙͨ͠ίϯϙʔωϯτ

ͱ͜ΖͰŋŋŋ ͜ͷΞʔΩςΫνϟͲͬ ͔Ͱݟͨ͜ͱͳ͍Ͱ͔͢

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

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

No content

3FBDU/BUJWFͷτϨʔυΦϑ •  ྨࣅͷΞʔΩςΫνϟ๊͕͑Δͷͱಉ༷ͷ ՝୊ –  ΍ͬͺΓͳʔ •  +4ͰϒϦοδ͍ͯ͠Δ͜ͱʹΑΔܽ఺͸ ౰વ͋Δ – ௚઀ωΠςΟϒΛݺ΂ͳ͍ – '8PO'8ͷδϨϯϚ

ϦϦʔεલ͸͍͢͝෺Λ૝૾ ͚ͯͨ͠Ͳɺ࣮ࡍग़ͨ΋ͷ͸ ʮ͏Μɺ·͋ݱ࣮తʹ͸ͦ͏ ͩΑͶʯతͳ *5ۀք͋Δ͋Δ

'BDFCPPL಺ʹ͸ෳ਺ͷ'8 •  3FBDU/BUJWF –  'BDFCPPL(SPVQ •  $PNQPOFOU,JU –  /FXT'FFEFUD –  0CKFDUJWF$ –  3FBDU*OTQJSFE •  "TZOD%JTQMBZ,JU –  'BDFCPPLQBQFS –  GQT6*69 3FCVJMEGNFQ ࢀর ʮ3FBDU/BUJWF͕Ϟ όΠϧ։ൃͷܾఆ൛ʯ ͱ͍͏ελϯεͰ͸ͳ ͦ͞͏

"MUFSOBUJWFͳ։ൃπʔϧ •  $PSEPWB چ1IPOF(BQ –  8FCΞϓϦΛωΠςΟϒͰแΉ –  ͍ΘΏΔʮϋΠϒϦουΞϓϦʯ •  5JUBOJVN.PCJMF •  3FBDU/BUJWF •  9BNBSJO –  /&5ςΫϊϩδʔͰ/BUJWF"QQ •  $ BTZODBXBJU -*/2 .77. •  ͋·Γৄ͘͠ͳ͍Ͱ͢ •  3VCZ.PUJPO –  3VCZˠ--7.ͰωΠςΟϒʹ –  ϒϦοδ΍ϥούͰ͸ͳ͍ϐϡΞωΠςΟϒ –  $PDPB1PETͳͲ΋ແཧͳ͘࢖͑Δ ΄͔ʹ΋͍Ζ͍Ζ ͋Δ

ࡢࠓͷঢ়گ •  ೥ࠒͷύϑΥʔϚϯεతͳ໰୊͸͋ ·ΓݟΒΕͳ͍ – ୺຤ੑೳ͕޲্ͨ͠ – ࣮૷͕੒ख़͖ͯͨ͠ •  ϑϨʔϜϫʔΫPOϑϨʔϜϫʔΫʹ৐Δ ͔൱͔

έʔεελσΟ •  'BCMJDࣾ͞Μͷ'SJM –  ঁੑ޲͚ϑϦϚΞϓϦ •  ૑ۀظʹ։ൃ଎౓ॏࢹͰ 5JUBOJVN –  ωΠςΟϒͷܦݧ΋͕͋ͬͨػಈੑ ॏࢹͰ5JUBOJVNʹ •  ੒௕ˠΤϯδχΞ࠾༻ˠωΠ ςΟϒͰϦϓϨΠε –  ։ൃϲ݄

hDps://speakerdeck.com/ninjinkun/zhong-­‐gui-­‐mo-­‐ioskai-­‐fa-­‐tokodorebiyu

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

έʔεελσΟ •  ;BJN͞Μ –  Ոܭ฽ΞϓϦ •  ઐ໳ՈͰ͸ͳ͍૑ۀऀ͕5JUBOJVNͰ։ൃ –  ʮ+4ͳΒͳΜͱ͔ॻ͚ͨʯΒ͍͠ –  ݱߦόʔδϣϯ΋5JUBOJVN –  ສϢʔβʔ"QQ4UPSF෦໳Ґ •  ωΠςΟϒԽ΁ –  J04ŋŋŋ4XJGUͰ࠶։ൃத –  "OESPJEŋŋŋ೥͕Μ͹͕ͬͨ౰࣌ͷ 5JUBOJVNͰ͸඼࣭Λ֬อͰ͖ͣωΠςΟϒ Խ 3FCVJMEGNFQ ࢀর

தͷਓᐌ͘ •  5JUBOJVNͰ࡞ͬͨ"OEPSJE൛͸Α͘Ϋϥο γϡͯ͠େมͩͬͨ –  Ϋϥογϡ͕ݪҼͰϨϏϡʔ͕఺ •  ωΠςΟϒ൛ʹͯ͠ϨϏϡʔվળ –  ʮམͪͳ͘ͳͬͨʯʮ଎͘ͳͬͨʯʮݟͨ໨͕ྑ͘ ͳͬͨʯ –  ͨͩ͠ଞͷࢪࡦ΋Ұॹʹ࣮ࢪͨ͠ͷͰ఺਺্͕͕ͬ ͨͷ͸࡞Γ௚͕͠શͯͱ͍͏Θ͚Ͱ͸ͳ͍ͱͷ͜ͱ

ߟ࡯ •  ಛ௕ΛΑ͘׆͔ͨ͠έʔε – Ϧʔϯతͳ؍఺͔Β •  ଎͘࡞ͬͯϑΟʔυόοΫΛूΊΔ •  ͢͹΍͘վम •  σβΠϯͷࢼߦࡨޡ •  ҰํͰቕͬͨΓ΋ŋŋŋ ʮϓϩͷϓϩάϥϚ޲͚ʯͱ͍͏ ΑΓ͸ʮαʔϏε͕࡞Γ͍ͨαʔ Ϗεࢦ޲ͷਓ޲͚ʯͱ͍͏πʔϧ ͷಛੑΛ͏·͘׆͔ͨ͠

܏޲ •  ͦΕͧΕͷ4%,ʹ͸ͦΕͧΕಛ௃ •  ಛ௕Λ׆͔ͯ͠։ൃʹ૊ΈࠐΊ͹༗ޮ –  ྫઐ໳஌͕ࣝগͳͯ͘ࡁΉ㱺૑ۀظʹ •  ຊ֨తʹ΍Δͱ૬Ԡͷίετ –  ྫ •  ݁ہωΠςΟϒ૚ͷ஌͕ࣝඞཁʹ •  ϥΠϒϥϦ͕௚઀࢖͑ͳ͍㱺ϒϦοδ։ൃ޻਺ •  ϑϨʔϜϫʔΫ࣮૷ͷཧղ •  ϨΠϠ͕ॏͳͬͯͯσόοάͮ͠Β͍ಛघͳσόοΨ •  ωΠςΟϒฒΈͷ࡞ΓࠐΈʹωΠςΟϒΑΓ͕͔͔࣌ؒΔ

஌తίετ ྫֶशίετਂ௥͍ඞཁػձ ϓϩμΫτ඼࣭νʔϜ։ൃ ੜ࢈ੑͳͲ ˞ಛఆͷ࣮૷ʹ͍ͭͯϞσϧԽͨ͠΋ͷͰ͸ͳ͘ ͋͘·Ͱߟ͑ํͷϑϨʔϜϫʔΫͰ͢ ͋Δఔ౓ͷ඼࣭ΛٻΊΔ ͱ஌తίετ͕ಉ౳͋Δ ͍͸ٯస͢ΔͱԾఆ جૅ඼࣭ͷ΋ͷΛ௿ ίετͰ࡞ΕΔ͜ͱ ͕Ξυόϯςʔδ ネイティブ  (標準) Alterna#ve ૬Ԡͷ඼࣭Λ௥ٻ͢ Δͱɺཁٻίετʹ ͸େ͕ࠩͳ͘ͳΔ ͜ͷล·Ͱཁٻ͢ ΔͳΒ࡞Γସ͑ͨ ํ͕͍͍͔΋

࠾Γ্͛ͳ͔ͬͨ͜ͱ •  ͦ΋ͦ΋ΫιΞϓϦ͸ಓ۩ͷ໰୊ͳͷ͔ –  ϞόΠϧΞϓϦͷ6*69΁ͷແཧղͱ͔ –  8FCͷ੒ޭମݧΛࣺͯΒΕͳ͍ͱ͔ –  "OESPJEͱJ04Λಉ͡ʹ͠ΖΈ͍ͨͳཁٻͱ͔ •  ͕͢͞ʹ೥ʹ΋ͳͬͯͦΜͳ͜ͱݴ͏ਓ͸ŋŋŋ

ߟ࡯ •  "MUFSOBUJWFͳಓ۩ʹ͸ͦΕͧΕಛ௕ –  ಛ௕Λઓུతʹ׆͔ͤ͹ϝϦοτ͸େ͖͍ –  /05ۜͷ஄ؙɻਅ໘໨ʹ΍Δͱ૬Ԡͷίετɻܽ఺ΛͲ͏Χόʔ͢Δ ͔ •  3FBDU/BUJWF –  ௕ظతͳอकੑΛᨳͬͯ͸͍Δ –  ͕ɺܽ఺෦෼͕௕ظతʹͲ͏ڹ͔͘͸·ͩະ஌਺ •  ݸਓతͳݟղ –  ͦͦ͜͜ͷن໛ͷ։ൃ૊৫͔ͭ௕͘อक͢ΔͳΒશମ࠷ద ڭҭɺ౤ࢿɺ ਓࡐ֬อ ͷ؍఺͔Βඪ४Ͱ͍͍ͷͰ͸ –  খ͞ͳνʔϜɺ૑ۀظɺ୹ೲظҰߟͷ༨஍͋Γ –  झຯŋŋŋ޷͖ͳ෺࢖͑͹ΑΖ͍͠ 3VCZ.PUJPO࢖ͬͯ·͢J

5IBOLT ֆCZ͋ΘΏ͖