ReactNative はじめの一歩

第16回 岡山モバイルアプリ開発もくもく回 ( #okamoba ) での発表資料です！

React Native とは？ と思いまして、一から調べてみました。

・ React とは？
・ React Nativeとは？
・ React Native の メリット・デメリット
・ サンプルアプリを動かしてみる

こんな感じの構成です！

Transcript

1. 3FBDU/BUJWF
   
   ͸͡ΊͷҰา
   
   
   ୈճ
   ԬࢁϞόΠϧΞϓϦ։ൃ΋͘΋͘ձ 
2. ͓͠ͳ͕͖ 
3. ຊ೔ͷ͓඼ॻ͖ ̍ɽ
   ͋͹͏ͱΈʔ
   ̎ɽ
   3FBDU/BUJWFͱ͸
   ̏ɽ
   αϯϓϧΞϓϦ
   Λ
   ಈ͔ͯ͠ΈΔ 
4. ̍ɽ͋͹͏ͱΈʔ 
5. ̍ɽ͋͹͏ͱΈʔ ߴڮ
   
   Ұٍ
   
   !JLLJUBOH
   
   
   ɾ
   Ԭࢁͷ
   4*FS
   ۈ຿
   ɾ
   1)1FSɺ4XJGUͷਓ
   ɾ
   +16(
   தࠃࢧ෦௕ 
6. ̍ɽ͋͹͏ͱΈʔ 
7. ̍ɽ͋͹͏ͱΈʔ ݁ࠗ͸͍͍ͧʂ 
8. ̍ɽ͋͹͏ͱΈʔ ୈ̎̍ճ
   தࠃ஍ํ%#ษڧձ
   JO
   ࢁޱ
   IUUQECTUVEZDIVHPLVHJUIVCJP
   
   
9. ̍ɽ͋͹͏ͱΈʔ ୈ̎̍ճ
   தࠃ஍ํ%#ษڧձ
   JO
   ࢁޱ
   ɾ
   "NB[PO
   8FC
   4FSWJDFT
   
   ɾ
   (PPHMF
   $MPVE
   1MBUGPSN
   
   ɾ
   .JDSPTPGU
   "[VSF
   ओཁΫϥ΢υʹ͓͚Δ
   σʔλϕʔεϚωδϝϯταʔϏεΛ
   ࠷ڧͷߨࢣਞʹΑ͓ͬͯ఻͑͠·͢ʂ 
10. ̎ɽ3FBDU/BUJWF
    ͱ͸ 
11. 
    ̎ɽ3FBDU/BUJWF
    ͱ͸ 3FBDUɿ
    ɹ'BDFCPPL͕։ൃͨ͠+BWB4DSJQUͷ
    ɹϑϨʔϜϫʔΫ
    ɹl-FBSO
    0ODF
    8SJUF
    "OZXIFSFz
    3FBDU
    /BUJWFɿ
    ɹ3FBDU
    Λ
    ϞόΠϧͰ࢖͑ΔΑ͏ʹͨ͠΋ͷ
    
12. 
    ̎ɽ3FBDU/BUJWF
    ͱ͸ 3FBDUɿ
    ɹ'BDFCPPL͕։ൃͨ͠+BWB4DSJQUͷ
    ɹϑϨʔϜϫʔΫ
    ɹl-FBSO
    0ODF
    8SJUF
    "OZXIFSFz
    3FBDU
    /BUJWFɿ
    ɹ3FBDU
    Λ
    ϞόΠϧͰ࢖͑ΔΑ͏ʹͨ͠΋ͷ
    
13. ΞϓϦ
    
    +BWB4DSJQU
    ͱ͍͑͹ɾɾ 
14. 
15. ϋΠϒϦουΞϓϦͱͷҧ͍  $PSEPWB
    .POBDB 3FBDU
    /BUJWF ಈ࡞ ϩʔΧϧͷ8FC7JFX ωΠςΟϒ 6*࡞੒ )5.-ɾ$44 KTYܗࣜͰ࡞੒ͨ͠ίϯϙʔωϯτΛ
    ૊Έ߹Θͤͯఆٛ ݴޠ +BWB4DSJQU +BWB4DSJQU
16. ϋΠϒϦουΞϓϦͱͷҧ͍  $PSEPWB
    .POBDB 3FBDU
    /BUJWF ಈ࡞ ϩʔΧϧͷ8FC7JFX ωΠςΟϒ 6*࡞੒ )5.-ɾ$44 KTYܗࣜͰ࡞੒ͨ͠ίϯϙʔωϯτΛ
    ૊Έ߹Θͤͯఆٛ ݴޠ +BWB4DSJQU +BWB4DSJQU
17. 
    ̎ɽ3FBDU/BUJWF
    ͱ͸
    
    
    
    
    
    
    
    3FBDU
    /BUJWF
    ͱ
    ϋΠϒϦουΞϓϦ 3FBDU/BUJWF͸ωΠςΟϒ্Ͱಈ͘ͷͰ
    6*ͷύϑΥʔϚϯε͸ωΠςΟϒΞϓϦͱ
    ΄΅ಉϨϕϧͰ
    ͔ͭɺ
    ϋΠϒϦουΞϓϦΑΓ΋
    ߴ଎
    ʹಈ࡞͢Δɻ 
