React-nativeの紹介

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

Transcript

1. 3FBDUOBUJWF
   ͷ঺հ ٢ా༟ඒ
2. ࣗݾ঺հ
3. ٢ా
   ༟ඒ
   :PTIJEB
   :VVNJ
   ༗ݶձࣾ
   &:0⒏DF
   IUUQXXXFZP⒏DFDPN
   #MPH
   
   IUUQZVVNJIBUFOBCMPHDPN
   5XJUUFS
   !ZVVNJ 3
4. աڈ େֶͷ޻ֶ෦ଔۀ
   ଔۀݚڀͰ-JTQॲཧܥʹؔΘΔ
   ૊ࠐܥͷձࣾʹब৬
   $"%ͷϕϯνϟʔاۀʹస৬
   $"%ͷίΞ෦෼ͷ։ൃ
   γϦίϯόϨʔΛ๚໰ͨ͠Γɺถࠃਓͱ࢓ࣄΛ ܦݧ 4
5. ̌ੈل͕ऴΘΔͷͰಠཱ ΧϦϑΥϧχΞͷ੨͍ۭΛΈͨ
   ͋·ΓձࣾʹೃછΊͳ͍ਓͩͬͨ
   ωοτͷ࣌୅ʹͳͬͨ 5 IUUQCMPHMFYVFTDPKQIUNM͔Β
6. &:0⒏DF ೥ʹಠཱ
   ։ൃ
   8FC
   3VCZ
   PO
   3BJMT
   J1IPOF
   ڭҭ
   ͓٬༷ͷ໰୊Λղܾ͢Δ*5ڭҭ
   
   3VCZ
   PO
   3BJMT
   J04 6 3FBDUKT
7. &:0⒏DF
   ։ൃ
   8FC 7 w ΞδΞϦʔάΞΠεϗοέʔ
   wIUUQXXXBMIPDLZKQ
   wνʔϜɾબखͷ੒੷ूܭ
   w
   1FSM
   ಠࣗϑϨʔϜϫʔΫ wΞϩϋύʔΫ
   
   wIUUQQBSLBMPIB TUSFFUDPN
   w4/4
   w+BWB
   
   4FBTBS wωοτγϣοϓ
   wIUUQXXXCPSPDPKQ
   w3BJMT
   
   K2VFSZ
   w34QFD
   
   $VDVNCFS w๖͑τʔΫ
   ੠༏ͱ4LZQF Ͱ͓࿩
   wIUUQXXXNPFUBMLKQ
   w੠༏ͱͷձ࿩༧໿༧໿
   w3BJMT
   
   K2VFSZ
   w34QFD
   
   3FRVFTU
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
    
    
    
    
    
    
    
    
    
    
    
    
    
    CSBODI
    SFBDUOBUJWF σϞ
15. ͦ͏͍͏ͷੲ͋ͬͨΑͶ 5JUBOJVN
    1IPOF(BQ
    $PSEPWB
    ʜ 15
16. ੲͱԿ͕ҧ͏ͷʁ 3FBDUKT
    3FBDUOBUJWFͷ3FBDU͸
    3FBDUKT ͷ3FBDU 16
17. 3FBDUKT
    ͱ͸
18. ·ͣ͸41"
    ࠷ۙͷ8FCαΠτ 4JOHMF
    1BHF
    "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 $MJFOU
    TJEF
    .7$ͱݺ͹ΕΔࣄ΋͋Δ
23. 23 ຖ೥ͷΑ͏ʹ৽͍͠ϥΠϒϥϦʔɾ ϑϨʔϜ͕ొ৔͍ͯͨ͠ 41"ϥΠϒϥϦʔɾϑϨʔϜϫʔΫ
24. 3FBDUKT 24 ͔͠͠ɺ41"ϥΠϒϥϦʔɾϑϨʔ ϜϫʔΫͷউऀ͕ܾ·Γ·ͨ͠
25. 3FBDUKT 3FBDU
    JT
    B
    HBNF
    DIBOHJOH
    JOOPWBUJPO
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 ͳํ͸࢖͍·͠ΐ͏
    7JTVBM
    4UVEJP
    8FC4UPSN
    #BCFM
    ͳ Ͳ͕ରԠ
42. 3FBDUKT
43. 43 3FBDU
    /BUJWF ίʔυɿ
    IUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO
    
    
    
    
    
    
    
    
    
    
    
    
    
    CSBODI
    SFBDUOBUJWF ίʔυ
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