質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • Node.js

    2360questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Express

    301questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 121

mie0224

score 23

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(□□□)」のような感じです。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

これはそもそも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アプリ等の書籍を購入して勉強してください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/29 17:14

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

    キャンセル

  • 2019/03/29 17:25 編集

    あー、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と同じ構文を使えるだけで、明確に違うものと覚えておくと良いかもね。

    キャンセル

  • 2019/04/01 14:51

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

    キャンセル

同じタグがついた質問を見る

  • Node.js

    2360questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Express

    301questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。