Expo Routerで画面遷移を実装しよう――ファイルベースルーティングの基礎

ExpoとEASで始める快適モバイルアプリ開発 第5回

　モバイルアプリ開発において、ユーザーをスムーズに目的の機能へ導く「画面遷移」は、アプリの使い心地を左右する重要な要素です。React Nativeには標準の画面遷移機能がありませんが、Expoエコシステムには「Expo Router」という強力なライブラリが存在します。Webフレームワークでお馴染みのファイルベースルーティングを採用し、直感的にナビゲーションを構築できるのが特徴です。本記事では、Expo Routerの導入から基本的な画面遷移の実装までを解説します。

対象読者

• モバイルアプリを作ってみたいReactエンジニア
• モバイルアプリのリリース作業を手軽に行いたい方

前提環境

　筆者の検証環境は以下の通りです。

• macOS Sequoia 15.4.1
• Node.js 23.11.0
• npm 10.9.2
• Expo 52.0.46
• React Native 0.76.9

モバイルアプリと画面遷移

　スマートフォンの画面サイズは、デスクトップに比べて非常に限られています。そのため、モバイルアプリでは一度に表示できる情報量が少なく、コンテンツを複数の画面に分割して表示する設計が一般的です。ユーザーがアプリを使用する際には、目的の機能にたどり着くまで、必然的に複数の画面を行き来することになります。

　モバイルアプリ開発において、こうした「画面遷移」をいかにスムーズに実現するかは、ユーザー体験に直結する重要なポイントです。

　各画面の役割を明確に分け、必要な時に適切な画面に切り替えることで、限られた画面サイズでも多彩な情報や機能を効率的に提供できます。これがモバイルアプリの設計哲学であり、その設計と実装はアプリ開発全体の中でも重要な位置を占めていると言えるでしょう。

　しかし、React NativeやReactには、画面遷移を管理するための標準的な仕組みが組み込まれていません。これは、Reactの設計思想が「UIコンポーネントの構築」に焦点を当てており、画面遷移などの「アプリケーションの状態管理」は、具体的な実装に委ねられているためです。

　そのため、React Nativeでアプリを開発する際には、画面遷移を実現するためのライブラリを利用するのが一般的です。Expoのエコシステムには、特に「Expo Router」という優れたナビゲーションライブラリが提供されています。

　本記事では、このExpo Routerを使って、効率的に画面遷移を実装する方法を見ていきます。