ロリポップ：MySQL + PHP + React の連携方法（サンプルあり）

レンタルサーバーでポートフォリオサイトを作ろうと思ってる。MySQL のデータを PHP 経由で React に表示したいけど、どこから手を付けていいのやら・・。こういうことはできるの？

もちろんできますよ！今回は、ロリポップの MySQL データを PHP の Web API 経由で React アプリケーションに表示する方法を紹介します👌

1 MySQL + PHP + React 実働デモ
2 MySQL・PHP・React の関係性
3 MySQL データベース構築
4 PHP Web API 作成
- 4.1 Web API の実装
- 4.2 Web API ファイルのアップロード（配備）
5 ブラウザでの PHP Web API データ取得確認
6 React フロントエンド作成
7 ロリポップ（ファイルサーバー）へのアップロード
8 サンプルアプリケーション・SQL のダウンロード
9 再掲：ロリポップの MySQL + PHP + React 実働デモ
10 まとめ
11 React アプリケーションに対応するロリポップのプラン

MySQL + PHP + React 実働デモ

https://watermargin.net/portfolio/react

MySQL・PHP・React の関係性

今回のアプリケーションアーキテクチャは、次のように示すことができます。

ファイルサーバーの観点では、watermargin.net > portfolio 配下に、React アプリと PHP Web API が配置されています。

機能	ファイルサーバーの位置
React アプリ	watermargin.net ドメイン > portfolio フォルダ > react フォルダ
PHP Web API	watermargin.net ドメイン > portfolio フォルダ > product-api フォルダ

ファイルサーバーでの機能の位置関係

MySQL データベース構築

まずは、ロリポップの MySQL データベースに、表示用データを用意します。

MySQL ログイン

ロリポップにログインし、データベース（https://user.lolipop.jp/?mode=mysql）を開きます。

データベース一覧から、対象データベースの`操作する`ボタンをクリックします。

`phpMyAdmin を開く`をクリックし、phpMyAdmin のログイン画面を開きます。

ログイン情報

次の情報を控えておきます。

サーバー
データベース名
ユーザー名
パスワード

ログインします。

ログインすると、次の画面が表示されます。

データテーブルの作成

SQL を実行し、products というデータテーブルを作成します。

画面左側メニューのデータベース名をクリックします。

SQL 画面をクリックします。

products テーブル作成用の SQL

CREATE TABLE products (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    price DECIMAL(10, 2) NOT NULL,
    description TEXT
);

SQL を貼り付けて、`実行`ボタンをクリックします。

CREATE TABLE 文が実行されたことが分かります。

画面左の products テーブルの構造を確認します。カラムに、id、name、price、description が含まれていることが確認できます。

ダミーデータの作成

商品名、価格、商品説明が含まれるダミーデータを用意します。

INSERT INTO products (name, price, description)
VALUES
    ('ノートパソコン', 1200.00, 'ゲームや仕事向けの高性能ノートパソコン。'),
    ('スマートフォン', 800.00, '洗練されたデザインで高速なスマートフォン、見事なディスプレイ付き。'),
    ('ヘッドフォン', 150.00, 'ノイズキャンセリング機能を備えたオーバーイヤーヘッドフォン。'),
    ('スマートウォッチ', 300.00, '健康管理機能を備えたスタイリッシュなスマートウォッチ。'),
    ('タブレット', 500.00, 'エンターテイメントと生産性に最適な多用途タブレット。'),
    ('モニター', 250.00, '鮮やかな色彩を持つ24インチのフルHDモニター。'),
    ('キーボード', 100.00, 'RGBライティング付きのメカニカルキーボード。'),
    ('マウス', 50.00, 'DPI設定を調整できるワイヤレスマウス。'),
    ('カメラ', 900.00, 'プロフェッショナル向けの高解像度カメラ。'),
    ('プリンター', 200.00, 'スキャンとコピー機能を備えたワイヤレスプリンター。');

phpMyAdmin 画面で `SQL` 画面を開きます。

SQL エディタが開きます。

SQL をエディタに張り付けて、`実行`ボタンを押下します。

次の画面が表示され、SQL の実行が成功したことが分かります。

ダミーデータの確認

画面左の `products` テーブルを選択します。

画面が切り替わり、登録したデータが表示されます。また、次の SQL が実行されていることも分かります。

SELECT * FROM `products`

PHP Web API 作成

