JavaScriptデータベース入門！10の実用的なサンプルコード

はじめに
●JavaScriptデータベースの種類
- ○SQLデータベース
- ○NoSQLデータベース
●データベース操作の基本
- ○CRUD操作
●サンプルコード1：SQLデータベースへの接続
●サンプルコード2：データの挿入
●サンプルコード3：データの取得（SELECT）
●サンプルコード4：データの更新（UPDATE）
●サンプルコード5：データの削除（DELETE）
●サンプルコード6：Firebaseへの接続
●サンプルコード7：データの追加と取得
●サンプルコード8：データの更新と削除
●クライアントサイドデータベース：IndexedDB
- ○IndexedDBの概要
●サンプルコード9：IndexedDBのデータベース作成とオブジェクトストアの定義
●サンプルコード10：IndexedDBでのデータの追加、取得、更新、削除
●注意点と対策
- ○セキュリティ
- ○パフォーマンス
まとめ

はじめに

この記事を読めば、JavaScriptでデータベース操作ができるようになります。

データベース操作はウェブアプリケーション開発において欠かせないスキルです。

この記事では、JavaScriptでデータベース操作を行うための基本から応用までを初心者向けにわかりやすく解説します。

実用的な10のサンプルコードを通して、実践的な知識を身に付けましょう。

●JavaScriptデータベースの種類

JavaScriptでデータベース操作を行う際には、主にSQLデータベースとNoSQLデータベースの2つの種類があります。

それぞれの特徴を理解し、適切なデータベースを選択しましょう。

○SQLデータベース

SQLデータベースは、リレーショナルデータベースとも呼ばれ、テーブル形式でデータを格納します。

MySQLやPostgreSQLなどが代表的です。

SQLデータベースは、構造化されたデータを効率的に扱うことができます。

○NoSQLデータベース

NoSQLデータベースは、非リレーショナルデータベースとも呼ばれ、JSON形式など柔軟なデータ構造でデータを格納します。

MongoDBやFirebaseなどが代表的です。

NoSQLデータベースは、大量のデータや構造が変わりやすいデータを効率的に扱うことができます。

●データベース操作の基本

データベース操作には、基本的に以下の4つの操作があります。

これらの操作は、CRUD（Create, Read, Update, Delete）と呼ばれます。

○CRUD操作

Create（作成）: データベースに新しいデータを追加する。
Read（読み取り）: データベースからデータを取得する。
Update（更新）: データベースの既存のデータを変更する。
Delete（削除）: データベースからデータを削除する。

それでは、具体的なサンプルコードを見ていきましょう。

●サンプルコード1：SQLデータベースへの接続

このコードでは、Node.jsを使ってMySQLデータベースに接続する方法を紹介しています。

この例では、MySQLモジュールを使ってデータベースに接続しています。

const mysql = require('mysql');

// 接続情報の設定
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database_name'
});

// データベースへの接続
connection.connect((err) => {
  if (err) throw err;
  console.log('データベースに接続しました。');
});

●サンプルコード2：データの挿入

（INSERT）このコードでは、データをデータベースに挿入する方法を紹介しています。

この例では、INSERT文を使ってデータをusersテーブルに挿入しています。

const user = { name: 'Taro', age: 30 };

const query = connection.query('INSERT INTO users SET ?', user, (err, result) => {
  if (err) throw err;
  console.log('データが挿入されました。');
});

●サンプルコード3：データの取得（SELECT）

このコードでは、データベースからデータを取得する方法を紹介しています。

この例では、SELECT文を使ってusersテーブルから全てのデータを取得しています。

const query = connection.query('SELECT * FROM users', (err, results) => {
  if (err) throw err;
  console.log('データの取得結果：', results);
});

●サンプルコード4：データの更新（UPDATE）

このコードでは、データベースの既存のデータを更新する方法を紹介しています。

この例では、UPDATE文を使ってusersテーブルの特定のデータを更新しています。

const newData = { age: 31 };
const condition = { name: 'Taro' };

const query = connection.query('UPDATE users SET ? WHERE ?', [newData, condition], (err, result) => {
  if (err) throw err;
  console.log('データが更新されました。');
});

●サンプルコード5：データの削除（DELETE）

