Expo Router は Expo 導入の決め手となるかフロントエンドカンファレンス沖縄2023 @Kaito-Dogi

Expo Router は
Expo 導⼊の決め⼿となるか
フロントエンドカンファレンス沖縄2023
@Kaito-Dogi

View Slide

自己紹介
@Kaito_Dogi
@Kaito-Dogi
❏ 株式会社ゆめみ
❏ Android エンジニア
❏ React Native 挑戦中🔥
❏ 現地参戦2年⽬😎

View Slide

React Native で
モバイル開発したことありますか？

View Slide

フロントエンドエンジニアとの開発で
React Native を採⽤した

View Slide

純粋な React Native
vs
Expo

View Slide

Expo とは
❏ React Native 開発のオープンソースプラットフォーム
❏ Expo SDK を使⽤してネイティブ機能に簡単にアクセスできる
❏ React Native の開発に追従して Expo が開発される
❏ Expo SDK v49.0.0 に対して React Native v0.72 が対応
https://docs.expo.dev/versions/latest/

View Slide

Expo とは
メリットデメリット
❏ 開発環境の構築が容易
❏ アプリのデプロイ‧配布が
簡単になる
❏ React Native の更新に
⼀定の安定性が保証される
❏ Expo SDK に含まれない
ネイティブ機能に
アクセスできない
❏ アプリサイズが増加する
❏ 最新の React Native を
利⽤できない

View Slide

Expo を導⼊してみた
❏ プロジェクトの適性
❏ Expo で制限されるネイティブ機能を使⽤しない（予定）
❏ ⼩‧中規模なプロジェクト
❏ スピード感を重視
❏ Android‧フロントエンドエンジニアの学習コスト
❏ 作り込みすぎず、顧客の需要を素早く掴めるか
❏ Expo Router をはじめとした、Expo コミュニティの活発さ
https://expo.canny.io/

View Slide

Expo を導⼊してみた
❏ プロジェクトの適性
❏ Expo で制限されるネイティブ機能を使⽤しない（予定）
❏ 中規模なプロジェクト
❏ スピード感を重視
❏ Android‧フロントエンドエンジニアの学習コスト
❏ 作り込みすぎず、顧客の需要を素早く掴めるか
❏ Expo Router をはじめとした、Expo コミュニティの活発さ

View Slide

本セッションで話すこと‧話さないこと
❏ 話すこと
❏ Expo Router の基本的な使い⽅
❏ React Navigation（後述）との共通点‧相違点
❏ Expo Router を導⼊して感じたメリット
❏ 話さないこと
❏ React Navigation から Expo Router への移⾏⽅法
❏ React Native や Expo そのものの込み⼊った話

View Slide

❏ React Native の新しい画⾯遷移ライブラリ
❏ ファイルシステムベースルーティングが採⽤されている
❏ React Navigation 上に構築されている
❏ React Native の画⾯遷移ライブラリ
❏ Expo SDK v49 に対して Expo Router v2 を使⽤できる
❏ Expo SDK v50 に対して Expo Router v3 が予定されている
Expo Router とは

View Slide

Expo Router の特徴
❏ スクリーンの描画
❏ そのディレクトリの _layout.tsx がまず描画される
❏ 次にそのディレクトリの index.tsx が描画される
❏ ディレクトリ構成をもとに、Stack、Tabs が⾃動的に構築される
❏ コンポーネント、router オブジェクト、useRouter で画⾯遷移
❏ “/hoge” は “app/hoge.tsx”、“app/events/hoge.tsx”
❏ どの画⾯も⾃動でディープリンク可能に（マッピング不要）
https://docs.expo.dev/routing/introduction/

View Slide

チケット管理アプリを題材に🎟

View Slide

https://front-okinawa.connpass.com/
Expo Router React Navigation

View Slide

Expo Router React Navigation

View Slide

チケット管理アプリ
❏ 2つのタブで構成
❏ スタックでイベント詳細へ
❏ モーダルで QR コードを表⽰

View Slide

❏ パッケージのインストール
❏ 設定の変更
❏ エントリーポイントの変更
❏ app.json に scheme を追加
❏ babel.conﬁg.js の plugins に追加
❏ App.tsx を削除
Expo Router のセットアップ
https://docs.expo.dev/routing/installation/

View Slide

❏ “expo-router” をインストール
❏ Expo Router セットアップ済みのテンプレートも
パッケージのインストール
% npx expo install expo-router
Terminal
% npx expo install expo-router
Terminal

View Slide

エントリーポイントの変更
- "main": "node_modules/expo/AppEntry.js",
+ "main": "expo-router/entry",
package.json

View Slide

