SQLの内部結合の結果をexpressを使ってブラウザに表示してみた

今回は内部結合について紹介したいと思います。

そもそも内部結合とは、2つのテーブルを結合してデータを取得する手法のうち、指定したテーブルのカラムの値が一致するデータだけを取得する方法です。

内部結合をした結果を実際にブラウザに表示するところまでを今回のゴールにします。

使用するツールとしては

• express
• mysql
• pug

になります。

手順としては

1. mysqlの設定
2. expressの環境を構築
3. 実際にブラウザに表示

まずmysqlの設定をしていきます。

1 mysqlの設定

最初にデータベースを作成します。データベース名は名簿という意味でRosterにします。 テーブルはUserの情報が入っているuserテーブル、そのユーザーの職種情報が書かれたgroupテーブルにしました。

早速ですが、テーブルにデータを追加しようとしたときに泥沼にハマってしまいました。 userテーブルにはすんなりとデータを入れることができたのですが、groupテーブルにはデータをうまくいれることができませんでした。下記のようなエラーが表示されます。

ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'group' at line 1

結論を言うと、このgroupというのがMysqlの予約語でした。 いやーほんとデータベースに無知な自分にとっては全く気がつかない大きな落とし穴でした。良い経験になりました。

その後、テーブル名をbelongに変更しました。

userテーブルの構造

belongテーブルの構造

ダミーデータは予め用意しておきました。 見てわかる通り、シンプルな構造です。 これらのテーブルを使っていきます。

2 expressの環境を構築

はじめにプロジェクトフォルダを作成し、移動してください。

プロジェクトフォルダ直下でpackage.jsonを作成します。

npm init -y

その後必要なパッケージをインストールします。

npm i -D express pug mysql

プロジェクトフォルダ直下にindex.jsファイルを作成します。

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

const connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'ユーザー名',
  database : 'Roster'
});

//viewファイルとしてpugを設定
app.set('view engine', 'pug');

//viewsフォルダの中のファイルを参照するようにする
app.use(express.static('views'));

const recordLog = function (req, res, next) {
  console.log('localhost:3000にアクセスしました');
  next();
};

app.use(recordLog);

app.get('/', function (req, res) {
  let sql = 'select * from user INNER JOIN belong ON user.belong_id = belong.id';
  connection.query(sql, (err, rows, fields) => {
    console.log(rows, "rows")
    if (err) throw err;
      res.render('index', { title: '内部結合の練習', PesoralDatas: rows});
  });
});

app.listen(3000);

expressの説明は割愛させていただきます。 詳細を知りたい方はこちらの記事を参考にしてください。

top-men.hatenablog.com

注目をする箇所はsql文の箇所になります。

let sql = 'select * from user INNER JOIN belong ON user.belong_id = belong.id';

こちらが内部結合をしている部分です。

1. userテーブルから全件データを取得
2. userテーブルのbelong_idがbelongテーブルのidと合致するものをbelongテーブルから取得して、1で取得したuserテーブルに結合

ということをしています。 出力結果はこのようになります。

userテーブルにあるbelong_idが5のレコードが表示されていません。 belongテーブルのidが5のレコードは存在しないからです。

3. 実際にブラウザに表示

これらのデータをブラウザに表示させるためにまずプロジェクトフォルダ直下にviewsフォルダを作成し、index.pugファイルを配置します。

html
  head
    title #{title}
    link(rel="stylesheet" href="css/style.css")
  body
    h1 #{title}
    each person in PesoralDatas
      .person
        .person_name 名前：#{person.name}
        .person_type 職種：#{person.type}
        .person_age 年齢：#{person.age}
        .person_email メールアドレス：#{person.email}

このように表示されれば完成です。

今回は内部結合の紹介だけでしたが、今度は外部結合についても紹介できればと思います。