Hexabase（ヘキサベース）は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、JavaScript SDKの開発が進められています。

今回はこのJavaScript SDKを使って、日報アプリを作成する方法を紹介します。前回は画面の紹介と仕様について解説しましたので、今回はHexabaseの認証、データストアの操作について解説します。

Hexabaseの構造

Hexabaseでは、最上位にワークスペースがあります。その中に複数のプロジェクトがあり、さらにプロジェクトは複数のデータストアを持ちます。データストアはテーブルのようなもので、データを保存するための場所です。

今回は以下のような名前を付けています。

ワークスペース：demo
プロジェクト：DailyReport
データストア：Report

データストアのスキーマ

Hexabaseではデータストアに対してスキーマ（フィールド）を設定します。今回は以下の通りです。

Title: テキスト
body: 複数行テキスト
date: 日付
user: ユーザー

なお、ユーザーは「配列」で管理されるので注意してください。

認証

ログイン画面ではメールアドレスとパスワードを入力してもらい、認証が通ったら（エラーがなければ）、ワークスペースを設定しています。

const login = async () => {
	await client.login({ email, password });
	await client.setWorkspace(process.env.NEXT_PUBLIC_WORKSPACE); // demo
	router.push('/reports');
};

日報の一覧

日報一覧画面では、データストアから日報の一覧を取得して表示します。データストアの操作は以下のように行います。

datastore.items の1つ目の引数は検索条件です。2つ目の引数で deep: true を指定すると、データの詳細を取得できます。

const init = async () => {
	if (!client.currentWorkspace) {
		router.push("/");
		return null;
	}
	// プロジェクトの取得
	const project = await client.currentWorkspace!
		.project(process.env.NEXT_PUBLIC_PROJECT); // DailyReport
	// データストアの取得
	const datastore = await project
		.datastore(process.env.NEXT_PUBLIC_DATASTORE); // Report
	// データの取得
	const items = await datastore.items(undefined, {deep: true});
	setItems(items);
};

表示する際には <T> を使って型指定ができます。 item.id はデータストアのユニークIDです。

<TableBody>
    {items.map((item, index) => (
        <TableRow key={index}>
            <TableCell>
                <Link href={`/reports/${item.id}`}>
                    {item.get<string>("Title")}
                </Link>
            </TableCell>
            <TableCell>{item.get<Date>("date")?.toLocaleDateString()}</TableCell>
            <TableCell>{item.get<User[]>("user")?.[0]?.userName}</TableCell>
        </TableRow>
    ))}
</TableBody>

日報の登録

日報を登録する際には、該当データストアの行データ（アイテム）を作成し、入力値を適用して保存します。キーチェーンメソッドで値を設定できます。

現在ログインしているユーザーは client.currentUser で取得できます。

const save = async () => {
	// プロジェクトの取得
	const project = await client.currentWorkspace!
		.project(process.env.NEXT_PUBLIC_PROJECT);
	// データストアの取得
	const datastore = await project
		.datastore(process.env.NEXT_PUBLIC_DATASTORE);
	// 新規アイテムの作成
	const item = await datastore.item();
	// 入力値の適用&保存
	await item
		.set('Title', title)
		.set('body', body)
		.set('date', new Date(date))
		.set('user', [client.currentUser!]) // 配列なので注意
		.save();
	router.push('/reports');
};

日報の取得

詳細画面では日報のデータを取得しています。前の画面から送られてきた id を使って、 datastore.item でアイテムを取得します。

const init = async () => {
	if (!client.currentWorkspace) {
		router.push("/");
		return null;
	}
	const project = await client.currentWorkspace!
		.project(process.env.NEXT_PUBLIC_PROJECT);
	const datastore = await project
		.datastore(process.env.NEXT_PUBLIC_DATASTORE);
	const item = await datastore.item(params.id);
	setItem(item);
};

まとめ

今回は日報アプリの作り方を通じて、HexabaseのデータストアのCRUD操作を解説しました。SDKを利用することで、データ操作を簡単にできますので、ぜひ活用してください。

Hexabase | 新規事業向け開発・競争領域でのDX実現をサポート