ElectronでDB(MySQL)に接続してみた

2016.05.23

はじめに

好物はインフラとフロントエンドのかじわらゆたかです。
「Electron 1.0でデスクトップアプリ開発超入門――動作の仕組み、基本的な使い方、セキュリティの懸念点」を @IT に寄稿しました! | Developers.IOを見てて、これでDB(MySQL)に接続ってできたりするのかなと思い検証してみました。

環境構築

今回用いた環境は下記となります。

  • OS : OSX El Capitan (10.11.4)
  • Node.js 5.10.1
  • MySQL : 5.7.11

DB接続のライブラリの追加

今回はElectronの雛形として、electron-quick-startを用います。
Electronのオフィシャルサイトそのまんまですが、以下で導入が可能です。

$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start

次に、ElectronではNode.jsのモジュールが使えますので、MySQLのNode.jsのクライアントを導入します。

$ npm install mysql --save

次に、画面のHTMLとロジックのJavasacriptを記載していきます。

index.html

    <button elc-js="ExecuteQUeryBtn">SELECT * FROM electronSample</button>
    <table border="" elc-js="SelectResultTbl">
        <thead>
            <tr>
                <th>message</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

まず、html側にMySQLへのQueryを実行するボタンとその結果を表示するTableを記載します。
至って普通のHTMLになります。

renderer.js

(function(){
    let clickEventName = 'click';
    let clickButtonEventHandler = function(){
        let mysql      = require('mysql');
        let connection = mysql.createConnection({
            host     : 'localhost',
            user     : 'root',
            password : '',
            database : 'sample'
        });
        connection.connect();

        connection.query('SELECT * FROM electronSample;', function(err, rows, fields) {
            if (err) throw err;
            if(rows.length > 0){
                let table = document.querySelectorAll('[elc-js=SelectResultTbl]')[0]
                let tableBody = table.querySelectorAll('tbody')[0];
                tableBody.innerHTML = '';
                tableBody.insertAdjacentHTML('beforeend','<tr><td>' + rows[0].message + '</td></tr>');
            }
        });

        connection.end();
    };
    document.querySelectorAll('[elc-js=ExecuteQUeryBtn]')[0].addEventListener(clickEventName, clickButtonEventHandler);
}());

ボタン押下の挙動を書いていくのですが、基本はWebでフロントエンドを実装する時と変わらないのですが、
electronの特徴としてNode.jsのモジュールを使うことができるため、
クリック押下時にMySQLのモジュールを用いてMySQLに対してSelect文を実行させることが可能です。
また、モジュールの読み込みはNode.jsで書く時と同様requireで行うことが可能です。
乱暴に言うならば、Webのフロントエンド内にNode.jsのコードを書くことが可能といった形になります。

テーブル作成とデータ挿入を実施

DROP TABLE IF EXISTS sample.electronSample CASCADE;
CREATE TABLE sample.electronSample (
    message  character varying(1000)
);
INSERT INTO sample.electronSample VALUES('MySQLからこんにちわ');

最後に、MySQL側にElectron側から呼び出すテーブルとそのデータを作っておきます。

動作確認

Electron_MySQL この状態で、electronの画面からボタンを押下するとMySQLのテーブルに登録された文言が表示されることになります。

結論

Node.jsを容易にフロントエンド側から呼ぶことができることがわかりました。
Electronを用いることで、様々なNode.jsのモジュールをフロントエンドと容易に組み合わせることができそうです。

ただ、現行の実装では、DBの接続情報がソースコード内にベタ打ちなのはセキュリティ的に問題がありそうです。
この辺については、問題がないのか・問題があるならばその対応方法はどのようにすればよいのかは調べておく必要がありそうです。

参考サイト

Electron
felixge/node-mysql: A pure node.js JavaScript Client implementing the MySql protocol.
Electron 1.0でデスクトップアプリ開発超入門――動作の仕組み、基本的な使い方、セキュリティの懸念点 (3/3) - @IT
You-Dont-Need-jQuery/README-ja.md at master · oneuijs/You-Dont-Need-jQuery