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

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

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

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Node.js

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

JavaScript

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

Q&A

0回答

1936閲覧

ElectronでMySQLに接続できない

tomoharu

総合スコア107

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Node.js

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

JavaScript

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

0グッド

2クリップ

投稿2019/05/09 13:36

・やりたいこと:electoronのプロジェクトをmysqlに接続したい。

・環境
OS:Mac
フロント:react
node -v: 10.7.0
electron -v: 5.0.1
MySQL -v: 8.0.12

・起こっているエラー:TypeError: Net.createConnection is not a function
(一番直近のエラーコードは以下):

Connection.connect node_modules/mysql/lib/Connection.js:86 83 | if (!this._connectCalled) { 84 | this._connectCalled = true; // Connect either via a UNIX domain socket or a TCP socket. 85 | > 86 | this._socket = this.config.socketPath ? Net.createConnection(this.config.socketPath) : Net.createConnection(this.config.port, this.config.host); // Connect socket to connection domain | ^ 87 | 88 | if (Events.usingDomains) { 89 | this._socket.domain = this.domain;

・行ったこと:

electronのインストール

#package.json { "name": "youtubist", "version": "0.1.0", "private": true, "dependencies": { "mysql": "^2.17.1", "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "electron": "electron ." }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "electron": "^5.0.1" }, "main": "src/main.js" }

mysqlのインストールとサーバーの開始

npm install mysql mysql.server start

main.jsの記述

const electron = require('electron') const { app, BrowserWindow } = require('electron') const { Net } = require('net') const path = require('path') const url = require('url') let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600 }); mainWindow.loadURL('http://localhost:3000'); mainWindow.on('closed', function(){ mainWindow = null }) } app.on('ready', createWindow) app.on('window-all-closed', function(){ if (process.platform !== 'darwin'){ app.quit(); } }); app.on('activate', function(){ if (mainWindow === null){ createWindow(); } });

レンダラープロセスにて、dbとの接続コードを記述

/*src/register.js*/ import React from 'react'; import ReactDOM from 'react-dom'; import * as serviceWorker from './serviceWorker'; const { Net } = require('net') class Register extends React.Component { connectToDatabase(){ var mysql = require('mysql') var connection = mysql.createConnection({ host: 'localhost', user: 'admin', password: 'password', database: 'youtubist_database' }) connection.connect(); } render() { this.connectToDatabase() return ( <React.Fragment> <input type="text"></input> <button>register</button> </React.Fragment> ) } } export default Register

エラーが出ているのはこのファイルのconnection.connect()です。

・自分の推察:

これはelectronでは無く、nodejsの問題だと思っている。
connectToDatabase()を行う場所がメインプロセスである必要があると思っている。

しかし、一回mainにconnectToDatabse()等を記述したがそもそも実行されない。
connection.connect()の実行に成功したら、console.log("success"),失敗したらconsole.log("fail")とするif文を書いたが、
どちらも画面に出ない。

なにとぞお力添えのほどよろしくお願いします。

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

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

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

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

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

mar-kn

2019/05/10 00:01

const { Net } = require('net') を消してもエラーが出ますか?
tomoharu

2019/05/10 00:18

ご質問ありがとうございます。エラーは出ます。そもそもそのコードはこのエラーを解消できるのでは。。。と推察して書いたコードです。結果は変わりませんでした。。。
mar-kn

2019/05/10 01:20

ご確認ありがとうございます。 >mainにconnectToDatabse()等を記述したがそもそも実行されない。 とありますが、単純なselect文などを発行して、結果を取得するなどは試されましたでしょうか。
tomoharu

2019/05/10 12:07

mar-knさん、miyabi-sunさん お忙しい中、ご確認本当にありがとうございます。本日夜対応が難しいため、明日朝早く試してみますので、その後またご質問いたします。お手数おかけして申し訳ありません。。。。何卒よろしくお願いします。。。。。
tomoharu

2019/05/11 03:43 編集

miyabi-sunさん遅くなりすみませんでした。workbenchを使ってみましたが、問題なく読み書きできました。 ``` USE youtubist_database; INSERT INTO video (title, url) VALUES("exampletitle","exampleurl"); SELECT * from video; ``` 上記が実行文です。 何卒よろしくお願いします。
tomoharu

2019/05/11 03:43 編集

mar-knさん 遅くなり申し訳ありません。 単純なselect文を書こうと思いましたが、そもそもdatabaseにconnectしていない状態で、selectができるのかなと思いました。 ``` class Register extends React.Component { connectToDatabase(){ var mysql = require('mysql') var connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'password', database: 'youtubist_database' }) connection.query('SELECT * from video') } render() { this.connectToDatabase() return ( <React.Fragment> <input type="text"></input> <button>register</button> </React.Fragment> ) } } export default Register ``` とりあえず、上記のように書いてはみましたが、結果は同じでNet.createConnectionエラーが出ます。 何卒よろしくお願いします。
mar-kn

2019/05/13 00:51

main.js にて connectToDatabse を行い、 select文を発行しても、結果が取れなかったかどうかを確認頂けますでしょうか。 mainとレンダラーで差があるのでは?と推察されていて、「mainではそもそも実行されなかった」と書いてあったため、質問しました。 もしmain側でもエラーが出るのであれば、最低限の構成のElectronで接続できるかを確認された方が問題の切り分けが早く進むと思います。
tomoharu

2019/05/13 11:08

ご回答ありがとうございます。メイン側でコードを書いてみたところ、下記エラーが発生しました。 A JavaScript error occurred in the main process Uncaught Exception: TypeError: this.connectToDatabase is not a function at App.createWindow (/Users/username/projects/youtubist/src/main.js:18:7) at App.emit (events.js:199:15) おっしゃる通り、レンダラー側でもメイン側でも同じエラーが起こるので、これはメイン、レンダラー間の差異ではなく、そもそものelectronかnodejsの設定に問題があるかと思いました。取り急ぎご共有いたします。まずは、最低限のelectronで接続確認を試します。そちらが終わり次第、また再度ご相談させてください。お手数ですが何卒よろしくお願いします。 また記述したコードは以下です。 ``` /*main.js*/ const electron = require('electron') const { app, BrowserWindow } = require('electron') const { Net } = require('net') const path = require('path') const url = require('url') let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600 }); mainWindow.loadURL('http://localhost:3000'); mainWindow.on('closed', function(){ mainWindow = null }) this.connectToDatabase(); } function connectToDatabase(){ var mysql = require('mysql') var Connection = mysql.createConnection({ host: 'localhost', user: 'admin', password: 'password', database: 'youtubist_database' }) Connection.connect(); Connection.query('SELECT * from video') } app.on('ready', createWindow) app.on('window-all-closed', function(){ if (process.platform !== 'darwin'){ app.quit(); } }); app.on('activate', function(){ if (mainWindow === null){ createWindow(); } }); ```
mar-kn

2019/05/13 14:33

TypeError: this.connectToDatabase is not a function こちらのエラーは this に connectToDatabase が見つかっていないため発生しているので、 this. を取って、connectToDatabase だけにしたら解決するのではないでしょうか。
tomoharu

2019/05/14 13:36

ありがとうございます。thisをとってみたところ、下記エラーとなりました。おそらくMySQLとの接続エラーです。 ``` A JavaScript error occurred in the main process Uncaught Exception: Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client at Handshake.Sequence._packetToError ``` 次はこの接続方法を当たってみます。お時間取らせて申しわけございません。おそらくver8から実装されたmysqlの認証仕様変更によるものかと思います。これを解決しましたらまたご相談させてください。何卒よろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問