React Native新機能

はじめに

株式会社クレアヴォイアンスでは自社アプリのフロントエンドにReact Nativeを使用しています。

React Nativeのexpo router というライブラリの新機能でAPI Routesというものを使うとバックエンドのコードが書けるようになりました。（Nuxt.js, Next.jsにも同様な機能があります)

詳細は↓
https://docs.expo.dev/router/reference/api-routes/

expo router

expo router とはファイルベースでルーティンをしてくれるライブラリで本来のSPAの開発では自分でルーティングの設定などを書かないといけないところをファイルベースでしてくれるライブラリです。

従来(ReactNavigation)

    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>

expo router

app/
 ├── index.tsx      # `/` (ホーム画面)
 ├── profile.tsx    # `/profile` (プロフィール画面)
 ├── settings/
 │   ├── account.tsx # `/settings/account` (アカウント設定)

appというディレクトリの配下にファイルを作成することで、いちいちルーティングの設定を自分で書く必要がなくなりとても楽にしてくれます。

このexpo router の新機能API Routeでファイル名の後に+api.tsとすることでtypescriptの記述でバックエンドが書けるようになりました。

API Route とはルートが一致したときにサーバー上で実行される関数です。APIキーなどの機密データを安全に処理したり、カスタムサーバーロジックを実装したりするために使用できます(認証コードをアクセストークンと交換するなど)

app/
 ├── api/
 │   ├── hello+api.ts     # `/api/hello` のエンドポイント
 │   ├── users+api.ts     # `/api/users` のエンドポイント
 │   ├── posts+api.ts     # `/api/posts` のエンドポイント

この機能を使うためにはまずライブラリをインストールしてネイティブやアプリの設定をしているapp.jsonというファイルに

{
  "web": {
    "output": "server"
  }
}

を追記します。
セッティングは以上です。

実際のバックエンドファイルの例

GET

export function GET(request: Request) {
  return Response.json({ hello: 'world' });
}

POST

export async function POST(request: Request) {
  const body = await request.json();

  return Response.json({ ... });
}

フロントの記述例

import { Button } from 'react-native';

async function fetchHello() {
  const response = await fetch('localhost:8081/api/hello');
  const data = await response.json();
  alert('Hello ' + data.hello);
}

export default function App() {
  return <Button> fetchHello()} title="Fetch hello" />;
}

他にもPUT, PATCH, DELETE, HEADが使えます。
またNode.js上で動くライブラリならサポートされています。試しにMysqlを動かしてみたのですがしっかり動きました。

開発時はlocalhost:8081で動きます。
デプロイ時には

npx expo export --platform web

とターミナルなどで上記のコマンドを打ち込んだ後に作成されるdist/serverフォルダーをNetlify, Vercel, Expoの各種プラットフォームまたはNode.jsサーバーどれかにぶち込んであげることでデプロイできます。Nodeサーバーに試しにぶち込んでみたのですがしっかり動いてました！！

これからもしかしたらReact Nativeだけでアプリを作成する人がでてきそうです。どんどん開発は進んでるフレームワークなのでこれからに期待したいと思いました。