🌎

ReactNativeでREST APIからデータを取得する

2024/03/20に公開

React Native

読んでほしい人

ReactNativeを勉強してる人
REST APIと通信をしてみたい

補足情報

今回外部APIと通信するには、ReactHooksのuseStateとuseEffectの知識が必要です。ReactNativeを使うには、React.jsの知識が必要なので学習する必要があります。モバイルのドキュメントだと、React Hooksの解説がなかったですね???

https://ja.react.dev/reference/react

今回は、{JSON} Placeholderという無料でAPIが使えるサイトから情報を取得するのをやってみようと思います。

記事の内容

まずは、APIのJSONの構造に合わせてモデルクラスを作りましょう。全て情報はいらないので、id, name, emailだけ取得しましょうか。

データ型としてinterfaceを定義する。

interface User {
    id: number;
    name: string;
    email: string;
}

APIから取得したデータを状態として保持する変数に格納して、非同期処理で表示するコードを書きます。

const [users, setUsers] = useState<User[]>([]);

    const URL = "https://jsonplaceholder.typicode.com/users";

    const fetchUsers = async () => {
        const response = await fetch(URL);
        const data = await response.json();
        console.log(data);
        setUsers(data);
    }

    useEffect(() => {
        fetchUsers();
    }, []);

あとは、ReactNativeで表示するView側のコードを書くだけです。今回は、Listで表示してみました。こちらが全体のコードです。

import { useEffect, useState } from "react";
import { View, Text, StyleSheet, FlatList } from "react-native";

interface User {
    id: number;
    name: string;
    email: string;
}

export default function GetAPI() {
    const [users, setUsers] = useState<User[]>([]);

    const URL = "https://jsonplaceholder.typicode.com/users";

    const fetchUsers = async () => {
        const response = await fetch(URL);
        const data = await response.json();
        console.log(data);
        setUsers(data);
    }

    useEffect(() => {
        fetchUsers();
    }, []);

    const renderItem = ({ item }: { item: User }) => (
        <View style={styles.itemContainer}>
            <Text style={styles.name}>{item.name}</Text>
            <Text style={styles.email}>{item.email}</Text>
        </View>
    );

    return (
        <View style={styles.container}>
            <Text style={styles.header}>Users</Text>
            <FlatList
                data={users}
                renderItem={renderItem}
                keyExtractor={item => item.id.toString()}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    header: {
      fontSize: 24,
      fontWeight: 'bold',
      textAlign: 'center',
      margin: 20,
    },
    itemContainer: {
        borderBottomWidth: 1,
        borderBottomColor: '#ccc',
        padding: 10,
    },
    name: {
        fontSize: 20,
        fontWeight: 'bold',
    },
    email: {
        fontSize: 16,
    },
});

最後に

今回は、ReactNativeで以前Reactで書いたことがあるHTTP通信をやってみました!
Reactのコードをそのまま書いている部分もあれば、ReactNative独特のコンポーネントのコードに修正する必要がある部分もあるので、全ては使いまわせないですね。

読んでほしい人

補足情報

記事の内容

最後に

Discussion