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

by kazuhiro hara

Slide 1

Slide 1 text

3FBDU/BUJWFͰ  େن໛ΞϓϦΛ࡞Δͱ͖ʹ  ؾΛ෇͚͍ͨ͜ͱ IUNMK8FCϓϥοτϑΥʔϜ෦ୈճษڧձ

Slide 2

Slide 2 text

˞ຊηογϣϯ͸ग़ԋऀͷݟղͰ͋Γɺ  ɹग़ԋऀ͕ॴଐ͢Δ૊৫ͷެࣜݟղͰ͸  ɹ͋Γ·ͤΜ

Slide 3

Slide 3 text

ݪҰߒɹɹ!LBSB@E

Slide 4

Slide 4 text

$MPKVSF4DSJQUͰ &MFDUSPOΞϓϦέʔγϣϯΛ ࡞ΔͨΊͷελʔτΩοτϓϥοτϗʔϜ IUUQEFTDKPQPSH chochoi Ϗϧυπʔϧͷґଘͳ͠Ͱ $MPKVSF4DSJQUϕʔεͷ/PEFKTίϚϯυΛ  ࡞ΕΔπʔϧ IUUQTHJUIVCDPNLBSBEDIPDIPJ

Slide 5

Slide 5 text

ຊ೔ͷߏ੒ લఏ࿩ Ұ൪͍ͩ͡ͳϙΠϯτ ΞϓϦ࢓༷ͷ࿮૊ΈΛͲ͏࡞Δ͔ ٕज़ߏ੒ΛܾΊΑ͏ σʔλ εςʔτ͓Αͼͦͷଞ ͷઃܭ ίϯϙʔωϯτͱঢ়ଶભҠ

Slide 6

Slide 6 text

1 લఏ࿩

Slide 7

Slide 7 text

ࡢ೥͸΄ͱΜͲͷ࣌ؒΛ  3FBDU/BUJWFϚϯͱͯ͠ա͝͠·ͨ͠

Slide 8

Slide 8 text

3FBDU/BUJWFʹݶΒͳ͍࿩΋  ೖ͍ͬͯ·͢

Slide 9

Slide 9 text

͜Μͳલఏ͕͋Δ৔߹ͷϊ΢ϋ΢ ‎ ෳ਺ਓͰ։ൃ ‎ ͱʹ͔͘ը໘਺͕ଟ͘ɺભҠ΋ෳࡶ ‎ "OESPJEɺJ04ͱ΋ʹಉ͡ߏ੒ɾߏ଄ ‎ طʹܾ·͍ͬͯΔཁ݅ͷத͔Β࢓༷͕ܾ·Δ

Slide 10

Slide 10 text

ϓϩδΣΫτେ͖͍ͱ໾ׂ΋͞·͟· ‎ ը໘ઃܭɾભҠઃܭ ‎ 6*ɾϏδϡΞϧσβΠϯ ‎ ΞϓϦέʔγϣϯͷ։ൃઃܭ ‎ ΞϓϦέʔγϣϯͷ։ൃͱྔ࢈ ‎ "1*ͷ։ൃ୲౰ ‎ αʔόʔͷΠϯϑϥ୲౰

Slide 11

Slide 11 text

Slide 12

Slide 12 text

ϑϨʔϜϫʔΫ ຊηογϣϯʹ͓͚Δ ‎ ΞϓϦέʔγϣϯ͸͜͏͋Δ΂͖ͱ͍͏ࢦ਑ ‎ Ͳ͏͍͏෩ʹ։ൃ͢Ε͹͍͍͔ͷϧʔϧ ‎ ্هΛ࣮ݱ͢ΔͨΊͷٕज़܈

Slide 13

Slide 13 text

2 Ұ൪͍ͩ͡ͳϙΠϯτ

Slide 14

Slide 14 text

3FBDU/BUJWFΛ࢖͏ͱ͍͏બ୒

Slide 15

Slide 15 text

֮ޛΛܾΊΑ͏

Slide 16

Slide 16 text

બ୒ࢶ͸͍Ζ͍Ζ͋Δ ‎ ωΠςΟϒͰ J04ɺ"OESPJE ‎ ωΠςΟϒ6*ίϯϙʔωϯτϕʔεܥ 3FBDU/BUJWFɺ8FFYɺ/BUJWF4DSJQU ‎ 8FC7JFXϕʔεܥ $PSEPWBɺͦͷଞ$PSEPWBϕʔεܥ ‎ ͦͷଞͷٕज़Ͱ 6OJUZɺ9BNBSJOɺ%FMQIJFUD

Slide 17

Slide 17 text

