SQLの内部結合の結果をexpressを使ってブラウザに表示してみた
今回は内部結合について紹介したいと思います。
そもそも内部結合とは、2つのテーブルを結合してデータを取得する手法のうち、指定したテーブルのカラムの値が一致するデータだけを取得する方法です。
内部結合をした結果を実際にブラウザに表示するところまでを今回のゴールにします。
使用するツールとしては
- express
- mysql
- pug
になります。
手順としては
- mysqlの設定
- expressの環境を構築
- 実際にブラウザに表示
まず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の説明は割愛させていただきます。 詳細を知りたい方はこちらの記事を参考にしてください。
注目をする箇所はsql文の箇所になります。
let sql = 'select * from user INNER JOIN belong ON user.belong_id = belong.id';
こちらが内部結合をしている部分です。
- userテーブルから全件データを取得
- 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}
このように表示されれば完成です。
今回は内部結合の紹介だけでしたが、今度は外部結合についても紹介できればと思います。