index.html内のテキストをapp.jsで書き換え、ローカルサーバー上に反映させたい(DOM)

前提・実現したいこと

index.html内のテキストをapp.jsで書き換え、ローカルサーバー上に反映させたい。

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

ローカルサーバーを立ち上げると下記のエラーメッセージが表示されます。

document.querySelector('p').innerText = 'Goodbye';
^

ReferenceError: document is not defined
    at Object.<anonymous>

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>StopWatch</title>
8</head>
9<body>
10  <p>Hello</p>
11  <script src="app.js"></script>
12</body>
13</html>

javascript
1const express = require('express');
2
3const app = express();
4
5app.get("/", function (req, res) {
6  res.sendFile(__dirname + "/index.html")
7});
8
9app.listen(3001, ()=>{
10  console.log("Server is runnning");
11});
12
13document.querySelector('p').innerText = 'Goodbye';

試したこと

index.htmlをブラウザに貼り付けて、app.jsにdocument.querySelector('p').innerText = 'Goodbye';と記入した状態で、更新ボタンを押すと、HelloがGoodbyeに書き換わるのですが、ローカルサーバーを立ち上げるとクラッシュしてしまうのは何故でしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

ローカルサーバーを立ち上げるとクラッシュしてしまうのは何故でしょうか？

NodeJS（サーバー側）のJavaScript内に、ブラウザ側のJavaScriptを記述しているためです。

NodeJS（express など）ではサーバー側 / クライアント側を見極めるために HTTP/1.1 におけるクライアント-サーバー間の情報のやりとりを把握し、コードを書き分ける必要があります。シーケンス図(HTTP/1.1) （Codepen：他の回答でも示した為PHPの表現があります）において、 Browserの線上では「ブラウザ側の JavaScript」が、Serverの線上では「NodeJS（サーバー側）の JavaScript」が動きます。

ご質問からは、expressjs で　hello world を試し、静的ファイルの応答として index.html を試してみた段階と思いますが、*.css, *.js などの複数ファイルを応答するには express.static（Google検索）ミドルウェアを活用してください（あるいは、index.html にインラインスクリプトを書いて結果を試すこともできます）。

まずは、公式にも紹介される Expressジェネレータ（公式ドキュメント）を使って環境構築し、静的ファイルを公開用ディレクトリ（public 以下の階層）に応答用ファイルを配備して確認してみてください。

以下、自動生成される内容とは若干違いますが、NodeJS用 / ブラウザ用を見分けやすいディレクトリ構成になるはずです。

+- dir/
      app.js ... NodeJS (サーバー用 javascript)
   +- public/
        index.html ... 応答する *.html ファイル
        script.js .... 応答する *.js ファイル(*.html 内で指定されるブラウザ用JavaScript)

投稿2020/06/15 20:43