Node.jsでAPIサーバー等のバックエンドの機能を実装する際にMySQLを使いた場合があると思います。今回はNode.jsのmysqlパッケージを用いてNode.jsからMySQLに接続しデータベースとのやり取りをする方法について解説します。記事後半ではExpress.jsを用いてクライアントからのリクエストに対してMySQLのデータをレスポンスで渡すシンプルな機能をハンズオンで実装していきます。
Node.jsでMySQLを扱う方法
Node.js環境でMySQLに接続するためにはドライバーをnpmでインストールして使用します。npmではmysqlというドライバーが用意されているのでこちらを使いましょう。このドライバーを経由することでNode.jsでプログラムによりMySQLのデータのCRUD処理を行うことができます。使用するデータベースはあらかじめMySQLで用意しておく必要があります。
ドライバの具体的な使い方は事項で説明していきます。
mysql(npmパッケージ)でMySQLを扱う基本
はじめに先ほどからmysqlと全て小文字で表されるものはNode.jsのパッケージのMySQLのドライバのmysqlをさし、MySQLという大文字と小文字の混じった表記はデータベースを管理する元のMySQLを指しています。
まずはmysqlをnpmでインストールして使えるようにしましょう。さらっといきます。
タイトル:ターミナル
$ npm init
npmを使える用意してpackage.jsonを作成します。
タイトル:ターミナル
$ npm install mysql
npmでmysqlをインストールしましょう。
インストールができたら、MySQLを操作するためのjsファイルを用意してそこで以下を記述していきます。
タイトル:main.js
const mysql = require('mysql'); const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'password', database: 'sample_db' }); connection.connect(); connection.query('SELECT * FROM database', function (error, results, fields) { if (error) throw error; console.log(results[0]); }); connection.end();
まず、mysqlのモジュールをインポートします。
タイトル:main.js
const mysql = require('mysql');
続いてcreateConectionメソッドで使用するMySQLのデータベースとの接続のためのオプションを指定し、connectionを作成します。あらかじめMySQLでデータベースを作成しておく必要があります。
タイトル:main.js
const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'password', database: 'sample_db' });
host, user, password, databaseには作成したデータベースの設定値を入力しておきます。設定値についてさらに詳しく知りたい方はmysqlのドキュメントを参考にしてみましょう。
connectionができたら、クエリを叩いてデータベースからデータを引き出してみましょう。
タイトル:main.js
connection.query('SELECT * FROM database', function (error, results, fields) { if (error) throw error; console.log(results[0]); });
connectionクラスのqueryメソッドを使ってクエリを叩きます。queryメソッドでは第一引数にクエリを文字列で指定します。さらに第二引数にはコールバック関数を指定して、クエリの処理の結果を用いた処理を記述することができます。コールバック関数ではerror, results, fieldsを用いることができ、errorには、クエリ実行時のエラーが、resultsではクエリ実行後の結果が、fileldsでは叩いたクエリの結果のフィールドの情報が入っています。例ではコールバック関数でエラーがあったらこれをthrowし、エラーがなければ結果の最も最初の行についてconsoleに出力しています。
最後にendメソッドでconnectionによるMySQLとの接続を切りましょう。
タイトル:main.js
connection.end();
これを記述しないと、MySQLに接続が溜まっていき、メモリ不足のエラーなどにつながる可能性が高くなります。
基本的なmysqlの使い方は以上です。mysqlでは基本的な使い方の他に、変数をクエリで使用することや、connectionをプールしてデータのやり取りをより高速にすることなどできますが、これらについてはまた別の記事で紹介します。
Express.jsを使った実例(ハンズオン)
実例としてExpress.jsを使ってクライアントサイドからのリクエストに対してMySQLのデータをレスポンスする機能を作ってみましょう。下のようなイメージです。
Express.jsの基本的な使い方に関して説明はしませんが、ExpressはNode.jsでWebサーバーを構築するためのシンプルなフレームワークで、今回はサーバーの立ち上げとリクエスト、レスポンスの処理を行う部分のみに使用します。Expressの詳しい使い方に関しては「Express.jsをインストールしてローカルサーバーの立ち上げをしてみる」で紹介していますので参考にしてみてもいいかもしれません。
実装の手順をざっくり分けると以下のようになります。
- Expressとmysqlのインストール
- MySQLでデータベースとテーブル作成
- mysqlでデータの取得部分を実装
- Expressで画面とリクエスト・レスポンス処理の実装
では早速始めていきましょう！今回使用したコードはcode-databaseのgithubリポジトリにもあげているので、手元で確認したい方は是非参考にしてみてください。
Expressとmysqlのインストール
まずは作業用のディレクトリ(express_mysql_sample)を作成して必要なパッケージをnpmでインストールしていきます。
タイトル:ターミナル
$ mkdir express_mysql_sample $ cd express_mysql_sample $ npm init $ npm install express mysql
MySQLでデータベースとテーブル作成
続いてMySQLで使用するデータベースとテーブルを作成しておきましょう。
まず、MySQLにログインします。
タイトル:ターミナル
$ mysql -u root -p
rootユーザーでログインして作成します。
次にデータベースを作成しましょう。
タイトル:MySQLモニター
mysql> create database express_mysql_sample;
express_mysql_sampleという名前のデータベースを作成しました。
さらにテーブルを作成して適当なデータを入れておきます。
タイトル:MySQLモニター
mysql> use express_mysql_sample;
Database changed
mysql> create table messages(id int not null primary key auto_increment, message text not null);
Query OK, 0 rows affected (0.03 sec)
mysql> show columns from messages;
+---------+------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+---------+------+------+-----+---------+----------------+
| id | int | NO | PRI | NULL | auto_increment |
| message | text | NO | | NULL | |
+---------+------+------+-----+---------+----------------+
2 rows in set (0.00 sec)
mysql> insert into messages(message) values('こんにちは、ようこそMySQLへ');
Query OK, 1 row affected (0.00 sec)
mysql> select * from messages;
+----+----------------------------------------+
| id | message |
+----+----------------------------------------+
| 1 | こんにちは、ようこそMySQLへ |
+----+----------------------------------------+
1 row in set (0.00 sec)messagesというテーブルを作成して、データを一つ入れました。このデータを後に呼び出すことになります。
mysqlでデータの取得部分を実装
次にバックエンドの処理を記述するserver.jsを作成して、mysqlでデータベースにアクセスしてデータを取得する処理をserver.jsに記述しましょう。
タイトル:server.js
const mysql = require('mysql'); const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '***********', //この部分は秘密です database: 'express_mysql_sample' }); connection.connect(); connection.query('SELECT * FROM messages', function (error, results, fields) { if (error) throw error; console.log(results[0]); connection.end(); });
この状態で実行してみましょう。
タイトル:ターミナル
$ node server.js
こんな結果が出力されていれば問題ないです。
Expressで画面とリクエスト・レスポンス処理の実装
最後にExpressでサーバーを立ち上げてリクエストに対して先ほどの出力結果をレスポンスする処理を記述していきましょう。
タイトル:server.js
const express = require('express'); //追記 const app = express(); //追記 const mysql = require('mysql'); app.get('/', (req, res) => res.sendFile(__dirname + '/index.html')); //追記 //一部追記 app.get('/api/hello', (req, res) => { const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '*********', //この部分は秘密です database: 'express_mysql_sample' }); connection.connect(); connection.query('SELECT * FROM messages', function (error, results, fields) { if (error) throw error; console.log(results[0]); res.send(results[0].message); //追記 connection.end(); }); }); //追記 app.listen(3000, function () { console.log('Example app listening on port 3000!'); });
まずはexpressをインポートして、アプリケーション(app)を作成します。
タイトル:server.js
const express = require('express'); const app = express();
そしたら、rootディレクトリでindex.htmlをサーブしましょう。
タイトル:server.js
app.get('/', (req, res) => res.sendFile(__dirname + '/index.html'));
__dirnameはserver.jsファイルがあるディレクトリをさします。index.htmlは次のような記述になります。
タイトル:index.html
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>express_mysql_sample</title> </head> <body> <button id="submit_btn">こんにちは</button> </body> </html> <script> document.getElementById('submit_btn').addEventListener('click', function(){ xhr = new XMLHttpRequest(); xhr.open('GET', '/api/hello'); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { alert(xhr.response); } else { alert('データが正常に送れませんでした'); } } } xhr.send(); }); </script>
buttonを設置し、
タイトル:index.html
<button id="submit_btn">こんにちは</button>
scriptタグ内でbuttonのクリックイベントに対して/api/helloリクエストを送る記述をしています。
タイトル:index.html(scriptタグ内)
document.getElementById('submit_btn').addEventListener('click', function(){ xhr = new XMLHttpRequest(); xhr.open('GET', '/api/hello'); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { alert(xhr.response); } else { alert('データが正常に送れませんでした'); } } } xhr.send(); });
リクエストはXMLHttpRequestで送ります。レスポンスが無事に返ってきたら、alertでその内容を表示させるようにしましょう。
再びserver.jsに戻り、app.getメソッドで/api/helloリクエストに対して先ほどの出力をレスポンスする処理を記述します。
タイトル:server.js
app.get('/api/hello', (req, res) => { const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '*********', database: 'express_mysql_sample' }); connection.connect(); connection.query('SELECT * FROM messages', function (error, results, fields) { if (error) throw error; console.log(results[0]); res.send(results[0].message); connection.end(); }); });
クエリの結果のうち、messageの部分だけ返すことにします。
タイトル:server.js
res.send(results[0].message);
最後にポート3000番でローカルサーバーを立ち上げましょう。
タイトル:server.js
app.listen(3000, function () { console.log('Example app listening on port 3000!'); });
これで完成です！最後に動作確認をしてみましょう。
ローカルサーバーを立ち上げます。
タイトル:ターミナル
$ node server.js
http://localhost:3000/にアクセスして以下のような機能が実装できていれば確認成功です。
この記事のまとめ
本記事ではNode.jsでMySQLに接続する方法紹介しました。また、Expressを使ってフロントからのリクエストに対してMySQLのデータを返す例についても紹介しました。最後に本記事の要点についてまとめておきます。
- Node.jsではmysqlというパッケージを用いてMySQLと接続ができる
- mysqlではMySQLのクエリを実際に叩くことができる
皆さんもmysqlを使ってNode.jsで開発してみましょう！