【Rails】Javascriptで日付を表示することができない【HTML】【CSS】

Question

Railsにてカレンダーアプリを作成中です。ドットインストールというサイトを参考にしているのですが、以下のエラーが出てしまい、解決方法が分かりません。

【実現したいこと】
エラをー解決して、Javascriptを用いたカレンダーの日付表示を行いたい。

【エラー文・画像】

main.js:86 Uncaught TypeError: Cannot read property 'appendChild' of null
    at main.js:86
    at Array.forEach (<anonymous>)
    at createCalendar (main.js:71)
    at Object../app/javascript/main.js (main.js:92)
    at __webpack_require__ (bootstrap:19)
    at Object../app/javascript/packs/application.js (application.js:10)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
(anonymous) @ main.js:86
createCalendar @ main.js:71
./app/javascript/main.js @ main.js:92
__webpack_require__ @ bootstrap:19
./app/javascript/packs/application.js @ application.js:10
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83

【該当のソースコード】
index.html.erb

<%= render "shared/header" %>
<div class="todo-countdown">
  カウントダウン表示
</div>
<table>
  <thead>
    <tr>
      <th id="prev">&laquo;</th>
      <th id="title" colspan="5">2020/05</th>
      <th id="next">&raquo;</th>
    </tr>
    <tr>
      <th>Sun</th>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
  <tfoot>
    <tr>
      <td id="today" colspan="7">Today</td>
    </tr>
  </tfoot>
</table>
<footer>
  フッター部分
</footer>

<%# <script src="app/javascript/main.js"></script> %>

main.js

'use strict';

console.clear();

{
  const year = 2020;
  const month = 4; // 5月

  function getCalendarHead() {
    const dates = [];
    const d = new Date(year, month, 0).getDate();
    const n = new Date(year, month, 1).getDay();

    for (let i = 0; i < n; i++) {
      // 30
      // 29, 30
      // 28, 29, 30
      dates.unshift({
        date: d - i,
        isToday: false,
        isDisabled: true,
      });
    }

    return dates;
  }

  function getCalendarBody() {
    const dates = []; // date: 日付, day: 曜日
    const lastDate = new Date(year, month + 1, 0).getDate();

    for (let i = 1; i <= lastDate; i++) {
      dates.push({
        date: i,
        isToday: false,
        isDisabled: false,
      });
    }

    return dates;
  }

  function getCalendarTail() {
    const dates = [];
    const lastDay = new Date(year, month + 1, 0).getDay();

    for (let i = 1; i < 7 - lastDay; i++) {
      dates.push({
        date: i,
        isToday: false,
        isDisabled: true,
      });
    }

    return dates;
  }

  function createCalendar() {
    const dates = [
      ...getCalendarHead(),
      ...getCalendarBody(),
      ...getCalendarTail(),
    ];
    const weeks = [];
    const weeksCount = dates.length / 7;

    for (let i = 0; i < weeksCount; i++) {
      weeks.push(dates.splice(0, 7));
    }

    weeks.forEach(week => {
      const tr = document.createElement('tr');
      week.forEach(date => {
        const td = document.createElement('td');

        td.textContent = date.date;
        if (date.isToday) {
          td.classList.add('today');
        }
        if (date.isDisabled) {
          td.classList.add('disabled');
        }

        tr.appendChild(td);
      });
      document.querySelector('tbody').appendChild(tr);
      
    });

  }

  createCalendar();
}

【現状のブラウザ画面】

【解決に向けてしたこと】
・エラー文にあるように、main.jsの86行目の記述「document.querySelector('tbody').appendChild(tr);」を確認し、querySelectorについて調べる。
・エラー文をWeb検索で調べ、参考になりそうなサイトを探す。

---

自分の知識不足もあり、何がいけないのかという仮説を立てることができませんでした。Javascriptの学び直しも並行して行っていますが、もし、解決法が分かる方がいたらご教授願いたいです。必要があれば、解決に向けて質問して頂いても構いません。よろしくお願い致します。

---

