初めてのExpoアプリ個人開発

https://reactnative-matsuri.com/speakers/G86t6y1Y3idDwm7VkPxt

Transcript

1. ॳΊͯͷExpoΞϓϦݸਓ։ൃ
2. ࣗݾ঺հ ࢁຊরٱ 4೥લͷ௕உ 3ϲ݄લͷ࣍உ tell_y_t JavaScriptҰےͰweb։ൃΛ࢝Ίͯ8೥໨ɻ ϑϦʔϥϯε7೥໨ʹ๏ਓ੒Γͨ͠ ιϑτ΢ΣΞΤϯδχΞʢओʹwebΤϯδχΞʣ ͜͜਺೥ɺReactͷྲྀΕ͔ΒExpoͰͷ։ൃʹैࣄ ʢૉͷReact Native/Android/iOSͷ։ൃܦྺͳ͠ʣ ͜ͷՆɺ2ਓ໨ͱͳΔ࣍உ͕஀ੜ ָ͠Έ͸௼ͬͨڕΛͭ·Έʹඒຯ͍͓͠ञΛҿΉ͜ͱ
3. ։ൃʹܞΘͬͨExpoΞϓϦͷ঺հ גࣜձࣾInformetis ͷిྗηϯαʔ͓Αͼػث ෼཭ਪఆٕज़Λ׆༻ͨ͠ΞϓϦʮienowaʯ ɾηϯαʔΛઃஔͨ͠ՈఉͷిྗσʔλΛӾཡ ɾిྗ৘ใͷ௨஌ ɾϢʔβʔ৘ใͷฤूɺ౳ https://www.wantedly.com/portfolio/projects/53249 https://www.wantedly.com/projects/290993 https://www.energy-gateway.co.jp/news/2019/11/001.html https://www.informetis.com/news/1277/ ਺೥ؒɺienowaͷ։ൃνʔϜʹॴଐ ࢓ࣄͱͯ͠Expo։ൃͷ஌ݟΛੵΉ
4. ࿩͢಺༰ ࠓ೥7݄ʙࠓ೔·Ͱͷݸਓ։ൃͷ༷ࢠ ͜Ε͔Βݸਓ։ൃΛελʔτ͢Δํ΁ͷࢀߟʹͳΕ͹޾͍Ͱ͢ React / Expo / ίϛϡχςΟͷԸܙ ΞϓϦͷத਎ اըʙσβΠϯʙ։ൃʙϦϦʔε
5. ݱঢ়ใࠂ
6. τϨʔχϯά༻λΠϚʔΞϓϦ ઃఆͨ࣌ؒ͠Ͱ܁Γฦ͠Մೳ
7. ։ൃͷ͖͔͚ͬ ཬؼΓग़࢈ظؒதɺूதͯ͠࢓ࣄ͕ग़ དྷΔ؀ڥ͕ͳ͍ɻ ͡Ό͋ɺՈ଒͕৸͍ͯΔேΛ։ൃ࣌ؒ ʹ͠Α͏ɻ ʮ͕࣌ؒ͋Ε͹Ͱ͖ΔͷͶ ʯ ʮࣗ෼޷ΈͷτϨʔχϯά༻λΠϚʔΞϓϦ͕ແ͍ʯ ͳ͚Ε͹࡞Ε͹͍͍͡Όͳ͍͔ɻ όοΫΤϯυ΋DB΋͍Βͳ͍͠ɺ ωλతʹஸ౓Αͦ͞͏ɻ Ճ଎͢ΔϦϞʔτϫʔΫͱӡಈෆ଍ɾɾɾ ࠊ௧ͷ৺഑ɻ ࠓޙͷ໷ٽ͖ʹ଱͑ΒΕͳ͍ͷͰ͸ɺͱ͍͏ڪාɻ ೄ௓ͼ։࢝ ൃҊ தʑ࣮ߦʹҠͤͳ͍ݸਓͰͷαʔϏε։ൃɾɾɾ ݴ͍༁ɿ #ϝΠϯ͕࣌ؒചΓͷՔ͗ํ͔ͩΒ #ࢥ͍ͭ͘αʔϏεͷن໛͕େ͖͍ #ࢠҭͯͰୣΘΕΔεΩϚ࣌ؒ ࣌ؒͷ֬อ
8. ̍೔ͷ։ൃ࣌ؒ ཬؼΓग़࢈ظؒ : Total 3 h + ૣே̎࣌ؒʴЋ ͓ன৸λΠϜ̍࣌ؒʴЋ ฏ೔3೔ؒɺ౔೔ ໷1࣌ؒʴЋ ٳ೔ ͓ன৸λΠϜ̍࣌ؒʴЋ ग़࢈ޙ : Total 0 ~ 1 h +
9. ։ൃͷલʹ ࡞Γ͍ͨ΋ͷ͸ʁ 📱 ઃఆͨ࣌ؒ͠ͱճ਺Ͱ܁Γฦ͠ՄೳͳτϨʔχϯά༻λΠϚʔΞϓϦ Ϟνϕʔγϣϯɾ໨ඪΛܾΊΑ͏ طଘΞϓϦ͔ΒͷֶͼͱࠩผԽΛ͠Α͏ ࢀߟʹ͍͍ͤͯͨͩͨ͞ΞϓϦ X Round Workout ֶͼͷ͋ΔऔΓ૊Έํ ஌ݟΛ׆༻ͨ͠গͳ͍޻਺Ͱͷ։ൃ ࣗ෼޷Έͷػೳ ࢹೝੑͷྑ͍λΠϚʔσβΠϯ γϯϓϧͳUI ϦϦʔε༏ઌ
10. ϓϩδΣΫτελʔτ
11. ۤखͳσβΠϯͱͷઓ͍ < σβΠϯ࣌ؒ ίʔσΟϯά࣌ؒ
12. σβΠϯ࣮ݱ΁ͷٹ͍ ίϯϙʔωϯτϥΠϒϥϦɻUIύʔπσβΠϯͱ ࣮૷ʹࠔͬͨͱ͖ʹɻ ఆ൪φϏήʔγϣϯϥΠϒϥϦɻૉૣ͘φϏήʔ γϣϯΛಋೖɻΞχϝʔγϣϯ΋αϙʔτɻ ΞχϝʔγϣϯϥΠϒϥϦɻओཁػೳ͕UIͷग़དྷ ӫ͑ʹࠨӈ͞ΕΔ৔߹ͷڧ͍ຯํɻ άϥσʔγϣϯViewϥΠϒϥϦɻσβΠϯೳྗ͕ ͳͯ͘΋ɺ͜Ε͑͋͞Ε͹৐Γ੾ΕΔɻ NativeBase React Navigation React Native Reanimated expo-linear-gradient
13. NativeBase खܰʹಋೖ ͨͩ͠ૉͷReact Native͔Βఏڙ͞ΕΔ ίϯϙʔωϯτͰ΋े෼ͳ৔߹͋Γɻ
14. React Navigation (Stack | Drawer | Bottom | Top) NavigatorΛఏڙ ࡉ͔ͳΧελϚΠζ΋Մೳ͕ͩɺͻͱ· ͣγϯϓϧʹಋೖ͢Δ͜ͱΛ͓͢͢Ί
15. React Native Reanimated υΩϡϝϯτͰ঺հ͞ΕΔϢʔεέʔεҎ֎ Ͱಠࣗੑͷߴ͍࢖͍ํΛ͢Δ৔߹͸஫ҙ JavaScript thread or UI thread ?
16. react-native-reanimated x expo-linear-gradient
17. ঢ়ଶ؅ཧͱӬଓԽ 1िؒ୯ҐͰཤྺΛදࣔɻԼ͔Β݄༵೔ʙ೔༵೔ https://docs.pmnd.rs/jotai/guides/persistence#a-helper-function-with-async-storage-and-json-parse Jōtai + Async Storage ࣮૷ ͪΐͬͱνϟϨϯδ ʮτϨʔχϯάཤྺΛ೔୯ҐͰӾཡͰ͖Δ͜ͱʯ τϨʔχϯάϝχϡʔɺཤྺɺઃఆ಺༰ΛͲ͏͔ͨ͠
18. ܙΈʹײँ ݱࡏͷpackage.json
19. https://twitter.com/reactfanjp https://twitter.com/reactnativejp Jōtai࡞ऀͷ @dai_shi ͞Μ͕ӡӦ͢Δ ʮReact Fanʯ https://discord.com/invite/MrQdmzd ΈΜͳେ޷͖ ʮReact Native Japanʯ
20. ϦϦʔε ͍ͭ΋ਏ͍ͷ͸։ൃҎ֎ͷ࡞ۀ 📚 ετΞొ࿥ͷͨΊͷखଓ͖ 📚 ৹ࠪఏग़ͷͨΊͷ४උ 🖋 ΞϓϦઆ໌จͷ༻ҙ 🖋 ϓϥΠόγʔϙϦγʔͷ༻ҙ 🖋 ετΞ༻εΫγϣͳͲը૾ͷ༻ҙ 🔖 ϦϦʔε༏ઌͷͨΊɺGoogle Analytics΍AdMobಋೖ౳͸ޙճ͠ 🔖 ࡉ͔ͳσβΠϯमਖ਼΍վળܥ΋༏ઌ౓͸௿͘
21. ݁ͼʹ Reactͷ஌ࣝˍExpoͰΞϓϦ։ൃΛૉૣ࣮͘ݱ ίϛϡχςΟ΁ͷॴଐͰෆ҆ཁૉΛഉআ ։ൃҎ֎ͷϋʔυϧ΋Ұ౓ܦݧͯࣗ͠৴ʹɻָ͘͠։ൃ͠Α͏ expo-linear-gradientʢάϥσʔγϣϯʣ͸ٹ͍
22. ͝ײ૝͓଴͓ͪͯ͠Γ·͢ tell_y_t