MySQL データベースを JSON 形式で返す PHP の Web API を作成します。

Web API の実装

Web API の実装ポイントは、次の通りです。

実装のポイント

データベースへの接続確立
商品情報の取得
JSON として呼び出し元にリターン

実装コード

データベース接続情報は、ご自身の環境に合わせて書き換えてください。

<?php
// データベース接続情報
$servername = "xxxxxxxxxxx.phy.lolipop.lan";
$username = "xxxxxxxxxxx";  // ロリポップのDBユーザー名
$password = "xxxxxxxxxxxxxxxxxxxxxx";  // ロリポップのDBパスワード
$dbname = "xxxxxxxxxxxxxxxxxxxxxx";    // ロリポップのDB名

// データベース接続を確立
$conn = new mysqli($servername, $username, $password, $dbname);

// 接続エラーチェック
if ($conn->connect_error) {
    die("接続失敗: " . $conn->connect_error);
}

// 商品情報を取得するSQLクエリ
$sql = "SELECT id, name, price, description FROM products";
$result = $conn->query($sql);

$products = array();

if ($result->num_rows > 0) {
    // 各行を取得して配列に追加
    while($row = $result->fetch_assoc()) {
        $products[] = $row;
    }
} else {
    echo "商品が見つかりません。";
}

// CORS 対応
header('Access-Control-Allow-Origin: http://localhost:3000');
// JSONとして返す
header('Content-Type: application/json');
echo json_encode($products);

$conn->close();
?>

Web API ファイルのアップロード（配備）

Web API の実装が終わったら、PHP ファイルをサーバーにアップロードします。

ブラウザでの PHP Web API データ取得確認

ブラウザで、ご自身のアップロードした Web API にアクセスします。当サイトの検証環境では、Web API は https://watermargin.net/portfolio/product-api/getProducts.php となります。

次のような JSON のレスポンスが返れば OK です。

React フロントエンド作成

次は React でのフロントエンド開発をしていきます。

React アプリケーションの作成

React アプリケーションを作成します。次の記事を参考にしていただけます。

参照：React: Material-UI (MUI) のインストールと始め方 > React アプリケーションの作成 (watermargin.net)

: React: Material-UI (MUI) のインストールと始め方
React で Material-UI を使う設定方法を記します。記事の最後にはサンプルも用意しています。目次1 Material-UI とは2 React アプリケーションの作成3 Materia ...

App.tsx の実装

実装のポイント

fetchProducts 関数内で、先ほどアップロードした PHP Web API の URL（"https://ご自身の契約ドメイン/portfolio/product-api/getProducts.php"）を指定しています。ご自身の契約しているドメイン名と、アップロード先のディレクトリ構造を反映して下さい。
商品一覧では、取得した商品リストを、リストアイテム（li要素）として出力しています。

import React, { useEffect, useState } from 'react';
import './App.css';

interface Product {
  id: number;
  name: string;
  price: number;
}

function App() {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
      const fetchProducts = async () => {
          try {
              const response = await fetch("https://ご自身の契約ドメイン/portfolio/product-api/getProducts.php");
              
              if (!response.ok) {
                  throw new Error('Network response was not ok');
              }
              const data = await response.json();
              setProducts(data);
          } catch (err: any) {
              setError(err.message);
          } finally {
              setLoading(false);
          }
      };

      fetchProducts();
  }, []);

  if (loading) {
      return <div>Loading...</div>;
  }

  if (error) {
      return <div>Error: {error}</div>;
  }

  return (
      <div>
          <h1>商品一覧</h1>
          <ul>
              {products.map((product) => (
                  <li key={product.id}>
                      {product.name} - ¥{product.price}
                  </li>
              ))}
          </ul>
      </div>
  );
}

export default App;

ローカル開発環境での実行結果

ロリポップ（ファイルサーバー）へのアップロード

React アプリケーションをファイルサーバーにアップロードします。アップロード先は、watermargin.net ドメイン > portofolio > react フォルダになります。ドメイン部分は、ご自身の契約ドメインに読み替えてください。

サンプルアプリケーション・SQL のダウンロード

今回開発したサンプルアプリケーションと SQL はこちらからダウンロードできます。参考にしていただければと思います！

CREATE TABLE products.sql ダウンロード

INSERT INTO products.sql ダウンロード

product-api(php)ダウンロード

product-app(react)ダウンロード

再掲：ロリポップの MySQL + PHP + React 実働デモ