node.jsでinnerHTMLを使いたい

Question

前提・実現したいこと

現在node.jsのexpressでウェブアプリケーションを作ろうとしています。他サイトから引っ張ってきたカレンダーを使って、サイトに使用したいのですが、このカレンダーはnode.jsで使うことを想定していないため、innerHTMLを使うとエラーが出ます

質問 1
そもそもnode.jsでHTMLを後からいじるという考え方が間違っていますか？(だからinnerHTMLやappendが使えない？)

質問2
このカレンダーはcalendar.jsでテーブルを作成しているのですが、node.jsでこのテーブルを作るにはどうすれば良いのでしょうか？

node.js初心者なため、初歩的な質問かもしれませんが、回答お願いします。

発生している問題・エラーメッセージ

 Cannot set property 'innerHTML' of null

該当のソースコード

const express = require('express');
const mysql = require('mysql')
const jsdom = require('jsdom-global')()
const calendar = require('./calendar.js')

app.get('/calendar',(req,res)=>{
  res.render('calendar.ejs')
})

var today = new Date();
var currentMonth = today.getMonth();
var currentYear = today.getFullYear();

function generate_year_range(start, end) {
    var years = "";
    for (var year = start; year <= end; year++) {
        years += "<option value='" + year + "'>" + year + "</option>";
    }
    return years;
  
}
  
var today = new Date();
var currentMonth = today.getMonth();
var currentYear = today.getFullYear();
var selectYear = document.getElementById("year");
var selectMonth = document.getElementById("month");

var createYear = generate_year_range(1970, 2200);

document.getElementById("year").innerHTML = createYear;

var calendar = document.getElementById("calendar");
var lang = calendar.getAttribute('data-lang');

var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
var days = ["日", "月", "火", "水", "木", "金", "土"];

var dayHeader = "<tr>";
for (day in days) {
dayHeader += "<th data-days='" + days[day] + "'>" + days[day] + "</th>";
}
dayHeader += "</tr>";

document.getElementById("thead-month").innerHTML = dayHeader;

monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);



function showCalendar(month, year) {

    var firstDay = ( new Date( year, month ) ).getDay();

    tbl = document.getElementById("calendar-body");

    tbl.innerHTML = "";

    monthAndYear.innerHTML = months[month] + " " + year;
    selectYear.value = year;
    selectMonth.value = month;

    // creating all cells
    var date = 1;
    for ( var i = 0; i < 6; i++ ) {
        var row = document.createElement("tr");

        for ( var j = 0; j < 7; j++ ) {
            if ( i === 0 && j < firstDay ) {
                cell = document.createElement( "td" );
                cellText = document.createTextNode("");
                cell.appendChild(cellText);
                row.appendChild(cell);
            } else if (date > daysInMonth(month, year)) {
                break;
            } else {
                cell = document.createElement("td");
                cell.setAttribute("data-date", date);
                cell.setAttribute("data-month", month + 1);
                cell.setAttribute("data-year", year);
                cell.setAttribute("data-month_name", months[month]);
                cell.className = "date-picker";
                cell.innerHTML = "<span>" + date + "</span>";

                if ( date === today.getDate() && year === today.getFullYear() && month === today.getMonth() ) {
                    cell.className = "date-picker selected";
                }
                row.appendChild(cell);
                date++;
            }
        }

        tbl.appendChild(row);
    }

}

function daysInMonth(iMonth, iYear) {
return 32 - new Date(iYear, iMonth, 32).getDate();
}

<div class="container-calendar">
    <h4 id="monthAndYear"></h4>
    <div class="button-container-calendar">
        <button id="previous">‹</button>
        <button id="next" >›</button>
    </div>
    
    <table class="table-calendar" id="calendar" data-lang="ja">
        <thead id="thead-month"></thead>
        <tbody id="calendar-body"></tbody>
    </table>
    
    <div id="calendar_footer" class="footer-container-calendar">
        <label for="month">日付指定：</label>
        <select id="month">
            <option value=0>1月</option>
            <option value=1>2月</option>
            <option value=2>3月</option>
            <option value=3>4月</option>
            <option value=4>5月</option>
            <option value=5>6月</option>
            <option value=6>7月</option>
            <option value=7>8月</option>
            <option value=8>9月</option>
            <option value=9>10月</option>
            <option value=10>11月</option>
            <option value=11>12月</option>
        </select>
        <select id="year"></select>  
        <div id="footer_btn"></div>
    </div>   
