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

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

ただいまの
回答率

91.03%

  • JavaScript

    13797questions

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

  • MySQL

    5087questions

    MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

  • Node.js

    1549questions

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

node.jsでmysqlに接続する

解決済

回答 1

投稿

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

uer03108

score 81

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();
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2017/11/02 21:29

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

    キャンセル

回答 1

checkベストアンサー

+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に結果を返す

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/03 12:42

    詳しいご回答有難うございました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"大量のデータ">

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

    キャンセル

  • 2017/11/03 13:36

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

    キャンセル

  • 2017/11/03 20:23

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

    > 仰る通り、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通信を実行

    こんな感じ

    キャンセル

  • 2017/11/04 01:17

    ご回答有難うございました。
    恐らく理解できたと思います。
    簡単に説明すると下記の様な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

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

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

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

    キャンセル

  • 2017/11/05 15:27

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

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

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

    キャンセル

  • 2017/11/05 22:56

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

    キャンセル

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

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

関連した質問

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

  • JavaScript

    13797questions

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

  • MySQL

    5087questions

    MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

  • Node.js

    1549questions

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