ReactNativeで大規模アプリを作るときに気を付けたいこと

画面やフォーム数が多いアプリの開発には、単機能のアプリにはない複雑な問題が潜んでいます。比較的大きなアプリを開発した経験から、選ぶといいライブラリ、仕様からアプリ特化フレームワークへの落とし込み方と、その設計方法など、ReactNativeで心がけたい複雑なアプリを作るときに大事なことを自分なりのエッセンスとして抽出してお話しします。

html5j Webプラットフォーム部 第21回勉強会

Transcript

1. 3FBDU/BUJWFͰ
 େن໛ΞϓϦΛ࡞Δͱ͖ʹ
 ؾΛ෇͚͍ͨ͜ͱ IUNMK
   8FCϓϥοτϑΥʔϜ෦
   ୈճษڧձ
2. ˞
   ຊηογϣϯ͸ग़ԋऀͷݟղͰ͋Γɺ
 ɹ
   ग़ԋऀ͕ॴଐ͢Δ૊৫ͷެࣜݟղͰ͸
 ɹ
   ͋Γ·ͤΜ
3. ݪ
   Ұߒɹɹ
   !LBSB@E
4. $MPKVSF4DSJQU
   Ͱ
   &MFDUSPOΞϓϦέʔγϣϯΛ
   ࡞ΔͨΊͷελʔτΩοτ
   
   ϓϥοτϗʔϜ
   IUUQEFTDKPQPSH
   chochoi Ϗϧυπʔϧͷґଘͳ͠Ͱ
   $MPKVSF4DSJQUϕʔεͷ/PEFKTίϚϯυΛ
 ࡞ΕΔπʔϧ
   IUUQTHJUIVCDPNLBSBEDIPDIPJ
   
5. ຊ೔ͷߏ੒
    લఏ࿩
    Ұ൪͍ͩ͡ͳϙΠϯτ
    ΞϓϦ࢓༷ͷ࿮૊ΈΛͲ͏࡞Δ͔
    ٕज़ߏ੒ΛܾΊΑ͏
    σʔλ εςʔτ͓Αͼͦͷଞ ͷઃܭ
    ίϯϙʔωϯτͱঢ়ଶભҠ
6. 1 લఏ࿩
7. ࡢ೥͸΄ͱΜͲͷ࣌ؒΛ
 3FBDU
   /BUJWFϚϯͱͯ͠ա͝͠·ͨ͠
8. 3FBDU
   /BUJWFʹݶΒͳ͍࿩΋
 ೖ͍ͬͯ·͢
9. ͜Μͳલఏ͕͋Δ৔߹ͷϊ΢ϋ΢
   ‎ ෳ਺ਓͰ։ൃ
   ‎ ͱʹ͔͘ը໘਺͕ଟ͘ɺભҠ΋ෳࡶ
   ‎ "OESPJEɺJ04ͱ΋ʹಉ͡ߏ੒ɾߏ଄
   ‎ طʹܾ·͍ͬͯΔཁ݅ͷத͔Β࢓༷͕ܾ·Δ
10. ϓϩδΣΫτେ͖͍ͱ໾ׂ΋͞·͟·
    ‎ ը໘ઃܭɾભҠઃܭ
    ‎ 6*ɾϏδϡΞϧσβΠϯ
    ‎ ΞϓϦέʔγϣϯͷ։ൃઃܭ
    ‎ ΞϓϦέʔγϣϯͷ։ൃͱྔ࢈
    ‎ "1*ͷ։ൃ୲౰
    ‎ αʔόʔͷΠϯϑϥ୲౰
11. ϓϩδΣΫτେ͖͍ͱ໾ׂ΋͞·͟·
    ‎ ը໘ઃܭɾભҠઃܭ
    ‎ 6*ɾϏδϡΞϧσβΠϯ
    ‎ ΞϓϦέʔγϣϯͷ։ൃઃܭ
    ‎ ΞϓϦέʔγϣϯͷ։ൃͱྔ࢈
    ‎ "1*ͷ։ൃ୲౰
    ‎ αʔόʔͷΠϯϑϥ୲౰
12. ϑϨʔϜϫʔΫ ຊηογϣϯʹ͓͚Δ
    ‎ ΞϓϦέʔγϣϯ͸͜͏͋Δ΂͖ͱ͍͏ࢦ਑
    ‎ Ͳ͏͍͏෩ʹ։ൃ͢Ε͹͍͍͔ͷϧʔϧ
    ‎ ্هΛ࣮ݱ͢ΔͨΊͷٕज़܈
13. 2 Ұ൪͍ͩ͡ͳϙΠϯτ
14. 3FBDU
    /BUJWFΛ࢖͏ͱ͍͏બ୒