12/4追記
同じコードをrailsではなく、単に「index.html」と「index.css」「main.js」といった３つのファイルを作り、それぞれ参照できるようにコードを記述して試すと、思い通りの表示がされました。このことから、railsを通すことで何かしらエラーが起きる原因があると思われます。cssの記述も載せておきますきます。
app/assets/stylesheets/events/index.css

body {
  box-sizing: border-box;
  height: 800px;
  font-size: 20px;
  text-align: center;
}

.top-content {
  width: 100vw;
  height: 100px;
  display: flex;
  align-items: center;
  background-color: skyblue;
}

.main-title {
  font-size: 30px;
  height: 100%;
}

.title-content {
  width: 70vw;
  font-size: 20px;
}

.login-content {
  width: 30vw;
  height: 100%;
  font-size: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: pink;
}

.user-box {
  padding: 10px;
  border: 2px solid white;
}

.todo-countdown {
  background-color: lime;
  height: 100px;
}

body {
  font-family: 'Courier New', monospace;
  font-size: 20px;
}

table {
  height: calc(100% - 250px);
  width: 100vw;
  padding: 10px;
  margin: 0 auto;
  border-collapse: collapse;
  border: 2px solid #eee;
  text-align: center;
}

thead,
tfoot {
  background: #eee;
  text-align: center;
}

th,
tr,
td {
  padding: 8px;
  text-align: center;
}

td {
  vertical-align: top;
}

tbody td:first-child {
  color: red;
}
tbody td:last-child {
  color: blue;
}

td.disabled {
  opacity: 0.3;
}

td.today {
  font-weight: bold;
}

tfoot {
  font-weight: bold;
}

#prev,
#next,
#today {
  cursor: pointer;
  user-select: none;
}

footer {
  background-color: yellow;
  line-height: 50px;
}

Comments

[m.ts10806]

console.log(document.querySelector('tbody'))
の結果がnullなのでしょう。確認してください。
そういうエラーです。
どこでmain.jsが読み込まれているのでしょうか。

[tekeTECH]

質問ありがとうございます。Rails6の仕様では<script src="javascript/main.js">のような記述はいらないと認識していますが、間違っていたのかも知れません。HTMLで<tbody>を読み込む前にJavascriptを読み込んで<tbody>を生成しようとするとエラーが出ると思うので、index.html.erbファイルの一番最後に<script src="javascript/main.js"></script>と入力してみましたが、だめでした。ご質問の意図に合った回答になりましたでしょうか？よろしくお願い致します。

[m.ts10806]

いえ、assetパイプライン使うのでしたら仰るように自分で書く必要はないです(名称によって読み込み順が決まるのでそこは気を遣う必要はある)し、assetにノせた上でさらに自前で書いてしまうとコンフリクト起きるかもしれないので、どちらかに統一してください。
いずれにしても
console.log(document.querySelector('tbody'))
の結果がnullなのでしょう。確認してください。

[tekeTECH]

ありがとうございます。index.html.erbの8行目で<th id="prev">と記述していることを確認しましたが、他の確認方法は自分ではどうしても思いつきませんでした。他の方からアドバイス頂いた通り、window.addEventListener("DOMContentLoaded", function () {})を使うことでエラーを回避し、思い通りの表示をすることができました。

Answer 1

DOMの準備がされる前にcreateCalendar();が実行されているのでしょう。
そのためにtbodyが存在せずnullになっている。

window.addEventListener("DOMContentLoaded", function () {
  // DOMの準備が出来たら実行
  createCalendar();
})

Window: DOMContentLoaded イベント

trubolinks を使っている場合は遷移時にDOMContentLoadedが発火しないとかあったはずなので、
違う対応が必要になります。

Comments

[tekeTECH]

ありがとうございます。アドバイス通り、createCalendarの記述がある所を
```
window.addEventListener("DOMContentLoaded", function () {})
```
で囲むように記述すると、思い通りの表示ができました！次は、日付の下にに予定やTodoを表示できるよう実装を進めていこうと思います。