編集履歴

回答編集履歴

Webブラウザ→Webサーバ

2020/12/24 12:08

投稿

スコア21203

test CHANGED Viewed

@@ -364,9 +364,9 @@
 JS上のonchangeイベントは
-Webブラウザとは何の関係もありません。
+Webサーバとは何の関係もありません。
-Webブラウザの仕事はHTTPリクエストを待ち受け、適切なHTTPレスポンスを返すことだけが仕事です。
+Webサーバの仕事はHTTPリクエストを待ち受け、適切なHTTPレスポンスを返すことだけが仕事です。
 ブラウザがHTMLを受け取って画面を描画している時点でWebサーバの仕事は終わっています。

イベントに関しての追記を追加

2020/12/24 12:08

投稿

miyabi-sun

スコア21203

test CHANGED Viewed

@@ -343,3 +343,173 @@
 こういう感じになっていくはずです。
+---
+> htmlのテキストボックスのonchangeイベントをnode.jsで処理する方法はあるでしょうか？
+ありません。
+まぁ、言いたい内容はわかりますし実現は出来るんですが、
+どのレイヤーかをちゃんと押さえておく必要があります。
+JS上のonchangeイベントは
+Webブラウザとは何の関係もありません。
+Webブラウザの仕事はHTTPリクエストを待ち受け、適切なHTTPレスポンスを返すことだけが仕事です。
+ブラウザがHTMLを受け取って画面を描画している時点でWebサーバの仕事は終わっています。
+JavaScript(以下JS)とNode.jsこれは全く違うものです。
+ブラウザがHTMLを受取り、DOMツリー構築を行い画面レンダリングを行った後に、
+DOMツリーを後から書き換えて画面の更新をするものがJSです。
+JSにはブラウザ上でDOMを書き換える機能しかありません。
+Node.jsはJSをRubyやPythonのような汎用スクリプト言語として使いたい人が居まして、
+変数や配列等のメモリ確保等の機能はGoogle社が開発しているV8エンジンを借りてきて
+C++で作ったOSの機能を使うモジュール、ファイルの読み書き、外部ライブラリ読み込み、自由なネットワーク通信などなど……の機能を継ぎ足して完成した魔改造JSがNode.jsです。
+Node.jsというJSファイルが動作する汎用スクリプト言語は人気が出ましたが、
+JSそのものはブラウザ上でDOMツリーを書き換える言語でしかありません。
+それが質問に対する回答「ありません」になります。
+じゃあそれをどうやって実現させるか？
+- [Ajax](https://ja.wikipedia.org/wiki/Ajax)
+- [WebSocket](https://developer.mozilla.org/ja/docs/Web/API/WebSockets_API)
+基本的にはAjaxを実装する方針が無難です。
+JSではブラウザの力を借りてHTTPリクエストを飛ばす事が出来ます。
+ブラウザに渡すHTMLをこんなふうに作っておきます。
+すると、`div`要素をクリックすると、
+[Fetch API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)の機能を使ってWebサーバの`/api/data`にデータを取りに行きます。
+```html
+<script>
+const getData = () => {
+  // JSONを期待して変換するロジックを組んでみた
+  fetch("/api/data")
+    .then(res => res.json())
+    .then(data => {
+      console.log(data);
+    });
+}
+</script>
+<div onclick="getData()">
+  aaa
+</div>
+```
+Node.jsのWebサーバも準備しましょう。
+上記では`/api/data`に向かってHTTPリクエストを出しているはずなので、
+`/api/data`のパスにHTTPリクエストが飛んできたら受け取れるようにしておきます。
+```js
+const express = require("express");
+const app = express();
+const port = 3000; // まずは3000番等で様子見
+app.get('/', (req, res) => {
+  res.send('Hello World!')
+});
+app.get('/api/data', (req, res) => {
+  // こんな風にJSONを返す
+  res.json({
+    id: 1,
+    name: "taro"
+  });
+})
+app.listen(port, () => {
+  console.log(`Example app listening at http://localhost:${port}`)
+});
+```
+このような流れを設計・作成し、
+二人三脚で作っていく形になります。