Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
初めてのExpoアプリ個人開発
Search
t6adev
October 02, 2021
Technology
280
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
初めてのExpoアプリ個人開発
https://reactnative-matsuri.com/speakers/G86t6y1Y3idDwm7VkPxt
t6adev
October 02, 2021
Transcript
22 slides
ॳΊͯͷ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
More Decks by t6adev
See All by t6adev
Oxlintとeslint-plugin-react-hooks 明日から始められそう?
t6adev
0
590
awaitをやめたReact?
t6adev
2
1k
jotaifriends.dev 始めました
t6adev
0
1.9k
jotaifriends.dev で使っているWeb APIの紹介
t6adev
0
410
React状態管理ライブラリJotaiとは
t6adev
0
500
Other Decks in Technology
See All in Technology
Kiro CLI 入門 (ターミナルと CI で使う) | 目指せ Kiro マスター 03
inariku
PRO
2
150
農夫は秘伝のタレを知らない - NOBODY KNOWS THE HIDDEN SOURCE - Kaggriculture 3rd Place Solution
masspeaks
0
310
Where Should Platform Complexity Live? Lessons from a Cross-Team PR Preview Platform
taiki45
0
110
JAWSコミュニティに 参加して1年経った結果
ssakita
0
150
GCASアップデート(202607-202610)
techniczna
1
340
2026-11-11 Tamachi.sre#7 PaCにインフラリソースの命を救われました。 / PaC saves the infra resource life
masasuzu
0
170
Claude Securityを使ってみた / claude-security-claude-code-meetup-nagoya
tnir
0
110
仕様と現実の間で落とし所を探るリモートMCPの認証・認可 — Sansanの認証基盤における課題と実践
sansantech
PRO
2
290
Agent Harnessはどう作る?事例から学ぶAI Agentの設計思想
sergicalsix
0
290
変更差分を読むために環境を整備しよう
pipepasta
1
120
並列度を下げたら速くなった — go build の重複コンパイルを実測で見る
tomoaki25
2
1.2k
思考過程から秘密が漏れる:Amazon Bedrock上のKimi K3を5つの方法で攻めたら、25回中22回漏洩した話
yama3133
1
160
Featured
See All Featured
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
1
310
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
2
6.4k
Product Roadmaps are Hard
iamctodd
55
13k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
630
Code Review Best Practice
trishagee
74
20k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
880
Highjacked: Video Game Concept Design
rkendrick25
PRO
2
570
Heart Work Chapter 1 - Part 1
lfama
PRO
11
37k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
530
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.4k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
2
350