スプレッドシート感覚でDBが作れる！BaserowでToDoアプリを作ってみた

2024年7月6日 17:54

こんにちは。なおしむです。
最近、ノーコード・ローコードやSaaS周りの技術を追っています。
これらの技術はBtoBで展開されることが多く、個人としてはとっつきにくい印象があります。そんな中、無料でも使えるBaserowというサービスを見つけました。
Baserowの概要としては、Googleスプレッドシートのような画面でデータを管理するだけで、入力フォームやWebAPIを自動生成してくれるサービスです。実際に使ってみると「個人開発でのデータ管理はコレで十分だ。」という気分になりました。
今回はこのBaserowの機能をToDoアプリを題材に紹介していきます。

概要

まずはサービスの概要です。
公式サイトには次のように書かれています。

The open platform to create scalable databases and applications—without coding.

https://baserow.io

ノーコードでスケーラブルなデータベースとアプリケーションを作成するためのオープンなプラットフォームだそうです。

料金は次の通りです。とにかく無料でも使えるのが魅力的です。

セルフホスト版は無料
クラウド版は無料プランあり。データ量やユーザ数に制限はあるが機能はだいたい使える。試用期間のような期限はない。

次は機能についてです。いろんな機能がありますが、私がポイントだと思ったのは次の3点です。

GoogleSpreadSheetのような画面でDBのテーブルやデータを管理できる
データ挿入用の入力フォームがカンタンに作成できる
作成したテーブル定義やデータにはWebAPIからアクセスできる

他にもwebhookやデータ連携などのさまざまな機能がありますが、そこは上級者向けなので今回は省略します。
上記3つの機能について紹介していきます。

GoogleSpreadSheetのような画面でDBのテーブルやデータを管理できる

まず始めはテーブルの作成についてです。
今回はToDoリストを作っていきますが、チュートリアルに従うだけで簡単に作れます。
作成したテーブルはこんな感じ。

見た目はGoogleスプレッドシートとほとんど同じです。
違うところはカラム（列）を追加するときに入力値の型を指定することくらい。カラムの型には文字列や数値のような基本的なものだけでなく、SingleSelectやMultiSelectやLastModifiedなどさまざまな選択肢があり、便利そうです。
今回は、タスク名はSingleLineString、ステータスはSingleSelect(todo/doing/done)にしました。

データ挿入用の入力フォームがカンタンに作成できる

さて、ココからがこのサービスの強いところです。
データの入力画面がカンタンに作れます。
さきほどスプレッドシートのような画面にテーブルを定義しましたが、その定義を使ってドラッグ＆ドロップで簡単に作成できます。
次の画像は作成した入力画面です。
入力順序を入れ替えたり、ヘッダーに画像を入れたり、説明文を追加したり、ある程度カスタマイズ可能です。

また、入力フォームを作成した後にテーブルのカラム情報を変更すると、それに合わせて入力フォームも自動的にメンテしてくれます。メンテ漏れをよくやる私としてはありがたい。。

作成したテーブル定義やデータにはWebAPIからアクセスできる

WebAPIについても、作成したテーブル定義に基づいて自動的に作成されています。
またAPI仕様書も自動生成されており、使用方法に迷うことがありません。

たとえば、テーブル定義の取得は次の通りです。`YOUR_DATABASE_TOKEN`の部分には設定画面取得したトークンを挿入します。

リクエスト

curl \
-X GET \
-H "Authorization: Token YOUR_DATABASE_TOKEN" \
"https://api.baserow.io/api/database/fields/table/320263/"

レスポンス

[
	{
		"id": 2328010,
		"table_id": 320263,
		"name": "タスク名",
		"order": 0,
		"type": "text",
		"primary": true,
		"read_only": false,
		"description": null,
		"text_default": ""
	},
	{
		"id": 2328122,
		"table_id": 320263,
		"name": "ステータス",
		"order": 1,
		"type": "single_select",
		"primary": false,
		"read_only": false,
		"description": null,
		"select_options": [
			{
				"id": 1762618,
				"value": "todo",
				"color": "orange"
			},
			{
				"id": 1762619,
				"value": "doing",
				"color": "dark-orange"
			},
			{
				"id": 1762620,
				"value": "done",
				"color": "light-blue"
			}
		]
	}
]

レスポンスでカラム(列)の情報が返ってきていることがわかります。

入力されたタスクデータも同様に取得できます。
リクエスト

curl \
-X GET \
-H "Authorization: Token YOUR_DATABASE_TOKEN" \
"https://api.baserow.io/api/database/rows/table/320263/?user_field_names=true"

レスポンス

{
	"count": 3,
	"next": null,
	"previous": null,
	"results": [
		{
			"id": 1,
			"order": "1.00000000000000000000",
			"タスク名": "Logo redesign",
			"ステータス": {
				"id": 1762618,
				"value": "todo",
				"color": "orange"
			}
		},
		{
			"id": 2,
			"order": "2.00000000000000000000",
			"タスク名": "write contents",
			"ステータス": {
				"id": 1762620,
				"value": "done",
				"color": "light-blue"
			}
		},
		{
			"id": 3,
			"order": "3.00000000000000000000",
			"タスク名": "Write blog post",
			"ステータス": {
				"id": 1762618,
				"value": "todo",
				"color": "orange"
			}
		}
	]
}

シートに入っていた3つのタスクが取得できました。

まとめ

今回はBaserowというサービスについてToDoリストを題材に紹介しました。
スプレッドシートのようなUI上でテーブル定義をするだけで、入力フォームやWebAPIを勝手に作ってくれるのがとても便利だと思いました。これを使って１つサービスを作ってみようと思います。

この記事が気に入ったらサポートをしてみませんか？