Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

344a3a874023dfb086444a12124c6581?s=47 tell-y
October 02, 2021

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

344a3a874023dfb086444a12124c6581?s=128

tell-y

October 02, 2021
Tweet

More Decks by tell-y

Other Decks in Technology

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