Hexabase JavaScript SDKで日報アプリを作る（その2：日報の登録と閲覧）

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

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

## Hexabaseの構造

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

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

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

### データストアのスキーマ

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

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

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

## 認証

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

```ts
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` を指定すると、データの詳細を取得できます。

```ts
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です。

```tsx
<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>
```

![FireShot Capture 115 - Create Next App - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/fe74c5bf-bcb1-d047-479b-083bfecae844.jpeg)


## 日報の登録

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

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

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

![FireShot Capture 116 - Create Next App - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/f5ab7fc6-8596-04cc-ef44-2d65ba210a04.jpeg)


## 日報の取得

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

```ts
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);
};
```

![FireShot Capture 117 - Create Next App - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/75c3fcc8-75dd-dd26-f875-a221221d8491.jpeg)


## まとめ

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

[Hexabase \| 新規事業向け開発・競争領域でのDX実現をサポート](https://hexabase.com/)