inputタグのmethod="post"を利用して一覧表示させたいのに、表示ができない。

Question

前提・実現したいこと

プログラミング初心者です。
Node.jsを学び、ローカル環境で簡単なwebサービスを作ろうとしています。

ざっくりお伝えすると、
ページAのフォームに入力した情報を、ページBで一覧表示していきたいです。

困っている事

現状、SQLのデータベース内に入れているデータは表示ができるのですが、ページBで入力した情報が表示されません。
おそらくSQLデータベースに正しくINSERTできていないのかもしれません。
追記：MySQLのデータベースをコマンドプロンプトで直接確認したところ、新しくデータの追加がされていないようです。

はじめてのプロダクト開発です。
事情により家で1人で作っており相談する先生などいないため、どなたか回答いただけますと幸いです。

該当のソースコード

ページA(フォーム用のページ)が/new-costで、ページB(一覧用のページ)が/cost-listです。

**
「app.js」ファイルです。3段落目に、SQLデータベースへのINSERTを記載しているつもりです。

app.get('/cost-list', (req, res) => {
  connection.query(
    'SELECT * FROM cost_info',
    (error, results) => {
      if (error) console.error(error);
      console.log(results);
      res.render('cost-list.ejs',{cost_info: results});
    }
  );
});

app.get('/new-cost', (req, res) => {
  res.render('new-cost.ejs');
});


app.post('/create', (req, res) => {
  connection.query(
    'INSERT INTO cost-info(amount_money) VALUES (?)',
    [req.body.amountMoney],
    (error, results) => {
      if (error) console.error(error);
      res.redirect('/cost-list');
    }
  );
});

ページA「new-cost.ejs」です。inputタグにnameもありますし、formタグにactionもmethodも記載しています。

        <form action="/create" method="post">
          <input name="amountMoney" type="number">
          <input type="submit" value="作成">
        </form>

ページB「cost-list.ejs」です。SQLデータベースのテーブル名が「cost_info」なのですが、forEachを使って表示させようとしています。

          <ul class="table-body">
            <% cost_info.forEach((cost) => { %>
              <li>
                <div class="cost-data">
                  <span class="date-column"><%= cost.id %></span>
                  <span class="expense-items-column"><%= cost.expense_items %></span>
                  <span class="amount-column"><%= cost.amount_money %></span>
                </div>
              </li>
            <% }); %>
          </ul>

補足情報

足りない情報があれば教えてください。

Comments

[m.ts10806]

INSERTできているかどうかは直接データを確認すれば良いのでは？

[ppos]

ありがとうございます。
すみません、であれば「INSERTができていない」と断言できそうです。
コマンドプロンプトを使って該当するSQLテーブルの一覧を見たのですが、新しいデータ(=新しいidのついた行)はありませんでした。

[m.ts10806]

はい。その確認結果を質問本文に追記してください。
質問は編集できます。

[ppos]

修正しました。ありがとうございます。

Answer 1

SQLのSELECT文で利用しているテーブルは
SELECT * FROM cost_infoなのでcost_infoですね。

INSERT文の方はINSERT INTO cost-list(amount_money) VALUES (?)
なのでcost-listですね。

テーブル名が一致してないように見えます。

---

何故こんなケアレスミスが見抜けないか！
それはエラーを握りつぶしているからです。

SQLと省略されているため何を使っているかわかりませんが
例えばMySQL関係のモジュールであれば、
第一引数errorは正常終了される限りnull値になるはずで、
null値以外であれば重篤なエラーが発生している可能性が高いです。

このerror引数を何も確認せずスルーする行為は
現場では「エラーの握りつぶし」等と呼び、ダメな奴（バッドプラクティス）です。

厳密に言えばerrorがnull値でなければ
POSTに失敗しましたみたいなエラーメッセージを投げ返すような挙動をすべきなのですが、
とりま下記のように修正してコンソールで見張る癖を付けましょう。

app.get('/cost-list', (req, res) => {
  connection.query(
    'SELECT * FROM cost_info',
    (error, results) => {
      if (error) console.error(error);
      console.log(results);
      res.render('cost-list.ejs',{cost_info: results});
    }
  );
});

app.get('/new-cost', (req, res) => {
  res.render('new-cost.ejs');
});


app.post('/create', (req, res) => {
  connection.query(
    'INSERT INTO cost-list(amount_money) VALUES (?)',
    [req.body.amountMoney],
    (error, results) => {
      if (error) console.error(error);
      res.redirect('/cost-list');
    }
  );
});

Comments

[miyabi-sun]

> はじめてのプロダクト開発です。
> 事情により家で1人で作っており相談する先生などいないため

でしょうねって感じです。
駆け出しのプログラマなら8割がエラーを握りつぶして先輩に
「エラーを握りつぶすんじゃねえ」と叱られる奴なので別に気にしないでください。

因みに残りの2割はエラーを気にしすぎてメインロジックがtry-catchだらけでぐしゃぐしゃにしてしまい、何をやってる処理なのか読んでも分からんようにする石橋を叩き壊すタイプです。

何処を見張らなければならないか、どういう時にエラーが出やすいかという勘所は結構大変なので、
長い時間をかけて理解していきましょう。

[ppos]

丁寧に教えて下さりありがとうございます....！！！
テーブル名の修正、if文の追加をさせていただきました。
エラーの握りつぶし、とても勉強になりました。

無事、上記でエラー確認ができましたし、テーブル名の修正にてやりたいことができるようになりました。
本当に勉強になりました。ありがとうございます。ダメな奴にならないようもっと精進していきます。

[ppos]

>因みに残りの2割はエラーを気にしすぎてメインロジックがtry-catchだらけでぐしゃぐしゃにしてしまい、何をやってる処理なのか読んでも分からんようにする石橋を叩き壊すタイプです。

>何処を見張らなければならないか、どういう時にエラーが出やすいかという勘所は結構大変なので、
長い時間をかけて理解していきましょう。

なるほど...。見ず知らずの私なんかに丁寧に教えて頂き、本当にありがとうございます...！