React NativeでDrizzle ORMを使ってSQLiteに接続するにはどうすれば良いですか？

Drizzle ORMとreact-native-sqlite-storageパッケージをインストールし、SQLite接続を設定します。

React NativeでSQLiteを使用する利点は何ですか？

SQLiteはモバイルアプリに適した軽量なデータベースで、オフラインでも動作するため、モバイルアプリのローカルデータ管理に適しています。

Drizzle ORMをReact Nativeで使う利点は何ですか？

Drizzle ORMは型安全なクエリをサポートし、エラーの少ないデータベース操作を可能にするため、モバイル開発でのデータ管理が効率化されます。

【Drizzle】React NativeでSQLiteに接続する方法 - モバイルアプリでのデータベース管理

概要

この記事では、Drizzle ORMを用いてReact NativeアプリでSQLiteデータベースを管理する方法を解説します。Drizzle ORMはJavaScriptおよびTypeScript対応の型安全なORMで、SQL構文のようなクエリ記述が可能なため、モバイルアプリでのデータ操作をシンプルかつ安全に行えます。また、SQLiteは軽量でローカルデータを扱いやすく、オフライン環境でも使用できるため、モバイルアプリのデータベース管理に非常に適しています。

Drizzle ORMとSQLiteの概要

Drizzle ORM：React Nativeプロジェクトで使える型安全なORMで、データベース操作をシンプルに行える点が特徴です。TypeScriptとの互換性が高く、エラーの少ないコードが記述できます。
SQLite：軽量でシンプルなリレーショナルデータベースで、オフライン対応が必要なモバイルアプリで広く使われています。この組み合わせにより、React Nativeアプリ内でのローカルデータ管理が簡単に実装できます。

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

React Nativeプロジェクトのセットアップ

まず、新規のReact Nativeプロジェクトを作成します。

npx react-native init `Drizzle`SQLiteExample
cd `Drizzle`SQLiteExample

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

SQLiteを使うため、react-native-sqlite-storageとdrizzle-ormパッケージをインストールします。

npm install drizzle-orm react-native-sqlite-storage

次に、react-native-sqlite-storageをReact Nativeプロジェクトにリンクする必要があります。iOSとAndroidでの手順は以下の通りです。

iOSでの設定

iOSディレクトリに移動して、CocoaPodsでライブラリをインストールします。
```
cd ios
pod install
cd ..
```

Androidでの設定

android/app/src/main/java/.../MainApplication.javaを開き、new SQLitePluginPackage()をgetPackagesメソッドに追加します（通常は自動リンクで完了しています）。

Drizzle ORMとSQLiteの接続設定

react-native-sqlite-storageを利用してSQLiteデータベースを作成し、Drizzle ORMを使って接続します。以下は、database.jsファイルの例です。

// database.js
import { drizzle } from "drizzle-orm";
import SQLite from "react-native-sqlite-storage";
// SQLiteデータベースを開く
const sqlite = SQLite.openDatabase({ name: "app.db", location: "default" });
// `Drizzle` ORMの初期化
const db = drizzle(sqlite);
export default db;

この設定では、app.dbというSQLiteデータベースファイルを作成し、drizzle関数を通じてDrizzle ORMを使えるようにしています。

テーブルのスキーマ定義

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);
  return result;
}

getTasks関数は、tasksテーブル内のすべてのタスクを取得して返します。

データの更新

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

このupdateTask関数は、指定したidのタスクを完了済みに更新します。

データの削除

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

このdeleteTask関数は、指定されたidのタスクを削除します。

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

React NativeのコンポーネントでDrizzle ORMを使用し、データベース操作を実行します。以下は、タスクのリスト表示と新規タスクの追加を行うサンプルコードです。

// App.js
import React, { useEffect, useState } from "react";
import { View, Text, TextInput, Button, 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 style={{ fontSize: 24 }}>タスク一覧</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関数を使用して、データベースからタスクを取得し、リストに表示します。
新しいタスクの追加：TextInputで入力されたタスク名をデータベースに追加し、loadTasksでリストを再読み込みします。

エラー対処と注意点

SQLiteの接続エラー
react-native-sqlite-storageが正しくリンクされているか、iOSでのCocoaPodsインストール、Androidでの設定が正しいかを確認してください。
型エラー
Drizzle ORMでは型定義が重要です。スキーマに一致しないデータを挿入するとエラーが発生するため、TypeScriptの型チェックを活用して型のミスマッチを未然に防ぎましょう。
非同期操作の注意
データベース操作は非同期で行われるため、更新後にはリロードなどを行い、画面が最新の状態を反映するようにしましょう。

まとめ

Drizzle ORMとSQLiteを使用することで、React Nativeアプリでのデータ操作が型安全かつ効率的に行えます。react-native-sqlite-storageと組み合わせて、オフラインでも使用可能なSQLiteデータベースを導入することで、モバイルアプリにおけるデータ管理がシンプルで堅牢なものになります。モバイルアプリでのオフラインデータ対応が求められる場合に、Drizzle ORMとSQLiteは非常に有効な選択肢です。

参照:

Connecting to React Native SQLite | `Drizzle` ORM Documentation

概要