0
0

More than 1 year has passed since last update.

express.js ( node.js ) – 公式チュートリアルが分かりづらいのが自力で進める

Posted at

問題

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}

image

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;
image

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オープンチャットもご利用ください。

Twitter

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0