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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

454閲覧

node.jsのexportsを使ってサーバー側のjsをフロント側のjsに表示させたい

jaaaaack

総合スコア38

Node.js

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/12/26 18:13

サーバー側のjs「server.js」で取得したデータベースの値をフロント側に表示したいと思い、exportsを使ってみましたが、フロント側のjs「front.js」でUncaught ReferenceError: require is not definedというエラーが出てしまい、表示することができません。
このような場合、どのようにすれば、サーバーのjsをフロント側で表示することができるのでしょうか。
よろしくお願い致します。

server.js

js

1const http = require('http'); 2const fs = require('fs'); 3const querystring = require('querystring'); 4const path = require('path'); 5const express = require('express'); 6const port = 4000; 7const session = require('express-session'); 8const mysql = require('mysql'); 9const connection = mysql.createConnection({ 10 host : 'localhost', 11 user : 'root', 12 password : 'password', 13 database : 'database' 14}); 15const mime = { 16 ".html": "text/html", 17 ".css": "text/css", 18 ".js": "text/plain" 19}; 20 21var http_server = new http.createServer(function(req, res) { 22 if (req.url == '/') { 23 filePath = '/index.html'; 24 } else { 25 filePath = req.url; 26 } 27 var fullPath = __dirname + filePath; 28 29 res.writeHead(200, {"Content-Type": mime[path.extname(fullPath)] || "text/plain"}); 30 fs.readFile(fullPath, function(err, data) { 31 if (err) { 32 } else { 33 res.end(data, 'UTF-8'); 34 } 35 }); 36}).listen(port); 37 38//Socket.ioコネクション 39const io = require('socket.io').listen(http_server); 40 41connection.connect(); 42 43let sql = 'select * from score_name'; 44connection.query(sql, (err, rows, fields) => { 45 console.log('test_userテーブル: ', rows[0].score_name_value); 46 const value = rows[0].score_name_value; 47 exports.value = value; 48}); 49connection.end(); 50 51

front.js

js

1 2var parts = require('./server.js'); 3console.log(parts.value); 4 5

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

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

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

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

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

guest

回答1

0

ベストアンサー

要望とコードを見ましたが、そもそも要望に対して実現方法が噛み合ってません。
JavaScriptとNode.jsの違いに対してまだあまり詳しくないようなので、
どうするべきか等を盛り込んだ少々重い回答を用意しました。

ざっとレビュー→サンプルコード紹介→解説の流れの順でいきます。

server.js

  • Express.js使ってない、使ってたらそもそもhttpパッケージを利用する必要はない
  • exports.value = value;: 遅延されたコールバック関数の中で行っても動作しない
  • そもそもNode.jsのサーバーはPHPのように一回実行してはい終わりなステートレスな実装じゃないので、イベントループを張り続ける実装にしなければならない
  • mysqlのコネクションは張りっぱなしの方が良いのでcreatePoolを使う
  • mysqlライブラリは遅いので強化版のmysql2を使おう、使い方はmysqlと同じ

front.js

  • Uncaught ReferenceError: require is not defined: ブラウザにはrequireがないから当然
  • 普通にAjax通信を飛ばさなければ使えない、タグにjQueryがあるのでjQueryのAjaxを使おう

同時に静的ファイルの提供をしたいならExpress での静的ファイルの提供を参照
ざーっと書いただけだからどっかでエラーが出るかもしれないけど、これを基準にしてみて。
セッションやリクエストのパースもしたかったようだけど、バッサリ削ったから改めて付け足していってね。

server.js

JavaScript

1const express = require('express'); 2const port = 4000; 3const mysql = require('mysql2'); 4const connection = mysql.createPool({ 5 connectionLimit: 3, // 常に張り続けるコネクション数、とりあえず3本にしてみた 6 host : 'localhost', 7 user : 'root', 8 password : 'password', 9 database : 'database' 10}); 11 12const app = express(); 13app.use(express.static('public')); // `node server.js`で起動したカレントディレクトリから./publicの場所が静的ファイルの提供ディレクトリと紐づく 14app.get('/score_name', (req, res) => { // アロー関数で記述 15 const sql = 'select * from score_name'; 16 const values = []; 17 connection.query(sql, values, (err, rows) => { 18 res.json(rows); // Ajax通信で訪れた通信へのレスポンス 19 }); 20}); 21app.listen(port);

front.js

JavaScript

1$.ajax({url: '/score_name', type: 'GET'}) 2 .done(function (data) { console.log(data) });

以下解説

JavaScriptってのはChromeやFirefoxに搭載されているスクリプト言語。
当然ながら、このJavaScriptが勝手に私やみんなのパソコンに侵入してCドライブの中身を消去し始めたり、勝手にどっかへ持ち出したら困るよね?

そんなセキュリティへの配慮からローカルのファイルを読み書きしたり、他のサーバと自由に通信するような機能は全てカットされているので、プログラミング言語としてみた場合は使い物にならない欠陥品。
流石にそれは不便すぎるというわけでHTML5ではFileAPIってのが実装されたけど、フォームのファイルボタンで指定したファイルしか読み書き出来ない等の強力な制約が付いてるし、AjaxというHTTPリクエスト以外は一切発射出来ない制約はそのまま。

JavaScriptをローカルのマシンで使いたいって要望が出てきて、
ChromeがV8エンジンをオープンソースで公開してくれたから、それにC++で作ったファイル読み書き機能やネットへの通信機能を付け足してrequireで呼べるようにしよっか。
Windows、Mac、Linuxのどれでも動くから、Node.jsという名前にしよう!

つまり、requireはNode.jsが勝手に付け足した機能。
勝手とは言っても、CommonJSという思想は既にあって、Node.jsはそれを採用しただけなんだけどね。


【補足】質問文のタイトルに対しての回答

ブラウザ側にrequireを持ってくるだけなら手段はあります。

その筆頭がBrowserifyWebpackです。
これの実体は関数で区切った1ファイルを用意して、その中に依存ライブラリやソースコードを全てぶち込んで、自作のrequire関数で各コードにアクセスするようにしたものです。

しかし、server.jsではhttpやmysqlといったパッケージに依存していますが、
これは先程の解説で話しているローカルファイルへのアクセスやインターネットの自由な通信に当たる箇所で、C++で書かれています。
なのでJavaScriptの世界へ持ち出したとしても動作はしません。

1ファイルに固めるという所がネックで、今回の質問文には使えません。
front.jsでserver.jsを包んでも無駄ってわけですね。

投稿2017/12/27 02:42

編集2017/12/27 03:35
miyabi-sun

総合スコア21158

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問