vue（nodejs)を使ってSQLite3を使いたい。

前提・実現したいこと

初学者です。
現在VSCODEを利用し、JSONデータをSQLiteに保存し、必要なデータをVUEを使い表示させたいと思っています。
VSCODEで、

npm
1npm install sqlite3

でモジュール組み込み、sql.dbというファイルを追加し、open database でSQLITE EXPROLERを
開き、NEW Queryで

CREATE TABLE activitylogs([id] [integer] PRIMARY KEY AUTOINCREMENT NOT NULL, [created_at] [datetime] NOT NULL, [type] [int] NULL, [owners_hash] [char](64) NULL );

で、テーブルを作成。SQLITE EXPROLERでテーブル作成を確認

INSERT INTO activitylogs([created_at], [type], [owners_hash] ) VALUES('2017/09/12', 111, 'nyan1nyan2nyan3nayn4nayn5nyan6ny');

上記クエリをRUNして、テーブル内にデータが追加されたことも確認。
ここまでは、@hoshimadoさんの
https://qiita.com/hoshimado/items/9ea479b97ba9b16cadda　を参考にしました。

あとは、データを取得するところ！
と思いました。
上記参考にも書かれていたのですが、公式ドキュメントから確認しようと思い
http://www.sqlitetutorial.net/sqlite-nodejs/connect/
にて、

const sqlite3 = require('sqlite3').verbose();

をmain.jsに追加したところエラーになりました。

発生している問題・エラーメッセージ

index.js?2f37:3 Uncaught TypeError: Cannot read property '_handle' of undefined
    at eval (index.js?2f37:3)
    at Array.forEach (<anonymous>)
    at module.exports (index.js?2f37:2)
    at Object.eval (log.js?8c68:11)
    at eval (log.js:311)
    at Object../node_modules/npmlog/log.js (app.js:11742)
    at __webpack_require__ (app.js:790)
    at fn (app.js:101)
    at Object.eval (node-pre-gyp.js?95bb:16)
    at eval (node-pre-gyp.js:205)

該当のソースコード

javascript
1main.js
2import Vue from 'vue'
3import App from './App.vue'
4
5Vue.config.productionTip = false
6const sqlite3 = require('sqlite3').verbose();  //ここです。
7new Vue({
8  render: h => h(App),
9}).$mount('#app')
10

試したこと

Vueの、コンポーネント側にボタンを作り、
単純に上記　

const sqlite3 = require('sqlite3').verbose();

だけ走らせても同様のエラーとなりました。
もしかしたら、根本的に間違ったやり方をしているのかもしれませんが
教えていただければ助かります。

補足情報（FW/ツールのバージョンなど）

VSCODE

退会済みユーザー

2021/07/01 03:30

お使いのnode.jsのバージョンは何でしょうか。 https://www.npmjs.com/package/sqlite3 を見るとサポートされている Node.jsのバージョンは v11.x, v12.x, v13.x and v14.x.　とあります。またhttps://github.com/mapbox/node-sqlite3/issues/1280 で「Nodeのバージョンを15から14にしたら解決した」とのコメントがあります。

latte217

2021/07/01 04:26

失礼いたしました。取り急ぎnodeのバージョンはv12.19.0 でした。

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

回答1件

ベストアンサー

const sqlite3 = require('sqlite3').verbose(); //ここです

無理です！
以下その理由と代替案を考えていきましょう。

まず無理な理由の前にJavaScript→Node.jsの歴史から

元々ブラウザに引っ付いているJavaScriptは四則演算やって
ブラウザ内に存在するDOMツリーをAPI越しに編集して画面の更新を促す為の言語です。
なのでRubyやPythonのような汎用スクリプト言語として動かすには様々な機能が不足しています。
だって要らないんだもん。

んで、JavaScriptでRubyと同じ事がやりたい！って言った変人が居て
足りない機能をC++製のモジュールを作って組み込みんで出来たのがNode.jsです。

そのNode.jsは作りが優秀で普及していきます。
require周りとか元ネタのJavaScriptでも使いたいよね。
でも素のJavaScriptにはrequireなんて無いから「そんな関数ねーよ」エラーで落ちてしまう。

じゃあJSファイルを精査して、コードを１個のファイルに固めてしまって
そして適当にでっちあげた自作のrequire関数をかぶせてやれば
Node.js風のJavaScriptが実現するやん！
この用途で作られたのがWebpackやBrowserifyというライブラリです。

現在Node.jsでVueのシステムを作って
ブラウザでページを閲覧出来るのはWebpackのおかげです。

なぜsqlite3がJavaScriptで使えないか？

