Expo SDK 54 で始めるモバイルアプリ開発

はじめに

Expo SDK 54 がリリースされ、React Native によるモバイルアプリ開発がさらに快適になりました。本記事では、Expo Router を使ったファイルベースルーティングと Firebase Auth の連携方法を紹介します。

プロジェクトの作成

npx create-expo-app@latest my-app --template tabs
cd my-app

Expo Router のファイル構成

Expo Router は Next.js の App Router に似たファイルベースのルーティングを提供します。

app/
├── (tabs)/
│   ├── _layout.tsx    # タブレイアウト
│   ├── index.tsx      # ホームタブ
│   └── profile.tsx    # プロフィールタブ
├── (auth)/
│   ├── _layout.tsx    # 認証レイアウト
│   ├── login.tsx      # ログイン画面
│   └── register.tsx   # 登録画面
└── _layout.tsx        # ルートレイアウト

Firebase Auth の連携

1. Firebase の初期化

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

2. 認証状態の管理

import { onAuthStateChanged } from "firebase/auth";
import { useEffect, useState } from "react";

export function useAuth() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    return onAuthStateChanged(auth, setUser);
  }, []);

  return { user };
}

3. 保護されたルート

Expo Router の _layout.tsx で認証チェックを行い、未認証ユーザーをログイン画面にリダイレクトします。

SDK 54 の主な改善点

パフォーマンスの向上: 起動時間が平均20%短縮
新しい API: カメラやセンサーの API が強化
開発者体験: エラーメッセージの改善、デバッグツールの充実

まとめ

Expo SDK 54 と Expo Router の組み合わせにより、Web 開発者にとって馴染みのあるファイルベースルーティングでモバイルアプリを構築できます。Firebase Auth との連携も比較的シンプルに実装可能です。