node.jsでmysqlに接続する

Question

windows10にnode.jsとmysqlのモジュールをインストールしました。

mysql.jsの

const mysql = require('mysql');

の行で下記のエラーが起こります。

Uncaught ReferenceError: require is not defined

インストーラでインストールしたので、パスも通っております（確認済み）。
node-v9.0.0-x64.msi

調べた限りでは、
browserifyを使用するとか、bundle.jsを使用するなど書かれているのですが、敷居が高く、どなたか教えて頂けないでしょうか。

node.jsバージョン

C:\Users****>npm --version
5.5.1

mysqlモジュールのインストール

C:\Users****>npm install mysql

インストール後(mssqlもインストール)

C:\Users****>npm ls
personal@1.0.0 C:\Users****
+-- mssql@4.1.0
| +-- debug@2.6.9
| | `-- ms@2.0.0
| +-- generic-pool@3.2.0
| `-- tedious@2.0.1
|   +-- babel-runtime@6.26.0
|   | +-- core-js@2.5.1
|   | `-- regenerator-runtime@0.11.0
|   +-- big-number@0.3.1
|   +-- bl@1.2.1
|   | `-- readable-stream@2.3.3 deduped
|   +-- iconv-lite@0.4.19
|   +-- readable-stream@2.3.3 deduped
|   `-- sprintf@0.1.5
`-- mysql@2.15.0
  +-- bignumber.js@4.0.4
  +-- readable-stream@2.3.3
  | +-- core-util-is@1.0.2
  | +-- inherits@2.0.3
  | +-- isarray@1.0.0
  | +-- process-nextick-args@1.0.7
  | +-- safe-buffer@5.1.1 deduped
  | +-- string_decoder@1.0.3
  | | `-- safe-buffer@5.1.1 deduped
  | `-- util-deprecate@1.0.2
  +-- safe-buffer@5.1.1
  `-- sqlstring@2.3.0

mysql.js

//requireの設定
const mysql = require('mysql');

// MySQLとのコネクションの作成
const connection = mysql.createConnection({
  host    : 'localhost',
  user    : '****',
  password: '****',
  database: 'testdb'
});

//レコード取得
function qSelect(){

  // 接続
  connection.connect();

  //レコード取得
  connection.query('SELECT * from testTb;', function (err, rows, fields) {
    if (err) { console.log('err: ' + err); } 

    console.log('name: ' + rows[0].name);
    console.log('id: ' + rows[0].id);

  });

  //接続終了
  connection.end();
}

Comments

[退会済みユーザー]

敷居が高いという日本語表現がそもそも間違ってます

Answer 1

browserifyを使用するとか、bundle.jsを使用するなど書かれているのですが、敷居が高く、どなたか教えて頂けないでしょうか。

この一文が引っかかる。

もしかして、index.htmlに<script src="mysql.js"></script>みたいなタグを仕込んで
ブラウザ上で使おうとしていない？
もしそうなら下記の理由が合わさり不可能。

• ブラウザー上で使うJavaScriptにはそもそもrequireがない
• JavaScriptは言語構造として他のファイルにアクセスしたり、他のネットワークに接続しにいく手段を持たない
• ただし、AjaxというHTTP通信を行い後付でリソースを取得する事だけはブラウザーのAPIを利用して行う事が可能

---

Node.jsの概念

Node.jsはGoogleがV8エンジンをオープンソースとして公開したから、
これをハックしてローカルで動かせばJavaScriptが動くぞというプロジェクト。

でも、JavaScriptには言語構造としてファイルを読み書きしたり、
ネットワークにアクセスする機能を持たない欠点があった。

そこでNode.jsのプロジェクトメンバー達は
「じゃあその部分をC++で書いて呼べるようにすればよくね？」
とC++で足りない機能を実装して解決した。

MySQLプロジェクトのJSファイルを開くと、require('net')と書いてある行がある。
これはC++のnetモジュール(TCP通信を行う)を読み込んで動作させる為、JavaScriptではどうあがいても無理。

---

browserifyを使用するとか、bundle.jsを使用する

こっちも気になると思うから概念だけ触れておこうか

browserifyはNode.jsの世界で採用されているrequire機能を無理やりJavaScript世界に持ってくる機能を持ったコンパイラ。

Browserifyを使ってJSファイルをコンパイルすると、
まずそのJSファイルのソースコードをスキャンして、requireが書かれている行を読み取り依存JSファイルを集めて1個のファイルに凝縮する。
物理的には1個のファイルになるが、関数を使って上手く分離されており、お互いにお互いの変数等の領域にはアクセスは出来ない。

更にグローバル領域にrequireという関数を宣言して、
require('xxx')というコードが実行された時だけ各ファイルの中身を実行して機能を呼び出す事が出来るようになっている。

もちろん、ブラウザー上で吐き出されたファイルを実行しても
C++で書かれた機能にアクセスすることは出来ず、
netモジュール等に依存しているnpmモジュールは利用することが出来ない。

---

で、どうすればいいの？

実装が二段階になるけどしょうがないね。

• JavaScriptは代わりにMySQLと通信してくださいという、Ajax(単なるHTTPリクエスト)を投げる
• Node.jsやPHP等のWebサーバーを構築。HTTPリクエストを受け取り、代わりにMySQLと通信を行いJavaScriptに結果を返す

Comments

[uer03108]

詳しいご回答有難うございましたm(_ _)m
ざっくりいうと、
　sample.js ⇔ Node.js ⇔ C++のモジュール？
という流れで、C++の機能をjavascriptで使えるようにするということでしょうか。

　仰る通り、index.htmlからsample.jsを呼び出してDB操作を行おうとしておりました。
結論から言うとこの使い方は出来ないと言うことで宜しいのでしょうか。
　jspやPHPなどで、サーバ側からhtmlに大量のデータを渡す方法を考えており、直接javascriptでDBを呼び出せば効率的かなと思い、node.jsを調べておりました。

<input type="hidden" id="idBigData" value"大量のデータ">

の様な使い方をすると画面が重たくなると思うので。

[uer03108]

Ajaxを使えば出来そうなことが分かってきました。
この場合は、inputタグを介してのやり取りになるのでしょうか？

[miyabi-sun]

決め打ちのエスパー回答だったから、合っててよかった！

> 仰る通り、index.htmlからsample.jsを呼び出してDB操作を行おうとしておりました。
> 結論から言うとこの使い方は出来ないと言うことで宜しいのでしょうか。
不可能、回答欄でも触れたようにブラウザーからはMySQLサーバーと自力でTCP通信を行う事はできないから。

> この場合は、inputタグを介してのやり取りになるのでしょうか？
いいや、JavaScript側はAjaxでサーバに通信して、JSONファイルを受け取る。
Ajax通信完了で帰ってきた結果は関数で受け取り、DOMツリーを操作して画面に表示する。
例えばループ文を回して1個ずつテーブルタグに挿入していくといったやり方だね。

具体的なイメージはこの辺の記事を参照するとイメージし易いかも。
https://qiita.com/juck_14/items/5c63c768c2a0b560ec2c

Ajaxで取りに行く場合はフォーマットが微妙で扱いづらいHTMLではなく、JavaScriptが解釈しやすいJSON様式の文字列を表示するようにすればいいわけだね。
あとはQiitaの記事の`function(result){}`の部分で、`console.log(result);`等として開くと、多分resultにはJSONを解釈して配列やオブジェクトに変換された後の値が入ってると思う。

それをループを回しながら、DOM操作で1行ずつテーブル等に展開して画面表示を行えばやりたい事が出来ると思うよ。

---

ただし、特定条件で動的に絞り込みたい場合、HTML内にinputのフォームを用意して、そこから抽出してAjaxリクエストを加工するようなやり方がある。

var user_name = $('input.user_name').value()
var path = "http://example.com/users?user_name=" + user_name
$.ajax(.....) // Ajax通信を実行

こんな感じ

[uer03108]

ご回答有難うございました。
恐らく理解できたと思います。
簡単に説明すると下記の様なJSON形式で出力してくれるサイトURLにajaxでアクセスするとJSON形式のレスポンスを取得できると言うことですね。
必要であればパラメータを投げて。

// JSON形式で出力する
header('Content-Type: application/json');
echo json_encode( $users );

確かに間接的にjavascriptからDBにアクセス出来ていることになりますね。

下記のサイトが参考になりました（書いていることは同じですが）。
http://webcake.no003.info/webdesign/jquery-ajax-php-json-sample.html

データ提供側と受け取り側のページを分けることが出来るのは、個人的にとても便利な気がします。必要な分だけデータを取ってこれるし。

セキュリティについて確認させて頂きたいのですが、
これは、データ提供側にログインセッションを持たせて、アクセスを制限させることは出来るのでしょうか。出来そうな感じですが。

とても役立ちました。
有難うございます。

[miyabi-sun]

あれ、回答したつもりになってた。

> セキュリティについて確認させて頂きたいのですが、
> これは、データ提供側にログインセッションを持たせて、アクセスを制限させることは出来るのでしょうか。出来そうな感じですが。

可能。
ブラウザーはWebサーバにリクエストを投げる時に、所持しているcookieの情報を全て投げる。
これはAjaxを使って裏で非同期通信を行うときも同様。

[uer03108]

有難うございますm(_ _)m
一応、サンプル作って動作確認できました。