これを実現するには、
まずChromeなどのブラウザとWebサーバの関係を勉強しなければなりません。
軽く解説します。
JavaScriptはブラウザ上でDOMツリーを編集する目的で作られたスクリプト言語です。
Node.jsはブラウザ関係なくパソコン内で実行しようとV8エンジンとC++のモジュールを山程組み合わせて作った汎用スクリプト言語です。
Node.jsはWebサーバ機能を搭載しており(RubyやPythonなんかも持ってますが)、高速なWebサーバを構築することも可能です。
この辺は既に理解できているかと思います。
ブラウザはWebサーバにHTTPリクエストを送信し、
HTMLファイルを下さいと問い合わせます。
ブラウザは持ち帰ったHTMLを解析しながらDOMツリーを生成して画面を構築します。
その中にscript
タグを見つけたら、JavaScriptを呼び出して実行していきます。
この間にそれ以上の関係はないので、
Webサーバが持っている変数とかメモリの値とかはブラウザには知ったことではありません。
ブラウザはWebサーバからHTMLを受け取り淡々と実行するだけです。
要するに、Node.jsからブラウザが実行するJavaScriptに値を渡す方法はありません。
じゃあどうするかが本題になります。
大まかには下記の2通りの方法が存在します。
- JavaScriptのコードを書いてHTMLとして包んで返す
- Ajaxを使い別口で取得できるようにする
後者はAjax絡みでまた勉強していただくとして、
前者は単純なので解説して締めます。
Node.jsのWebサーバはHTTPリクエストを待ち、HTML的な文字列を返します。
でも、なんでNode.jsでWebサーバやってるんですかね?
これの目的は動的なHTMLの生成なはずです…動的なHTMLの生成……?そうか!!
HTML
1<html>
2<head>
3 <script>
4 var hogehoge = ""; // Node.jsの動的なHTMLを生成出来る機能を利用して物理的に記述
5 </script>
6</head>
7</html>
こんな風に変数が盛り込まれたHTMLを生成して、ブラウザに投げ返してやることで、
擬似的に変数を載せる事が可能となります。
テンプレート言語のEJSやPugを使えばこういう事は簡単に出来るようになるので学習してみても良いですね。