はじめに
Node.js超入門（掌田津耶乃 著）を読み勉強中です。7章後半でMarkdown管理ツールを作りますが、本の順番でコーディングすると、アプリケーション作成➠モデル作成➠ルーティング処理（javaScript)➠テンプレート作成（ejs)となっています。7章前半の掲示板ではその通りにしたのですが、ルーティング処理全部書いてからテンプレート作成をまとめてすると、関係性を忘れてしまうし、デバッグの量が多量だと途中でくじけそうでした。
本では最終章でもあり、ページ数を減らすためにルーティングをまとめて書く、テンプレートをまとめて書くとなったのだと思いますが、初心者には厳しい！！。「小さい部分を作る。動くか確かめる。」を基本とすれば、間違えたとしても少ない量になるので「動く」までにかかる時間が減ります。この方針でするには、Markdown管理ツールをどのように分けて、どの順番に書いていくといいかを記事にします。
。
掲示板の時に気づいたことの記事はこちら
掲示板のページャー最終ページ処理（Node.jsのpromise.allがわかった）
コード
環境
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 アプリ作成手順 が一通り参考になりそう。
順番
やっと本題、
⓵ 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の画面
基本的に、テンプレートかく➠ルーティング処理
⓼ 「トップページへのアクセス」を作る
- P414 views\md\index.ejs をコーディング
- p407最初からp408の5行目まで routes\marks.js の「トップページへのアクセス」をコード
- p410 app.jsに登録
- コンソールでnpm start
- login
- http://localhost:3000/mdに遷移
＊まだ「検索」はできません。
⓽ 「検索フォームの送信処理」部分を作る
- p408 routes\marks.js の7から29行目以降をコード
- http://localhost:3000/mdに遷移まで上記と同じ
- input欄に入力して「検索」クリック(この例では「java」で検索するとデータが3行→2行になった）
⓾ 「新規作成ページの表示」
⓼と同様に、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行にしました。見た目少し違います。
本 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
本 footer ='(created: '+ dstr1 +',updated: ' + dstr2 +')';
変更後 footer =`(created: ${dstr1} ,updated: ${dstr2})`;
終わりに
初心者向け（自分も初心者）に詳しく書いてみました。順番の省略部分はリクエストがあればやります。