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

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

前回は認証を実装しましたので、今回はデータストア（クラウドデータベース）へのデータ作成と、データの一覧取得について実装します。

コード

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

必要なもの

• Hexabaseのアカウント

データストアの設計

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

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

プロジェクト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 にて読み込み・設定します。

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 に追加します。

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 を読み込んでいるだけです。

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

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

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

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

TaskForm.vueについて

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

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

フォームの送信

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

// 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!); にてデータをストアに追加して、前の画面（一覧画面）に戻ります。

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();
  }

一覧画面について

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

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

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

// 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);
}

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

<!-- 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』ー