Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
初めてのExpoアプリ個人開発
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
t6adev
October 02, 2021
Technology
1
250
初めてのExpoアプリ個人開発
https://reactnative-matsuri.com/speakers/G86t6y1Y3idDwm7VkPxt
t6adev
October 02, 2021
Tweet
Share
More Decks by t6adev
See All by t6adev
awaitをやめたReact?
t6adev
2
840
jotaifriends.dev 始めました
t6adev
0
1.8k
jotaifriends.dev で使っているWeb APIの紹介
t6adev
0
370
React状態管理ライブラリJotaiとは
t6adev
0
460
Other Decks in Technology
See All in Technology
プロポーザルに込める段取り八分
shoheimitani
1
220
usermode linux without MMU - fosdem2026 kernel devroom
thehajime
0
230
OCI Database Management サービス詳細
oracle4engineer
PRO
1
7.4k
顧客の言葉を、そのまま信じない勇気
yamatai1212
1
350
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
3k
AI駆動PjMの理想像 と現在地 -実践例を添えて-
masahiro_okamura
1
110
~Everything as Codeを諦めない~ 後からCDK
mu7889yoon
3
330
茨城の思い出を振り返る ~CDKのセキュリティを添えて~ / 20260201 Mitsutoshi Matsuo
shift_evolve
PRO
1
240
Context Engineeringが企業で不可欠になる理由
hirosatogamo
PRO
3
560
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
maaaato
0
130
Webhook best practices for rock solid and resilient deployments
glaforge
1
280
What happened to RubyGems and what can we learn?
mikemcquaid
0
280
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
225
10k
The Pragmatic Product Professional
lauravandoore
37
7.1k
GraphQLの誤解/rethinking-graphql
sonatard
74
11k
Designing for Performance
lara
610
70k
WCS-LA-2024
lcolladotor
0
450
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
170
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
450
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
330
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
180
Imperfection Machines: The Place of Print at Facebook
scottboms
269
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
71k
Faster Mobile Websites
deanohume
310
31k
Transcript
ॳΊͯͷExpoΞϓϦݸਓ։ൃ
ࣗݾհ ࢁຊরٱ 4લͷஉ 3ϲ݄લͷ࣍உ tell_y_t JavaScriptҰےͰweb։ൃΛ࢝Ίͯ8ɻ ϑϦʔϥϯε7ʹ๏ਓΓͨ͠ ιϑτΣΞΤϯδχΞʢओʹwebΤϯδχΞʣ ͜͜ɺReactͷྲྀΕ͔ΒExpoͰͷ։ൃʹैࣄ ʢૉͷReact
Native/Android/iOSͷ։ൃܦྺͳ͠ʣ ͜ͷՆɺ2ਓͱͳΔ࣍உ͕ੜ ָ͠ΈͬͨڕΛͭ·Έʹඒຯ͍͓͠ञΛҿΉ͜ͱ
։ൃʹܞΘͬͨ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։ൃͷݟΛੵΉ
͢༰ ࠓ7݄ʙࠓ·Ͱͷݸਓ։ൃͷ༷ࢠ ͜Ε͔Βݸਓ։ൃΛελʔτ͢ΔํͷࢀߟʹͳΕ͍Ͱ͢ React / Expo / ίϛϡχςΟͷԸܙ ΞϓϦͷத اըʙσβΠϯʙ։ൃʙϦϦʔε
ݱঢ়ใࠂ
τϨʔχϯά༻λΠϚʔΞϓϦ ઃఆͨ࣌ؒ͠Ͱ܁Γฦ͠Մೳ
։ൃͷ͖͔͚ͬ ཬؼΓग़࢈ظؒதɺूதͯ͠ࣄ͕ग़ དྷΔڥ͕ͳ͍ɻ ͡Ό͋ɺՈ͕৸͍ͯΔேΛ։ൃ࣌ؒ ʹ͠Α͏ɻ ʮ͕࣌ؒ͋ΕͰ͖ΔͷͶ ʯ ʮࣗΈͷτϨʔχϯά༻λΠϚʔΞϓϦ͕ແ͍ʯ ͳ͚Ε࡞Ε͍͍͡Όͳ͍͔ɻ όοΫΤϯυDB͍Βͳ͍͠ɺ
ωλతʹஸΑͦ͞͏ɻ Ճ͢ΔϦϞʔτϫʔΫͱӡಈෆɾɾɾ ࠊ௧ͷ৺ɻ ࠓޙͷٽ͖ʹ͑ΒΕͳ͍ͷͰɺͱ͍͏ڪාɻ ೄͼ։࢝ ൃҊ தʑ࣮ߦʹҠͤͳ͍ݸਓͰͷαʔϏε։ൃɾɾɾ ݴ͍༁ɿ #ϝΠϯ͕࣌ؒചΓͷՔ͗ํ͔ͩΒ #ࢥ͍ͭ͘αʔϏεͷن͕େ͖͍ #ࢠҭͯͰୣΘΕΔεΩϚ࣌ؒ ࣌ؒͷ֬อ
̍ͷ։ൃ࣌ؒ ཬؼΓग़࢈ظؒ : Total 3 h + ૣே̎࣌ؒʴЋ ͓ன৸λΠϜ̍࣌ؒʴЋ ฏ3ؒɺ
1࣌ؒʴЋ ٳ ͓ன৸λΠϜ̍࣌ؒʴЋ ग़࢈ޙ : Total 0 ~ 1 h +
։ൃͷલʹ ࡞Γ͍ͨͷʁ 📱 ઃఆͨ࣌ؒ͠ͱճͰ܁Γฦ͠ՄೳͳτϨʔχϯά༻λΠϚʔΞϓϦ ϞνϕʔγϣϯɾඪΛܾΊΑ͏ طଘΞϓϦ͔ΒͷֶͼͱࠩผԽΛ͠Α͏ ࢀߟʹ͍͍ͤͯͨͩͨ͞ΞϓϦ X Round Workout
ֶͼͷ͋ΔऔΓΈํ ݟΛ׆༻ͨ͠গͳ͍Ͱͷ։ൃ ࣗΈͷػೳ ࢹೝੑͷྑ͍λΠϚʔσβΠϯ γϯϓϧͳUI ϦϦʔε༏ઌ
ϓϩδΣΫτελʔτ
ۤखͳσβΠϯͱͷઓ͍ < σβΠϯ࣌ؒ ίʔσΟϯά࣌ؒ
σβΠϯ࣮ݱͷٹ͍ ίϯϙʔωϯτϥΠϒϥϦɻUIύʔπσβΠϯͱ ࣮ʹࠔͬͨͱ͖ʹɻ ఆ൪φϏήʔγϣϯϥΠϒϥϦɻૉૣ͘φϏήʔ γϣϯΛಋೖɻΞχϝʔγϣϯαϙʔτɻ ΞχϝʔγϣϯϥΠϒϥϦɻओཁػೳ͕UIͷग़དྷ ӫ͑ʹࠨӈ͞ΕΔ߹ͷڧ͍ຯํɻ άϥσʔγϣϯViewϥΠϒϥϦɻσβΠϯೳྗ͕ ͳͯ͘ɺ͜Ε͑͋͞ΕΓΕΔɻ NativeBase
React Navigation React Native Reanimated expo-linear-gradient
NativeBase खܰʹಋೖ ͨͩ͠ૉͷReact Native͔Βఏڙ͞ΕΔ ίϯϙʔωϯτͰेͳ߹͋Γɻ
React Navigation (Stack | Drawer | Bottom | Top) NavigatorΛఏڙ
ࡉ͔ͳΧελϚΠζՄೳ͕ͩɺͻͱ· ͣγϯϓϧʹಋೖ͢Δ͜ͱΛ͓͢͢Ί
React Native Reanimated υΩϡϝϯτͰհ͞ΕΔϢʔεέʔεҎ֎ Ͱಠࣗੑͷߴ͍͍ํΛ͢Δ߹ҙ JavaScript thread or UI thread
?
react-native-reanimated x expo-linear-gradient
ঢ়ଶཧͱӬଓԽ 1िؒ୯ҐͰཤྺΛදࣔɻԼ͔Β݄༵ʙ༵ https://docs.pmnd.rs/jotai/guides/persistence#a-helper-function-with-async-storage-and-json-parse Jōtai + Async Storage ࣮ ͪΐͬͱνϟϨϯδ ʮτϨʔχϯάཤྺΛ୯ҐͰӾཡͰ͖Δ͜ͱʯ
τϨʔχϯάϝχϡʔɺཤྺɺઃఆ༰ΛͲ͏͔ͨ͠
ܙΈʹײँ ݱࡏͷpackage.json
https://twitter.com/reactfanjp https://twitter.com/reactnativejp Jōtai࡞ऀͷ @dai_shi ͞Μ͕ӡӦ͢Δ ʮReact Fanʯ https://discord.com/invite/MrQdmzd ΈΜͳେ͖ ʮReact
Native Japanʯ
ϦϦʔε ͍ͭਏ͍ͷ։ൃҎ֎ͷ࡞ۀ 📚 ετΞొͷͨΊͷखଓ͖ 📚 ৹ࠪఏग़ͷͨΊͷ४උ 🖋 ΞϓϦઆ໌จͷ༻ҙ 🖋 ϓϥΠόγʔϙϦγʔͷ༻ҙ
🖋 ετΞ༻εΫγϣͳͲը૾ͷ༻ҙ 🔖 ϦϦʔε༏ઌͷͨΊɺGoogle AnalyticsAdMobಋೖޙճ͠ 🔖 ࡉ͔ͳσβΠϯमਖ਼վળܥ༏ઌ͘
݁ͼʹ ReactͷࣝˍExpoͰΞϓϦ։ൃΛૉૣ࣮͘ݱ ίϛϡχςΟͷॴଐͰෆ҆ཁૉΛഉআ ։ൃҎ֎ͷϋʔυϧҰܦݧͯࣗ͠৴ʹɻָ͘͠։ൃ͠Α͏ expo-linear-gradientʢάϥσʔγϣϯʣٹ͍
͝ײ͓͓ͪͯ͠Γ·͢ tell_y_t