❏ ディープリンクで使⽤される
app.json に scheme を追加
{
...,
+ "scheme": "expo-router-sample",
}
app.json

View Slide

module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
...,
+ "expo-router/babel"
],
};
};
babel.conﬁg.js の plugins に追加
babel.conﬁg.js

View Slide

Layout routes
❏ そのディレクトリの _layout.tsx に記述する
❏ ページ共通で描画したいコンポーネントを描画できる
❏ Header、Footer、Context API など
import { Slot } from "expo-router";
export default function Layout() {
return ;
}
app/_layout.tsx
https://docs.expo.dev/routing/layouts/

View Slide

Layout routes
import { Tabs } from "expo-router";
import { TicketProvider } from "@/src/contexts/Ticket";
return (

...

);
}
app/_layout.tsx
購⼊済みチケットを注⼊

View Slide

❏ Navigator の外側に配置する
import { TicketProvider } from "./src/contexts/Ticket";
import { AppNavigator } from "./src/navigation";
export default function App() {
return (

);
}
共通レイアウトの配置
App.tsx
購⼊済みチケットを注⼊

View Slide

❏ 画⾯が重なっていくような画⾯遷移
❏ React Navigation の Native Stack Navigator をラップしている
❏ そのディレクトリの index.tsx がまず描画される
Stack
https://docs.expo.dev/router/advanced/stack/
https://reactnavigation.org/docs/native-stack-navigator/
import { Stack } from "expo-router";
return ;
}
app/_layout.tsx

View Slide

Stack
❏ コンポーネントでスタック全体の設定
❏ コンポーネントで画⾯ごとの設定
return (

...

);
}
app/events/_layout.tsx

View Slide

import { createNativeStackNavigator } from "@react-navigation/native-stack";
export type EventStackParamList = {
EventList: undefined;
...
};
const Stack = createNativeStackNavigator();
export const EventStack: FC = () => {
return (

...

);
};
Native Stack Navigator
navigation/EventStack.tsx

View Slide

...
};
return (

...

);
};
そのスタックの画⾯を
型として定義

View Slide

...
};
return (

...

);
};
Navigator を初期化

View Slide

...
};
return (

...

);
};
各画⾯に対して
Component を指定

View Slide

...
};
return (

...

);
};
最初に描画する
画⾯を指定

View Slide

Dynamic routes
❏ [id].tsx で任意の id にマッチできる
❏ useLocalSearchParams でパラメータを取得できる
https://docs.expo.dev/routing/create-pages/#dynamic-routes
https://docs.expo.dev/router/reference/hooks/#uselocalsearchparams
import { Redirect, useLocalSearchParams } from "expo-router";
export default function Page() {
const { id } = useLocalSearchParams();
if (typeof id !== "string") return ;
return ;
}
app/events/[id].tsx

View Slide

❏ コンポーネントでは、Href オブジェクトで
pathname、params を指定する
import { Link } from 'expo-router';
...
href={{
pathname: "/events/[id]",
params: { id: "1" }
}}>
...

...
}
Dynamic routes
https://docs.expo.dev/routing/navigating-pages/#linking-to-dynamic-routes
app/index.tsx

View Slide

❏ route オブジェクトの params から取得する
import { RouteProp } from "@react-navigation/native";
type Props = {
route: RouteProp;
};
export const EventDetailScreen: FC = ({ route }) => {
const { id } = route.params;
...
Passing parameters to routes
https://reactnavigation.org/docs/params/
components/screens/EventDetailScreen/EventDetailScreen.tsx

View Slide

❏ パラメータの型を定義する
❏ パラメータが不要の場合は undeﬁned とする
type EventStackParamList = {
EventDetail: { id: string };
};
Passing parameters to routes
https://reactnavigation.org/docs/typescript/#type-checking-screens

View Slide

Tabs
❏ iOS の Tab bars や Android の Navigation bar
❏ React Navigation の Bottom Tabs をラップしている
❏ そのディレクトリの index.tsx がまず描画される
https://docs.expo.dev/router/advanced/tabs/
https://reactnavigation.org/docs/bottom-tab-navigator/
return ;
}
app/_layout.tsx

View Slide

Tabs
❏ コンポーネントでスタック全体の設定
❏ コンポーネントで画⾯ごとの設定
return (

);
}
app/_layout.tsx

View Slide

Tabs
return (

name="events"
options={{
title: "イベント",
tabBarIcon: ({ color, focused }) => (

),
}}
/>
...

);
}
app/_layout.tsx

View Slide

Tabs
return (

name="events"
options={{

),
}}
/>
...

);
}
app/_layout.tsx
選択されたタブの
アイコン‧タイトルの⾊

