Hexabase（ヘキサベース）は企業においても安心して利用できる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 というオブジェクトが取得できます。
import { HexabaseClient } from "@hexabase/hexabase-js";
初期化
HexabaseClientを初期化します。
const client = new HexabaseClient();
認証
Hexabaseでは業務利用を想定しているため、利用する際に認証情報が必須になります。最初はメールアドレスとパスワードで認証し、その後はトークンを使ってGraphQLにアクセスします。 client を使って処理します。
初回の認証は次のようになります。emailとパスワード、またはトークンが必須です。
await client.login({email, password, token});
後はこの client に対して処理を行います。
データを作る
データはワークスペース → プロジェクト → データストア → データアイテムの順番にデータを取得します。
client.setWorkspace(workspaceId);
// 対象プロジェクト
const project = await client.currentWorkspace.project(projectId);
// 対象データストア
const datastore = await project.datastore(datastoreId);
// 新規レコード
const item = await datastore.item();
選択項目について
Hexabaseでは、データストアの各フィールドに対してテキストや数字などの型を指定できます。利用できる型は以下の通りです。
- テキスト
- 複数行テキスト
- 選択肢
- ラジオ
- チェックボックス
- 自動採番（入力はできません）
- 数値
- 計算式（入力はできません）
- 日付・時刻
- 添付ファイル
- ユーザー
- データベース参照
- ラベル（画面表示のみ。入力はできません）
- セパレータ（画面表示のみ。入力はできません）
今回は上記の型の内、選択肢とラジオ、そしてチェックボックスについて紹介します。
選択肢について
一つしか選択できない項目の場合、selectタグを利用するかと思います。この場合、まずHexabaseにある選択項目を表示します。この情報は、datastore オブジェクトの field に格納されています。
以下は、 Category という項目の選択肢を取得し、HTMLに表示する例です。選択肢は id と指定してください。
const field = await params.datastore.field('Category');
// オプション項目を取得
const options = await field.options();
// HTMLに反映
const html = options.map(option => `
<option id="${option.id}">${option.value.ja}</option>
`).join('');
document.querySelector('form [name="Category"]').innerHTML = html;
保存について
保存時には、この選択された項目を指定します。
// 選択肢・ラジオの場合
item.set('Category', 10000);
// チェックボックスの場合
item.set('Category', [10000, 10001]);
そして save メソッドで保存します。
await item.save();
まとめ
SDKを使うことで、選択肢・チェックボックスの更新が簡単にできます。ぜひご活用ください。他にも利用できる型は多数あるので、アプリケーションの設計に合わせて活用してください。
Hexabaseには他にもバイナリファイルのアップロードや認証などの機能があります。それらの機能も利用してください。