【ITニュース解説】How to Connect React with MySQL (Step by Step Guide)

現代のウェブアプリケーション開発において、ユーザーインターフェース（UI）を構築する技術としてReactは非常に広く使われているが、Reactはブラウザ上で動作するフロントエンドのライブラリであり、データベースと直接通信する機能は持たない。ウェブアプリケーションがユーザーデータなどを保存したり取得したりするには、MySQLのようなデータベースが必要だが、Reactが直接MySQLにアクセスすることはできないため、その間に「バックエンドサーバー」を挟む必要がある。このバックエンドサーバーがReactからのリクエストを受け取り、MySQLデータベースとの間でデータのやり取りを行う橋渡し役となる。この記事では、Node.jsとExpressという技術をバックエンドとして使い、ReactアプリケーションがMySQLデータベースとどのように連携するのかを具体的な手順に沿って解説する。

まず、アプリケーションが利用するデータを保存するためのMySQLデータベースを準備する。データベースは「myapp」という名前で新しく作成し、その中に「users」というテーブルを設ける。このテーブルは、ユーザーの情報を管理するためのもので、「id」、「name」、「email」の三つの列を持つ。「id」はユーザーを一意に識別するための数値で、自動的に採番され、このテーブルの主キーとなる。「name」と「email」はそれぞれ文字列型で、ユーザーの名前とメールアドレスを格納する。これらの設定を行うことで、アプリケーションからユーザーデータを効率的に保存、検索、更新できるようになる。データベースとテーブルの準備は、ウェブアプリケーションのデータ管理層を構築する上で最も基本的なステップだ。

次に、ReactとMySQLの間でデータのやり取りを仲介するバックエンドサーバーをNode.jsとExpressを使って構築する。 backendという新しいディレクトリを作成し、その中でNode.jsプロジェクトを初期化した後、ウェブサーバー機能を提供するexpress、MySQLデータベースへの接続を可能にするmysql、異なるオリジンからのリクエストを許可するためのcorsという三つのライブラリをインストールする。

index.jsというファイルを作成し、サーバーのロジックを記述する。 最初に、必要なモジュールを読み込み、Expressアプリケーションを初期化する。cors()ミドルウェアを適用することで、Reactアプリケーションが動作する異なるポート（通常は3000番）からのリクエストを、バックエンドが動作するポート（ここでは5000番）で受け入れられるようにする。また、express.json()ミドルウェアを使うことで、Reactから送られてくるJSON形式のデータをサーバー側で簡単に扱えるように設定する。

続いて、MySQLデータベースへの接続情報を設定する。hostはデータベースサーバーのアドレス（自身のPCを指すlocalhost）、userとpasswordはデータベースへのログイン情報、databaseは先ほど作成した「myapp」データベースを指定する。この接続設定を使ってデータベースへの接続を試み、接続が成功したか失敗したかをコンソールに表示する。

その後、Reactアプリケーションからのリクエストに応答するためのAPIエンドポイントを定義する。 一つ目は、すべてのユーザー情報を取得するためのGET /usersエンドポイントだ。このエンドポイントにリクエストが来ると、バックエンドはデータベースに対して「users」テーブルのすべてのデータを取得するSQLクエリを実行し、その結果をJSON形式でReactアプリケーションに返す。 二つ目は、新しいユーザーをデータベースに挿入するためのPOST /usersエンドポイントだ。Reactアプリケーションから送られてくるユーザーの名前とメールアドレスをリクエストボディから抽出し、それらの情報を使って「users」テーブルに新しいレコードを追加するSQLクエリを実行する。ユーザーが正常に追加されたことを示すメッセージをJSON形式で返す。

最後に、Expressサーバーをポート5000番で起動し、リクエストの待ち受けを開始する。これにより、バックエンドサーバーはReactアプリケーションからのデータリクエストを受け付ける準備が整う。このバックエンドプログラムはnode index.jsコマンドで実行できる。

最後に、ユーザーインターフェースを提供するReactアプリケーションから、先ほど構築したバックエンドサーバーを通じてMySQLデータベースと連携する部分を作成する。 まず、frontendというディレクトリで新しいReactアプリケーションを作成し、axiosというHTTPクライアントライブラリをインストールする。axiosを使うことで、ブラウザから簡単にバックエンドAPIへのリクエストを送信できるようになる。

App.jsファイルを開き、Reactの主要な機能であるuseStateとuseEffectフック、そしてaxiosをインポートする。 useStateフックを使って、アプリケーションのデータを管理するための「ステート」変数を定義する。usersはデータベースから取得したユーザーのリストを保持し、nameとemailはユーザーが入力フォームに入力する値を一時的に保持する。 useEffectフックは、コンポーネントが初めて画面に表示されたとき（マウント時）に一度だけ実行される処理を定義するために使う。ここでは、バックエンドのhttp://localhost:5000/usersエンドポイントにGETリクエストを送信し、すべてのユーザーデータを取得する。取得したデータはsetUsers関数を使ってusersステートに保存され、画面に表示される準備が整う。

ユーザーが新しいユーザーを追加する際の処理を担うaddUser関数を定義する。この関数は、入力フォームに現在入力されているnameとemailの値を、バックエンドのhttp://localhost:5000/usersエンドポイントへPOSTリクエストとして送信する。バックエンドからの応答を受け取ると、成功メッセージをアラートで表示し、さらに新しいユーザー情報をusersステートのリストに追加することで、画面上のユーザーリストもリアルタイムで更新される。

ReactのJSX記法を使って、ユーザーインターフェースを構築する。画面には「React + MySQL Example」という見出しが表示され、新しいユーザーの名前とメールアドレスを入力するための二つのテキスト入力フィールドと、「Add User」ボタンが配置される。ユーザーが入力フィールドに値を入力すると、onChangeイベントハンドラによって対応するステート変数（nameまたはemail）が更新される。また、「Add User」ボタンがクリックされると、onClickイベントハンドラによってaddUser関数が呼び出される。 ul要素の中では、usersステートに保存されているユーザーリストをmap関数を使って繰り返し処理し、各ユーザーの名前とメールアドレスをli要素として表示する。これにより、データベースに登録されているユーザー情報がリアルタイムで画面に反映される。

以上の手順により、ReactアプリケーションがバックエンドのNode.js/Expressサーバーを介してMySQLデータベースと連携するシステムが構築される。このシステムでは、Reactがユーザーインターフェースを担当するフロントエンド、Node.js/Expressがデータ処理とデータベースとの通信を担当するバックエンド、MySQLがデータの永続化を担当するデータベースとして機能する。この構成は、現代の多くのウェブアプリケーションで採用されている一般的なアーキテクチャであり、認証機能の追加や複雑なデータクエリの実行など、さらに高度な機能へと発展させていくことが可能だ。Node.jsの代わりにPHPやPythonなど、他の技術をバックエンドに利用することも原理は同じで、フロントエンドがバックエンドに、バックエンドがデータベースに話しかけるという基本のフローは変わらない。