18. ϋΠϒϦουΞϓϦͱͷҧ͍  $PSEPWB
    .POBDB 3FBDU
    /BUJWF ಈ࡞ ϩʔΧϧͷ8FC7JFX ωΠςΟϒ 6*࡞੒ )5.-ɾ$44 KTYܗࣜͰ࡞੒ͨ͠ίϯϙʔωϯτΛ
    ૊Έ߹Θͤͯఆٛ ݴޠ +BWB4DSJQU +BWB4DSJQU
19. ίϯϙʔωϯτΛ
    ૊Έ߹Θͤͯఆٛʁ 
20. 
    ̎ɽ3FBDU/BUJWF
    ͱ͸
    
    
    
    
    
    
    
    ίϯϙʔωϯτ
    ͷ
    ૊Έ߹Θͤ ˞
    ࠓճ͸-5ͳͷͰ
    Πϝʔδ͚ͩɻ
    ྫ͑͹ɺ
    ӈͷΑ͏ͳ6*ͷ
    ΞϓϦΛ࡞Δ࣌ɻ 
21. 
    ̎ɽ3FBDU/BUJWF
    ͱ͸
    
    
    
    
    
    
    
    ίϯϙʔωϯτ
    ͷ
    ૊Έ߹Θͤ ˞
    ࠓճ͸-5ͳͷͰ
    Πϝʔδ͚ͩɻ
    ྫ͑͹ɺ
    ӈͷΑ͏ͳ6*ͷ
    ΞϓϦΛ࡞Δ࣌ɻ  5JNF-JOF
    ίϯϙʔωϯτ 5JNF-JOF
    ίϯϙʔωϯτ 5JNF-JOF
    ίϯϙʔωϯτ 5JNF-JOF
    ίϯϙʔωϯτ 5JNF-JOF
    ίϯϙʔωϯτ
22. 
    ̎ɽ3FBDU/BUJWF
    ͱ͸
    
    
    
    
    
    
    
    ίϯϙʔωϯτ
    ͷ
    ૊Έ߹Θͤ ˞
    ࠓճ͸-5ͳͷͰ
    Πϝʔδ͚ͩɻ
    ྫ͑͹ɺ
    ӈͷΑ͏ͳ6*ͷ
    ΞϓϦΛ࡞Δ࣌ɻ  \
    
    
    lJDPOz
    lJLLJ@JDPOQOHz
    
    
    lOBNFz
    lJLLJUBOHz
    
    
    lUXFFUz
    lதࠃ஍ํ%#ษڧձʙz
    ^
23. 
    ̎ɽ3FBDU/BUJWF
    ͱ͸
    
    
    
    
    
    
    
    3FBDU
    /BUJWF
    ͷϝϦοτ 3FBDU
    Λ
    ϕʔεʹ։ൃ͞Ε͍ͯΔͷͰ
    ݩʑͷ
    3FBDU
    ͷ
    ։ൃ࣌ͷϊ΢ϋ΢Λ
    ͦͷ··׆͔͢ࣄ͕Ͱ͖Δɻ 
24. 3FBDU
    /BUJWF
    ࠷ڧ͡ΌΜʂ 
25. ͓ͬͯ΋ʔ͡ΌΜʂʁ 
26. 
    ̎ɽ3FBDU
    /BUJWF
    ͱ͸
    
    
    
    
    
    
    
    3FBDU
    /BUJWF
    ͷσϝϦοτ ·ͩɺރΕ͍ͯͳ͍ɻ
    ɹɾ
    όʔδϣϯΞοϓͷ௥ै͕ͭΒ͍
    Β͍͠
    ɹɹ
    ̍ϲ݄ʹ̍ճɺόʔδϣϯ্͕͕Δ
    ࠓ
    
    
    ɹɾ
    ·ͩ·ͩɺ৘ใྔ͕গͳ͍
    Β͍͠ 
27. 
    ̎ɽ3FBDU/BUJWF
    ͱ͸
    
    
    
    
    
    
    
    ·ͱΊ 3FBDU/BUJWF͸
    'BDFCPPL
    ੡ͷ
    ϑϨʔϜϫʔΫɻ
    ϝϦοτ
    ɹ6*ͷύϑΥʔϚϯε͸ωΠςΟϒΞϓϦͱ
    ɹ΄΅ಉϨϕϧͰ
    ߴ଎
    ʹಈ࡞͢Δɻ
    
    
    
    3FBDU
    Ͱഓͬͨϊ΢ϋ΢Λͦͷ··׆͔ͤΔɻ
    σϝϦοτ
    ɹόʔδϣϯΞοϓස౓͕ߴ͘ɺރΕ͍ͯͳ͍ɻ
    
28. ̏ɽαϯϓϧΞϓϦ
    ࡞੒ 
