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

# 問題

Expressのチュートリアルは基礎的な説明が多く読みづらくてやってられない。
それよりも手軽に手を動かしながら動作させたい。

https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website

「分かりにくいものを噛み砕いて理解する。それがエンジニアの本分だ」
そう自分に言い聞かせながら。

# 環境

- 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](https://github.com/YumaInaura/YumaInaura/assets/13635059/e95a0779-06c5-4a39-b14a-40f42734a3e7)

# index.js のメッセージを変えてみる

ファイル変更だけではページの表示は変わらなかった。
サーバー再起動で変更が反映された。

(サーバーが起動しているコンソールのタブで Ctrl + C を押すなどして停止してから再度 `npm start` させた )

`routes/index.js`

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

<img width="513" alt="image" src="https://github.com/YumaInaura/YumaInaura/assets/13635059/532bf6b5-0959-4e55-b546-6d3fbae528ba">


# DBを作る


公式チュートリアルはここから特に意味不明になってくる。
( https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose )

何をどのファイルに書いたら良いのかが全く見えてこない。
expressのコードとしてDB関係の記述をするのかそれともnode.js単体のファイルを書けということなのか。

## MonboDBのインストール

expressのデフォルトDBは mongodb のようなのでそれをlocalにインストールする必要がある。

https://www.npmjs.com/package/mongodb

インストールだけでも一筋縄ではいかないかもしれないので環境によってはちょっと頑張る必要があるかもしれない。
何らかの方法でインストール・起動できるようにする。

Macの場合

mongodb本体のインストール

```
brew tap mongodb/brew
brew install mongodb-community
```


DBサーバー起動

```
brew services start mongodb-community
```

# mongoose 

## インストール

こちらは DB本体ではなくDBを操作するためのライブラリのようだ

https://mongoosejs.com/

`npm install mongoose`

## 動作確認

mongooseの公式を参考にnodeスクリプトを書いてDB操作をしてみるとデータの保存に成功した

https://mongoosejs.com/docs/index.html

コマンド例

`node example.js`

ファイル例

```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`

```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の結果をそのまま表示させようとしても無理だった。
今後も気が向いたらやってみる。

# 参考

https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website



# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura