質問: node.jsの初心者で、まだ理解が半ばですみません! いろいろ調べたのですが、わからなかったので質問させてください。 node.jsとexpressとejsによるhtml系のアプリを作成しているところです。 node.jsから何らかのイベントによってすでにレンダー済のejsに対して、<%=〇〇〇%>内だけを書き換えることはできないのでしょうか。 たとえば、 ``` app.get('/', function(req, res, next) { // こうすると、index.ejs全体を書き換えてしまうのでこれではなく // この「title」の部分のみを書き換えたい // res.render('index', { title: 'Express' }); }); ``` 思う動きは、jqueryの「$(〇〇〇).html(□□□)」のような感じです。 他の記事で があったのですが、これは私も知りたいなと思ったのですが、回答がなかったので似たような質問をここでしたいと思いました。 ぜひ知っている方いらっしゃればよろしくお願いいたしますm(__)m
回答: これはそもそもWebサーバとブラウザの関係を知っていれば出てくる事がない疑問ですから、 その辺の基礎をもう少し勉強してください。 ですが、これで終わりだと冷たいので、 勉強が捗るようにアドバイスしていきます。 Webサーバとは、インターネット上に存在するサーバーマシンの80/TCPポートに穴を開けて HTTPリクエストを待ち受け、結果となる文字列を返すサーバの事を指します。 ブラウザはWebサーバへHTTPリクエストを送信してHTMLファイルを受け取ります。 HTMLファイルを解析して付属情報であるCSS・JS・画像ファイル等を後続のHTTPリクエストを飛ばしながら拾い集めます。 情報が全て揃ったら画面を描画して完成、 マウスやキーボードで操作しながら閲覧するというソフトウェアを指します。 > > node.jsから何らかのイベントによってすでにレンダー済のejsに対して、<%=〇〇〇%>内だけを書き換えることはできないのでしょうか。 > > > ブラウザはHTMLファイルを下さいと言っています。 ejsファイルを貰っても使い方がわからないので何も嬉しくありません。 以下のような順序で話が進みます。 1. Node.js(Express)でWebサーバを構築 2. 訪問者がWebサイトに訪れる 3. ブラウザはHTMLファイルを貰うためにHTTPリクエストを送信 4. 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(エンドポイント)を実装する必要がありますので、2つ合わせたコストが実装コストになるので非常に大変です。 実際にコードを使って示していくと1冊の本みたいな情報量になりますので、 JavaScriptやAjax、Node.jsでのWebアプリ等の書籍を購入して勉強してください。