ExpoのWeb向けビルド機能「React Native for Web」を活用して、UIをブラウザで確認しよう

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

プラットフォーム固有の実装パターン

　React Native for Webが独立したライブラリであるからこそ、すべてのコンポーネントが完全に互換性を持つわけではありません。プラットフォーム固有の機能を使い分けるための実装パターンを見ていきましょう。

Platform.OSによる条件分岐

　最も基本的な方法は、Platform.OSによる条件分岐です（リスト1）。

［リスト1］Platform.OSによる条件分岐

import { Platform, View, Text } from 'react-native';
export default function PlatformInfo() {
  return (
    <View>
      <Text>現在のプラットフォーム: {Platform.OS}</Text>
      {Platform.OS === 'web' ? (
        <Text>Webブラウザで実行中です</Text>
      ) : (
        <Text>モバイルアプリで実行中です</Text>
      )}
    </View>
  );
}

　Platform.OSは、iOS、Android、Webそれぞれで異なる値（'ios'、'android'、'web'）を返します。

Platform.selectによる値の切り替え

　複数のプラットフォーム向けに値を切り替える場合は、Platform.selectを使うとより簡潔に書けます（リスト2）。

［リスト2］Platform.selectによる値の切り替え

import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  container: {
    padding: Platform.select({
      web: 20,
      ios: 15,
      android: 10,
    }),
    fontFamily: Platform.select({
      web: 'system-ui, -apple-system, sans-serif',
      default: 'System', // iOS/Android共通
    }),
  },
});

Web専用ファイルによる実装分割

　より大きな実装の違いがある場合は、.web.tsx拡張子を使用してWeb専用の実装を提供できます。この拡張子のファイル内では、<div>などのDOM要素を直接利用できます。

　これは、.android.tsxや.ios.tsxの拡張子をつけることでプラットフォームごとにピックアップされるファイルを切り替えられる、React Native本来の仕組みに則ったものです（リスト3）。

［リスト3］プラットフォーム別ファイル分割の例

components/
├── FileUploader.tsx       # モバイル向け基本実装（expo-image-picker使用）
├── FileUploader.web.tsx   # Web専用（HTML input[type="file"]使用）
├── NotificationBanner.tsx # Web向け基本実装（DOM操作使用）
└── NotificationBanner.native.tsx  # モバイル専用（expo-notifications使用）

　この例では、FileUploaderは「モバイル＋Web専用」、NotificationBannerは「Web＋モバイル専用」の組み合わせになっています。

　Webビルド時には.web.tsxが、iOS/Androidビルド時には.native.tsxが優先的に読み込まれ、該当するファイルがなければ無印（.tsx）が使用されます。この仕組みにより、プラットフォームごとに最適化された実装を透過的に切り替えることができます。