Drizzle ORMでExpoのSQLiteに接続するにはどうすれば良いですか？

Drizzle ORMとexpo-sqliteパッケージをインストールし、SQLiteデータベースに接続するための設定を行います。

ExpoとSQLiteの組み合わせの利点は何ですか？

ExpoとSQLiteを組み合わせることで、モバイルデバイス上でローカルデータベースを簡単に使用できるようになります。

Drizzle ORMはReact Nativeアプリでどのように役立ちますか？

Drizzle ORMは型安全なデータベース操作をサポートし、React Nativeアプリでのエラーの少ないデータ操作を可能にします。

【Drizzle】ExpoでSQLiteに接続する方法 - React Nativeアプリ開発のデータ管理

概要

この記事では、React NativeのExpo環境でDrizzle ORMを使用してSQLiteデータベースに接続する方法を解説します。Drizzle ORMは、型安全なORMであり、データベース操作が容易で安全に行えるため、React Nativeアプリのデータ管理に最適です。Expoは、React Nativeアプリの開発と配布を効率化するツールで、expo-sqliteモジュールを使用することで、SQLiteデータベースに簡単に接続できます。

Drizzle ORMとExpo SQLiteの概要

Drizzle ORM：型安全性が高く、TypeScriptと連携することでエラーを事前に防止できるORMです。SQLのような構文で、JavaScriptやTypeScriptプロジェクトにおけるデータベース操作を効率的に行えます。
Expo：React Nativeアプリ開発用のプラットフォームで、モバイルアプリの開発、ビルド、テスト、配布の一連のプロセスを簡略化します。
SQLite：軽量なローカルデータベースで、アプリのオフライン機能を実装する際に非常に便利です。特にモバイルアプリでのローカルデータ保存に最適です。 Drizzle ORMとExpo、SQLiteの組み合わせにより、React Nativeアプリのデータベース管理が簡単で効率的になります。

Expoプロジェクトでの`Drizzle` ORMとSQLiteの接続手順

Expoプロジェクトのセットアップ

まず、Expo CLIがインストールされていない場合は、以下のコマンドでインストールします。

npm install -g expo-cli

次に、新しいExpoプロジェクトを作成します。

expo init drizzle-expo-sqlite
cd drizzle-expo-sqlite

必要なパッケージのインストール

SQLiteとDrizzle ORMを利用するため、expo-sqliteとdrizzle-ormパッケージをインストールします。

expo install expo-sqlite
npm install drizzle-orm

expo-sqlite：Expo環境でSQLiteデータベースにアクセスするためのライブラリです。
drizzle-orm：Drizzle ORMは、型安全なデータベース操作が可能で、データの挿入、取得、更新、削除といった基本的な操作をシンプルに行えます。

Drizzle ORMとSQLiteの接続設定

Drizzle ORMを用いてSQLiteデータベースに接続するために、SQLiteデータベースインスタンスを作成し、Drizzle ORMを初期化します。以下のように、database.jsファイルを作成して接続設定を記述します。

// database.js
import { drizzle } from "drizzle-orm";
import * as SQLite from "expo-sqlite";
// SQLiteデータベースに接続
const sqlite = SQLite.openDatabase("app.db");
// `Drizzle` ORMを初期化
const db = drizzle(sqlite);
export default db;

この設定で、Drizzle ORMとSQLiteのインスタンスが接続され、dbオブジェクトを通してデータベース操作が可能になります。

テーブルのスキーマ定義

Drizzle ORMでは、テーブルのスキーマを定義することができます。以下はtasksというタスク管理用のテーブルを作成する例です。

// schema.js
import { sqlTable, sqlColumn } from "drizzle-orm";
// tasksテーブルの定義
export const tasks = sqlTable("tasks", {
  id: sqlColumn("id").int().primaryKey().autoIncrement(),
  title: sqlColumn("title").string().notNull(),
  completed: sqlColumn("completed").boolean().default(false),
});