View Slide

Tabs
return (

name="events"
options={{

),
}}
/>
...

);
}
app/_layout.tsx
タブのタイトル

View Slide

Tabs
return (

name="events"
options={{

),
}}
/>
...

);
}
app/_layout.tsx
タブのアイコン

View Slide

Tabs
❏ href で遷移する画⾯を明⽰的に指定
❏ href を null にすると、タブとして表⽰されない
return (

);
}
app/_layout.tsx

View Slide

return (

);
}
Tabs
❏ href で遷移する画⾯を選択
app/_layout.tsx

View Slide

❏ href で遷移する画⾯を選択
return (

);
}
Tabs
app/_layout.tsx

View Slide

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
type RootTabParamList = {
Event: undefined;
...
};
const Tab = createBottomTabNavigator();
export const RootTab: FC = () => {
return (

...

);
};
Bottom Tabs
navigation/RootTab.tsx

View Slide

Event: undefined;
...
};
return (

...

);
};
Bottom Tabs
そのタブの画⾯を型として定義

View Slide

Event: undefined;
...
};
return (

...

);
};
Bottom Tabs
Navigator を初期化

View Slide

Event: undefined;
...
};
return (

...

);
};
Bottom Tabs
各画⾯に対して
Component を指定

View Slide

Event: undefined;
...
};
return (

...

);
};
Bottom Tabs
最初に描画する
画⾯を指定

View Slide

Issue #763 initialRouteName が動かない
https://github.com/expo/router/issues/763

View Slide

Issue #763 initialRouteName が動かない
❏ 最初に表⽰される index.tsx でリダイレクト
https://docs.expo.dev/router/reference/redirects/
import { Redirect } from "expo-router";
return ;
}
app/index.tsx

View Slide

Modals
❏ の presentation で “modal” を指定する
https://docs.expo.dev/router/advanced/modals/
return (

...

);
}
app/_layout.tsx

View Slide

Issue #640 Android で Modals が動かない
https://github.com/expo/router/issues/640

View Slide

❏ JS Stack Navigator で実装する
❏ Material Design として適切ではないためという意⾒もあり、
Android で Modals を使うかは議論が必要
https://docs.expo.dev/router/advanced/stack/#javascript-stack-with-react-navigationstack
https://developer.apple.com/design/human-interface-guidelines/modality

View Slide

❏ JsStack を初期化
import { ParamListBase, StackNavigationState } from "@react-navigation/native";
import {
createStackNavigator,
StackNavigationEventMap,
StackNavigationOptions,
TransitionPresets,
} from "@react-navigation/stack";
import { withLayoutContext } from "expo-router";
const { Navigator } = createStackNavigator();
const JsStack = withLayoutContext<
StackNavigationOptions,
typeof Navigator,
StackNavigationState,
StackNavigationEventMap
>(Navigator);
app/tickets/_layout.tsx

View Slide

❏ の presentation で “modal” を指定
return (

name="[id]"
options={{
...TransitionPresets.ModalPresentationIOS,
presentation: "modal",
}}
/>

);
}
app/tickets/_layout.tsx

View Slide

Typed routes
❏ 画⾯の絶対パスをユニオン型として⽣成してくれる
// prettier-ignore
type StaticRoutes = `/` | `/_layout` | `/events/_layout` | `/events/` |
`/tickets/_layout` | `/tickets/`;
// prettier-ignore
type DynamicRoutes = `/events/${SingleRoutePart}` |
`/${CatchAllRoutePart}` | `/tickets/${SingleRoutePart}`;
// prettier-ignore
type DynamicRouteTemplate = `/events/[id]` | `/[...unmatched]` |
`/tickets/[id]`;
.expo/types/router.d.ts

View Slide

❏ Expo Router v2（Expo SDK v49）では experimental
❏ app.json で Typed routes を有効化
{
"expo": {
...
+ "experiments": {
+ "typedRoutes": true
+ }
}
}
app.json
Typed routes
https://docs.expo.dev/router/reference/typed-routes/

View Slide

❏ ParamList を定義する
❏ その Navigator 内でネストされた Navigator、画⾯の名前を
型付けするのみ（グローバルに遷移できるわけではない）
EventDetail: { id: string };
};
Type checking with TypeScript
https://reactnavigation.org/docs/typescript/

View Slide

Unmatched routes
❏ [...unmatched].tsx でカスタマイズできる
❏ レスト構⽂（...）を使⽤していれば名前は⾃由
❏ “/404” で遷移できる
❏ Expo Router v3 から Not found routes が出る予定
❏ +not-found.tsx に記述する
❏ ネストされたレベルから全てのルートにマッチ
https://docs.expo.dev/routing/error-handling/#unmatched-routes
https://docs.expo.dev/router/reference/not-found/

