今日から毎日ReactNativeを学ぶことにした（17日目）

MTGで1日が終わった。来週月曜もMTGで1日が終わる予定

前回

本日

API Routes

API Routes

ReactNativeってどちらかというとフロント側だと思ってたが、サーバエンドポイントにもできる？これも実験的な機能とのこと。ExpoはLaravelみたいにFE、BEともに提供できる総合的なフレームワークを目指しているのかもしれない。

// app.json
{
  "web": {
    "bundler": "metro",
    "output": "server"
  }
}

設定ファイルのoutputにserverを指定

//hello+api.ts
export function GET(request: Request) {
  rrn Response.json({ hello: 'world' });
}

〇〇+api.tsがファイルの命名規則

APIのようにjsonを返せる！

// app/index.tsx

import { Button } from 'react-native';

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

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

UIからAPIにアクセスすることも可能。だだデフォルトだとオリジンURLがないのでデフォルトで機能しないから注意。app.jsonにoriginを設定する必要があるとのこと。詳細はdocにあります。

index.tsx

onPress時

request, response等のAPIを実装するにあたって必要そうな機能は提供されている。ただExpoで実装をやり切るのはまだ現実的ではない気がするので割愛。

本日のまとめ

ReactNative…というかExpoフレームワークでAPIを実装できるのは意外だった。ただ現実的にはnode.jsとjestとかフレームワークを使うとか、別のサーバサイド言語でAPIサーバ作るのがよくあるパターンだと思う。サーバサイドのエンジニアとしてはこれがどうなっていくかは見守りたい。