3FBDU/BUJWFͲ͏͍͏΋ͷͳΒΦτΫʁ ‎ ͺͺͬͱ࡞Γ͍ͨܥ ‎ +BWB4DSJQUΤϯδχΞ͕ϝΠϯܥ ‎ ඪ४ͷωΠςΟϒ6*ίϯϙʔωϯτΛத৺ͱͨ͠  ϑΥʔϜͷछྨ͕ଟ͍ܥ ‎ ৘ใද͕ࣔϝΠϯ ‎ "OESPJEͱJ04͕ಉ͡ߏ੒ɾߏ଄ܥ

Slide 18

Slide 18 text

3 ΞϓϦ࢓༷ͷ࿮૊ΈΛͲ͏࡞Δ͔

Slide 19

Slide 19 text

ΞϓϦʹ͍ͭͯເ͕޿͕Δʜɻ ‎ ΍Γ͍ͨ͜ͱ͍ͬͺ͍ ‎ ເ͍ͬͺ͍ ‎ ͢͹Β͍͠Ϣʔβʔମݧ͍ͬͺ͍ ‎ ෳࡶ͍ͬ͞ͺ͍

Slide 20

Slide 20 text

໰୊

Slide 21

Slide 21 text

3FBDU/BUJWFͷಛੑΛ ڞ༗͢Δͷ͸೉͍͠

Slide 22

Slide 22 text

໌ࣔతͳ࿮૊ΈΛ ڞ༗͠·͠ΐ͏

Slide 23

Slide 23 text

ϓϩηεͱͯ͠ͷ  ϑϨʔϜϫʔΫ

Slide 24

Slide 24 text

ΞϓϦʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ  ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ࢓༷ͷෳࡶ͕͞ഒʹͳΔͱɺ  ࣮૷ͷෳࡶ͞͸ࢦ਺ؔ਺తʹ্͕Δ શͯͷ࢓༷ΛܾΊ͔ͯΒΞϓϦͷ։ൃ΁ҠΔͷͰ͸ͳ͘ɺ  جຊతͳ෦෼ͷ࢓༷͔ΒϑϨʔϜϫʔΫʢ࿮૊ΈʣΛܾΊͯ  ͦͷߟ͑ํͰ࢒Γͷ࢓༷Λߟ͍͑ͯ͘ ։ൃϦεΫΛ༧ଌ͠΍͍͢ ࢓༷ࡦఆ୲౰ʹ΋σβΠϯ୲౰ʹ΋ཧղͯ͠΋Β͏

Slide 25

Slide 25 text

ΞϓϦʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ  ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ΞϓϦاը

Slide 26

Slide 26 text

ΞϓϦʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ  ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ΞϓϦاը ΞϓϦཁ݅

Slide 27

Slide 27 text

ΞϓϦʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ  ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ΞϓϦاը ΞϓϦཁ݅ ΞϓϦ࢓༷

Slide 28

Slide 28 text

ΞϓϦʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ  ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ΞϓϦاը ΞϓϦཁ݅ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ

Slide 29

Slide 29 text

ΞϓϦʹʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ  ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ΞϓϦاը ΞϓϦཁ݅ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ ΞϓϦ։ൃ

Slide 30

Slide 30 text

ΞϓϦʹʹ͍ͭͯߟ͑Δ࿮૊Έ͕େࣄ ‎ શମͷํ޲ੑΛܾΊΔ࿮૊ΈΛҰ෦ܾΊɺ  ͦͷ࿮૊ΈͷதͰࡉ͔͍࢓༷ΛܾΊ͍ͯ͘ ΞϓϦاը ΞϓϦཁ݅ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ ΞϓϦ։ൃ ϑ Ϩ * Ϝ ϫ * Ϋ ࡦ ఆ

Slide 31

Slide 31 text

͜ͷܗɺݟͨ͜ͱ͕͋Δʜɻ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ ΞϓϦ։ൃ ϑ Ϩ * Ϝ ϫ * Ϋ ࡦ ఆ

Slide 32

Slide 32 text

͜ͷܗɺݟͨ͜ͱ͕͋Δʜɻ

Slide 33

Slide 33 text

ΰʔϧσϯϋʔϕετࣾͷϩΰͩ ‎ ΰʔϧσϯϋʔϕετࣾ ೩͑Αυϥΰϯ ೩͑Ασϒΰϯ ϓϩδΣΫτ" εύϧλϯ9 ྶݬಓ࢜ ϙϦεɾετʔϦʔ  ߳ߓࠃࡍܯ࡯

Slide 34

Slide 34 text