15. ֮ޛΛܾΊΑ͏
16. બ୒ࢶ͸͍Ζ͍Ζ͋Δ
    ‎ ωΠςΟϒͰ
     J04ɺ"OESPJE
    ‎ ωΠςΟϒ6*ίϯϙʔωϯτϕʔεܥ
     3FBDU
    /BUJWFɺ8FFYɺ/BUJWF
    4DSJQU
    ‎ 8FC7JFXϕʔεܥ
     $PSEPWBɺͦͷଞ$PSEPWBϕʔεܥ
    ‎ ͦͷଞͷٕज़Ͱ
     6OJUZɺ9BNBSJOɺ%FMQIJ
    FUD
17. 3FBDU
    /BUJWF
    Ͳ͏͍͏΋ͷͳΒΦτΫʁ
    ‎ ͺͺͬͱ࡞Γ͍ͨܥ
    ‎ +BWB4DSJQUΤϯδχΞ͕ϝΠϯܥ
    ‎ ඪ४ͷωΠςΟϒ6*ίϯϙʔωϯτΛத৺ͱͨ͠
 ϑΥʔϜͷछྨ͕ଟ͍ܥ
    
    ‎ ৘ใද͕ࣔϝΠϯ
    ‎ "OESPJEͱJ04͕ಉ͡ߏ੒ɾߏ଄ܥ
    
18. 3 ΞϓϦ࢓༷ͷ࿮૊ΈΛͲ͏࡞Δ͔
19. ΞϓϦʹ͍ͭͯເ͕޿͕Δʜɻ
    ‎ ΍Γ͍ͨ͜ͱ͍ͬͺ͍
    ‎ ເ͍ͬͺ͍
    ‎ ͢͹Β͍͠Ϣʔβʔମݧ͍ͬͺ͍
    ‎ ෳࡶ͍ͬ͞ͺ͍
20. ໰୊
21. 3FBDU
    /BUJWFͷಛੑΛ
    ڞ༗͢Δͷ͸೉͍͠
22. ໌ࣔతͳ࿮૊ΈΛ
    ڞ༗͠·͠ΐ͏
23. ϓϩηεͱͯ͠ͷ
 ϑϨʔϜϫʔΫ
24. ΞϓϦʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ
    ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ
 ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘
     ࢓༷ͷෳࡶ͕͞ഒʹͳΔͱɺ
 ࣮૷ͷෳࡶ͞͸ࢦ਺ؔ਺తʹ্͕Δ
     શͯͷ࢓༷ΛܾΊ͔ͯΒΞϓϦͷ։ൃ΁ҠΔͷͰ͸ͳ͘ɺ
 جຊతͳ෦෼ͷ࢓༷͔ΒϑϨʔϜϫʔΫʢ࿮૊ΈʣΛܾΊͯ
 ͦͷߟ͑ํͰ࢒Γͷ࢓༷Λߟ͍͑ͯ͘
     ։ൃϦεΫΛ༧ଌ͠΍͍͢
     ࢓༷ࡦఆ୲౰ʹ΋σβΠϯ୲౰ʹ΋ཧղͯ͠΋Β͏
25. ΞϓϦʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ
    ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ
 ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ΞϓϦاը
26. ΞϓϦʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ
    ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ
 ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ΞϓϦاը ΞϓϦཁ݅
27. ΞϓϦʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ
    ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ
 ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ΞϓϦاը ΞϓϦཁ݅ ΞϓϦ࢓༷
28. ΞϓϦʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ
    ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ
 ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ΞϓϦاը ΞϓϦཁ݅ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ
29. 
    ΞϓϦʹʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ
    ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ
 ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ΞϓϦاը ΞϓϦཁ݅ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ ΞϓϦ։ൃ
30. ΞϓϦʹʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ
    ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ
 ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ΞϓϦاը ΞϓϦཁ݅ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ ΞϓϦ։ൃ ϑ Ϩ
    * Ϝ ϫ
    * Ϋ ࡦ ఆ
31. ͜ͷܗɺݟͨ͜ͱ͕͋Δʜɻ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ ΞϓϦ։ൃ ϑ Ϩ
    * Ϝ ϫ
    * Ϋ ࡦ ఆ
32. ͜ͷܗɺݟͨ͜ͱ͕͋Δʜɻ
33. ΰʔϧσϯϋʔϕετࣾͷϩΰͩ
    ‎ ΰʔϧσϯϋʔϕετࣾ
     ೩͑Αυϥΰϯ
     ೩͑Ασϒΰϯ
     ϓϩδΣΫτ"
     εύϧλϯ9
     ྶݬಓ࢜
     ϙϦεɾετʔϦʔ
 ߳ߓࠃࡍܯ࡯
