Hexabase TypeScript SDKの使い方（フィールドの追加・更新・削除）

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

この記事ではHexabase TypeScript SDKのインストールと、データストアのフィールドをCRUD操作する方法を紹介します。

## インストール

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

```bash
# 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` に対して処理を行います。

## データストアについて

データストアは、データベース機能になります。Hexabaseでは最上位にワークスペースがあり、その下にプロジェクト、そしてプロジェクトの下にデータストアがあります。

```jsx
// ワークスペースを設定
await client.setWorkspace('demo');
// プロジェクトを取得
const project = await client.currentWorkspace.project('demoProject');
// データストアを取得
const datastore = await project.datastore('demoTable');
```

## フィールドを追加する

この `datastore` に対して、フィールドを追加する操作です。

```jsx
const field = await datastore.field();
field!
	.set('dataType', 'text')
	.set('name', 'test_field')
	.set('displayId', 'test_field');
await field!.save();
```

データタイプは、フィールドの型になります。以下が指定できます。

| data_type | 項目の種類       | 一意キー | タイトルに利用 | 検索条件に利用 | 検索インデックスの有無 | 全文検索の対象とする | 一覧に表示する | アクション実行時に表示しない | APIの結果に表示しない |
| --------- | ---------------- | -------- | -------------- | -------------- | ---------------------- | -------------------- | -------------- | ---------------------------- | --------------------- |
| text      | テキスト         | 〇       | 〇             |                | 〇                     | 〇                   | 〇             |                              |                       |
| textarea  | 複数行テキスト   |          |                | 〇             | 〇                     | 〇                   |                |                              |                       |
| select    | 選択肢           |          |                | 〇             |                        |                      | 〇             |                              | 〇                    |
| radio     | ラジオ           |          |                | 〇             |                        |                      | 〇             |                              | 〇                    |
| checkbox  | チェックボックス |          |                | 〇             |                        |                      | 〇             |                              | 〇                    |
| autonum   | 自動採番         |          | 〇             |                | 〇                     | 〇                   |                |                              |                       |
| number    | 数値             |          |                | 〇             |                        |                      | 〇             |                              | 〇                    |
| calc      | 計算式           |          |                | 〇             |                        |                      | 〇             |                              | 〇                    |
| datetime  | 日付・時刻       |          |                | 〇             |                        |                      | 〇             |                              | 〇                    |
| file      | 添付ファイル     |          |                | 〇             | 〇                     |                      |                | 〇                           |                       |
| users     | ユーザー         |          |                | 〇             |                        |                      | 〇             |                              | 〇                    |
| dslookup  | データベース参照 |          |                | 〇             |                        |                      | 〇             |                              | 〇                    |
| label     | ラベル           |          |                |                |                        |                      |                |                              |                       |
| separator | セパレーター     |          |                |                |                        |                      |                |                              |                       |


この他、以下のようなオプションが指定できます。

```jsx
field!
	.set('search', true)   // 検索可能
	.set('showList', true) // 一覧表示
	.set('fullText', true) // 全文検索
	.set('unique', false)  // 一意制約
	.set('hideOnInput', false) // 入力時に非表示
	.set('hideFromApi', false) // APIから非表示
	.set('hasIndex', false); // インデックス
```

フィールドを追加したら、データストアのフィールド一覧も更新してください。

```jsx
await datastore.fields(true); // trueを指定すると強制リフレッシュ
```

## フィールドを更新する

フィールドを更新するには、 `field` に対して `save` メソッドを実行します。

```jsx
field!
	.set('dataType', 'number')
	.set('name', 'test_field')
	.set('displayId', 'test_field');
await field!.save();
```

## フィールドを削除する

フィールドを削除するには、 `delete` メソッドを実行します。

```jsx
await field!.delete();
```

## フィールドのオプションを設定する

フィールドタイプがラジオ、選択、チェックボックスの場合は、入力の選択肢を指定できます。

```jsx
const option = field!.option();
option!
	.set('value', {en: 'test', ja: 'test'})
	.set('displayId', 'test')
	.save();
```

## フィールドのオプションを取得する

フィールドのオプションを取得するには、 `options` メソッドを実行します。

```jsx
const options = await field!.options();
```

オプションを追加した際などは、リフレッシュしてください。

```jsx
await field!.options(true); // trueを指定すると強制リフレッシュ
```

## オプションを更新する

オプションを更新するには、 `save` メソッドを実行します。

```jsx
option!
	.set('value', {en: 'test2', ja: 'test2'})
	.set('displayId', 'test2')
	.save();
```

## オプションを削除する

オプションを削除するには、 `delete` メソッドを実行します。

```jsx
await option!.delete();
```

## まとめ

SDKを使うことで、データベース参照は簡単に操作できます。フィールドの追加や削除をAPI経由でできれば、動的にデータストアを変更できます。必要に応じて、テーブルを追加することもできるでしょう。

Hexabaseには他にもバイナリファイルのアップロードや認証などの機能があります。それらの機能も利用してください。

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