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を利用することで、データ操作を簡単にできますので、ぜひ活用してください。