React-nativeの紹介

 React-nativeの紹介

React-nativeの紹介。yidel 第24回勉強会で発表

7ec547b3208545bcb5e6c0f1feb732c7?s=128

裕美 吉田

July 02, 2016
Tweet

Transcript

  1. 3FBDUOBUJWF ͷ঺հ ٢ా༟ඒ

  2. ࣗݾ঺հ

  3. ٢ా༟ඒ :PTIJEB:VVNJ  ༗ݶձࣾ&:0⒏DF IUUQXXXFZP⒏DFDPN #MPHIUUQZVVNJIBUFOBCMPHDPN 5XJUUFS!ZVVNJ 3

  4. աڈ େֶͷ޻ֶ෦ଔۀ ଔۀݚڀͰ-JTQॲཧܥʹؔΘΔ ૊ࠐܥͷձࣾʹब৬ $"%ͷϕϯνϟʔاۀʹస৬ $"%ͷίΞ෦෼ͷ։ൃ γϦίϯόϨʔΛ๚໰ͨ͠Γɺถࠃਓͱ࢓ࣄΛ ܦݧ 4

  5. ̌ੈل͕ऴΘΔͷͰಠཱ ΧϦϑΥϧχΞͷ੨͍ۭΛΈͨ ͋·ΓձࣾʹೃછΊͳ͍ਓͩͬͨ ωοτͷ࣌୅ʹͳͬͨ 5 IUUQCMPHMFYVFTDPKQIUNM͔Β

  6. &:0⒏DF ೥ʹಠཱ ։ൃ 8FC 3VCZPO3BJMT  J1IPOF ڭҭ ͓٬༷ͷ໰୊Λղܾ͢Δ*5ڭҭ 3VCZPO3BJMT

    J04 6 3FBDUKT
  7. &:0⒏DF։ൃ 8FC 7 w ΞδΞϦʔάΞΠεϗοέʔ wIUUQXXXBMIPDLZKQ wνʔϜɾબखͷ੒੷ूܭ w1FSMಠࣗϑϨʔϜϫʔΫ wΞϩϋύʔΫ wIUUQQBSLBMPIB

    TUSFFUDPN w4/4 w+BWB4FBTBS wωοτγϣοϓ wIUUQXXXCPSPDPKQ w3BJMTK2VFSZ w34QFD$VDVNCFS w๖͑τʔΫ ੠༏ͱ4LZQF Ͱ͓࿩  wIUUQXXXNPFUBMLKQ w੠༏ͱͷձ࿩༧໿༧໿ w3BJMTK2VFSZ w34QFD3FRVFTU
  8. &:0⒏DF։ൃ J1IPOF 8 ֆຊΞϓϦ J1IPOFJ1BE 5XFFUͳ͏ ແྉ ڭ͑ࢠ͕࡞ͬͨΞϓϦ ϦϦʔε͞Εͳ͔ͬ ͨ"ࣾΞϓϦ

  9. ࣥච 9

  10. ߨԋ 10 RubyKaigi2008 Ruby World Conference 2013 Ruby Business Users

    Conference 2014, 2015
  11. ࠷ۙͷ࢓ࣄ 11 ໿ສߦͷK2VFSZϕʔεͷ41"Λ 3FBDUKT΁Ҡߦ IUUQZVVNJIBUFOBCMPHDPNFOUSZ

  12. 3FBDUOBUJWF

  13. 3FBDU/BUJWF +4 3FBDUͰεϚϑΥΞϓϦΛߏங ͢ΔͨΊͷϑϨʔϜϫʔΫ J04 "OESPJEʜରԠ σόΠε (14 Χϝϥʜ ΋ར༻Ͱ͖Δ

    IUNMͷເΑ΋͏Ұ౓ʁ 13
  14. 14 3FBDU/BUJWF ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO CSBODISFBDUOBUJWF σϞ

  15. ͦ͏͍͏ͷੲ͋ͬͨΑͶ 5JUBOJVN 1IPOF(BQ $PSEPWB ʜ 15

  16. ੲͱԿ͕ҧ͏ͷʁ 3FBDUKT 3FBDUOBUJWFͷ3FBDU͸3FBDUKT ͷ3FBDU 16

  17. 3FBDUKTͱ͸

  18. ·ͣ͸41" ࠷ۙͷ8FCαΠτ 4JOHMF1BHF"QQMJDBUJPO

  19. ݹ͖ྑ͖8FCΞϓϦ 19 controller model view HTML (css, image) request HTML

    Server Browser
  20. "KBYγϯϓϧ 20 controller model view HTML (css, image) request HTML

    Server Browser JS request HTML
  21. "KBYෳࡶ 21 controller model view HTML (css, image) request HTML

    Server Browser JS request HTML state, data
  22. 41" 22 controller model request Server Browser JS controller model

    view HTML css, image JSON iOS / Android request JSON $MJFOUTJEF.7$ͱݺ͹ΕΔࣄ΋͋Δ
  23. 23 ຖ೥ͷΑ͏ʹ৽͍͠ϥΠϒϥϦʔɾ ϑϨʔϜ͕ొ৔͍ͯͨ͠ 41"ϥΠϒϥϦʔɾϑϨʔϜϫʔΫ

  24. 3FBDUKT 24 ͔͠͠ɺ41"ϥΠϒϥϦʔɾϑϨʔ ϜϫʔΫͷউऀ͕ܾ·Γ·ͨ͠

  25. 3FBDUKT 3FBDUJTBHBNFDIBOHJOHJOOPWBUJPO

  26. &:0⒏DF 3FBDUKT γϯϓϧͳϓϩάϥϛϯάϞσϧͱੑೳ Λཱ྆ ϝϯςφϯεੑ͕ߴ͍ίʔυ͕ॻ͚Δ 'BDFCPPL͕࣮ࡍʹ࢖͍ͬͯΔ࣮੷ 26

  27. &:0⒏DF 3FBDUKT γϯϓϧͳϓϩάϥϛϯάϞσϧͱੑೳΛཱ྆ 27 override func viewDidLoad() { super.viewDidLoad() self.instance

    = XXXX1 ͍Ζ͍Ζઃఆ } @IBAction func pushButton(sender: AnyObject) { self.instance = XXXX2 ඞཁͳ৔ॴΛॻ͖׵͑Δ } ը໘ͷঢ়ଶΛॳظԽ ը໘શମΛදࣔ Ұ෦Λ࠶දࣔ ը໘ͷঢ়ଶΛมߋ Button J04 K2VFSZʜ Πϕϯτ
  28. &:0⒏DF 3FBDUKT γϯϓϧͳϓϩάϥϛϯάϞσϧͱੑೳΛཱ྆ 28 class Top extends Component { constructor(props)

    { super(props) this.state = { . . . } } render() { <શը໘දࣔ༻ίʔυ> } onClick(event) { this.stat.xxx = {XXXX} } } ը໘ͷঢ়ଶΛॳظԽ ը໘શମΛදࣔ ࣗಈతʹҰ෦ͷΈ Λ࠶දࣔ ը໘ͷঢ়ଶΛมߋ Button 3FBDUKT Πϕϯτ
  29. &:0⒏DF 3FBDUKT 7JSUVBM%0. 3FBDUKTͷද͕ࣔߴ଎ԽͰ͖Δٕज़ ϝϞϦʔ্ʹͷมߋલޙͷ%0.Λ࣋ͪɺ มߋ͕͋ͬͨ෦෼Λݕग़͠ɺຊ౰ʹมߋ͕ ඞཁͳ෦෼ͷΈΛը໘ʹ൓ө͢Δ 29

  30. 3FBDUKT ίϯϙʔωϯτ $PNQPOFOUΛܧঝͨ͠Ϋϥε ϑϧػೳ ؔ਺ දࣔͷΈͷίϯϙʔωϯτ 30

  31. 3FBDUKT 31 IUUQUFSPQBJOGPCMPHDIBOHFBOEJUTEFUFDUJPOJOKBWBTDSJQUGSBNFXPSLTIUNM ΑΓ 7JSUVBM%0. ϒϥ΢βʔ ը໘ +4 ϝϞϦʔ

  32. &:0⒏DF 3FBDUKT ϝϯςφϯεੑ͕ߴ͍ίʔυ͕ॻ͚Δ ίϯϙʔωϯτࢦ޲ +4ͷதʹ)5.-Λॻ͘+49Λ࠾༻ 32

  33. 3FBDUKT 33

  34. 34 3FBDUKT ?? 

  35. Ͱ΋ɺ+BWB4DSJQUͬͯ͋ ͷμα͍ݴޠͰ͠ΐ͏ ͋ͳͨ͸ɺݱࡏͷ+BWB4DSJQUΛ஌ͬ ͍ͯ·͔͢ʁ 35

  36. &4 &4

  37. &4 &4 +BWB4DSJQUͷ৽͍͠࢓༷ &$."4DSJQU ͷ ೥൛ ैདྷ&4ͱݺ͹Ε͍ͯͨ΋ͷ ͪͳΈʹݱࡏͷ+4͸&4 Ϋϥε΍਺ʑͷ৽͍͠จ๏͕ಋೖ͞Εॻ͖ ΍͕͢͞େ෯ʹ޲্ͨ͠

    &4 &4 ΋࠷ۙ࢓༷͕֬ఆ 37
  38. 38 &4 &4 var PI = 3.141592 function square(x) {

    return x * x; } function tax(n, rate) { if (rate == undefined) rate = 0.08; return Math.floor(n * rate); } const PI = 3.141592 square = (x) => x * x tax = (n, rate = 0.08) => Math.floor(n * rate) &4 &4
  39. 39 &4 &4 Jyanken = (function() { function Jyanken(hand) {

    this.hand = hand; } jyanken.prototype.poi = function() { return this.hand = Math.floor(Math.random() * 3); }; jyanken.prototype.judge = function(your) { if (this.hand === your.hand) { return "Ҿ͖෼͚"; } else if ( ..লུ.. ) { return "উͪ"; } else { return "ෛ͚"; } }; return Jyanken; })(); class Jyanken { constructor(hand) { this.hand = hand } poi() { this.hand = Math.floor(Math.random() * 3) } judge(your) { if (this.hand === your.hand) { return "Ҿ͖෼͚" } else if ( ..লུ.. ) { return "উͪ" } else { return "ෛ͚" } } } &4 &4
  40. &4 &4 ݱ࣌఺Ͱ͸ϒϥ΢βʔͷαϙʔτ͸׬શ Ͱ͸ͳ͍ ಛʹεϚϑΥͷϒϥ΢βʔ͸μϝ ݱࡏ͸&4͔Β&4ʹม׵͢Δπʔϧ ୅ ද#BCFM ౳Ͱม׵͠ར༻͞Ε͍ͯΔ 40

    IUUQTLBOHBYHJUIVCJPDPNQBUUBCMFFTΑΓ
  41. 41 &4 &4 +BWB4DSJQU"MUFSOBUJWFT $P⒎F4DSJQU ΋͏๨Ε·͠ΐ͏ 5ZQF4DSJQU ܕ͕޷͖ 4XJGU ͳํ͸࢖͍·͠ΐ͏

    7JTVBM4UVEJP 8FC4UPSN #BCFMͳ Ͳ͕ରԠ
  42. 3FBDUKT

  43. 43 3FBDU/BUJWF ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO CSBODISFBDUOBUJWF ίʔυ

  44. 3FBDUKTϕετϓϥΫςΟε 44 ίϯϙʔωϯτ਌ ίϯϙʔωϯτࢠ ίϯϙʔωϯτଙ σʔλ QSPQT Πϕϯτ TUBUF

  45. &:0⒏DF 3FBDUOBUJWFKT ৘ใݯ IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF 45

  46. ͓·͚ɺ&MFDUSPO ϚϧνϓϥοτϑΥʔϜͷ(6*ΞϓϦΛ ࡞ΔͨΊͷϑϨʔϜϫʔΫ 8JOEPXT .BD -JOVY /PEFKT $ISPNJVNϕʔε ΋ͱ΋ͱ"UPNΤσΟλʔͷҰ෦ͩͬͨ ࣮ࡍʹ࢖ΘΕ͍ͯΔ

    46
  47. 47 &MFDUSPO

  48. 3FBDUKT͸ྑ͍Αʂ 3FBDUOBUJWF͸༻్͕߹͑͹࢖ͬ ͯΔͱྑ͍ͷͰ͸ 48 ·ͱΊ ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO

  49. ͓஌Βͤ &:0⒏DF͸3FBDUKTͷڭҭ Λ։࢝͠·ͨ͠ɻ 49