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

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

ただいまの
回答率

90.84%

  • jQuery

    6162questions

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

  • Node.js

    1680questions

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

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

解決済

回答 1

投稿

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

jaaaaack

score 30

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

server.js

const http = require('http');
const fs   = require('fs');
const querystring = require('querystring');
const path = require('path');
const express = require('express');
const port = 4000;
const session = require('express-session');
const mysql      = require('mysql');
const connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : 'password',
    database : 'database'
});
const mime = {
  ".html": "text/html",
  ".css":  "text/css",
  ".js":  "text/plain"
};

var http_server = new http.createServer(function(req, res) {
  if (req.url == '/') {
    filePath = '/index.html';
  } else {
    filePath = req.url;
  }
  var fullPath = __dirname + filePath;

  res.writeHead(200, {"Content-Type": mime[path.extname(fullPath)] || "text/plain"});
  fs.readFile(fullPath, function(err, data) {
    if (err) {
    } else {
      res.end(data, 'UTF-8');
    }
  });
}).listen(port);

//Socket.ioコネクション
const io = require('socket.io').listen(http_server);

connection.connect();

let sql = 'select * from score_name';
connection.query(sql, (err, rows, fields) => {
  console.log('test_userテーブル: ', rows[0].score_name_value);
  const value = rows[0].score_name_value;
  exports.value = value;
});
connection.end();


front.js

var parts = require('./server.js');
console.log(parts.value);
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

要望とコードを見ましたが、そもそも要望に対して実現方法が噛み合ってません。
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

const express = require('express');
const port = 4000;
const mysql = require('mysql2');
const connection = mysql.createPool({
    connectionLimit: 3, // 常に張り続けるコネクション数、とりあえず3本にしてみた 
    host     : 'localhost',
    user     : 'root',
    password : 'password',
    database : 'database'
});

const app = express();
app.use(express.static('public')); // `node server.js`で起動したカレントディレクトリから./publicの場所が静的ファイルの提供ディレクトリと紐づく
app.get('/score_name', (req, res) => { // アロー関数で記述
  const sql = 'select * from score_name';
  const values = [];
  connection.query(sql, values, (err, rows) => {
    res.json(rows); // Ajax通信で訪れた通信へのレスポンス
  });
});
app.listen(port);

front.js

$.ajax({url: '/score_name', type: 'GET'})
  .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を包んでも無駄ってわけですね。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • jQuery

    6162questions

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

  • Node.js

    1680questions

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