このコードでは、データベースからデータを削除する方法を紹介しています。

この例では、DELETE文を使ってusersテーブルの特定のデータを削除しています。

const condition = { name: 'Taro' };

const query = connection.query('DELETE FROM users WHERE ?', condition, (err, result) => {
  if (err) throw err;
  console.log('データが削除されました。');
});

●サンプルコード6：Firebaseへの接続

このコードでは、Firebaseに接続する方法を紹介しています。

この例では、FirebaseのSDKを使って、Firebaseプロジェクトと通信しています。

// Firebase SDKのインポート
const firebase = require('firebase/app');
require('firebase/database');

// Firebaseの設定
const firebaseConfig = {
  apiKey: 'your_api_key',
  authDomain: 'your_auth_domain',
  databaseURL: 'your_database_url',
  projectId: 'your_project_id',
  storageBucket: 'your_storage_bucket',
  messagingSenderId: 'your_messaging_sender_id',
  appId: 'your_app_id'
};

// Firebaseの初期化
firebase.initializeApp(firebaseConfig);

// データベースへの参照
const database = firebase.database();

●サンプルコード7：データの追加と取得

このコードでは、Firebaseを利用してデータを追加し、データを取得する方法を紹介しています。

この例では、データを追加した後、リアルタイムでデータの変更を検知して取得しています。

// データの追加
const userRef = database.ref('users');
const newUser = userRef.push();
newUser.set({ name: 'Taro', age: 30 });

// データの取得
userRef.on('value', (snapshot) => {
  console.log('データの取得結果:', snapshot.val());
});

●サンプルコード8：データの更新と削除

このコードでは、Firebaseを使ってデータを更新し、データを削除する方法を紹介しています。

この例では、特定のデータを更新した後、そのデータを削除しています。

// データの更新
const userToUpdate = database.ref('users/user_id');
userToUpdate.update({ age: 31 });

// データの削除
const userToDelete = database.ref('users/user_id');
userToDelete.remove();

●クライアントサイドデータベース：IndexedDB

○IndexedDBの概要

IndexedDBは、クライアントサイドのデータベースで、ブラウザにデータを保存することができます。

IndexedDBはオブジェクト指向のデータベースで、キーと値のペアでデータを保存します。

オフライン対応のアプリケーションを作成する際に有用です。

●サンプルコード9：IndexedDBのデータベース作成とオブジェクトストアの定義

このコードでは、IndexedDBのデータベースを作成し、オブジェクトストアを定義する方法を紹介しています。

この例では、データベースを作成し、オブジェクトストアを作成してキーの設定を行っています。

// IndexedDBのデータベースを開く
const openRequest = indexedDB.open('MyDatabase', 1);

// データベースを新規作成またはバージョンアップ時に実行
openRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  const objectStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
};

// データベースのオープンが成功した場合の処理
openRequest.onsuccess = (event) => {
  console.log('データベースのオープンに成功しました');
};

// データベースのオープンが失敗した場合の処理
openRequest.onerror = (event) => {
  console.log('データベースのオープンに失敗しました');
};

●サンプルコード10：IndexedDBでのデータの追加、取得、更新、削除

このコードでは、IndexedDBを使用してデータの追加、取得、更新、削除を行う方法を紹介しています。

この例では、オブジェクトストアにデータを追加し、取得し、更新し、削除する処理を実装しています。

// データの追加
const addUser = (db, user) => {
  const transaction = db.transaction('users', 'readwrite');
  const objectStore = transaction.objectStore('users');
  objectStore.add(user);
};

// データの取得
const getUser = (db, id) => {
  const transaction = db.transaction('users', 'readonly');
  const objectStore = transaction.objectStore('users');
  const getRequest = objectStore.get(id);
  getRequest.onsuccess = () => {
    console.log('取得したデータ:', getRequest.result);
  };
};

// データの更新
const updateUser = (db, user) => {
  const transaction = db.transaction('users', 'readwrite');
  const objectStore = transaction.objectStore('users');
  objectStore.put(user);
};

// データの削除
const deleteUser = (db, id) => {
  const transaction = db.transaction('users', 'readwrite');
  const objectStore = transaction.objectStore('users');
  objectStore.delete(id);
};