express.js ( node.js ) – 公式チュートリアルが分かりづらいのが自力で進める
問題
Expressのチュートリアルは基礎的な説明が多く読みづらくてやってられない。
それよりも手軽に手を動かしながら動作させたい。
「分かりにくいものを噛み砕いて理解する。それがエンジニアの本分だ」
そう自分に言い聞かせながら。
環境
- express 4.16.1
- npm 9.6.7
- MacOS
準備
npm はインストール済みであることを前提とする
expressコマンドを使えるようにする
npm install express-generator -g
プロジェクト作成
以下コマンドで指定ディレクトリ ( express-locallibrary-tutorial ) にexpressプロジェクトが作られる
express express-locallibrary-tutorial --view=pug
cd express-locallibrary-tutorial
npm install
サーバー起動
DEBUG=express-locallibrary-tutorial:* npm start
Webアクセス
http://localhost:3000/ にアクセス
インデックス用のテンプレートファイルで文字を変えてみる
views/index.pug
extends layout
block content
h1= title
p Welcome!!!!!!!!!! to #{title}
index.js のメッセージを変えてみる
ファイル変更だけではページの表示は変わらなかった。
サーバー再起動で変更が反映された。
(サーバーが起動しているコンソールのタブで Ctrl + C を押すなどして停止してから再度 npm start させた )
routes/index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Expresssssss' }); // このメッセージを変える
});
module.exports = router;
DBを作る
公式チュートリアルはここから特に意味不明になってくる。
( https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose )
何をどのファイルに書いたら良いのかが全く見えてこない。
expressのコードとしてDB関係の記述をするのかそれともnode.js単体のファイルを書けということなのか。
MonboDBのインストール
expressのデフォルトDBは mongodb のようなのでそれをlocalにインストールする必要がある。
インストールだけでも一筋縄ではいかないかもしれないので環境によってはちょっと頑張る必要があるかもしれない。
何らかの方法でインストール・起動できるようにする。
Macの場合
mongodb本体のインストール
brew tap mongodb/brew
brew install mongodb-community
DBサーバー起動
brew services start mongodb-community
mongoose
インストール
こちらは DB本体ではなくDBを操作するためのライブラリのようだ
npm install mongoose
動作確認
mongooseの公式を参考にnodeスクリプトを書いてDB操作をしてみるとデータの保存に成功した
コマンド例
node example.js
ファイル例
// https://mongoosejs.com/docs/index.html
const mongoose = require('mongoose')
main().catch(err => console.log(err))
async function main() {
await mongoose.connect('mongodb://127.0.0.1:27017/test')
// スキーマの定義
const kittySchema = new mongoose.Schema({
name: String
})
// モデルにスキーマをコンパイルする (らしい)
const Kitten = mongoose.model('Kitten', kittySchema)
// DBに保存する
const fluffy = new Kitten({ name: 'fluffy' })
await fluffy.save()
console.log('SAVE')
// 特定の条件式でデータを取得する
// DBへの保存なのでこのスクリプトを起動するたびにデータが増える
// 表示例
// [
// {
// _id: new ObjectId("64e9f4bb6576f87bdc838c0e"),
// name: 'fluffy',
// __v: 0
// },
// {
// _id: new ObjectId("64e9f4c7e16502c2c740eb72"),
// name: 'fluffy',
// __v: 0
// }
// ]
const kittens = await Kitten.find({ name: /^fluff/ });
console.log(kittens)
// レコード個数を表示
const count = await Kitten.count()
console.log(count)
}
ページアクセスのタイミングでDB保存してみる
http://localhost:3000/ にアクセスするたびDB保存するようにしてみる
(変更したらサーバー再起動が必要)
routes/index.js
const mongoose = require('mongoose')
// https://mongoosejs.com/docs/index.html
mongoose.connect('mongodb://127.0.0.1:27017/test')
// スキーマの定義
const kittySchema = new mongoose.Schema({
name: String
})
const Kitten = mongoose.model('Kitten', kittySchema)
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
// DBに保存する
const fluffy = new Kitten({ name: 'fluffy' })
fluffy.save()
res.render('index', { title: `Expresssssss` });
});
module.exports = router;
こうすると確かにページアクセスのたびにDBにレコード保存ができているようだ。
先程の node スクリプトを実行すればDBのレコード数が分かる。
DBで得たデータを画面表示するには？
まだよく分かっていない。
findの結果をそのまま表示させようとしても無理だった。
今後も気が向いたらやってみる。
参考
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
公開日時
2023-08-26
Discussion