</div>

Answer 1

documentオブジェクト（と言うかインターフェース）は、
webブラウザ上にしか無くて、
Node.jsには（なんの工夫もなければ）備わってないですよ、って話ですかね。

Document - Web API | MDN

だから、documentオブジェクト前提のメソッド類も全部使えないから、
根本から見直しが必要になりそう。

試しに「nodejs dom操作」などとしてネット検索すると、
Node.js上でも（jQuery使ったりして）DOM操作しようとしている事例がいくつか見つかるので、
そういうのを調べてもらうのが良いかも。
DOM操作できるようパッケージ追加して仕組みを強化してやる、という考え方に見えます。

（肝心の本質的な回答については、Node.jsまわりを普段使っていないので見識がなく、ご提示できません。）

Comments

[bicLighter]

回答ありがとうございます。なるほど、node.jsはサーバー側で動くものなのでwebブラウザ上では使えないということですね、パッケージいろいろ探してやってみます。勉強になりました。ありがとうございます。

Answer 2

質問 1: そもそもnode.jsでHTMLを後からいじるという考え方が間違っていますか？(だからinnerHTMLやappendが使えない？)

……なるほど、Yes / Noでウミガメのスープみたいな事を続けてると日が暮れると思うので、
JavaScriptとNode.jsの違いが一発でわかるよう解説していきます。
非常に長いし、知ってる箇所もあると思いますが、さらりと読んでみてください。

まずJavaScriptとはなんぞやを掻い摘んで説明してきます。

あなたはChrome等のWebブラウザでWebサイトにアクセスします。
この時ChromeはHTTPリクエストをWebサーバに送信し、
WebサイトはHTML(文書ルールに従って生成された文字列)をHTTPレスポンスとして返します。
(このHTMLというのは単なる文字であって、それ以上でもそれ以下でもないってことね)

Chromeは受け取ったHTMLを画面上に描画する為にメモリ上に展開します。
こうして出来たツリー構造のデータを「DOMツリー」と呼びます。

Chromeは更にJavaScriptのエンジンを起動して「DOMツリー」の編集に備えます。
そしてinnerHTML等の機能を使ってDOMツリーを編集すると、
DOMツリーの変更を検知したChromeが画面をレンダリングしなおします。

---

続いてNode.jsの説明

Webサイト上で動作するスクリプト言語としてすっかり覇権となったJavaScript
とあるハッカーがJavaScriptをRubyやPythonのような汎用スクリプト言語として使いたいとワガママ言い始めます。

彼はオープンソースとして公開されているChromeのV8エンジンに、
外部ファイルやHTTP通信を自由に行うためのモジュールをC++で作って組み込みました。
それによりChrome等のおまけでDOMツリーを弄るしか能がなかったJavaScriptを、
RubyやPythonのような汎用スクリプト言語にしてしまいました。

この成果物がNode.jsで、ブラウザとは全く関係ないところで動作します。
なのでDOMツリーを操作する為の機能が含まれていません。

---

何でこんな歴史を説明したかというと、ここからが本番です。

ChromeはJavaScriptのエンジンを搭載していますが、
その用途はDOMツリーを変更して画面の更新を促すしか能がありません。

んで、訪問者のChromeはWebサーバにHTML文字列よこせとHTTP通信投げましたよね。
この時、別に相手側はNode.jsだろうが、Ruby・PHP・Pythonであろうが心底どうでもいいと思ってます。
HTTP通信の仕様に従ってリクエストを受け取ってレスポンスを返してくれれば問題ない。

これがクライアントとサーバの絶対な差です。
お互いが独立している存在であり、双方向で相手が何者なのかに関しては干渉もしないしどうでも良いと思ってます。
インターネットの仕様、HTTP通信の仕様というものが存在してまして、
その仕様通りに動作するならば手段は問わないよみたいな所があります。