29. ·ͣ͸ɺ؀ڥߏங 
30. 
    ̏ɽαϯϓϧΞϓϦ
    ࡞੒
    
    
    
    
    
    
    
    ؀ڥߏங
    ʢ.BD ɾ
    )PNF#SFX
    Λ
    ೖΕΔ
    
    
    
    <)PNF#SFX
    Πϯετʔϧ
    .BD>
    <ݕࡧ>
    
    ɾ
    ύοέʔδΛೖΕΔ
    ɹ
    CSFX
    JOTUBMM
    OPEF
    
    
    
    
    CSFX
    JOTUBMM
    XBUDINBO
    ɾ
    3FBDU
    /BUJWF
    $-*
    ΛೖΕΔɻ
    ɹ
    OQN
    JOTUBMM
    H
    SFBDUOBUJWFDMJ
    
31. 
    ̏ɽαϯϓϧΞϓϦ
    ࡞੒
    
    
    
    
    
    
    
    ΞϓϦͷ৽ن࡞੒ ɾ
    λʔϛφϧͰҎԼίϚϯυ࣮ߦ
    
    
    
    
    
    SFBDUOBUJWF
    
    
    JOJU
    
    
    )FMMP8PSME
    ɹϑΥϧμߏ੒͸͜Μͳײ͡
    
32. 
    ̏ɽαϯϓϧΞϓϦ
    ࡞੒
    
    
    
    
    
    
    
    ΞϓϦͷ৽ن࡞੒ ɾ
    λʔϛφϧͰҎԼίϚϯυ࣮ߦ
    
    
    
    
    
    SFBDUOBUJWF
    
    
    JOJU
    
    
    )FMMP8PSME
    ɹϑΥϧμߏ੒͸͜Μͳײ͡
     ΤϯτϦϙΠϯτ ΤϯτϦϙΠϯτ ֤04༻
    ϑΝΠϧ
33. 
    ̏ɽαϯϓϧΞϓϦ
    ࡞੒
    
    
    
    
    
    
    
    ΞϓϦͷ࣮ߦ ࣮ߦ͢Δʹ͸ɿ
    ɹΠϯετʔϧޙʹදࣔ͞ΕΔࢦࣔʹै͏
    ɹɾ
    5P
    SVO
    ZPVS
    BQQ
    PO
    J04
    
    ɹ۩ମతʹ͸
    
    ɾ
    
    SFBDUOBUJWF
    SVOJPT
    Λ࣮ߦɻ 
34. 
    ̏ɽαϯϓϧΞϓϦ
    ࡞੒
    
    
    
    
    
    
    
    ΞϓϦͷ࣮ߦ ग़དྷͨʂ
    )FMMP8PSME
    ͱ͸͍͍ͬͯͳ͍ 
35. ͪΐͬͱɺमਖ਼ͯ͠ΈΔ 
36. 
    ̏ɽαϯϓϧΞϓϦ
    ࡞੒
    
    
    
    
    
    
    
    ίʔυͷमਖ਼ ϓϩδΣΫτϑΥϧμ಺ͷ
    JOEFYJPTKT
    Λ
    ։͖·͢ɻ 
37. 
    ̏ɽαϯϓϧΞϓϦ
    ࡞੒
    
    
    
    
    
    
    
    ίʔυͷमਖ਼ 
38. 
    ̏ɽαϯϓϧΞϓϦ
    ࡞੒
    
    
    
    
    
    
    
    ίʔυͷमਖ਼  )FMMP
    8PSME
    Λ
    ௥Ճ
39. ίʔυͷमਖ਼͕׬ྃͨ͠
    
    γϛϡϨʔλʔ
    Ͱ
    ֬ೝ 
40. 
    ̏ɽαϯϓϧΞϓϦ
    ࡞੒
    
    
    
    
    
    
    
    ίʔυमਖ਼ͷ൓ө ӈͷը໘Ͱɺ
    㵰
    
    
    
    3
    ΩʔΛԡ͢ʂ 
41. 
    ̏ɽαϯϓϧΞϓϦ
    ࡞੒
    
    
    
    
    
    
    
    ίʔυमਖ਼ͷ൓ө ӈͷը໘Ͱɺ
    㵰
    
    
    
    3
    ΩʔΛԡ͢ʂ  ίʔυमਖ਼͕
    ൓ө
42. 
    ̏ɽαϯϓϧΞϓϦ
    ࡞੒
    
    
    
    
    
    
    
    ·ͱΊ ɾ
    ։ൃ؀ڥͷηοτΞοϓ͕ࢮ͵΄Ͳ؆୯ͩͬͨɻ
    ɾ
    ίʔυमਖ਼ͷ൓ө͕
    9$PEF
    Ͱͷ
    ։ൃͷ࣌ͱҧ͍
    ɹ
    ίϚϯυΛೖྗ͢Δ͚ͩͰग़དྷΔɻ
    ɹ
    ͔͠΋ɺߴ଎ 
43. ࣍ճ͸
    3FBDU
    /BUJWF
    Λ
    ࢖ͬͯ
    5PEP
    ؅ཧ
    ΞϓϦͱ͔Λ
    ࡞ͬͯΈ͍ͨͱࢥ͍·͢ʂ 
44. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