sqlite3はそもそもC言語で作られています。
インストールするのにC言語のコードをコンパイルしてNode.jsに組み込む
node-gypの力を借りなければインストール出来ません。

まぁC言語の実行ファイルは使えんわな……という訳で
sqlite3はJavaScriptへ持っていけません。

他にもNode.jsで追加されたfsやnet、http等のモジュールも
C++製の実行ファイルなのでJavaScriptには持っていけません。
どこかしらでエラー等が出て動作しなくなります。

npmで配布されているライブラリでもJSに移植出来るものと不可能なものがあり、
これはREADME.md等の説明書きを読みながら判断するしかありません。

※Emscripten等のライブラリを使ってC言語からJS(WebAssembly)にコンパイルする技術は存在します。
移植後にインメモリデータベースモードで動かせばJavaScript上でsqlite3を動かす事は技術的に可能だろうと思います。
しかし仮にそこでエラー等が出ても誰も何もアドバイス出来ないのでオススメしません。
そもそもJSはリロードしたらデータが吹っ飛ぶので、実現した所でそんな役に立つとは思えませんし。

代替案の前にJavaScriptの限界の話

JavaScriptの目的はDOMの更新です。
PC自体のファイルや資源を扱う権限が殆ど無いんですよね。

Webサイトは長い歴史の中で悪意のコードを挿し込まれて
Webサイトを開くだけでPCがフリーズして落ちたり
PC内のファイルを複製してしまう等の事が懸念されていました。

そういった歴史の中で、
JSにはDOMの更新以外の事をさせてはならないといった暗黙のルールのようなものが出来上がり、
HTML5でその制約はかなりゆるくなったとはいえ、一々ユーザーにダイアログでお伺いを立てなければならないなど、使い勝手が悪いと言わざるをえません。

具体的な代替案

そんなJSに残った唯一出来る事は
裏でHTTPリクエストを飛ばすAjaxと呼ばれる技術です。

sqlite3を使うのは裏に居るWebサーバーにしておきます。
Express.js等でWebサーバを構築して
「このURLにHTTPリクエストを送ったら、私が代わりにsqlite3にアクセスしてデータを読み書きしてあげるよ」というシステムを構築します。

そうしておけば
JSはAjaxをそのURLに送って擬似的にsqlite3を操る事が可能となります。

まぁ、Webサーバを立ち上げてそこでsqlite3を操るってことは
負荷はWebサーバに集中するわけですし、それによる費用とかセキュリティとか諸々。
当初の話とは違う！みたいな事になるわけですから、要件を元に考え直した方が良いでしょうね。

投稿2021/07/01 04:13

編集2021/07/01 04:18

miyabi-sun

総合スコア21203

latte217

2021/07/01 04:42

miyabi-sun 非常にご丁寧な回答ありがとうございます。そもそも無理なことをやろうとしていたということですね・・・・・歴史的背景等も教えていただき感謝です。Ａｊａｘは触ったことがないですが、勉強してみます。 const sqlite3 = require('sqlite3').verbose(); //ここですお恥ずかしい話ですが、↑　のコードは、公式ドキュメントに記載があったものなのですが本来は、どういうところ（jacascriptファイルではないということですよね）に書くものなのでしょうか・・・初心者過ぎて申し訳ありません。

miyabi-sun

2021/07/01 07:05

Node.jsはコマンドラインツールとして動作します。 https://jsprimer.net/use-case/nodecli/helloworld/ Node.jsをインストールすると`node`コマンドが使えるようになります。また、パッケージ管理ツールの`npm`コマンドも使えるようになります。 Node.jsはRubyのような汎用スクリプト言語で拡張子は`.js`になります。 ``` # package.jsonというプロジェクトの設計図的なファイルを準備する # 既にあるなら不要 $ npm init --yes # npmコマンドを使ってsqlite3モジュールをインストールする # package.jsonにsqlite3モジュールを導入した事を勝手に記述してくれる $ npm install sqlite3 # 例としてindex.jsファイルを作成して質問文のようなコードを記述した状態で実行 # ファイル名はappだったり、まぁ妥当と思われるものを入れればOK $ node index.js ```

latte217

2021/07/01 23:12

miyabi-sun様非常に丁寧なご説明ありがとうございます。 Node.jsのことがまだまだ勉強必要ですが、意味が分かりました。コマンドラインから、教えていただいた内容でテストさせていただききちんとsqliteが格納され、データベースとして認識できていることを確認できました！ありがとうございます。引き続きコーディングしていきますので、またつまづいた際にはご指導お願いいたします。！

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