Web対応モジュールの見分け方
Expo Router以外にも、Web対応のモジュールはいくつもあります。Web対応があるモジュールには、公式ドキュメントに "Web" のバッジがついているので、それで見分けるとよいでしょう。例えば、expo-clipboardの場合は、図3の表示になっています。
Web対応を表すバッジがついていますね。同様にWebバッジがついたモジュールをいくつかピックアップしてみましょう。
- expo-crypto：SHA512などのハッシュ値を生成する
- expo-location：位置情報を取得する
- expo-video：動画を表示する
ブラウザが持っているリッチな機能にアクセスできるライブラリが少しずつ増えていっています。他にも魅力的なライブラリが揃っているので、ぜひ探してみてください。
実践：コンポーネントカタログの構築
ExpoのWeb対応機能の実践的な活用例として、軽量なコンポーネントカタログを構築してみましょう。開発環境でのコンポーネント確認やチーム間での情報共有に役立ちます。コンポーネントカタログをWeb環境で構築することで、デザイナーとの連携、QAエンジニアによる動作確認、リモートワークでの情報共有、レスポンシブ確認など、チーム開発の生産性が向上します。
_dev/catalog ルートでの実装
/_dev/catalogというパスにコンポーネントカタログを作ることにしましょう。Expo Routerのファイルベースルーティングを活用し、本番環境では表示されない開発専用のカタログルートを作成します（リスト10、リスト11）。
import { Stack } from 'expo-router';
import { Platform } from 'react-native';
export default function DevLayout() {
// 本番のモバイルアプリビルドでは開発ツールを無効化
// 他にも必要に応じてアクセス制限の手立てを講じる
if (process.env.NODE_ENV === 'production' && Platform.OS !== 'web') {
return null;
}
return (
<Stack>
<Stack.Screen name="catalog" options={{ title: 'コンポーネントカタログ' }} />
</Stack>
);
}
import { Text, ScrollView } from 'react-native';
import { Link } from 'expo-router';
export default function CatalogIndex() {
const components = [
{ name: 'Button', href: '/catalog/button' },
{ name: 'Card', href: '/catalog/card' },
];
return (
<ScrollView>
<Text>コンポーネントカタログ</Text>
{components.map((component) => (
<Link key={component.name} href={component.href}>
<Text>{component.name}</Text>
</Link>
))}
</ScrollView>
);
}
リスト11を実行すると、図4のような表示になります。
簡易カタログの実装例
個別のコンポーネントを表示するページでは、複数のバリエーションを並べて表示します（リスト12）。
import { Text, ScrollView } from 'react-native';
import { MyButton } from '../../../components/MyButton';
export default function ButtonCatalog() {
return (
<ScrollView>
<Text>Button バリエーション</Text>
<MyButton title="プライマリ" variant="primary" />
<MyButton title="セカンダリ" variant="secondary" />
{/* (略) */}
</ScrollView>
);
}
リスト12を実行すると次のような見た目になります。
これを開発者以外にも見せられれば、UIの実装状況について簡単に共有できそうですね。
チーム開発での活用方法
このコンポーネントカタログは、プルリクエストでのプレビュー、デザインレビュー、仕様書代わり、回帰テストなど、さまざまな場面でチーム開発に活用できます。
Storybookなどの本格的なツールと比較すると機能は限定的ですが、導入コストが低く、既存のExpoプロジェクトにすぐに組み込めるのが利点です。特に小さなチームや個人開発では、こういった軽量なアプローチが有効でしょう。
まとめ
本記事では、ExpoのWeb向けビルド機能について解説しました。ブラウザ上でUIを再現することで、コンポーネントカタログを作れば、チームの生産性を向上できるのではないでしょうか。もし機会があれば、Webアプリへの移植を試してみるのもいいでしょう。
次回は、EAS Buildサービスを活用したアプリのビルドとデプロイメントについて解説予定です。