34. ΰʔϧσϯϋʔϕετܕ։ൃͷ͝ఏҊ
    ‎ େ࿮ Ұ෦ ͷ࢓༷Λ·ͣࡦఆ
    ‎ ͦͷ࢓༷Λ࣮ݱՄೳͳ
 ϑϨʔϜϫʔΫΛߟ͑Δ
    ‎ ϑϨʔϜϫʔΫΛ
 εςʔΫϗϧμʔʹڞ༗
    ‎ ϑϨʔϜϫʔΫʹԊͬͯ
 ࡉ͔ͳ࢓༷Λ࡞੒
    ‎ ܁Γฦ͠ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ ΞϓϦ։ൃ ϑ Ϩ
    * Ϝ ϫ
    * Ϋ ࡦ ఆ
35. ΰʔϧσϯϋʔϕετܕ։ൃͷϝϦοτ
    ‎ ࢓༷ͱઃܭͷϓϩηε͕ٯస
    ‎ ঃʑʹߟ͑ํ͕ਁಁ͢Δ
    ‎ ྫ֎ύλʔϯ͕ى͖ʹ͍͘
    ‎ ྔ࢈ମ੍Λ࡞Γ΍͍͢ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ ΞϓϦ։ൃ ϑ Ϩ
    * Ϝ ϫ
    * Ϋ ࡦ ఆ
36. ΰʔϧσϯϋʔϕετܕ։ൃͷ՝୊
    ‎ Ͳ͏߹ҙΛͱΔ͔
    ‎ ্ཱ͕ͪΓͷ஗͞
    ‎ ཁ݅Λ෴ࣗ͢ମʹऑ͍
    ‎ ൚༻ϑϨʔϜϫʔΫΛ
 ࡞Γͨ͘ͳͬͯ͠·͏ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ ΞϓϦ։ൃ ϑ Ϩ
    * Ϝ ϫ
    * Ϋ ࡦ ఆ
37. 4 ٕज़ߏ੒ΛܾΊΑ͏
38. ޾ͤͳ࣌ظ
 ָ͠Έ͗͢ʹ஫ҙ
39. DSFBUFSFBDUOBUJWFBQQ
    Ͱ͸͡ΊΔ͔
 SFBDUOBUJWF
    JOJU
    Ͱ͸͡ΊΔ͔
    ‎ DSFBUFSFBDUOBUJWFBQQ
     FYQPͱ͍͏։ൃϏϧυ؀ڥʹ৐͔ͬΔͷָ͕
     FYQPͷൣғΛӽ͑Δͱਏ͘ͳΔͷͰ͸ʁΘ͔Βͳ͍
    ‎ SFBDUOBUJWF
    JOJU
     ࠷௿ݶͷϏϧυߏ੒
40. 3FBDU/BUJWFΞοϓάϨʔυͷ࣌ظʹ஫ҙ
    ‎ 3FBDU
    /BUJWF͸͙͢ʹόʔδϣϯ্͕͕Δ
    ‎ ΞοϓάϨʔυ͸؆୯Ͱ͸ͳ͍
     όʔδϣϯ͕มΘΔͱσϑΥϧτͷϑΥϧμߏ੒͕
 มΘΔ͜ͱ΋͋Δ
     react-native upgrade
    ͸ɺωΠςΟϒଆͷ্ॻ͖ʹ஫ҙ
41. ٕज़ߏ੒
    ‎ ϑϩϯτΤϯυ಺Ͱͷ
 ٕज़ߏ੒ΛܾΊ͓ͯ͘ͱɺ
 ֶश͕ਐΈ΍͍͢
    ‎ ΦϨΦϨϑϨʔϜϫʔΫ͕
 ٕज़ߏ੒ʹؚ·ΕΔͱɺ
 ཧղ͠ʹ͘͘ͳΔ
    ‎ ॏͶΔͱɺखް͘ͳΔ͕ɺ
 ਎ಈ͖͕औΕͳ͘ͳΔ react-native-cli React Native React Navigation Redux Immutable.js Native Base
42. 5 σʔλ εςʔτ͓Αͼͦͷଞ ͷઃܭ
43. σʔλͱίϯϙʔωϯτ͕
 શͯΛܾΊ͍͖ͯ·͢
44. σʔλͱϞσϧ
    ‎ 3FEVY·ΘΓ
     *NNVUBCMFKT
    w 3FDPSE͕ศརɻϞσϧͷΑ͏ͳ΋ͷΛ࡞ΕΔ
     0CKFDU
    
    MPEBTI͔ɺ*NNVUBCMF0CKFDU
    
    *NNVUBCMFKT͔
    w ͜͜͸޷Έ͕෼͔ΕΔͱ͜Ζ
    ‎ ઃఆϑΝΠϧͱͯ͠ͷ+40/
     BQQMJDBUJPO@CBTJDKTPO
    ‎ ΞϓϦέʔγϣϯ಺ͷΦϒδΣΫτ
     ୯ͳΔγϯάϧτϯΦϒδΣΫτͰ͍͍͜ͱ΋͋Δ
