Node.js超入門の7章をコーディングするときの順番とデバッグ

# はじめに
　Node.js超入門（掌田津耶乃　著）を読み勉強中です。7章後半でMarkdown管理ツールを作りますが、本の順番でコーディングすると、アプリケーション作成➠モデル作成➠ルーティング処理（javaScript)➠テンプレート作成（ejs)となっています。7章前半の掲示板ではその通りにしたのですが、ルーティング処理全部書いてからテンプレート作成をまとめてすると、関係性を忘れてしまうし、デバッグの量が多量だと途中でくじけそうでした。
　本では最終章でもあり、ページ数を減らすためにルーティングをまとめて書く、テンプレートをまとめて書くとなったのだと思いますが、初心者には厳しい！！。「小さい部分を作る。動くか確かめる。」を基本とすれば、間違えたとしても少ない量になるので「動く」までにかかる時間が減ります。この方針でするには、Markdown管理ツールをどのように分けて、どの順番に書いていくといいかを記事にします。

。
掲示板の時に気づいたことの記事はこちら
[掲示板のページャー最終ページ処理（Node.jsのpromise.allがわかった）](https://qiita.com/drafts/ba06cf90bde91291b6f8/edit)
### コード

# 環境
    windows10
    node      16.13.1
    express   4.16.1
    ejs       2.6.1
    sqlite3   5.0.2
    sequelize　6.14.0
    sequelize-cli 6.4.1
    bootstrap　4.3.1（CDNです）
    markdown-it 12.3.2

# ディレクトリ構成
Node.js超入門ではUserページでログイン、ユーザーの追加、訂正、削除などの機能もありますが、今回の内容には関係ないのでログインだけ残しました。Board関連もなくても動くので書いてないです。
root/　(本ではEX-GEN-APP)
　├ .vscode
　├ bin
　├ config
　├ migrations
　├ models
　│　└ index.js
　│　└ markdata.js
　│　└ user.js　
　├ node_modules
　├ public
　├ routes
　│　└ marks.js
　│　└ users.js
　├ seeders
　├ views
　│　├ md
　│　│ 　└ add.ejs
　│　│　 └ index.ejs
　│　│　 └ mark.ejs
　│　└ users
　│　　　└ index.ejs
　│　　　└ login.ejs
　└ app.js
　└ db-dev.sqlite3
　└ package.lock.json
　└ package.json


# 環境構築から準備

「掲示板のページャー・・・」でも書きましたが、再度書いておきます。
「Node.js超入門」には詳しく載ってます。 項目だけ上げると、  

+ インストール（Node.js、EJS、Express、Express Generator、SQLite３、Sequelize ） 
+ Express Generatorでアプリケーション作成
+ データベース作成

こうやって書きだすと、結構めんどくさいですね・・・  
本はwindowsがメインですが,macのやり方も載ってます。  
データベースはSQLite3がメインですが、SequelizeのところではMySQL、PostgressSQLのことも載ってます。  
Web検索すると、[Node.js + Express + Sequelize で Web アプリ作成手順](https://kita127.hatenablog.com/entry/2021/07/18/173700)　が一通り参考になりそう。

# 順番
### やっと本題、
#### ⓵　p310　Userモデル作成
#### ⓶　p359　models\user.js修正
#### ⓷　P403 Markdataモデル作成
#### ⓸　P404 models\markdata.jsを修正
#### ➄　P406 Userモデル修正
#### ⓺　P406 マイグレーション実行

マイグレーション実行までは本の通り（軽く上記で触れた）。
#### ⓻ Markdataに３－４ヶレコード入力しておく。DB Browserでするのが簡単。
データ例

| id | userId | title | content |
|:-:|:-:|:--|:--|
| 1  | 9  | Node.js超入門  | # Node.js初心者向け  |
| 2  | 9  | 入門Node.jsプログラミング  | # JavaScriptの機能と使い所の極意を否が応でも学ぶことになります。  |
| 3  | 9  | JavaScriptエンジニアのためのNode.js入門  | # JavaScriptエンジニアがNode.jsを最初に勉強する際使用すると良いです。  |
| 4  | 2  | 実践Node.jsプログラミング  | # JavaScriptの経験があり、Node.jsの概要が何となくわかる人向け  |

DB Browserの画面
![DB Browser2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573391/15870f12-5340-727d-bac3-07d9c7351dd5.png)


### 基本的に、テンプレートかく➠ルーティング処理

#### ⓼　「トップページへのアクセス」を作る　

+ P414　views\md\index.ejs　をコーディング
+ p407最初からp408の5行目まで routes\marks.js の「トップページへのアクセス」をコード
+ p410 app.jsに登録
+ コンソールでnpm start
+ login
+ http://localhost:3000/mdに遷移

＊まだ「検索」はできません。

![スクリーンショット 2022-02-16 230457.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573391/3c4639f6-2bd2-07cb-6c8b-e2cd33275e78.png)



#### ⓽　「検索フォームの送信処理」部分を作る

+ p408 routes\marks.js の7から29行目以降をコード
+ http://localhost:3000/mdに遷移まで上記と同じ
+ input欄に入力して「検索」クリック(この例では「java」で検索するとデータが3行→2行になった）
![スクリーンショット 2022-02-16 230410.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573391/552769d7-82e5-afd5-6adc-1fe60980b63f.png)

#### ⓾　「新規作成ページの表示」
⓼と同様に、md/add.ejsの作成、p408「新規作成ページの表示」
後は⓼から⓾同様にroutes\marks.jsをルーティングごとに作っては試していく。

# 詰まったところ
ページ、行は本のものです。（本を見ながらしかよくわからない初心が対象のため）コードだけ見てる方ごめんなさい。
p410 19行目marks.js

|エラー |  TypeError: Router.use() requires a middleware function but got a Object | 
|:-:|:-:|:--|:--|
|原因|requestとresponseが良くわかっていないため、reqとresの順番が逆|

p408 32行目 marks.js
  
|エラー | Cannot read properties of undefined (reading 'login')  | 
|:-:|:-:|
|原因|他のページからコピペして、「module.exports = router;」一番下につけ忘れた。|  

p409　「//指定IDのMarkdata表示」

| エラー | 404    NotFoundError: Not Found    at D:\NodeExpress\ex-gen-app\app.js:40:8  | 
|:-:|:-:|
|原因|mark.ejsファイルを作ってなかった。|         
                    

# 変更したところ
p409 45行目46行目 
コードの短縮のため1行にしました。見た目少し違います。

```js:marks.js
本　　　 var d1 = new Date(model.updatedAt);
    　　 var dstr1 =d2.getFullYear() +・・・+d2.getDate();
                     👇
変更後   let dstr1 =new Date(model.createdAt).toLocaleDateString();
```

p410 4行目
テンプレートリテラルをつかいました。
参考　JavaScript の テンプレートリテラル を極める！
https://qiita.com/kura07/items/c9fa858870ad56dfec12

```routes\marks.js
本  　　footer ='(created: '+ dstr1 +',updated: ' + dstr2 +')';
変更後  footer =`(created: ${dstr1} ,updated: ${dstr2})`;
```

# 終わりに
初心者向け（自分も初心者）に詳しく書いてみました。順番の省略部分はリクエストがあればやります。