Hexabase JavaScript SDKで日報アプリを作る（その1：画面の紹介と仕様）

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

今回はこのJavaScript SDKを使って、日報アプリを作成する方法を紹介します。この記事では、画面の紹介と仕様について解説します。

## コード

コードは[hexabase/sample\-nextjs\-dailyreport](https://github.com/hexabase/sample-nextjs-dailyreport)にて公開しています。ライセンスはMIT Licenseです。

## Hexabase JavaScript SDKとは

Hexabase JavaScript SDKは、HexabaseのAPIをJavaScriptから利用するためのライブラリです。HexabaseのAPIはRESTful APIおよびGraphQLで提供されており、JavaScript SDKはこのAPIを利用するためのラッパーとなります。

Hexabaseでは、この他にもFlutter SDKを提供しています。

## 日報アプリのアーキテクチャ

日報アプリはNext.jsを利用しています。また、画面のほとんどをv0 by Vercelによって生成しています。

## 日報アプリの画面

日報アプリの画面は、以下の4画面から構成されています。

### ログインページ

最初に表示される画面です。ユーザー名とパスワードを入力してログインします。

![FireShot Capture 114 - Create Next App - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/bdd41483-14dc-f5c7-2e01-bdf4e04482c8.jpeg)


### 日報一覧画面

ログイン後に表示される画面です。日報の一覧が表示されます。画面上部にプラスアイコンがあり、クリックすると日報の新規作成画面に遷移します。

![FireShot Capture 115 - Create Next App - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/6bda50db-43a0-fecd-2f34-2ea7350c76c6.jpeg)


また、日報のタイトルをクリックすると日報の詳細画面に遷移します。

### 日報新規作成画面

![FireShot Capture 116 - Create Next App - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/dc6cd8d0-6008-5a97-5e5a-4ff90c6d55da.jpeg)


日報の新規作成画面です。日報のタイトルと内容、日付を入力して保存します。保存成功すると、日報一覧画面に遷移します。

### 日報詳細画面

![FireShot Capture 117 - Create Next App - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/3520b1e9-f56f-c121-08f4-61426e064681.jpeg)


日報の詳細画面です。日報のタイトルと内容、日付が表示されます。上部のBackリンクをクリックすると、日報一覧画面に遷移します。

## Hexabase SDKの初期化

今回はContextを使って、アプリ全体でHexabase SDKを利用できるようにします。まず `src/contexts/hexabase.ts` を作成します。

初期化時には、基本的に引数不要です。引数を使うのは、ステージング環境のようにAPIエンドポイントが異なる場合になります。

```ts
"use client";
import { createContext } from 'react'
import { HexabaseClient } from '@hexabase/hexabase-js';

export type HexabaseInfo = {
  client: HexabaseClient
}

export const HexabaseContext = createContext<HexabaseInfo>(
	{
		client: new HexabaseClient() // 初期化
	}
);
```

続いて、 `src/contexts/hexabase-provider.tsx` を作成します。

```ts
"use client";
import { HexabaseContext, HexabaseInfo } from './hexabase';

type Props = {
  hexabaseInfo: HexabaseInfo
  children: React.ReactNode
}

const HexabaseProvider = ({ hexabaseInfo, children }: Props) => {
  return <HexabaseContext.Provider value={hexabaseInfo}>{children}</HexabaseContext.Provider>;
}

export default HexabaseProvider
```

最後に、 `src/pages/_app.tsx` でこのContextを利用します。

```ts
import type { AppProps } from 'next/app'
import HexabaseProvider from '@/contexts/hexabase-provider';
import { HexabaseClient, Project } from '@hexabase/hexabase-js';

const App = ({ Component, pageProps }: AppProps) => {
	return (
			<HexabaseProvider hexabaseInfo={{
				client: new HexabaseClient(),
			}}>
				<Component {...pageProps} />
			</HexabaseProvider>
	)
}
export default App
```

後は任意の画面で、以下のようにしてHexabase SDKを利用できます。

```ts
const { client } = useContext(HexabaseContext);
```

## まとめ

今回は、Hexabase JavaScript SDKの初期化方法と日報アプリ全体の紹介をしました。次回は実際にHexabase SDKを使って、日報アプリを作成する方法を解説します。