45. ৘ใͷछྨͰ෼͚Α͏
    ‎ ෆม৘ใ
     ΞϓϦέʔγϣϯͷίʔυͱͯ͠อ࣋͢ΔΑ͏ͳ৘ใ
    ‎ جຊ৘ใ
     ΞϓϦέʔγϣϯͷઃఆ৘ใͱ͔
    ‎ Ұ࣌తͳ৘ใ
     "KBYͰऔಘ͢Δ৘ใͱ͔
    ‎ شൃੑͷ৘ใ
     ϑΥʔϜೖྗதͷεςʔτͱ͔
46. 6 ίϯϙʔωϯτͱঢ়ଶભҠ
47. શͯ͸εςʔτͷมԽͱ
 ίϯϙʔωϯτͷఆٛͰ͢
48. ঢ়ଶભҠ
    ‎ 3FBDU
    /BUJWF
    
    3FEVYͳ؀ڥʹ͓͍ͯ
 3FBDU
    /BWJHBUJPOΛ࢖͍ͬͯΔͱɺ
 ը໘ͷભҠͱσʔλͷมߋ͸ͦΕ΄Ͳҧ͍͕ͳ͍
     ϧʔςΟϯάʹΑΔঢ়ଶભҠ
 OBWεςʔτͷมߋ
 
  ը໘಺ʹ͓͚Δঢ়ଶભҠ
 Yεςʔτͷมߋ
49. མͱ͠ࠐΈͷେࣄͳϙΠϯτ
    ‎ ໭ΕΔը໘ͱด͡Δը໘
     ελοΫφϏήʔγϣϯͷΑ͏ʹϖʔδΛߦ͖དྷ͢Δ΋ͷ
     ϞʔμϧͷΑ͏ʹΞΫγϣϯʹԠͯ͡։ด͢Δ΋ͷ
    ‎ ৗʹຊ౰ʹඞཁͳͷ͔Λߟ͑Δ
     ϞʔμϧͷதͰ͍Ζ͍ΖભҠͯ͠ʜͱ͔
     Ұ෦͚ͩϦετʹͳͬͯͯԡ͢ͱಉ͡ը໘Ͱදࣔ͞ΕΔʜͱ͔
50. ը໘ύλʔϯͱίϯϙʔωϯτ
    ‎ དͰఆٛࡁΈίϯϙʔωϯτΛ࢖Θͳ͍
     ·ͱ·Γͷ͋Δίϯϙʔωϯτ
    ‎ ૊Έ߹ΘͤΔ͜ͱͰը໘ύλʔϯΛ૿΍͢
     ࣗ෼Ͱ͢΂ͯΛ࡞Ζ͏ͱࢥΘͳ͍͜ͱ
    ‎ ઃఆΦϒδΣΫτ͔ΒίϯϙʔωϯτΛੜ੒͢Δ
 ίϯϙʔωϯτϏϧμʔʹམͱ͠ࠐΊΔͱָ
51. 7 ·ͱΊ
52. ·ͱΊ
    ‎ େ͖͍ن໛ͷΞϓϦͰ3FBDU
    /BUJWFΛ
 ࠾༻͢Δͱ͖͸ɺڧ͍ҙࢤΛ
    ‎ ΰʔϧσϯϋʔϕετܕ։ൃΛ৺͕͚Α͏
    ‎ ٕज़ߏ੒Λ΍Γ͗͢ͳ͍
    ‎ εςʔτͷมԽͱίϯϙʔωϯτͷఆ͕ٛݤ
 σʔλͷઃܭʹண໨͠Α͏
53. ͋Γ͕ͱ͏͍͟͝·ͨ͠
54. 8 Α͋͘Δ࣭͝໰
55. Α͋͘Δ࣭͝໰
    ‎ 3FBDU
    /BUJWF͸Ͳͷఔ౓ΫϩεϓϥοτϗʔϜʁ
     ந৅తͳҙຯͰ͸׬શޓ׵ͱݴ͑·͢
 ‎ ྆ϓϥοτϗʔϜͷશͯͷݟͨ໨Λ౷Ұ͢Δͷ͸Մೳʁ
     ͍͹Βͷಓ͕଴͍ͬͯ·͢
     ͦ͏Ͱͳͯ͘ݟͨ໨ͱ໨తͱը໘ભҠΛ
 ڞ௨ʹ͢Δ͘Β͍ͷ΄͏͕͍͍