このスキーマ定義では、tasksテーブルにid、title、completedの3つのフィールドが含まれます。idは自動インクリメントの主キー、titleはタスクの名前、completedは完了状態を示すブール型です。

データ操作 - 挿入、取得、更新、削除

Drizzle ORMを使って、SQLiteデータベース内のデータを管理します。以下に、タスクの挿入、取得、更新、削除の基本操作を解説します。

データの挿入

import db from "./database";
import { tasks } from "./schema";
async function insertTask(title) {
  await db.insert(tasks).values({ title, completed: false });
}

このinsertTask関数は、新しいタスクをtasksテーブルに挿入します。

データの取得

async function getTasks() {
  const result = await db.select().from(tasks);
  console.log(result);
}

getTasks関数は、すべてのタスクを取得し、コンソールに出力します。

データの更新

async function updateTask(id) {
  await db.update(tasks)
    .set({ completed: true })
    .where(tasks.id.equals(id));
}

このupdateTask関数は、指定されたidのタスクを完了済み（completed: true）に更新します。

データの削除

async function deleteTask(id) {
  await db.delete(tasks)
    .where(tasks.id.equals(id));
}

deleteTask関数は、指定されたidのタスクをtasksテーブルから削除します。

React Nativeコンポーネントでのデータ操作

ExpoでReact Nativeコンポーネントを使用し、Drizzle ORMを利用したデータベース操作を実装します。以下は、タスクのリストを表示し、新しいタスクを追加する簡単な例です。

// App.js
import React, { useEffect, useState } from "react";
import { View, Text, Button, TextInput, FlatList } from "react-native";
import db from "./database";
import { tasks } from "./schema";
export default function App() {
  const [taskTitle, setTaskTitle] = useState("");
  const [taskList, setTaskList] = useState([]);
  useEffect(() => {
    loadTasks();
  }, []);
  const loadTasks = async () => {
    const result = await db.select().from(tasks);
    setTaskList(result);
  };
  const addTask = async () => {
    await db.insert(tasks).values({ title: taskTitle, completed: false });
    setTaskTitle("");
    loadTasks();
  };
  return (
    <View style={{ padding: 20 }}>
      <Text>タスク一覧</Text>
      <FlatList
        data={taskList}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <Text style={{ padding: 10 }}>
            {item.title} - {item.completed ? "完了" : "未完了"}
          </Text>
        )}
      />
      <TextInput
        placeholder="新しいタスクを入力"
        value={taskTitle}
        onChangeText={setTaskTitle}
        style={{ borderBottomWidth: 1, marginVertical: 10 }}
      />
      <Button title="タスクを追加" onPress={addTask} />
    </View>
  );
}

このApp.jsコンポーネントは、次の機能を持っています。

タスクの一覧表示：loadTasks関数を使用して、データベースからタスクを取得し、FlatListで一覧表示します。
新しいタスクの追加：TextInputで入力されたタスク名を使用し、addTask関数でデータベースにタスクを挿入します。

エラー対処と注意点

データベース接続エラー
expo-sqliteモジュールを正しくインストールしているか確認してください。接続エラーが発生する場合は、データベースファイルの指定や接続設定を見直しましょう。
型エラー
Drizzle ORMでは型安全性が重要です。スキーマに合わないデータを操作しようとするとエラーが発生します。TypeScriptの型チェックを活用して、事前にエラーを防止することが推奨されます。
非同期操作の管理
Expo環境では、データベース操作が非同期で行われるため、データの更新後はリロードや画面の更新を行って、最新のデータが表示されるようにしましょう。

まとめ

Drizzle ORMを使うことで、Expo環境のReact Nativeアプリにおいて型安全かつ簡単にSQLiteデータベースを操作できます。expo-sqliteモジュールを使ってローカルデータベースに接続することで、モバイルアプリのオフライン機能やローカルデータ管理が容易になります。型安全なデータベース操作は、React Nativeアプリのデータ管理を効率化し、エラーの少ない堅牢なアプリ開発に役立ちます。

参照:

Connecting to Expo SQLite | `Drizzle` ORM Documentation

概要