View Slide

Top-level src directory
❏ src ディレクトリを app に含められる
❏ src/app はルートの app よりも優先される
❏ conﬁg ファイル、public ディレクトリはルートに置く
❏ 開発中に移動した場合、キャッシュをクリア
https://docs.expo.dev/router/reference/src-directory/
% npx expo start --clear
Terminal

View Slide

その他の機能👀

View Slide

❏ グループ構⽂ “()”
❏ URL にセグメントが表⽰されない
❏ app/auth/home.tsx は “app/auth/home” にマッチ
❏ app/(auth)/home.tsx は “app/home” にマッチ
❏ useSegments でグループ名の⽂字列を取得できる
Groups
https://docs.expo.dev/routing/layouts/#groups
https://docs.expo.dev/router/reference/hooks/#usesegments

View Slide

Deep linking
❏ どの画⾯も⾃動でディープリンク可能に
❏ マッピング不要
❏ その他の実装は従来通り必要（割愛）
https://docs.expo.dev/guides/deep-linking/

View Slide

Deep linking
❏ 画⾯とディープリンクをマッピングする必要がある
https://reactnavigation.org/docs/deep-linking/
import { LinkingOptions, NavigationContainer } from "@react-navigation/native";
const linking: LinkingOptions = {
prefixes: [ ... ],
config: {
screens: { ... },
},
};
export const AppNavigator: FC = () => {
return (
...
);
};
navigation/AppNavigator.tsx

View Slide

API routes
https://blog.expo.dev/rfc-api-routes-cce5a3b9f25d
https://github.com/expo/expo/pull/24429
import { ExpoRequest, ExpoResponse } from 'expo-router/server';
export async function POST(req: ExpoRequest): Promise {
...
return ExpoResponse.json(json);
}
app/+api.tsx
❏ API（サーバーサイドロジック）をプロジェクト内で実装できる
❏ +api.ts の接尾辞のファイルで作成
❏ HTTP メソッドが⼀致したときに関数が実⾏される
❏ Expo Router v3 で beta 版リリース予定

View Slide

Expo Router を使⽤して感じたメリット
❏ ファイルシステムベースルーティングの恩恵
❏ 型定義やオブジェクトの初期化の必要がなく、簡潔に書ける
❏ Typed routes がないと扱いづらい
❏ Hooks API が便利
❏ React Navigation では Screen ⽤の Component に ScreenProps
（navigation や route オブジェクト）を渡す必要がある
❏ React Navigation との互換性があり、乗り換えやすい

View Slide

まとめ
❏ Expo 導⼊の背景に Expo Router をはじめとした Expo
コミュニティの活発さがあった
❏ ファイルシステムベースルーティングを採⽤しており、
簡潔に書けるようになった
❏ Expo Router は React Navigation をラップしており、React
Navigation との互換性がある

View Slide

参考記事
❏ Expo Documentation
https://docs.expo.dev/
❏ React Navigation
https://reactnavigation.org/
❏ Expo Feedback
❏ expo/router
https://github.com/expo/router
❏ Human Interface Guidelines | Apple Developer Documentation
https://developer.apple.com/design/human-interface-guidelines
❏ Material Design
https://m3.material.io/
❏ Evenline - Event Booking App UI Kit
https://ui8.net/unpixel/products/evenline---event-booking-app-ui-kit

View Slide

12/09(⼟)に渋⾕で LT &交流会を開催します🎉
https://coopello2.connpass.com/event/301314/

View Slide

ありがとうございました🙌

View Slide

Expo Router は Expo 導入の決め手となるかフロントエンドカンファレンス沖縄2023 @Kaito-Dogi

Expo Router は Expo 導入の決め手となるかフロントエンドカンファレンス沖縄2023 @Kaito-Dogi

Kaito-Dogi

More Decks by Kaito-Dogi

Other Decks in Programming

Featured

Transcript

Expo Router は Expo 導入の決め手となるか フロントエンドカンファレンス沖縄2023 @Kaito-Dogi

Expo Router は Expo 導入の決め手となるか フロントエンドカンファレンス沖縄2023 @Kaito-Dogi

Kaito-Dogi

More Decks by Kaito-Dogi

Other Decks in Programming

Featured

Transcript

Expo Router は Expo 導入の決め手となるかフロントエンドカンファレンス沖縄2023 @Kaito-Dogi

Expo Router は Expo 導入の決め手となるかフロントエンドカンファレンス沖縄2023 @Kaito-Dogi