Expo Routerのレイアウトの仕組みを理解し、より実践的なナビゲーションを構築しよう

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

　Expo RouterはExpoにおけるデファクトスタンダードな画面遷移ライブラリです。ファイルベースルーティングの手軽さと、Android/iOS本来の画面遷移機構を活用した操作感を併せ持ち、開発体験とユーザー体験を両立しています。その一助となっているのが、本記事で解説するレイアウト機構です。スタックやタブといった見慣れたナビゲーションをどのように実現するのか解説します。

対象読者

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

前提環境

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

• macOS Sequoia 15.4.1
• Node.js 24.0.2
• npm 11.3.0
• Expo 52.0.46
• React Native 0.76.9

ファイルベースルーティングとレイアウト

　前回の記事は、Expo Routerのセットアップと画面遷移の最低限の基本について解説しました。今回はより実践的なアプリ開発で役立つ仕組みについて解説していきます。

　今回の肝となるのは、ファイルベースルーティングの仕組みの中でも特殊な動きをする「レイアウト」の仕組みです。レイアウトは画面において「コンテンツの外枠」と呼べる、UIを定義するための仕組みです。

　例えば、次のような画面があったとします（図1）。

図1：画面AからBへの遷移

　画面が切り替わっていますが、よく見ると外側に変わっていない部分があるのをお分かりいただけるでしょうか（図2）。

図2：コンテンツ部の外側は変わっていない

　iOSの場合、ヘッダーのUIはタイトルや戻るボタンが内部でアニメーションするだけで、別のヘッダーに取り替えられるわけではありません。また、画面上には見えませんが、コンテンツの外側にもコンテンツを囲んでいるUIがあります。

　こういった、コンテンツを囲んでヘッダーを配置するような部品のことを、「レイアウト」と呼んでいます。では、実装上はどのようにレイアウトを定義するのか、見ていきましょう。

　その前に、まずはファイルベースルーティングを解説します。先にファイルベースルーティングの応用的な使い方を覚えておいたほうが、レイアウトの理解が深まるからです。