ΰʔϧσϯϋʔϕετܕ։ൃͷ͝ఏҊ ‎ େ࿮ Ұ෦ ͷ࢓༷Λ·ͣࡦఆ ‎ ͦͷ࢓༷Λ࣮ݱՄೳͳ  ϑϨʔϜϫʔΫΛߟ͑Δ ‎ ϑϨʔϜϫʔΫΛ  εςʔΫϗϧμʔʹڞ༗ ‎ ϑϨʔϜϫʔΫʹԊͬͯ  ࡉ͔ͳ࢓༷Λ࡞੒ ‎ ܁Γฦ͠ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ ΞϓϦ։ൃ ϑ Ϩ * Ϝ ϫ * Ϋ ࡦ ఆ

Slide 35

Slide 35 text

ΰʔϧσϯϋʔϕετܕ։ൃͷϝϦοτ ‎ ࢓༷ͱઃܭͷϓϩηε͕ٯస ‎ ঃʑʹߟ͑ํ͕ਁಁ͢Δ ‎ ྫ֎ύλʔϯ͕ى͖ʹ͍͘ ‎ ྔ࢈ମ੍Λ࡞Γ΍͍͢ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ ΞϓϦ։ൃ ϑ Ϩ * Ϝ ϫ * Ϋ ࡦ ఆ

Slide 36

Slide 36 text

ΰʔϧσϯϋʔϕετܕ։ൃͷ՝୊ ‎ Ͳ͏߹ҙΛͱΔ͔ ‎ ্ཱ͕ͪΓͷ஗͞ ‎ ཁ݅Λ෴ࣗ͢ମʹऑ͍ ‎ ൚༻ϑϨʔϜϫʔΫΛ  ࡞Γͨ͘ͳͬͯ͠·͏ ΞϓϦ࢓༷ Ξ ϓ Ϧ ઃ ܭ ΞϓϦ։ൃ ϑ Ϩ * Ϝ ϫ * Ϋ ࡦ ఆ

Slide 37

Slide 37 text

4 ٕज़ߏ੒ΛܾΊΑ͏

Slide 38

Slide 38 text

޾ͤͳ࣌ظ  ָ͠Έ͗͢ʹ஫ҙ

Slide 39

Slide 39 text

DSFBUFSFBDUOBUJWFBQQͰ͸͡ΊΔ͔  SFBDUOBUJWFJOJUͰ͸͡ΊΔ͔ ‎ DSFBUFSFBDUOBUJWFBQQ FYQPͱ͍͏։ൃϏϧυ؀ڥʹ৐͔ͬΔͷָ͕ FYQPͷൣғΛӽ͑Δͱਏ͘ͳΔͷͰ͸ʁΘ͔Βͳ͍ ‎ SFBDUOBUJWFJOJU ࠷௿ݶͷϏϧυߏ੒

Slide 40

Slide 40 text

3FBDU/BUJWFΞοϓάϨʔυͷ࣌ظʹ஫ҙ ‎ 3FBDU/BUJWF͸͙͢ʹόʔδϣϯ্͕͕Δ ‎ ΞοϓάϨʔυ͸؆୯Ͱ͸ͳ͍ όʔδϣϯ͕มΘΔͱσϑΥϧτͷϑΥϧμߏ੒͕  มΘΔ͜ͱ΋͋Δ react-native upgrade͸ɺωΠςΟϒଆͷ্ॻ͖ʹ஫ҙ

Slide 41

Slide 41 text

ٕज़ߏ੒ ‎ ϑϩϯτΤϯυ಺Ͱͷ  ٕज़ߏ੒ΛܾΊ͓ͯ͘ͱɺ  ֶश͕ਐΈ΍͍͢ ‎ ΦϨΦϨϑϨʔϜϫʔΫ͕  ٕज़ߏ੒ʹؚ·ΕΔͱɺ  ཧղ͠ʹ͘͘ͳΔ ‎ ॏͶΔͱɺखް͘ͳΔ͕ɺ  ਎ಈ͖͕औΕͳ͘ͳΔ react-native-cli React Native React Navigation Redux Immutable.js Native Base

Slide 42

Slide 42 text

5 σʔλ εςʔτ͓Αͼͦͷଞ ͷઃܭ

Slide 43

Slide 43 text

σʔλͱίϯϙʔωϯτ͕  શͯΛܾΊ͍͖ͯ·͢

Slide 44

Slide 44 text

σʔλͱϞσϧ ‎ 3FEVY·ΘΓ *NNVUBCMFKT w 3FDPSE͕ศརɻϞσϧͷΑ͏ͳ΋ͷΛ࡞ΕΔ 0CKFDUMPEBTI͔ɺ*NNVUBCMF0CKFDU*NNVUBCMFKT͔ w ͜͜͸޷Έ͕෼͔ΕΔͱ͜Ζ ‎ ઃఆϑΝΠϧͱͯ͠ͷ+40/ BQQMJDBUJPO@CBTJDKTPO ‎ ΞϓϦέʔγϣϯ಺ͷΦϒδΣΫτ ୯ͳΔγϯάϧτϯΦϒδΣΫτͰ͍͍͜ͱ΋͋Δ

