Tweet
Tweet

Slide 1

Slide 1 text

asmz.beer React Native + Expoで始める Webフロント開発 2025/1/17 Sendai Frontend Meetup #15 Akira Shimizu / asmz

Slide 2

Slide 2 text

asmz.beer 誰なのか？ ● Akira Shimizu / asmz (@_asmz) ● https://asmz.beer/ ● モバイルアプリエンジニア ○ iOS / Android / React Native / Flutter ● お仕事募集中です！

Slide 3

Slide 3 text

asmz.beer お仕事募集中です！

Slide 4

Slide 4 text

asmz.beer アジェンダ 1. React Native, Expoとは 2. ExpoでのWebフロント開発手順 3. Expo Web開発のメリット・デメリット

Slide 5

Slide 5 text

asmz.beer React Native, Expoとは

Slide 6

Slide 6 text

asmz.beer React Nativeとは React技術を用いてiOS/Androidネイティブアプリケーションを開発できる Javascriptライブラリ https://reactnative.dev/

Slide 7

Slide 7 text

asmz.beer Expoとは React Nativeをベースとし、ネイティブ処理の隠蔽やファイルベースルー ター、クラウドビルドサービスなどアプリ開発に便利な様々な機能やツー ルを集めた開発フレームワーク https://expo.dev/

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

asmz.beer ExpoでのWebフロント開発手順

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

asmz.beer Expoプロジェクト作成

Slide 12

Slide 12 text

asmz.beer コード概要 React Nativeでは抽象化された GUIコンポーネントを使って画面 を生成する UITextView Class ~~~ TextView Class

~~~

iOS Android Web https://reactnative.dev/docs/intro-react-native-components#core-components

Slide 13

Slide 13 text

asmz.beer Expo開発サーバ起動 $ yarn expo start ソースコードの変更を検知し、自 動でアプリに転送、ビルドなどし てくれるローカルサーバ

Slide 14

Slide 14 text

asmz.beer Expoアプリ起動 ターミナル上で 「w」キー押下

Slide 15

Slide 15 text

asmz.beer Expoアプリ起動 ターミナル上で「i」や「a」を 押すと

Slide 16

Slide 16 text

asmz.beer Expo Router導入 ● React Native上でファイルベースルーティングを実現す るライブラリ ● 詳細な導入方法は以下参照 ○ https://docs.expo.dev/router/installation/

Slide 17

Slide 17 text

asmz.beer Expo Router導入 「/」に該当 「/second」に該当 「/settings」に該当

Slide 18

Slide 18 text

asmz.beer Expo Router導入

Slide 19

Slide 19 text

asmz.beer Expo Routerでタブナビゲーション

Slide 20

Slide 20 text

asmz.beer Expo Routerでタブナビゲーション

Slide 21

Slide 21 text

asmz.beer Expo Web Appのデプロイ $ yarn expo export -p web distディレクトリ配下に公開用のファイル 群がビルドされるので、任意のWebサー バへアップして公開可能

Slide 22

Slide 22 text

asmz.beer EAS Hosting ● https://expo.dev/blog/expo-announces-eas-hostin g-service ● 2025/1/15にプレビュー版公開 ● 元々EASではアプリのビルド、ストア公開などが可能 だったが、そこにWebアプリのホスティング機能が追加

Slide 23

Slide 23 text

asmz.beer Expo Web開発の メリット・デメリット

Slide 24

Slide 24 text

asmz.beer Expo Web開発のメリット ● iOS/Androidアプリと足並みを揃えた開発が可能 ● モバイルアプリエンジニアがWeb開発に参画しやすい

Slide 25

Slide 25 text

asmz.beer Expo Web開発のデメリット ● WebフロントエンジニアからするとReact Nativeコンポーネ ントの扱いに戸惑うかも ● もっとゴリゴリとHTMLやCSSを書きたい場合は難しいかも しれない

Slide 26

Slide 26 text

asmz.beer Enjoy, Engineering! 2025/1/17 Sendai Frontend Meetup #15 Akira Shimizu / asmz