この時のサーバが「たまたま」Node.js製のWebサーバだったとしてだから何？なんですよね
HTTPリクエストを受け取ってHTTPレスポンスという文字列を返すのが仕事ですからね。
「DOMツリーを弄る？俺Webサーバだからブラウザも無いんだが？どこのだれが用意してくれんの？」という話なんですよ。

DOMツリーはHTMLを持ち帰ったChromeが
訪問者のパソコンのメモリ空間上に展開して初めて準備されます。

以上の理由からNode.jsでinnerHTML等のDOMを操作する機能を使う事は出来ません。

Node.js触り始めの人が大抵躓くポイントの一つが、
このNode.jsにはDOMツリーがないよ問題です。
質問1の回答としてはこんな所でしょうか。

---

質問2: このカレンダーはcalendar.jsでテーブルを作成しているのですが、node.jsでこのテーブルを作るにはどうすれば良いのでしょうか？

方法は2通りです。

1. calendar.jsを捨てて、EJSで相応しいHTMLを生成してやる
2. クライアントにcalendar.jsを読み込ませて、各々が勝手にDOMツリーを編集して画面に反映せえよと投げる

EJSにはループやif文が使えます。
参考記事: EJS まとめ - Qiita

別に最初からその場に適したカレンダーのHTML作ってやれば
わざわざJavaScriptでDOMツリーを弄らなくても事足りるじゃないですか。
そういうアプローチになります。

EJSのループ機能でtr, th, tdを作ってはめ込んでやれば完成です。
二重ループ作らないといけないのでちょっと大変ですね。
calendar.jsを捨てるとなると重労働だと思います。

---

後者の方法はcalendar.jsをscriptタグ経由でクライアントに渡してやり、
訪問者のJavaScriptに実行してもらってDOMツリーを編集してもらうプランになります。

Express.jsには日本語のサイトも用意されており、
ファイルとして存在しているcalendar.jsをHTTP通信を通じてクライアントへ送信するような機能もドキュメントで紹介されています。
参考記事: Express での静的ファイルの提供

Expressの公式サイトは神で、上メニューの「解説」と「ガイド」は目を通しておくべきというレベルです。

これで例えば/scripts/calendar.jsにアクセスするとそのファイルがHTTPレスポンスとして配信されるようにしておいて、EJSにこんな感じのタグを追加してやれば良いでしょう。

<head>
  <script defer src="/scripts/calendar.js"></script>
</head>

普通にスクリプトタグを追加すると
タグの追加した時点でWebサイトのDOMツリー構築をストップして即座にJavaScriptを実行し始めますが
defer属性を付与することでJavaScriptの実行をDOMツリーの構築が完了するまで待ってくれるようになります。

Comments

[miyabi-sun]

完全に横道ですが
Node.jsでやる場合絶対にcalendar.jsを捨てなければならないかというとそうでもなくて、
cheerioみたいなHTML文字列を解析・編集出来るモジュールが存在するんですよね
https://www.npmjs.com/package/cheerio

まぁ、RubyやPythonと同列に位置する汎用スクリプト言語なんでそのくらい出来てもらわなきゃ困るという感じですが
WebサーバがHTMLという文字列を最終的に返せば良いだけなので、一度EJSでひな形HTMLを作ってやってcheerioで再度HTMLを編集して完成形のHTMLを作り直すというアプローチになりそうですね。

実際問題はわざわざHTMLを再度解析して編集して作り直すというのも高コストですし
だったらEJSのループとif文で頑張るのが自然だろう。
もしEJSで書くのが面倒なら別のテンプレート言語、例えばPugとかにしなよという話になります。
https://pugjs.org/api/getting-started.html

この辺の兼ね合いから、最終的な取るべき手段は解答欄に書いてある2つにしぼりました。

[bicLighter]

回答ありがとうございます。見ず知らずの私に長文で返信していただき誠に感謝です。node.jsとjavascriptの違いがよくわかりました。わかりやすい解説ありがとうございます。実現したいことの回答もすごく参考になりました。とりあえず、後者の方法でやってみたいと思います。

[bicLighter]

exprresの公式サイトのURLもありがとうございました。