Skip to content

Latest commit

 

History

History
123 lines (83 loc) · 5.83 KB

08.md

File metadata and controls

123 lines (83 loc) · 5.83 KB

8. データベースを使おう

src/app/items/[id]/page.tsx でデータベースから商品を取得するように変更してみましょう。

解説

データベースとは

データベース（RDBMS）は、データを永続的に保存し、効率的に管理するためのシステムです。今回は SQLite という軽量なデータベースを使用します。

なぜデータベースを使うのか？

今まで商品データは items.json というJSONファイルに保存していましたが、以下のような理由でデータベースを使用する方が適しています。

  1. データの検索が効率的
  2. データの一貫性を保ちやすい
  3. 複数のユーザーが同時にデータにアクセスしても安全
  4. 大量のデータを扱える

仕事で作るアプリケーションの多くでデータベースが使われています。

やること

1. パッケージのインストール

まずは、データベースを操作するためのパッケージをインストールします。ターミナルで以下のコマンドを実行します。

npm install better-sqlite3

そして、パッケージをインポートします。

import Database from "better-sqlite3";
import path from "path";
  • better-sqlite3: SQLiteデータベースを操作するためのパッケージです。
  • path: ファイルパスを扱うためのNode.jsの標準パッケージです。

2. 型定義の追加

これまでは商品データの型は items.json から自動的に読み込まれていましたが、データベースを使うためには型定義を追加する必要があります。以下のコードで items.json の一つ一つの商品データと同じ型を定義できます。

interface Item {
  id: number;
  name: string;
  price: number;
  description: string;
  image: string;
  category: string;
  totalSales: number;
}

3. データベースの接続とデータ取得

データベースを接続するためには、データベースのパスを指定してデータベースに接続します。今回はチュートリアル用に用意したデータベースのファイル（items.db）を使用します。

const dbPath = path.join(process.cwd(), "items.db");
const db = new Database(dbPath, { verbose: console.log });
  • process.cwd(): 現在の作業ディレクトリを取得します。
  • path.join(): OSに依存しない形でファイルパスを結合します。
  • new Database(): データベースに接続します。

豆知識：パスの扱いはOSに依存します。Windowsでは \ でパスを区切りますが、MacやLinuxでは / でパスを区切ります。path.join() を使うことで、OSに依存しない形でファイルパスを結合することができます。

4. SQLクエリの実行

それでは、データベースから商品データを取得してみましょう。RDBMSではSQLという言語を使ってデータを取得します。SQLの文のことをSQLクエリといいます。

下記のコードを必要に応じて追加し、データベースから商品データを取得してみましょう。

// 商品一覧を取得する場合
const allItems = db
  .prepare("SELECT * FROM items ORDER BY id ASC")
  .all() as Item[];

// 特定の商品を取得する場合
const item = db
  .prepare("SELECT * FROM items WHERE id = ?")
  .get(parseInt(params.id)) as Item | undefined;

SQLクエリについて簡単に説明します。

  • SELECT * FROM items: itemsテーブルから全ての列（カラム）を取得します。
  • ORDER BY id ASC: id列を昇順（小さい順）に並び替えます。
  • WHERE id = ?: id列が特定の値と一致する行を取得します。
  • ?: プレースホルダー（SQLインジェクション攻撃を防ぐため）

実際のデータは以下のようになっています。このクエリの場合は、ここからid列が params.id と一致する行を取得し、id列が小さい順に並び替えた結果を取得しています。

id name price description image category totalSales
1 クラシック白Tシャツ 2999 100%コットン製の快適なカジュアル白Tシャツ http://localhost:3000/images/tgc_001.jpeg 衣類 1250
2 ブルーデニムシャツ 7499 モダンなフィット感のクラシックブルーデニム http://localhost:3000/images/tgc_002.jpeg 衣類 890
3 ランニングシューズ 11999 軽量で快適なランニングシューズ http://localhost:3000/images/tgc_003.jpeg 靴 645
4 レザーバックパック 13499 スタイリッシュで丈夫なレザーバックパック http://localhost:3000/images/tgc_004.jpeg アクセサリー 320
5 ゲーミングノートPC 194999 RTXグラフィックス搭載の高性能ゲーミングノートPC http://localhost:3000/images/tgc_005.jpeg 電化製品 89

豆知識：SQLインジェクション攻撃は、SQLクエリに不正な文字列を挿入することで、データベースを破壊する攻撃です。プレースホルダーを使うことで、SQLインジェクション攻撃を防ぐことができます。

動作確認

では、アプリケーションを再起動して、商品一覧ページと商品詳細ページの表示を見てみましょう！

npm run dev

うまくいけば無事商品一覧ページと商品詳細ページが表示されるはずです。

また、npm run dev を実行したターミナルを見ると、実行されたSQLクエリが出力されているはずです。

これでデータベースを使った商品一覧ページと商品詳細ページの表示ができるようになりました。より本格的なアプリケーションに近づきましたね。