2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Node.js + Express - ルーターモジュール内でパラメータに変数の値を入れてリダイレクトする

Last updated at Posted at 2022-03-08

専門学校の授業で1年間情報技術の基礎やプログラミング言語の文法等を勉強してきたけど、フレームワークを使って実践的なプログラミングにチャレンジしたい。

そう思い立ち、実際にNode.jsのExpressで掲示板サイトを作成しながら勉強している中で、パラメータを含めたリダイレクトが上手く動作せず数時間費やしたので記録。
(手探り状態で進めているので圧倒的知識不足を痛感・・・)

掲示板の構造

掲示板のトップにはthreadから取得したスレッドの一覧を表示。
一覧の中のタイトルをクリックするとコメント一覧表示(/comments/:threadId)のページに移動する仕組み。

スレッド一覧からタイトルをクリックすると、スレッドのID(thread.id)をルートパラメータに指定して対応するコメントを取り出して表示する。

[thread]
+--------+-------------+------+-----+---------+----------------+
| Field  | Type        | Null | Key | Default | Extra          |
+--------+-------------+------+-----+---------+----------------+
| id     | int(11)     | NO   | PRI | NULL    | auto_increment |
| userId | int(11)     | NO   | MUL | NULL    |                |
| title  | varchar(54) | YES  |     | NULL    |                |
+--------+-------------+------+-----+---------+----------------+
[comments]
+----------+--------------+------+-----+-------------------+----------------+
| Field    | Type         | Null | Key | Default           | Extra          |
+----------+--------------+------+-----+-------------------+----------------+
| id       | int(11)      | NO   | PRI | NULL              | auto_increment |
| threadId | int(11)      | YES  | MUL | NULL              |                |
| userId   | int(11)      | NO   | MUL | NULL              |                |
| body     | varchar(700) | YES  |     | NULL              |                |
| time     | timestamp    | NO   |     | CURRENT_TIMESTAMP |                |
+----------+--------------+------+-----+-------------------+----------------+

リダイレクトの引数に変数を含めたい

コメント一覧のページの下部に、コメント投稿機能を設置。
コメントを投稿してデータベースに追加した後、コメント一覧(/comments/:threadId)へリダイレクトして、新しいコメントを含めたコメント一覧を表示。

引数のルートパラメータに変数は入れられない

バリバリプログラミングやってる人からしたら当たり前すぎて驚くかもしれないけどドが付く初心者の私はここでつまづく。

変数をそのままredirectのルートパラメータにぶち込んでも、{}で囲ってもダメ。
リダイレクトとしてリクエストされた/commentsでパラメータを受け取れずエラーが起きてしまう。

app.js

app.post('/comments/:threadId', (req, res) => {
   const threadId = req.params.threadId;
......
   res.redirect('/comments/threadId');
});

パス+変数で解決

単純なことだけど、これがわかるまでかなりてこずった。
引数に「'/comments/'+ thread」を渡してやるか、これを変数に入れて引数に変数を渡してやればよかったらしい。

もしかしたらもっと別の方法があるのかもしれないけど、自分なりに出した解決法がこれ。

app.js

app.post('/comments/:threadId', (req, res) => {
   const threadId = req.params.threadId;
......
   const re_comments = '/comments/' + threadId;
   res.redirect(re_comments);
});

てこずった割に理解したら満足して似たような問題に直面したときに「前はどうやったかな・・・」と思い出せないことが多いので、アウトプットと記録として初投稿。

同じように手探りド初心者の方のお役に立てれば尚良し。

  • 2022.3.10 追記|  \ commentsなのにthreadsじゃないんだ・・・ /
2
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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?