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
React Native+Expoで始めるWebフロント開発
Search
asmz
January 17, 2025
0
260
React Native+Expoで始めるWebフロント開発
Talked at Sendai Frontend Meetup #15
asmz
January 17, 2025
Tweet
Share
More Decks by asmz
See All by asmz
UIデザインを考える全ての人たちに捧げる Apple Human Interface Guidelinesのススメ
asmz
1
2.3k
Overview of Swift and iOS App development
asmz
0
1.2k
How to get mobile app logs using Firebase Crashlytics
asmz
0
840
OK Google, Deploy the iOS app
asmz
1
870
Cooperate with Adobe XD, Zeplin and Xcode
asmz
1
3.1k
phpconsen LT
asmz
0
730
SWWDC 39
asmz
1
240
Create voice assistant app by Dialogflow
asmz
0
840
SWWDC 34
asmz
0
730
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A better future with KSS
kneath
239
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Visualization
eitanlees
146
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
asmz.beer React Native + Expoで始める Webフロント開発 2025/1/17 Sendai Frontend Meetup
#15 Akira Shimizu / asmz
asmz.beer 誰なのか? • Akira Shimizu / asmz (@_asmz) • https://asmz.beer/
• モバイルアプリエンジニア ◦ iOS / Android / React Native / Flutter • お仕事募集中です!
asmz.beer お仕事募集中です!
asmz.beer アジェンダ 1. React Native, Expoとは 2. ExpoでのWebフロント開発手順 3. Expo
Web開発のメリット・デメリット
asmz.beer React Native, Expoとは
asmz.beer React Nativeとは React技術を用いてiOS/Androidネイティブアプリケーションを開発できる Javascriptライブラリ https://reactnative.dev/
asmz.beer Expoとは React Nativeをベースとし、ネイティブ処理の隠蔽やファイルベースルー ター、クラウドビルドサービスなどアプリ開発に便利な様々な機能やツー ルを集めた開発フレームワーク https://expo.dev/
asmz.beer Expo つまりこういう感じ React iOS SDK iOS App Android SDK
Android App React Native React Native iOS React Native Android 今日の話題 React DOM Web App React Native for Web
asmz.beer ExpoでのWebフロント開発手順
asmz.beer Expoプロジェクト作成 $ npx create-expo-app@latest --template blank-typescript Creating an Expo
project using the blank-typescript template. ✔ What is your app named? … my-expo-web-sample : $ cd my-expo-web-sample $ #web開発に必要な依存パッケージを導入 $ yarn expo install react-dom react-native-web @expo/metro-runtime
asmz.beer Expoプロジェクト作成
asmz.beer コード概要 React Nativeでは抽象化された GUIコンポーネントを使って画面 を生成する UITextView Class <Text> ~~~
</Text> TextView Class <p> ~~~ </p> iOS Android Web https://reactnative.dev/docs/intro-react-native-components#core-components
asmz.beer Expo開発サーバ起動 $ yarn expo start ソースコードの変更を検知し、自 動でアプリに転送、ビルドなどし てくれるローカルサーバ
asmz.beer Expoアプリ起動 ターミナル上で 「w」キー押下
asmz.beer Expoアプリ起動 ターミナル上で「i」や「a」を 押すと
asmz.beer Expo Router導入 • React Native上でファイルベースルーティングを実現す るライブラリ • 詳細な導入方法は以下参照 ◦
https://docs.expo.dev/router/installation/
asmz.beer Expo Router導入 「/」に該当 「/second」に該当 「/settings」に該当
asmz.beer Expo Router導入
asmz.beer Expo Routerでタブナビゲーション
asmz.beer Expo Routerでタブナビゲーション
asmz.beer Expo Web Appのデプロイ $ yarn expo export -p web
distディレクトリ配下に公開用のファイル 群がビルドされるので、任意のWebサー バへアップして公開可能
asmz.beer EAS Hosting • https://expo.dev/blog/expo-announces-eas-hostin g-service • 2025/1/15にプレビュー版公開 • 元々EASではアプリのビルド、ストア公開などが可能
だったが、そこにWebアプリのホスティング機能が追加
asmz.beer Expo Web開発の メリット・デメリット
asmz.beer Expo Web開発のメリット • iOS/Androidアプリと足並みを揃えた開発が可能 • モバイルアプリエンジニアがWeb開発に参画しやすい
asmz.beer Expo Web開発のデメリット • WebフロントエンジニアからするとReact Nativeコンポーネ ントの扱いに戸惑うかも • もっとゴリゴリとHTMLやCSSを書きたい場合は難しいかも しれない
asmz.beer Enjoy, Engineering! 2025/1/17 Sendai Frontend Meetup #15 Akira Shimizu
/ asmz