JavaScriptを使ってデータベース操作を行う

JavaScriptを使ってデータベースを操作し、そのコードをHTML中に埋め込みたいと考えています。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <link rel="stylesheet" type="text/css" href="style.css">
6        <title>Charjs test</title>
7        <script type="text/javascript" src="js/make_chart_from_db.js"></script>
8    </head>
9    <body>
10        <button onclick="create()">Create Database</button>
11    </body>
12</html>

javascript
1function create(){
2    var sqlite = require('sqlite3').verbose();
3    var db = new sqlite.Database('tests.sqlite');
4
5    db.serialize(function() {
6        db.run('create table if not exists students(name text, age int)');
7
8        var stmt = db.prepare('insert into students values(?,?)');
9        stmt.run(["Tanaka", 12]);
10        stmt.run(["Sato", 13]);
11        stmt.finalize();
12    })
13
14    db.close();
15}

HTML上ではボタンを作って押されるとデータベースが作成されるようにしたいと考えています。しかし、この状態でボタンを押しても何も起こりません。

最初は関数自体に問題があるのではないかと思い、JavaScriptコード内でcreate()を実行してみると問題なく動作しました。また、試しに関数内部でdocument.write()を使って適当な文字を出力してみましたがそれも問題なく動作しました。なので、関数が呼び出されていないということもないと考えています。

期待される動作を実現するためにはどこを修正すべきでしょうか。よろしくお願いいたします。

追記

コンソールでエラー表示すると次のような表示が出てきました。

make_chart_from_db.js:17 Uncaught ReferenceError: require is not defined
    at create (make_chart_from_db.js:17)
    at HTMLButtonElement.onclick (make_chart.html:11)

17行目はrequire(...)の行です。

m.ts10806

2018/12/09 05:24

本当に呼び出されてないならクリック事にコンソールにエラーが出ているはずなのでご確認を。結果を質問本文に提示してください

Yhaya

2018/12/09 05:29

HTMLファイルをブラウザを使って開いているので、コンソールは現れないのですが、どのようにしたらクリックしたときのエラーを見ることができるでしょうか。初心者でまだよく分かっていなくてすみません

m.ts10806

2018/12/09 05:34

F12キーで「開発ツール」が起動するのでそこから「コンソール」タブを開いてください。

m.ts10806

2018/12/09 05:35

ブラウザの開発ツールです

Yhaya

2018/12/09 05:37

ご丁寧にありがとうございます。エラー表示の追加をいたしました

kei344

2018/12/09 05:38

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

行動規範の内容に同意します

回答1件

ベストアンサー

そもそもですがデータベースはサーバーサイドの機能であり、
クライアントサイドの機能であるJavaScriptは標準では使えません。
requireもサーバーサイドの機能の1つと言っても良いです。
エラー内容の意味を調べるとわかるかと思いますが、標準で搭載されていないrequire()という機能を使おうとしているために今回のエラーが起きています。

サーバーサイドで動作させるNode.jsを導入するのが確実です。
下記のような記事を参考にすると良いです。

「いやNode.jsとか環境準備できないし・・・」というのであれば
PHPなどの言語をAjaxで実行しデータベースにアプローチする方法があります。
いずれにしてもサーバーサイドの言語の知識・技術が必要です。

投稿2018/12/09 05:42

編集2018/12/09 05:45

m.ts10806

総合スコア80854