node.jsのejs内の変数だけを更新したい

node.jsの初心者で、まだ理解が半ばですみません！
いろいろ調べたのですが、わからなかったので質問させてください。

node.jsとexpressとejsによるhtml系のアプリを作成しているところです。
node.jsから何らかのイベントによってすでにレンダー済のejsに対して、<%=〇〇〇%>内だけを書き換えることはできないのでしょうか。

たとえば、

js
1
2app.get('/', function(req, res, next) {
3  // こうすると、index.ejs全体を書き換えてしまうのでこれではなく
4  // この「title」の部分のみを書き換えたい
5  // res.render('index', { title: 'Express' });
6    
7});
8

思う動きは、jqueryの「$(〇〇〇).html(□□□)」のような感じです。

他の記事で
https://teratail.com/questions/164497
があったのですが、これは私も知りたいなと思ったのですが、回答がなかったので似たような質問をここでしたいと思いました。
ぜひ知っている方いらっしゃればよろしくお願いいたしますm(__)m

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

回答1件

ベストアンサー

これはそもそもWebサーバとブラウザの関係を知っていれば出てくる事がない疑問ですから、
その辺の基礎をもう少し勉強してください。

ですが、これで終わりだと冷たいので、
勉強が捗るようにアドバイスしていきます。

Webサーバとは、インターネット上に存在するサーバーマシンの８０/TCPポートに穴を開けて
HTTPリクエストを待ち受け、結果となる文字列を返すサーバの事を指します。

ブラウザはWebサーバへHTTPリクエストを送信してHTMLファイルを受け取ります。
HTMLファイルを解析して付属情報であるCSS・JS・画像ファイル等を後続のHTTPリクエストを飛ばしながら拾い集めます。
情報が全て揃ったら画面を描画して完成、
マウスやキーボードで操作しながら閲覧するというソフトウェアを指します。

node.jsから何らかのイベントによってすでにレンダー済のejsに対して、<%=〇〇〇%>内だけを書き換えることはできないのでしょうか。

ブラウザはHTMLファイルを下さいと言っています。
ejsファイルを貰っても使い方がわからないので何も嬉しくありません。
以下のような順序で話が進みます。

Node.js(Express)でWebサーバを構築
訪問者がWebサイトに訪れる
ブラウザはHTMLファイルを貰うためにHTTPリクエストを送信
Node.jsはHTTPリクエストを受け取り、ejsをHTMLに変換してHTTPのレスポンスとして返す

HTTP通信はそこで終了。
「後から追加の更新差分があるので再度HTMLを受け取ってくれ！」
…という風にNode.jsのWebサーバが働きかける事は出来ません。

サイトの閲覧者が自発的にF5キーを押してHTMLを受け取り直す事を期待してください。

しかし質問文の流れを読む限り、
「出来ません」が結論では困ると思うので次の章へ進みます。

でもTwitterとかのサービスってこういう事実現してるじゃん、何か方法あるんじゃないの？

フロントエンドの地獄へようこそ

JavaScript(以下JS)を使いましょう。
質問文のようなリロードを伴わずに後からHTMLを書き換えて表示情報を変更するほぼ唯一の手法です。

ブラウザにはDOM APIというライブラリが備え付けられており、JS越しに機能を使ってHTMLの文書構造を書き換える事が可能です。

でも予めjsファイルを作って置いてそれを実行するんでしょ？

DBの値がhogeからpikoに変更されても検知出来ないんだから意味ないじゃん

JSにはHTTPリクエストを送信して、
結果を文字列として受け取る「Ajax」と呼ばれる仕組みがあります。
例えば30秒毎にAjaxを送信して、帰ってくる文字列の変化を検知してDOMを書き換えてページを変更させるような仕組みを作る事で実現可能です。

これはJSでAjaxを送信して文字列の比較を行いDOMを編集するというコアな処理とは別に、
Node.jsで特定のパスでアクセスが来たらDBの値を参照して文字列として返すURL(エンドポイント)を実装する必要がありますので、２つ合わせたコストが実装コストになるので非常に大変です。

実際にコードを使って示していくと１冊の本みたいな情報量になりますので、
JavaScriptやAjax、Node.jsでのWebアプリ等の書籍を購入して勉強してください。

投稿2019/03/29 05:22

編集2019/03/29 08:10

miyabi-sun

総合スコア21158

mie0224

2019/03/29 08:14

miyabi-sun　様ご丁寧に教えていただきありがとうございました！すごくわかりやすくてたすかりました！同じjavascriptなので、初心者の私には混同してしまって何がなんだかわからない状態でした（汗）少し理解へ近づけた気がします！ありがとうございます！

miyabi-sun

2019/03/29 08:35 編集

あー、Node.jsとJSの違いが曖昧だったという話だったのね。 JavaScriptというのはブラウザ上で動く、動的にHTMLを書き換える事が仕事のスクリプトだよ。ファイルの読み書きとかWebサーバ作るみたいな機能は備わってません。ところが、このJSの構文を超気に入ったクレイジーなエンジニアが居て、 C++で作った自作のファイル読み書きやWebサーバとして動くモジュールをくっつけて、 RubyやPythonのように何処でも動作出来るスクリプト言語に魔改造したエンジニアが居たのね。その成果物がNode.js！なのでNode.jsをインストールしておけば、自由にマシン内にjsファイルを設置して`node`コマンドを使って実行出来るようになったのだけど、今回のNode.js+ExpressはWebサーバ(80番ポートで待ち受けてHTMLファイル返す奴)を作るアプリとして作りましょうって作っただけの話なのね。 Webサーバを訪れる訪問者は今まで通り、 HTTPリクエストを送ってHTMLを受け取って、後からDOMをJSで書き換えるという従来の流れでページを更新する必要があるってことね。 Node.jsはJavaScriptと同じ構文を使えるだけで、明確に違うものと覚えておくと良いかもね。

mie0224

2019/04/01 05:51

そーゆうことなんですね！すごくわかりやすいです！！言語構文が同じというだけで全く別物なんですね！まずサーバーサイドとクライアントのことについてもう少し詳しく学んでいきます！(^^

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