こんにちは！プロダクト開発本部の山本です！モバイルアプリエンジニアやEMをやっています🏋🏾‍♀️

この記事は、JMDC Advent Calendar 2023 22日目の記事です🌲

また、ここ記事はReact Native Advent Calendar 2023 22日目の記事でもあります🌲

JMDCでは、モバイルアプリ開発にReact Nativeを採用しています。

また、Pep UpのモバイルアプリをVanillaなReact NativeからExpoに絶賛Replace中です。開発中にデバッグメニュー的なの欲しいなぁ〜と思っていたところ、少し前にExpoにCustom Dev Menuという機能が実装されました🥳このCustom Dev Menuについての紹介や、実務で使えそうなレシピを紹介したいと思います💃

Dev Menuとは、React Nativeに実装されているDebug Build時に利用できる開発者向けのメニューです。 JSの再読み込み、フレームレートの確認、Element InspectorでのViewサイズの確認など、React Nativeの開発中には一度は使ったことがある機能だと思います。

reactnative.dev

Expoでは、React NativeのDev Menuに加えて、色々カスタムされています。

docs.expo.dev

そのひとつとして、Dev Menuに独自のDebug機能を追加することができるCustom Dev Menuがあります。

docs.expo.dev

Custom Dev Menuは、ユーザーが定義したデバッグメニューを追加できる機能です。追加したデバッグメニューは、Dev Menuの箇所にListItemとして追加され、タップすることで設定した処理を実行することができます。

例として、以下は「デバッグメニュー」というデバッグメニューを追加するApp.tsxになります。

import { Text, SafeAreaView, StyleSheet } from 'react-native';
import { registerDevMenuItems } from 'expo-dev-menu';

const devMenuItems = [
  {
    name: 'デバッグメニュー',
    callback: () => console.log('デバッグ'),
  },
];

registerDevMenuItems(devMenuItems);

export default function App() {
  return (
    <SafeAreaView>
      <Text>
        Sample app
      </Text>
    </SafeAreaView>
  );
}

これを実行し、debug menuを表示すると、「Custom Menu Items」のところにメニューが追加されます。

表示されている「デバッグメニュー」をタップすると、consoleに「デバッグ」と表示されます💃

追加すると便利なメニュー

弊社のアプリにも、いくつかデバッグメニューを追加しています。追加してて便利だったものを紹介します👐

expo-routerのSitemapへ遷移

expo-routerには、アプリ内のすべてのルートのリストを提供する /_sitemap というroutingが自動生成されています。

docs.expo.dev

画面実装中に画面遷移をどこにも追加していない時など、デバッグ時に利用することがあると思います。そういったときに /_sitemap に遷移するためのデバッグメニューを追加しておくと便利です。

永続化されているデータの表示/上書き

デバッグ時に永続化しているデータの状態を確認したり、値を書き換えることもよくあると思います。デバッグメニューに追加しておけば、console.logして中身を確認したり、特定の値への書き換えが数タップでできるようになります。ユーザーのアカウント状態の確認やアプリケーションの設定の上書きなんかを実装しておくと便利です。