React Nativeでサーバーからデータを取得する方法｜fetch APIの使い方を徹底解説

React Nativeでサーバーからデータをロードするには、XMLHttpRequestなど他のネットワーキングAPIと同様の仕組みを持つfetch APIを利用します。

fetchを使ったサーバーへのリクエストは非常にシンプルです。まずは基本となるコードを見てみましょう。

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then((response) => response.json())
    .then((responseJson) => console.log(responseJson));

上記のコードでは、JSONファイル「https://jsonplaceholder.typicode.com/posts/1」を取得し、そのデータをコンソールに出力しています。fetch() APIの最もシンプルな呼び出し方は、取得したいパスという1つの引数を渡すだけで、レスポンスを含むPromiseを返します。

fetch APIはHTTPレスポンスを含むPromiseを返します。レスポンスからJSONボディを取り出すには、json()メソッドを使用します。

fetch APIの第2引数にはオブジェクトを指定でき、メソッド（GET、POSTなど）、ヘッダー、送信したいデータなどを設定することができます。

それでは、サーバーからデータを取得してユーザーに表示する、実際に動作するサンプルを見ていきましょう。

例：fetch APIでGETリクエストを使ってデータを取得する

まず、初期状態としてデータを空にしておきます。

state = {
    data: ''
}

componentDidMount()について

fetch APIはcomponentDidMount()関数の中で呼び出します。componentDidMount()は、コンポーネントがマウントされた直後、つまりすべての要素がページ上にレンダリングされた後に呼び出されるライフサイクルメソッドです。

実際のコードは以下のとおりです。

componentDidMount = () => {
    fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'GET'
    })
    .then((response) => response.json())
    .then((responseJson) => {
       console.log(responseJson);
       this.setState({
          data: responseJson
       })
    })
    .catch((error) => {
       console.error(error);
    });
}

URL「https://jsonplaceholder.typicode.com/posts/1」から取得できるデータは以下のとおりです。

{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

ここでは、body内のテキストを画面に表示することを目標とします。

data変数は、以下のようにsetStateメソッドを使って更新します。

this.setState({
    data: responseJson
})

これでthis.state.data.bodyにサーバーから取得したデータが格納され、次のようにユーザーへの表示に利用できます。

render() {
    return (
        <View>
            <Text>
              {this.state.data.body}
            </Text>
        </View>
    )
}

fetch APIを使ってサーバーからデータを取得する、完全な動作コードは以下のとおりです。

import React, { Component } from "react";
import { Text, View } from "react-native";
class HttpExample extends Component {
    state = {
      data: ''
    }
    componentDidMount = () => { fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'GET'
    })
    .then((response) => response.json())
    .then((responseJson) => {
       console.log(responseJson);
       this.setState({
          data: responseJson
       })
    })
    .catch((error) => {
       console.error(error);
    });
}
render() {
    return (
        <View>
            <Text>
              {this.state.data.body}
            </Text>
        </View>
    )
  }
}
const App = () => {
    return (
        <HttpExample />
    )
}
export default App

実行結果

補足：async/awaitを使った書き方

Promiseチェーンの代わりにasync/await構文を使うと、非同期処理をより読みやすく記述できます。

componentDidMount = async () => {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const responseJson = await response.json();
        this.setState({ data: responseJson });
    } catch (error) {
        console.error(error);
    }
}

なお、初期状態ではdataが空の文字列のため、データ取得前にthis.state.data.bodyへアクセスしてもエラーにはなりませんが、より安全に実装するには初期値をnullにし、データが存在する場合のみ表示する条件分岐を加えるのもおすすめです。