[WebAPI]WebAPIを利用してSQLiteを操作方法！[SQLite]

はじめに

前々回の記事にて、Next.jsでのサーバーサイドレンダリング（SSR）とSQLiteデータベースの実装方法を紹介しました。

今回は、その進化版としてWeb APIを使用してデータベースにアクセスする方法を紹介します！

使用するDBは、前回、前々回と同様にnihongo.dbのnihongoテーブルを使用します。

Web APIを利用するメリット

前々回は、直接データベースへアクセスしていました。
今回はWeb APIを介したアクセスにします！
このWeb APIの利用には以下の利点があります。

• 分離性： クライアントサイドとデータベースの結合が緩和され、疎結合を実現。
• セキュリティ： クライアントサイドからの直接データベースアクセスのリスクを低減し、セキュリティが向上。
• 再利用性と拡張性： Web APIを介してデータベースにアクセスすることで、同じAPIを複数のクライアントアプリケーションで共有でき、変更や拡張性が向上。

今回のコードと新機能

今回の記事は以下の2点のファイルにてコード変更、追加を行いました！

• pages/api/data.js: データの取得と挿入を行うAPIエンドポイント。
• pages/index.js: Web APIを介してデータベースにアクセスするReactコンポーネント。

// pages/api/data.js
import { openDatabase } from '../../util/db';

export default async function handler(req, res) {
  if (req.method === 'GET') {
    try {
      // データベースに接続
      const db = await openDatabase();
      
      // データベースからデータを取得
      const data = await db.all('SELECT * FROM nihongo');
      
      // データベース接続を閉じる
      await db.close();

      // 取得したデータをJSONで返す
      res.status(200).json({ data });
    } catch (error) {
      console.error('Error getting data:', error);
      res.status(500).json({ message: 'Internal Server Error' });
    }
  } else if (req.method === 'POST') {
    try {
      // POSTリクエストからメッセージを取得
      const { message } = req.body;

      // 取得したメッセージが存在するかチェック
      if (!message) {
        return res.status(400).json({ message: 'Bad Request' });
      }

      // データベースに接続
      const db = await openDatabase();
      
      // データベースにメッセージを挿入
      await db.run('INSERT INTO nihongo (aiueo) VALUES (?)', [message]);
      
      // データベース接続を閉じる
      await db.close();

      // 成功時にステータスコード201とメッセージを返す
      res.status(201).json({ message: 'Data inserted successfully' });
    } catch (error) {
      console.error('Error inserting data:', error);
      res.status(500).json({ message: 'Internal Server Error' });
    }
  } else {
    // サポートしていないメソッドへの対応
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

// pages/index.js
import React, { useState, useEffect } from 'react';

const HomePage = () => {
  // データ取得用のstate
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      // GET送信によってデータを取得
      const response = await fetch('/api/data');
      const result = await response.json();
      setData(result.data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  // 新しいデータを挿入する関数
  const handleInsertData = async () => {
    try {
      // APIエンドポイントにPOSTリクエストを送信
      const response = await fetch('/api/data', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ message: 'テスト' }), // 挿入するメッセージを指定
      });

      // ステータスコード201であれば成功メッセージをログに表示
      if (response.status === 201) {
        console.log('Data inserted successfully');
        
        // データを再取得して表示を更新
        fetchData();
      } else {
        // ステータスコード201以外の場合はエラーメッセージをログに表示
        console.error('Failed to insert data:', await response.json());
      }
    } catch (error) {
      console.error('Error inserting data:', error);
    }
  };

  return (
    <div>
      <h1>Next.js SSR with SQLite</h1>
      
      {/* ボタンをクリックした際に新しいデータを挿入 */}
      <button onClick={handleInsertData}>Insert Test Data</button>
      
      <ul>
        {/* データを表示 */}
        {data.map((item) => (
          <li key={item.aiueo}>{item.aiueo}</li>
        ))}
      </ul>
    </div>
  );
};

export default HomePage;

まとめ

今回はWeb APIを活用したデータベースアクセスの方法について紹介しました！
Web APIを利用することで、アプリケーションの分離性、セキュリティ、再利用性、拡張性が向上します。
今回の記事を参考に実装してみてください！