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

# はじめに
[前々回の記事](https://qiita.com/moriokatakashir/items/a9ec4d57ad6bdba6ce50)にて、Next.jsでのサーバーサイドレンダリング（SSR）とSQLiteデータベースの実装方法を紹介しました。

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

使用するDBは、前回、前々回と同様にnihongo.dbのnihongoテーブルを使用します。
![画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570986/4c8af36f-212f-0a32-ecb2-78d38eefdd74.png)

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

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

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

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

```typescript
// 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' });
  }
}
```

```typescript
// 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;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570986/e0391ff4-c430-b6aa-eb66-85732e31f648.png)


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