MENU
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ

カテゴリー

  • 趣味
  • WordPress
  • 本棚
  • プログラミング
  • 日記
  • WEBデザイン
  • フリーランス

タグ

Adobe Illustrator Gatsby.js HTML/CSS MySQL Node.js Python SWELL WordPressプラグイン おすすめツール エックスサーバー セキュリティ バレットジャーナル 確定申告 開発環境

アーカイブ

  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年8月
  • 2020年10月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年8月
  • 2019年5月
  • 2019年2月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2017年10月
プログラミングとデザインでものづくりを楽しむブログ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
  1. ホーム
  2. プログラミング
  3. Node.js+ExpressでMySQLに接続して一覧表示する

Node.js+ExpressでMySQLに接続して一覧表示する

2022 3/26
プログラミング
2020-04-25 2022-03-26


Node.jsとMySQLを接続して、データベースを動かす方法を説明します。

この記事でわかること
  • MacでのMySQLの導入方法
  • Node.js(Express)からMySQLデータベースに接続するプログラム
  • データベースから情報を取得して、表示するプログラム
前提
  • Macでの操作になります
  • Node.jsはインストール済み
目次
スポンサーリンク

Node.js用のプロジェクトを作成する

PC上に新しいフォルダを作成し、フォルダの中で、下記コマンドを順に実行します。

npm init

設定はデフォルトのままで、entry point : (index.js)のところは、「app.js」としました。
app.jsは初期ファイル名です

Expressのインストール

npm install express --save

EJSのインストール
ejsを導入することで、HTMLにJavaScriptを埋め込めるようになります。

npm install ejs

MySQLのインストール

npm install mySQL

MySQLデーターベースの作成

(MySQLをインストールしていない場合)MySQLをインストールします。

brew install mysql

MySQLサーバーを立ち上げます。

-- MySQLサーバースタート
mysql.server start

コンソールがmysql>となり、MySQLを操作できるようになります。

MySQLへログインします。

-- MySQLへログイン
mysql -uroot -p

ポート番号を確認します。

-- ポート番号の確認
show variables like 'port';
+---------------+-------+
| Variable_name | Value |
+---------------+-------+
| port          | 3306  |
+---------------+-------+

ここで出てきた、3306はあとでプログラムを書く時に、ポート番号として使います。

まずはプログラムで使う、データベースとテーブルを作成します。
テスト用のデータベース作成します。

-- データベースtest作成
create database test;

testにテーブルitemsを作成します。

-- テーブル作成
use test;
CREATE TABLE items(
     id INT(11) AUTO_INCREMENT NOT NULL,
     name VARCHAR(30) NOT NULL ,
     PRIMARY KEY (id));

作成したテーブル情報を確認します。

DESC items;
+-------+-------------+------+-----+---------+----------------+
| Field | Type        | Null | Key | Default | Extra          |
+-------+-------------+------+-----+---------+----------------+
| id    | int         | NO   | PRI | NULL    | auto_increment |
| name  | varchar(30) | NO   |     | NULL    |                |
+-------+-------------+------+-----+---------+----------------+

テーブルにデータを投入します。

これで、こんなテーブル(items)ができています。

-- データ投入
INSERT items(name) VALUES ('じゃがいも');
INSERT items(name) VALUES ('にんじん');
INSERT items(name) VALUES ('たまねぎ');

ユーザーを作り、ユーザー権限を付与します。

-- ユーザー作成、権限付与
create user 'root'@'localhost' identified with mysql_native_password by 'password';
GRANT ALL ON test.* TO 'root'@'localhost';

root →ユーザー名
password →パスワード
test → データベース名
をいれてください。

MySQL8.0の場合、Node.jsのmysqlが新しいパスワードの認証形式に対応していないため、ユーザーの設定ができていないと実行エラーがでてしまいます。

Node.jsでMySQLへ接続するプログラム

const express = require('express');
const mysql = require('mysql');
const app = express();

app.use(express.static('public'));

// データベース接続情報
const connection = mysql.createConnection({
  host: 'localhost',
  port: 3306,
  user: 'root',
  password: 'password',
  database: 'test'
});

// データベースに接続できたらコンソールにConnectedを表示
connection.connect(function(err) {
  if (err) throw err;
  console.log('Connected');
});

app.listen(3000);

データベース接続情報は各自の環境に変更ください

  • port:先ほどMySQLで確認したポート番号3306を設定
  • userアカウント名
  • password:パスワード
  • database:データベース名

MySQLに接続できているか、プログラムを実行して確認

ターミナルでプログラムを実行します。

うまくいっているとターミナル上に「Connected」と表示されています。

$node app.js

確認できたら、Ctrl + cで終了。

データベースの情報を取得して表示するNode.jsプログラム

続いて、テーブルからデータをSELECTして画面に表示するプログラム

projectフォルダ構造はこのようになっています。

const express = require('express');
const mysql = require('mysql');
const app = express();

// データベース接続情報
const connection = mysql.createConnection({
  host: 'localhost',
  port: 3306,
  user: 'root',
  password: 'root',
  database: 'list_app'
});

// テーブルitemsのデータを取得してindex.ejsで表示
app.get('/', (req, res) => {
  connection.query(
    'SELECT * FROM items',
    (error, results) => {
      res.render('index.ejs',{items:results});
    }
  );
});

app.listen(3000);
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SAMPLE</title>
  </head>
  <body>
      <ul>
        <% items.forEach((item) => { %>
          <li>
            <div>
              <span><%= item.id %></span>
              <span><%= item.name %></span>
            </div>
          </li>
        <% }) %>
      </ul>
  </body>
</html>

Node.jsプログラムの実行結果

ターミナルでプログラムを実行します。

$node app.js

localhost:3000にアクセスするとデータベースの内容がリストで表示されています。(いろいろ操作してたら、とまととだいこんの行が増えてました😅)

最後に、MySQLを終了するときは「exit」で。

 exit
プログラミング
MySQL Node.js
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • 【はじめてのNode.js】環境構築からプログラムを動かす手順をていねいに解説!
  • 【Python】Livedoorブログの画像を一括ダウンロードするプログラム

関連記事

  • GatsbyJSサイトをv3へアップデート
    2021-08-23
  • 【Mac】Node開発環境のアップデート
    2021-08-06
  • 【Mac】SourcetreeからGitHubへSSH接続する
    2021-08-05
  • Flexboxで作るヘッダーのサンプル集
    2020-07-30
  • CSSとJavaScriptで作るハンバーガーメニュー
    2020-07-25
  • Netlify経由で、Gatsby.jsブログを独自ドメインに公開する手順
    2020-07-10
  • Gatsby.jsでブログを作るための手順
    2020-07-04
  • ラジオボタン・チェックボタンの代わりに画像選択にする方法
    2020-06-13
Zero Forest
カテゴリー
  • WordPress (30)
  • プログラミング (17)
  • WEBデザイン (6)
  • フリーランス (7)
  • ライフログ (10)
    • 趣味 (2)
    • 本棚 (3)
    • 日記 (5)
タグ
Adobe Illustrator (2) Gatsby.js (3) HTML/CSS (7) MySQL (1) Node.js (2) Python (2) SWELL (1) WordPressプラグイン (10) おすすめツール (3) エックスサーバー (4) セキュリティ (3) バレットジャーナル (2) 確定申告 (1) 開発環境 (3)
  • サイトマップ
  • サイトポリシー

© Zero*forest

目次
閉じる