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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

1099閲覧

HTMLにおけるJavascriptの変数の扱いについて

Tanaka2319

総合スコア19

Node.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/05/07 00:01

Node.js、HtmlによるWebサイト制作に関して質問があります。

私は、Node.js・htmlに関して、詳しくないのですが、
Node.js上で定義した変数はHtmlで参照するにはどうしたらよいのでしょうか?

よろしくお願いします

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2019/05/07 00:07

具体的に、どのような使い方をしたいのでしょうか。
m.ts10806

2019/05/07 00:40

htmlは静的な言語なので変数という概念は持ちません。どのようなサイトでどう使おうとしているのか、また自身がやってみたこと調べたことを具体的に記載してください
arasi

2019/05/07 01:07

質問文はJavascriptの変数ではなくnode.jsの変数とした方が意味が通じます
miyabi-sun

2019/05/07 04:29

質問文として良くなりましたね、ナイス。
guest

回答3

0

ベストアンサー

これを実現するには、
まず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を使えばこういう事は簡単に出来るようになるので学習してみても良いですね。

投稿2019/05/07 04:43

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

htmlは原則リテラルしか表示できないのでnodeで変数をhtml上に出力すればよいのでは?
もしくはjsでconsoleに吐くようにnodeで出力するとか

投稿2019/05/07 00:27

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

node.jsだったらejsを入れてindex.ejsなどのファイル名にして
<%= 変数名%>
にして出力します。

投稿2019/05/07 01:06

arasi

総合スコア156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問