🚀【React Native × Node.js × MySQL】ローカル環境でデータを取得して一覧表示するまでを最速で解説！

はじめに

React Native で「MySQLのデータをアプリに表示したい！」と思っても、
最初はどこから手をつければいいか分かりづらいですよね。

この記事では Node.js（Express）でAPIを作成 → React Nativeでデータを取得・表示 するまでの流れを、最短で動かせる手順を紹介します。

対象者

• React Native初学者
• タイトルの通り、React NativeでDBを接続してみたい方

環境・利用技術

• OS：Windows
• React Native
• Expo
• Node.js
• MySQL

前提条件

React NativeをExpo Goを使用し、スマホから動作確認ができる状態にあること
MySQLをローカルで操作できていること
Node.jsをインストール済みであること

※これらを満たしていない場合は、各種セットアップしてから読み進めてください。この記事では本題と逸れるため割愛させていただきます。

MySQL

事前に任意のデータベースとテーブルを作成しておきます。
各種名称やテーブル設計は任意で大丈夫ですが、本記事では以下で進めていくので、必要に応じて読み替えてください。

※ 今回はローカル検証用のため、rootユーザーや平文パスワードを使用しています。
本番環境では専用ユーザーを作成し、環境変数などで管理してください。

mysql -u root -p
# 実行後パスワードを入力しMySQLに入る

DB作成

mysql> CREATE DATABASE sample_db;
mysql> USE sample_db;

テーブル作成

mysql> CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

サンプルデータ挿入

mysql> INSERT INTO users (name, email) VALUES ('Taro', '[e-mail]'), ('Hanako', '[e-mail]');

データ確認

mysql> SELECT * FROM users;

Node.js

APIを作成します。
まずプロジェクトを作成と必要なライブラリをインストールします。

mkdir myapi
cd myapi
npm init -y
npm install express mysql2 cors

作成したプロジェクトの配下にindex.jsを作成し以下のように書きます。

index.js

const express = require("express");
const mysql = require("mysql2");
const cors = require("cors");

const app = express();
app.use(cors());
app.use(express.json());

// MySQL接続設定
const db = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "パスワード",
  database: "sample_db",
});

// 接続確認
db.connect(err => {
  if (err) {
    console.error("DB接続エラー:", err);
    return;
  }
  console.log("MySQL connected");
});

// 例：データ取得API
app.get("/users", (req, res) => {
  db.query("SELECT * FROM users", (err, results) => {
    if (err) {
      console.error(err);
      res.status(500).send("DBエラー");
    } else {
      res.json(results);
    }
  });
});

// サーバ起動
app.listen(3000, () => console.log("APIサーバ起動: http://localhost:3000"));

curlコマンドでAPIの動作確認

# APIサーバー起動
node index.js

別のコマンドプロンプトを立ち上げ以下を実行

curl http://localhost:3000/users

ここで作成したサンプルデータが表示されていれば、Node.js-MySQL間の連携に成功していることがわかります。

React Native

データを取得して一覧表示する。
任意のページでよいですが、サンプルではトップに表示するよう書いていきます。

app/(tabs)/index.tsx

import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import React, { useEffect, useState } from 'react';
import { FlatList, View } from 'react-native';

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

function ListView({ item }: { item: User }) {
  return (
    <ThemedView
      style={{
        padding: 16,
        borderBottomWidth: 1,
        borderBottomColor: '#ccc'
      }}>
      <ThemedText style={{ fontSize: 16 }}>{item.id}</ThemedText>
      <ThemedText style={{ fontSize: 16 }}>{item.name}</ThemedText>
      <ThemedText style={{ fontSize: 14 }}>{item.email}</ThemedText>
    </ThemedView>
  );
}

export default function HomeScreen() {
  const [resdata, setResdata] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    (async () => {
      try {
        setLoading(true);
        // 自分のPCのローカルIPアドレスを確認して書き換える
        const res = await fetch("http://192.168.X.X:3000/users");
        if (!res.ok) throw new Error("通信に失敗しました");
        const data = await res.json();
        setResdata(data);
      } catch (err) {
        if (err instanceof Error) {
          setError(err.message);
        } else {
          setError("不明なエラーが発生しました");
        }
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  if (loading) return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <ThemedText>読み込み中です...</ThemedText>
    </View>
  );

  if (error) return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <ThemedText>エラー: {error}</ThemedText>
    </View>
  );

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={resdata}
        keyExtractor={(item) => item.id.toString()}
        style={{ paddingTop: 80 }}
        renderItem={({ item }) => <ListView item={item} />}
      />
    </View>
  );
}

WindowsでローカルIPを確認する方法

ipconfig
# 以下実行結果
(省略)
IPv4 アドレス . . . . . . . . . . . .: 192.168.1.1
(省略)

上記のように表示されたら、http://192.168.1.1:3000/users というようにfetch()の引数を設定してください。

動作確認

全ての準備が整ったので、EXPOの開発サーバを起動し、実機で確認します。
⚠️ スマホ（Expo Go）とPCが 同じWi-Fiネットワーク に接続されている必要があります。

# EXPOプロジェクト配下で以下のコマンドを実行
myapp > npx expo start

表示されるQRコードをスマホで読み取り、スマートフォンアプリ Expo Go で表示を確認する。
上手くいってると以下のように表示されるはずです。

おわりに

ここまでで、React NativeからローカルのMySQLデータを取得する基本的な流れを実装しました。
次回は、データの追加（POST）処理なども実装していきたいと思います。