Slide 45

Slide 45 text

৘ใͷछྨͰ෼͚Α͏ ‎ ෆม৘ใ ΞϓϦέʔγϣϯͷίʔυͱͯ͠อ࣋͢ΔΑ͏ͳ৘ใ ‎ جຊ৘ใ ΞϓϦέʔγϣϯͷઃఆ৘ใͱ͔ ‎ Ұ࣌తͳ৘ใ "KBYͰऔಘ͢Δ৘ใͱ͔ ‎ شൃੑͷ৘ใ ϑΥʔϜೖྗதͷεςʔτͱ͔

Slide 46

Slide 46 text

6 ίϯϙʔωϯτͱঢ়ଶભҠ

Slide 47

Slide 47 text

શͯ͸εςʔτͷมԽͱ  ίϯϙʔωϯτͷఆٛͰ͢

Slide 48

Slide 48 text

ঢ়ଶભҠ ‎ 3FBDU/BUJWF3FEVYͳ؀ڥʹ͓͍ͯ  3FBDU/BWJHBUJPOΛ࢖͍ͬͯΔͱɺ  ը໘ͷભҠͱσʔλͷมߋ͸ͦΕ΄Ͳҧ͍͕ͳ͍ ϧʔςΟϯάʹΑΔঢ়ଶભҠ  OBWεςʔτͷมߋ    ը໘಺ʹ͓͚Δঢ়ଶભҠ  Yεςʔτͷมߋ

Slide 49

Slide 49 text

མͱ͠ࠐΈͷେࣄͳϙΠϯτ ‎ ໭ΕΔը໘ͱด͡Δը໘ ελοΫφϏήʔγϣϯͷΑ͏ʹϖʔδΛߦ͖དྷ͢Δ΋ͷ ϞʔμϧͷΑ͏ʹΞΫγϣϯʹԠͯ͡։ด͢Δ΋ͷ ‎ ৗʹຊ౰ʹඞཁͳͷ͔Λߟ͑Δ ϞʔμϧͷதͰ͍Ζ͍ΖભҠͯ͠ʜͱ͔ Ұ෦͚ͩϦετʹͳͬͯͯԡ͢ͱಉ͡ը໘Ͱදࣔ͞ΕΔʜͱ͔

Slide 50

Slide 50 text

ը໘ύλʔϯͱίϯϙʔωϯτ ‎ དͰఆٛࡁΈίϯϙʔωϯτΛ࢖Θͳ͍ ·ͱ·Γͷ͋Δίϯϙʔωϯτ ‎ ૊Έ߹ΘͤΔ͜ͱͰը໘ύλʔϯΛ૿΍͢ ࣗ෼Ͱ͢΂ͯΛ࡞Ζ͏ͱࢥΘͳ͍͜ͱ ‎ ઃఆΦϒδΣΫτ͔ΒίϯϙʔωϯτΛੜ੒͢Δ  ίϯϙʔωϯτϏϧμʔʹམͱ͠ࠐΊΔͱָ

Slide 51

Slide 51 text

7 ·ͱΊ

Slide 52

Slide 52 text

·ͱΊ ‎ େ͖͍ن໛ͷΞϓϦͰ3FBDU/BUJWFΛ  ࠾༻͢Δͱ͖͸ɺڧ͍ҙࢤΛ ‎ ΰʔϧσϯϋʔϕετܕ։ൃΛ৺͕͚Α͏ ‎ ٕज़ߏ੒Λ΍Γ͗͢ͳ͍ ‎ εςʔτͷมԽͱίϯϙʔωϯτͷఆ͕ٛݤ  σʔλͷઃܭʹண໨͠Α͏

Slide 53

Slide 53 text

͋Γ͕ͱ͏͍͟͝·ͨ͠

Slide 54

Slide 54 text

8 Α͋͘Δ࣭͝໰

Slide 55

Slide 55 text

Α͋͘Δ࣭͝໰ ‎ 3FBDU/BUJWF͸Ͳͷఔ౓ΫϩεϓϥοτϗʔϜʁ ந৅తͳҙຯͰ͸׬શޓ׵ͱݴ͑·͢  ‎ ྆ϓϥοτϗʔϜͷશͯͷݟͨ໨Λ౷Ұ͢Δͷ͸Մೳʁ ͍͹Βͷಓ͕଴͍ͬͯ·͢ ͦ͏Ͱͳͯ͘ݟͨ໨ͱ໨తͱը໘ભҠΛ  ڞ௨ʹ͢Δ͘Β͍ͷ΄͏͕͍͍