Hexabase TypeScript SDKを使って入力する型をチェックする

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

この記事ではHexabase TypeScript SDKのインストールと、アイテム操作時の型チェックについて解説します。

## インストール

インストールはnpmやyarnを使って行います。

```
# npmの場合
npm install @hexabase/hexabase-js

# yarnの場合
yarn add @hexabase/hexabase-js

```

## インポート

インポートすると、 `HexabaseClient` というオブジェクトが取得できます。

```jsx
import { HexabaseClient } from "@hexabase/hexabase-js";
```

## 初期化

HexabaseClientを初期化します。

```jsx
const client = new HexabaseClient();
```

### 認証

Hexabaseでは業務利用を想定しているため、利用する際に認証情報が必須になります。最初はメールアドレスとパスワードで認証し、その後はトークンを使ってGraphQLにアクセスします。 `client` を使って処理します。

初回の認証は次のようになります。emailとパスワード、またはトークンが必須です。

```jsx
await client.login({email, password, token});
```

後はこの `client` に対して処理を行います。

## プロジェクトを取得する

データレポートはプロジェクトに紐付きます。そこで、まず利用するプロジェクトを取得します。

### 現在のワークスペースを取得する

ログインした時点でHexabaseClientのcurrentWorkspaceが現在のワークスペースオブジェクトになっています。

```jsx
client.currentWorkspace
```

ワークスペースを切り替える場合には、 `setWorkspace` メソッドを使います。

```jsx
client.setWorkspace(newWorkspaceId);
```

そのワークスペースに紐付いているプロジェクトを取得します。

```jsx
const project = await client.currentWorkspace.projects(projectId);
```

## データストアへのアクセス時に必要な情報について

データストアへアクセスする際には以下の情報が必要です。

- データストアID `datastoreId`

さらにデータ取得を行う際の情報（ページ数、取得件数など） `params` が指定できます。以下がアクセス例です。

```jsx
const project = client.currentWorkspace.project(projectId);
const datastore = project.datastore(datastoreId);
const items = await datastore.items();
const item = items[0];

// 新しいデータを保存する場合
const item = await datastore.item();
```

## データ型について

Hexabaseでは以下のデータ型が存在します。

データ型

Hexabaseでは以下のデータ型が存在します。

| データ型 | 指定できる型 | 複数指定 |
| --- | --- | --- |
| テキスト | 文字列 |  |
| 複数行テキスト | 文字列 |  |
| 選択肢 | 文字列 |  |
| ラジオ | 文字列 |  |
| チェックボックス | 文字列の配列 | ○ |
| 自動採番 | 指定不可 |  |
| 数値 | 数字 |  |
| 計算式 | 指定不可 |  |
| 日付時刻 | 日付 |  |
| 添付ファイル | FileObjectの配列 | ○ |
| ユーザー | ユーザーの配列 | ○ |
| データベース参照 | アイテム |  |

上記のような内容で入力チェックが行われます。

## テキストの例

テキスト型の例です。間違った型で値をセットすると、例外処理になります。

```jsx
const message = 'Hello';
item.set('textField', message);
try {
	item.set('textField', 100);
} catch (e) {
	expect(e instanceof Error).toBe(true);
}
try {
	item.set('textField', new Date);
} catch (e) {
	expect(e instanceof Error).toBe(true);
}
try {
	item.set('textField', ['a']);
} catch (e) {
	expect(e instanceof Error).toBe(true);
}
```

## チェックボックス、セレクト、ラジオの例

チェックボックスやセレクト、ラジオはあらかじめ選択肢を管理画面で作成します。この選択肢にマッチしていない値は指定できません。

```jsx

const checkbox = await datastore.field('checkboxField');
const options = await checkbox.options();
// 選択肢の指定は日本語、英語のラベル、またはオプションのdisplayIdが指定できます
const newOptions = [options![0].value.en, options![1].value.ja];
item.set('checkboxField', newOptions);

try {
  // 存在しないものを指定
	item.set('checkboxField', ['NO_VALUE']);
} catch (e) {
  // エラーに
	expect(e instanceof Error).toBe(true);
}
```

## ファイル、アイテムの例

ファイルはFileObject、アイテムはItemを指定してください。

```jsx
const item = await datastore.item();
const field = await datastore.field('itemField');
const refItem = await field.datastore.item();
refItem.set('Title', 'test');
await refItem.save();
// nullは指定できます
item.set('itemField', null);
item.set('itemField', refItem);
```

ファイルは `item.file()` でFileObjectのインスタンスが返ってきます。

```jsx
// nullは指定できます
item.set('fileField', null);
const file = item.file();
const data = new Blob(['test'], { type: 'text/plain' });
file
	.set('data', data)
	.set('name','test.txt');
item.set('fileField', [file]);
```

## まとめ

Hexabaseは柔軟なクラウドデータベースですが、あらかじめスキーマ設計を行うことで、それに合わせた入力チェックが行われます。クライアントサイドでチェックできるので、サーバーへ送信前に誤った値が入らないように開発できます。

ぜひHexabaseを使ってアプリ開発を行ってください。

[株式会社 Hexabaseー法人向けクラウドシステム『Hexabase』ー](https://www.hexabase.com/)