Webアプリ開発を行う上で、JavaScriptとdatabaseの連携は欠かせません。フォームの送信データを保存したり、ユーザー情報を取得したりと、データベース操作はあらゆる場面で登場します。
この記事では、JavaScriptで扱えるデータベースの種類、接続方法、CRUD操作、セキュリティ対策など、初心者にもわかりやすく解説します。コード例もありますので、実践的なスキルを身につけたい方はぜひ最後までご覧ください。
目次
閉じる
1.JavaScriptにおけるdatabaseの基本
JavaScriptを使ってWebアプリケーションを構築する場合、データベースとの連携は欠かせません。フォームの送信データやユーザー情報の保存、商品一覧の取得など、あらゆる場面でデータの保存・操作が必要です。
JavaScriptは、クライアントサイドとサーバーサイドの両方で利用できるため、用途に応じて異なるデータベースの種類や接続方法が選ばれます。ここでは、JavaScriptで扱える代表的なデータベースについて解説します。
JavaScriptで使えるdatabaseの種類
JavaScriptで使えるデータベースはさまざまありますが、大きく分けると「クライアントサイドで直接操作するローカルデータベース」と、「サーバーサイド経由で接続する外部データベース」に分類できるでしょう。
クライアントサイドで利用される代表例がIndexedDBです。IndexedDBはブラウザに組み込まれたデータベースで、オフライン環境でも使用できるのが特徴です。データは構造化されて保存され、数MB〜数百MBといった大容量の保存も可能です。
一方、クラウドベースのデータベースとしてはFirebaseがよく使われます。リアルタイムでのデータ同期や認証機能といったバックエンド機能が充実しており、サーバーを用意せずに即座にデータを扱えるのが強みです。
サーバーサイドでは、MySQLやMongoDB、SQL Serverなどの本格的なデータベースが利用されます。JavaScript（特にNode.js）から接続してデータを保存・取得でき、構造化データや非構造データを効率よく管理できます。
どのデータベースを選ぶかは、用途やスケーラビリティ、リアルタイム性、保存容量の要件に応じて判断するのが基本です。
クライアントサイドとサーバーサイドの違い
JavaScriptでのデータベース操作は、動作する場所によって大きく性質が異なります。クライアントサイドでは、ユーザーのブラウザ内で処理が行われ、サーバーとの通信が不要なケースもあります。一方で、サーバーサイドでは、外部のデータベースとやり取りを行い、より大規模で複雑な処理が可能です。
クライアントサイドではIndexedDBやlocalStorageのようなローカルストレージを利用し、ページをリロードしてもデータを保持することができます。オフライン環境でのキャッシュや一時的な保存に向いています。ただし、セキュリティ面では脆弱なため、機密データの保存には適しません。
サーバーサイドではNode.jsを使ってMySQLやMongoDBなどにアクセスします。これにより、認証情報や注文履歴などの重要なデータを安全に管理できます。バックエンドにロジックを置くことで、フロントエンドは軽量化され、セキュリティ対策もしやすくなります。
開発するアプリケーションが「デバイス内で完結するもの」なのか、「外部とデータをやり取りするもの」なのかに応じて、クライアント／サーバーの使い分けが必要です。
2.JavaScriptで使用できるdatabaseの種類と選び方
JavaScriptから利用できるデータベースには多様な選択肢があり、用途や構成に応じて最適なものを選ぶことが重要です。ローカルにデータを保存するものから、クラウド上で大規模なデータをリアルタイムで処理するものまで、それぞれ得意分野があります。
ここでは、代表的なデータベースの特徴と、どのようなケースに適しているかを解説します。
MySQL
MySQLは構造化データ向きのリレーショナルデータベースです。世界中で広く使われているオープンソースのリレーショナルデータベースです。テーブル・カラムによる明確なスキーマを持ち、SQL文を使って厳密にデータを管理できます。
JavaScript（Node.js）からはmysql2などのライブラリを通じて接続し、データの追加・取得・更新・削除が可能です。トランザクション処理や複雑なクエリにも対応しており、ECサイトや業務管理システムなどに適しています。
データの整合性や一貫性を重視する場合に信頼できる選択肢となります。開発規模が大きくなるほど、そのメリットが際立ちます。
SQL Server
SQL Serverは、Microsoftが提供するリレーショナルデータベースです。Node.jsからはmssqlライブラリで操作します。ストアドプロシージャが必要な場合や高いトランザクション処理性能が求められるシーンに強いのが特徴です。
スケールやパフォーマンスを重視する環境に適しており、金融機関などの大規模運用に採用されています。
IndexedDB
IndexedDBはローカル保存に最適です。ブラウザ内にデータを保存できるクライアントサイドのデータベースです。非同期で動作し、数十MB〜数百MBといったデータを扱えます。JSON形式で保存でき、オブジェクトストアを用いた柔軟なデータ構造も特徴です。
主にPWA（Progressive Web Apps）やオフライン対応が求められるWebアプリケーションで使われます。たとえば、ネットが切れても一時的にデータを保持したいケースや、ページ間で状態を維持したい場合に有効です。
JavaScriptからIndexedDBへ直接の接続が可能で、外部サーバーに依存しない点も魅力です。ただし、複雑な検索やデータ結合処理には向いていません。
Firebase
Firebaseはリアルタイム同期に強いクラウドDBです。Googleが提供するクラウド型のバックエンドサービスで、リアルタイムデータベース機能を備えています。データの保存・同期だけでなく、ユーザー認証やクラウドファンクションなども備えており、フロントエンドエンジニアだけでも高度なアプリを作ることができます。
FirebaseとJavaScriptは親和性が高く、WebSocketを使ったリアルタイム同期が可能です。チャットアプリや同時編集が必要なツールなど、即時反映が求められる場面に向いています。またスキーマレスで柔軟にデータ構造を変更できるため、初期開発におけるスピード感を重視するプロジェクトにも適しています。
MongoDB
MongoDBはドキュメント指向のNoSQLデータベースで、柔軟な構造をもつのが特徴です。テーブルやカラムの定義が不要で、データはJSON形式で保存されます。スキーマレスな構造を持つため、プロトタイプ開発や要件が頻繁に変わるプロジェクトに向いています。
JavaScriptとの相性が良く、Node.jsではmongooseやmongodbといったライブラリを使って簡単に使用可能です。リアルタイム処理や大量データの保存、柔軟な検索機能が求められる場合に強みを発揮します。特に、IoT、分析系サービス、SaaS系のアプリケーションにおすすめです。
関連記事
JavaScriptライブラリとは？おすすめの使い方や導入方法などわかりやすく解説
3.JavaScriptでdatabaseに接続する方法
JavaScriptからデータベースに接続するには、対象となるデータベースの種類や実行環境に応じた方法を理解しておく必要があります。ここでは、サーバーサイドのMySQLとSQL Serverに加え、ローカル環境で動作するIndexedDB、クラウド型のFirebaseへの接続方法を具体的に紹介します。
ただし、環境や設定の違い、バージョンなどの違いにより異なることも考えられますので、必ず実際の環境で使う前に問題がないかどうか確認してください。
JavaScriptでdb接続する方法：mysqlの場合
JavaScriptからMySQLのデータベースへ接続するには、mysql2やmysqlなどのライブラリを使いましょう。また、Node.jsのバックエンドから接続する必要があります。ブラウザ単体ではMySQLに直接アクセスできず、サーバー側にNode.js環境を用意する必要があります。
mysql2ライブラリを使ったDB接続のコード例を紹介します。接続にはホスト名、ユーザー名、パスワード、データベース名の指定が必要です。
const mysql = require('mysql2');
host: 'localhost', user: 'root', password: '', database: 'sampledb', });
if (err) { console.error("MySQLへの接続に失敗しました:", err.message); return; } console.log("MySQLに接続しました"); }); |
JavaScriptでdb接続する方法：sqlserverの場合
JavaScriptからSQL Serverのデータベースへ接続するには、mssqlライブラリを使いましょう。MySQLと同様にNode.jsを介する必要があります。
コード例は次の通りです。
const sql = require('mssql');
user: 'your_username', password: 'your_password', server: 'localhost', database: 'your_database', options: { encrypt: false, trustServerCertificate: true, }, };
try { await sql.connect(config); console.log("SQL Serverに接続しました"); } catch (err) { console.error("接続エラー:", err.message); } }
|
JavaScriptでdb接続する方法：IndexedDBの場合
IndexedDBで作られたデータベースへの接続は、JavaScriptだけで可能です。indexedDB.open()を使ってデータベースを開きましょう。スキーマの初期化やバージョン管理も合わせて行えます。
const request = indexedDB.open("MyDatabase", 1);
const db = event.target.result; if (!db.objectStoreNames.contains("users")) { db.createObjectStore("users", { keyPath: "id" }); } };
const db = event.target.result; console.log("IndexedDB に接続しました"); };
console.error("IndexedDB の接続に失敗しました", event); }; |
接続処理は非同期で行われ、イベントリスナーで成功・失敗をハンドリングします。テーブルに相当するオブジェクトストアが存在しない場合は、onupgradeneededで作成します。
JavaScriptでdb接続する方法：Firebaseの場合
Firebaseで作ったデータベースへはJavaScriptで簡単に接続できます。Firebase公式サイトでプロジェクトを作成し、構成情報を取得してください。
import { initializeApp } from "firebase/app"; import { getDatabase } from "firebase/database";
apiKey: "API_KEY", authDomain: "your-app.firebaseapp.com", databaseURL: "https://your-app.firebaseio.com", projectId: "your-app", };
const db = getDatabase(app);
|
FirestoreではgetFirestore()を使います。非同期での読み書きが可能で、JavaScriptから直接アクセスできます。初期設定さえ完了していれば、サーバーの構築は不要です。
4.JavaScriptでdatabaseを操作する方法
データベースを扱う上で欠かせないのが、CRUD操作と呼ばれる基本操作です。
CRUDとは、Create（作成）、Read（読み取り）、Update（更新）、Delete（削除）の頭文字を取ったもので、データの保存・取得・変更・削除を意味します。
JavaScriptでは、使っているデータベースによって文法や接続方法が異なりますが、操作の流れは共通です。ここでは、CRUDそれぞれの処理について、コード例とともに解説します。
JavaScriptでデータベースにデータを追加する（Create）
データの追加は、新しいレコードをデータベースに保存する操作です。登録フォームの送信や商品情報の追加など、使用頻度は高いです。
JavaScriptでmysql・SQL Serverを使ってデータを追加するコード例（Node.js）
const query = 'INSERT INTO users (name, email) VALUES (?, ?)'; const values = ['Alice', 'alice@example.com'];
if (err) throw err; console.log("データを追加しました"); }); |
JavaScriptでIndexedDBを使ってデータを追加するコード例
const transaction = db.transaction(["users"], "readwrite"); const store = transaction.objectStore("users");
|
JavaScriptでFirebaseを使ってデータを追加するコード例
import { set, ref } from "firebase/database";
name: "Alice", email: "alice@example.com" }); |
JavaScriptでデータベースからデータを取得する（Read）
データの取得は、保存されている情報を参照する処理です。ユーザー一覧の表示や、特定商品の詳細情報の表示などに使われます。
JavaScriptでMySQL・SQL Serverを使ってデータ取得するコード例（Node.js）
const query = 'SELECT * FROM users WHERE id = ?';
if (err) throw err; console.log(results[0]); }); |
JavaScriptでIndexedDBを使ってデータ取得するコード例
const store = db.transaction("users").objectStore("users"); const request = store.get(1);
console.log("取得結果:", request.result); }; |
JavaScriptでFirebaseを使ってデータ取得するコード例
import { get, ref } from "firebase/database";
if (snapshot.exists()) { console.log(snapshot.val()); } }); |
JavaScriptでdatabaseのデータを更新する（Update）
データの更新は、すでに存在するレコードの一部または全体を変更する処理です。プロフィール編集や在庫数の変更などで使われます。
MySQL・SQL Serverの例（Node.js）
const query = 'UPDATE users SET name = ? WHERE id = ?'; const values = ['Alice Updated', 1];
if (err) throw err; console.log("データを更新しました"); }); |
IndexedDBの例
const transaction = db.transaction(["users"], "readwrite"); const store = transaction.objectStore("users");
|
Firebaseの例
import { update, ref } from "firebase/database";
|
JavaScriptでdatabaseからデータを削除する（Delete）
データの削除は、不要になった情報をデータベースから完全に取り除く操作です。退会処理や投稿の削除などに利用されます。
MySQL・SQL Serverの例（Node.js）
const query = 'DELETE FROM users WHERE id = ?';
if (err) throw err; console.log("データを削除しました"); }); |
IndexedDBの例
const transaction = db.transaction(["users"], "readwrite"); const store = transaction.objectStore("users");
|
Firebaseの例
import { remove, ref } from "firebase/database";
|
関連記事
JavaScriptでできること17選！Webサイトやゲームのサンプルも紹介
5.JavaScriptで簡易データベースを作ってみましょう
JavaScriptを使えば、サーバーを用意しなくても簡易的なデータベースを作成できます。ローカルにデータを保存しておきたい場面や、試作段階のアプリケーション、学習目的の開発には最適です。ここではJavaScriptによる簡易データベースの基本的な作成手順と、データの取得までの一連の流れを解説します。
JavaScriptでデータベース作成するポイント
簡易的なデータベースを作成するときには、「ローカルで完結するかどうか」「永続化が必要か」「データ構造が柔軟か」などの観点でデータベースを選びましょう。特に、ブラウザだけで動作するアプリでは、IndexedDBやlocalStorageなどのクライアントサイドのストレージが便利です。
また、データの読み書きの頻度やセキュリティ要件、アプリの将来的な拡張性も選定のポイントになります。Firebaseのようにクラウドベースで手軽に使えるものもありますが、今回はローカル環境で使えるIndexedDBを使って解説します。
JavaScriptでデータベースをローカルに作成してみる
ローカル環境でデータベースを作成する代表的な方法が、IndexedDBの利用です。IndexedDBはブラウザに組み込まれたデータベースで、オフライン環境でもデータを保持できるため、フォーム入力値や設定情報などの保存におすすめです。
usersというオブジェクトストアを含むローカルデータベースを作成するコード例を紹介します。
const request = indexedDB.open("MyAppDB", 1);
const db = event.target.result; if (!db.objectStoreNames.contains("users")) { db.createObjectStore("users", { keyPath: "id" }); } };
console.log("ローカルデータベースを作成しました"); };
console.error("データベース作成時にエラーが発生しました:", event); }; |
この処理で、ユーザー情報を保存するためのシンプルなローカルデータベースが完成します。keyPathに指定したidを主キーとして、後からデータの追加や取得が容易になります。
JavaScriptでdbから値を取得してみる
ローカルデータベースを作成したら、次は保存したデータを取得してみましょう。IndexedDBでは、transactionとobjectStoreを使うと特定のキーに紐づいたデータを読み込むことが可能です。
次のコード例は、IDが1のユーザー情報を取得するコードです。
const request = indexedDB.open("MyAppDB", 1);
const db = event.target.result; const transaction = db.transaction("users", "readonly"); const store = transaction.objectStore("users"); const getRequest = store.get(1);
const result = getRequest.result; if (result) { console.log("データ取得に成功:", result); } else { console.log("該当するデータが見つかりませんでした"); } };
console.error("データ取得に失敗しました"); }; }; |
IndexedDBでは非同期でのデータ取得が基本です。ユーザー操作に応じて必要なデータを取得し、画面に反映させる処理に活用してください。
関連記事
【初心者向け】JavaScript入門完全ガイド｜基本構文や勉強方法（入門本や学習サイト）など解説
JavaScript初心者向け【サンプルコード付】基礎から学習するための方法を解説
6.JavaScriptにおけるdatabaseセキュリティ対策
JavaScriptを使ってデータベース接続する場合、セキュリティ対策が重要です。セキュリティ対策を怠ってしまうと、情報漏洩や改ざんにつながり、サービスの信頼性を大きく損ねる原因となってしまいかねません。
ここでは、JavaScriptにおけるデータベースセキュリティの代表的なリスクとして、SQLインジェクション、クロスサイトスクリプティングについて解説します。
SQLインジェクション
SQLインジェクションは、ユーザーの入力をそのままSQL文に含めてしまったときに発生する攻撃です。不正な入力によって、意図しないデータの取得や削除が実行される危険があります。
たとえば、ログイン処理でユーザー名とパスワードを文字列結合でSQL文に組み込んでいる場合、悪意あるコードを混入されると、認証をすり抜けてしまうおそれがあります。
SQLインジェクションを防ぐには、SQL文をパラメータ化し、プレースホルダを使って値を渡すようにしましょう。
Node.jsでMySQLに安全に接続するコード例を紹介しますので参考にしてください。SQL文中に?を使って値を渡すことで、SQLインジェクションのリスクを回避しています。
const mysql = require('mysql2'); const connection = mysql.createConnection({ host: 'localhost', user: 'root', database: 'testdb' });
const password = req.body.password;
connection.query(query, [username, password], (err, results) => { if (err) throw err; console.log(results); }); |
クロスサイトスクリプティング
クロスサイトスクリプティング（XSS）は、悪意のあるスクリプトをHTMLに埋め込み、他のユーザーのブラウザ上で実行させる攻撃です。たとえば、掲示板の投稿欄に 悪意のあるコードが書き込まれ、そのコードがそのまま表示されてしまうと、閲覧者の端末でスクリプトが実行されてしまいます。
クロスサイトスクリプティングを防ぐためには、ユーザー入力を画面に出力する前にHTMLエスケープしましょう。
JavaScriptでエスケープ関数を使ったコード例を紹介します。
function escapeHTML(str) { return str.replace(/[&<>"']/g, (char) => { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return map[char]; }); }
document.getElementById('output').textContent = safeText; |
テンプレートエンジンやフロントエンドフレームワークを使う場合は、基本的に自動でエスケープされますが、innerHTMLを使う場合には注意してください。
関連記事
JavaScriptとは？初心者にもわかりやすく何ができるかや歴史、基本的な文法を解説
7.まとめ
この記事では、JavaScriptで使えるデータベースの種類から、接続方法、CRUD操作、ローカル保存やセキュリティ対策まで、基礎から実践までを幅広く解説しました。特に、IndexedDBを使った簡易データベース作成は、これからWebアプリを構築したい方にとって役立つでしょう。
もしこれから実際にJavaScriptでデータベースを活用していくなら、ぜひこの記事を参考に、実際に手を動かして試してみてください。そうすると理解が深まるはずです。
本記事が皆様にとって少しでもお役に立てますと幸いです。
「フリーランスボード」は、数多くのフリーランスエージェントが掲載するITフリーランスエンジニア・ITフリーランス向けの案件・求人を一括検索できるサイトです。
開発環境、職種、単価、稼働形態、稼働日数など様々な条件から、あなたに最適なフリーランス案件・求人を簡単に見つけることができます。
単価アップを目指す方や、自分の得意なスキルを活かせる案件に参画したい方は、ぜひ「フリーランスボード」をご利用ください。