Hexabase JavaScript/TypeScript SDK × Vue3でアプリを作る（データストアの新規作成・一覧編）

Hexabase JavaScript/TypeScript SDKをVue3アプリの中で利用します。あまり複雑にならないように解説しますので、ぜひ試してみてください。

[前回は認証を実装しました](https://qiita.com/goofmint/items/40126a26f66f96cc2e16)ので、今回はデータストア（クラウドデータベース）へのデータ作成と、データの一覧取得について実装します。

## コード

コードは[hexabase/example\-vue3\-todo: Hexabase demo todo app by vue3 project](https://github.com/hexabase/example-vue3-todo)にアップしてあります。実装時の参考にしてください。

## 必要なもの

- Hexabaseのアカウント

## データストアの設計

今回は以下のようなフィールドを作成しています。

| フィールド名 | 型             |
| ------------ | -------------- |
| name         | テキスト       |
| description  | 複数行テキスト |
| deadlineDate | 日付・時刻     |

![0521 app.hexabase.com - 1222170400.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/84a6696d-3a6e-714e-b440-1e2cdb19ef09.jpeg)


## プロジェクトID、データストアIDをストアに定義する

Hexabaseでプロジェクトやデータストアを作成した際にできるID（URLに表示）を `.env.development.local` に定義します。

> URL例 `https://app.hexabase.com/pj/100/ds/200/list/all` だとすれば、プロジェクトIDが100、データストアIDが200になります。

```
VITE_PROJECT_ID=YOUR_PROJECT_ID
VITE_DATASTORE_ID=YOUR_DATASTORE_ID
```

そして、 `stores/hexabase.ts` にて読み込み・設定します。

```ts
const PROJECT_ID = import.meta.env.VITE_PROJECT_ID;
const DATASTORE_ID = import.meta.env.VITE_DATASTORE_ID;

// 中略

// Hexabase project and datastore IDs
const projectId = PROJECT_ID;
const datastoreId = DATASTORE_ID;

return {
	// 中略
	projectId,
	datastoreId,
};
```

これで `store.projectId` のようにしてアクセスできるようになります。

## 新規作成

新規作成は `views/AddTaskView.vue` にて行います。そのためのルーティングを `router/index.ts` に追加します。

```ts
import AddTaskView from "@/views/AddTaskView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    // New task form
    {
      path: "/add",
      name: "addTask",
      component: AddTaskView,
    },
  ],
});
```

`views/AddTaskView.vue` は `components/TaskForm.vue` を読み込んでいるだけです。

```vue
<script setup lang="ts">
import TaskForm from "../components/TaskForm.vue";
</script>

<template>
  <main>
    <TaskForm />
  </main>
</template>
```

そしてタスク一覧画面から遷移できるように `components/TaskList.vue` に `router-link` を追加します。

```html
<el-row class="actions">
	<router-link to="/add">Add task</router-link>
</el-row>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/916fac09-2930-dfbb-1fd1-b79a470838a0.png)


## TaskForm.vueについて

まずフォームに関する情報を作成します。

```ts
// Form instance and inputs
const formRef = ref<FormInstance>();
const taskForm = reactive<{
  name: string;
  description: string;
  deadlineDate: string;
}>({
  name: "",
  description: "",
  deadlineDate: "",
});
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/99f7ee9b-8721-2d51-184b-105f314168dc.png)


### フォームの送信

フォームの送信処理では、まずバリデーションを行います。

```ts
// Submit form
const save = (formEl: FormInstance | undefined) => {
  // If there is no form element, return
  if (!formEl) return;
  // Validate form
  formEl.validate(async (valid: boolean) => {
    // If validation fails, return
    if (!valid) return;
    _saveItem();
  });
};
```

そして `_saveItem` 関数ではHexabaseへのデータ保存処理を行います。データの保存処理は `store.client.item.create` にて行います。

保存がうまくいったら、 `store.addItem(itemNew!);` にてデータをストアに追加して、前の画面（一覧画面）に戻ります。

```ts
const _saveItem = async () => {
  // Build item parameters
  const item = {
    name: taskForm.name,
    description: taskForm.description,
    deadlineDate: new Date(taskForm.deadlineDate),
  };
  // Build parameters
  const params: CreateNewItemPl = {
    item,
    use_display_id: true,
    return_item_result: true,
  };
  // Save item
  const { itemNew, error } = await store.client.item.create(
    store.projectId,
    store.datastoreId,
    params
  );
  // If save fails, show error message
  if (error) {
    _setMessage("Failed to create item.");
    return;
  } else {
    // If save succeeds, add item to store
    store.addItem(itemNew!);
    router.back();
  }
```

## 一覧画面について

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/1639c264-8748-0801-0444-334a8878603d.png)


一覧画面は `components/TaskList.vue` になります。ここでは、まずタスクデータを一覧取得します。

```ts
// Get items from Hexabase datastore
const { dsItems, error } = await store.client.item.get(
  {
    page: 1,
    per_page: 10,
  },
  store.datastoreId,
  store.projectId
);
```

問題なければデータをストアに追加します。

```ts
// If there is an error, set the message
if (error) {
  message.value = JSON.parse(error)
    .map((e: any) => e.message)
    .join("\n");
} else {
  // If there is no error, set items to store
  store.setItems(dsItems?.items);
}
```

データはテーブルで一覧表示しています。詳細表示・編集は次回以降に実装します。

```html
<!-- Show list of datastore items -->
<el-table :data="store.items" v-if="store.items.length > 0">
	<el-table-column
		prop="i_id"
		label="ID"
		width="90"
		:show-overflow-tooltip="true"
	/>
	<el-table-column prop="title" label="Title" width="180" />
	<el-table-column fixed="right" label="Operations" width="120">
		<template #default="scope">
			<el-button
				link
				type="primary"
				size="small"
				@click.prevent="detail(scope)"
				>Detail</el-button
			>
			<el-button
				link
				type="primary"
				size="small"
				@click.prevent="edit(scope.row)"
				>Edit</el-button
			>
		</template>
	</el-table-column>
</el-table>
```

## まとめ

今回はHexabase JavaScript SDKを使って、データストアの新規作成と一覧表示について実装しました。

次回はデータの詳細表示・編集処理について実装します。

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