html上でMySQLにアクセス（JavaScript？）してデータを表示させる方法

今AS400でデータ管理（操作のみ）していて、それをWeb（データベース操作）に移行させようと検討しています。
ただ、VBAは使ったことはありますが、Web構築自体が初めてです。
手探りで調べた結果、現時点で以下の状況です。

環境（とりあえずローカル環境でテスト）
Windows11
XAMPP
nodeインストール済み（v20.12.2）←javascriptからsqlを操作するために必要らしいため
expressインストール済み
npmインストール済み（v10.5.0）←パッケージ管理ツールとのこと
mysqlインストール済み（10.4.32）でテスト用のテーブルは作成済み
まずは、Web上でデータを表示（表示形式は不問）させるまでをしたいです。

１．データベースにアクセスして表示させるまでの方法として、初心者にとって何が一番お手軽でしょうか？
楽というのは調べるための情報量が多くて出来れば環境構築が楽という意味です。
（調べて別途javascriptファイルを用意して、html上に埋め込む方法が一般的のようでした）
２．サイトであれば、前提条件の説明が端折られてないものがあれば知りたいです。

↓↓コピペで試して接続はOK
const express = require('express');
const mysql = require('mysql');
const app = express();

app.use(express.static('public'));

// データベース接続情報
const connection = mysql.createConnection({
host: 'localhost',
port: 3306,
user: 'root',
password: '',
database: 'sample'
});

// データベースに接続できたらコンソールにConnectedを表示
connection.connect(function(err) {
if (err) throw err;
console.log('Connected');
});

app.listen(3000);

ご存知の方、ご教示お願い致します。

No.5 回答者： fujillin 回答日時： 2024/04/17 16:25

こんにちは

データベースはmysqlに移行するおつもりであると解釈しました。

どの程度の処理を考えていらっしゃるのか不明ですが、XAMPP環境であればそのままPHPを利用できると思いますし、データを読み出してブラウザに表示するだけであれば、PHPだけで処理が可能ですので簡単ではないでしょうか？
（node等は使わないことになってしまいますが・・）

PHPであれば、Web上にも多くの説明サイトがありますので、検索すれば大抵のことは情報が得られると思います。
（No4様が挙げておられる参考サイトもその一つです）
ただし、ブラウザ表示のためには、最低限のHTML（やCSS)の知識は必要になります。
（これも、説明サイトに記してあるとは思いますが、ご自分の思うようにしたい時には知識が必要になるでしょう）

単純な操作だけであればPHPだけで可能と思いますが、クライアント側のUIを便利にしようとすると、クライアントサイドのjavascriptが必要になるかも知れません。（こちらは、node.jsとは別物です）

この回答へのお礼

お返事有難うございます。
仕組みの知識が足りてないようなので、勉強します。

お礼日時：2024/04/17 16:48

No.4 回答者： rera1016 回答日時： 2024/04/17 15:35

VBAはマクロ、簡易言語なので、表示周りはExcelなりAccessのレンダリング機能に任せればいいですが、Webの場合はそれも自分で組み込まないといけません。

たぶんイメージとしては、クエリーの結果をそのまま表として出すつもりでしょうけど、その部分もプログラミングで生成しないといけません。
console.logはブラウザのでバッグモードでしか確認できず、ブラウザのウィンドウには出せません。

きっちり勉強しないと無理です。
https://qiita.com/Un-s/items/94da6ccdcddd35e394c8

この回答へのお礼

お返事有難うございます。
ご指摘の通り、予想していたのが、ブラウザ上でデータを表示させるために、html上で、MySQLを定義する→接続する→別途用意したJavaScriptファイルを読み込んで（JavaScriptにクエリーを記述）Web上に表示させる（のをローカルで試行錯誤していた）です。
Webの仕組みを勉強します。

お礼日時：2024/04/17 15:52

No.3 回答者： zircon3 回答日時： 2024/04/17 14:08

Webサーバー上にデータベースサーバーをアクセスするプログラムを置き、Webブラウザで表示するHTMLで作成された画面からサーバー上に置かれたこのプログラムめがけて実行を要求する・・・という形をとります。

Webアプリケーションの初心者向け解説サイトや書籍で「どういう仕組みで動くのか」という基本を勉強されるとよいです。
重要キーワードは「CGIプログラム」・・・かな。

そういうことではなく、例えばパソコンにデータベースエンジンをインストールし、そのデータベース上に作成したのテーブルに対する操作を同じパソコン上にあるWebブラウザから行いたい・・・ようはローカルに使用するデータベース操作のツールをWebインターフェースで実現したいということでしたらJavascriptで出来ます。
えっと、、、ここで全部開設するのは困難ですので、「Javascript　ローカルデータベース」とか「Javascript　データベース接続」といったキーワードで検索されると詳しく解説したWebサイトがみつかるはずですので、それを参照ください。本もあったかと思います。
使用するデータベースエンジンがMySQLなど決まったものがある場合は先のキーワードの「データベース」を「MySQL」など使用するデータベースエンジンの名称に変えられればOKかと思います。

参考まで。

この回答へのお礼

お返事有難うございます。
他の方の意見も合わせると、私の予想が根本的に間違ってるようです。
見直します。

お礼日時：2024/04/17 14:42

No.2 回答者： lv4u 回答日時： 2024/04/17 11:26

＞＞１．データベースにアクセスして表示させるまでの方法として、初心者にとって何が一番お手軽でしょうか？

初心者にとっては、基本的にハードルが高いと思います。

一時期、フレームワークのRubyonRailsを使うのがお手軽ってことでブームになったことがありました。
でも、サンプルレベルでは、とても楽に作れるけど、実際の業務用アプリを作ろうとすると、いろいろとあって・・・、ブームは去った感じですね。

nodeはわりと簡単そうですが、私は使ったことないので、なんともいえません。

個人的には、マイクロソフトのVisual Studio にて C#でWeb開発すれば、javascriptを使うことなく、すべてC#でロジックが記述できたりして、「楽して」作れますです。

ただし、「楽」っていうのは、日本から米国に行くのに飛行機を使えば、船旅より速くて楽っていうのと同じような感じの点があります。
つまりは、船の操縦よりも、飛行機の操縦ができるようになるのは、とても難しいということ。
C#とWebに関する技術をマスターしていれば、「楽」だけど、初心者がマスターするには、かなりのハードルですね。

＞＞２．サイトであれば、前提条件の説明が端折られてないものがあれば知りたいです。

そのあたりの前提条件を説明しているものって、あまり無いような気がしますね。
読むとすれば、WebサーバのApacheとかNginxなどの解説書に目を通すのが最初かもしれません。

この回答へのお礼

お返事有難うございます。
構築するのはコピペレベルの楽さは無理ですが、
実務で開発経験があったので、何とかなるかもと思ったのですが、そうはいかないようですね。

お礼日時：2024/04/17 12:30

No.1 回答者： rera1016 回答日時： 2024/04/17 11:16

一般的にはフロントエンドとバックエンドで別途作成し、バックエンドはRestful APIとして作成して、フロントエンドはAjaxを使ってAPIにアクセスし、その結果を取得します。

https://qiita.com/NagaokaKenichi/items/0647c30ef …

質問の内容はバックエンドのみの動きなので、ブラウザ画面には表示されません。

DBアクセスも画面表示もまとめて作りたいなら、PHPを使って構築する方が楽です。

この回答へのお礼

早々のお返事有難うございます。
回答を読んでもいまいちイメージができませんが、想像しているよりややこしいということは分かりました。

お礼日時：2024/04/17 12:05