はじめに

チームみらいさんが公開していた収支表、みなさんご覧になったことありますか？あれ、めちゃくちゃ視覚的でわかりやすいんですよね。

そんな神フォーマットを、OSSとして再構成してくれたのが平野さんの「marumie」。家計簿用ですが、これ… 会社の収支管理にも応用できるのでは？ と思い、導入してみました。

本記事では、

marumie の立ち上げ方法
初期データの登録方法（Supabase Studio編）
企業利用に耐えるようなカスタマイズポイント

などをまとめます。最終的に可視化されたグラフも見られますよ！

導入の背景と目的

✅ 背景

チームでの経費・売上・支出をもっと視覚的に把握したい
既存のExcelでは限界があり、データが属人化しやすい
メンバーが「何にどれだけ使ってるのか」を共有・納得しながら経営判断したい

✅ 導入目的

OSS「marumie」をベースに、社内向けの“みえる化収支表”を構築する。
対象は、自分の会社「澤田商店」内の事業部収支です。

Step 0. 必要な前提知識・ツール

Docker：Supabaseをローカルで動かすため
pnpm：Node.jsのパッケージマネージャ
Node.js：実行環境（ver 18.x 系）
Prisma：DBスキーマ管理
Supabase：FirebaseライクなBaaS（DB & 認証）
Git：OSSクローン & コード管理

Step 1. marumie のクローンとセットアップ

git clone https://github.com/RuiHirano/marumie.git
cd marumie
pnpm install

✅ もし pnpm コマンドがない場合は、まず Node.js と pnpm をインストール

npm install -g pnpm

✅ Node.js は公式サイトからインストール。18.x系推奨

node -v # バージョン確認

環境変数を設定

cp .env.local.example .env.local

🌊 Step 2. Supabase でつまずく

次に pnpm db:reset → pnpm supabase:reset が走りますが、ここでトラブル発生。

ENOENT: no such file or directory, stat '...supabase\bin\supabase.EXE'

Supabase CLI が pnpm dlx 経由で動かず。
Windows環境で .EXE が見つからないというエラー。

🔄 Step 3. Supabase CLI を手動インストール…できない！

試しにグローバルでインストールしようとしたら：

npm install -g supabase

しかし…Supabase CLIは グローバルインストール非推奨！

Installing Supabase CLI as a global module is not supported.
Please use one of the supported package managers:
https://github.com/supabase/cli#install-the-cli

これにより、ルートは npx supabase に切り替えることに。

🐳 Step 4. Supabase CLI には Docker が必須と判明！

Supabase CLI はローカル環境を Docker で構築します。
つまり Docker をまだ入れてないと、ここで完全ストップ。

🧭 Step 5. Docker を初めて構築（Windows）

✅ 準備内容

Windows 10/11（22H2以上）
メモリ4GB以上
WSL2（Linux Subsystem）有効化済み
BIOS で仮想化 ON（VT-x）

✅ インストール手順

Docker公式サイトから Docker Desktop for Windows をDL
.exe 実行し、「Use WSL2 based engine」にチェック
インストール後に再起動
PowerShellで確認：

docker --version
docker run hello-world

無事に Hello from Docker! が出ればOK！🐳

🏁 Step 6. Supabase 再挑戦 → 完走！

Dockerが入ったので、Supabase CLIを npx 経由で再実行：

npx supabase db reset

すると、必要なイメージが自動で pull → ローカルDBが構築されました！

続いて：

pnpm db:migrate
pnpm db:seed

そして最後に：

pnpm dev

ついに http://localhost:3000 に marumie が立ち上がる！ 🎉

Step 7. 最小限のデータを投入（初期レコード）

marumie は organization 情報が無いと動きません。
Supabase Studio で SQL を実行して入れます。

Studio にアクセス → http://localhost:54323 → SQL Editor へ。

insert into public.organizations (slug, name, display_name)
values ('sawada', 'sawada', '澤田商店')
on conflict (slug) do nothing;

または pnpm exec prisma studio でGUI管理ツールを開いて手動入力も可能です。

Step 8. 収入・支出データの登録

Supabase Studio の「Table Editor」から以下のテーブルを直接編集できます。
（※ localhost 環境では http://localhost:54323 にアクセス）

主に操作するテーブル一覧：

┌──────────────────────┬────────────────────┐
│ テーブル名               │ 用途                     │
├──────────────────────┼────────────────────┤
│ organizations           │ 組織（例：澤田商店）         │
│ personaltransactions    │ 各種収入・支出データ         │
└──────────────────────┴────────────────────┘

🔽 例：personaltransactions に入力したデータ

┌────┬────────┬────────┬────────────┬────────────────────┬──────────┐
│ id │ amount │ category │ date       │ description        │ type     │
├────┼────────┼────────┼────────────┼────────────────────┼──────────┤
│ 1  │ 1200000│ 売上     │ 2025-10-01 │ 月初の入金         │ INCOME   │
│ 2  │ -45000 │ 通信費   │ 2025-10-03 │ WiFiや携帯代       │ EXPENSE  │
└────┴────────┴────────┴────────────┴────────────────────┴──────────┘

※ amount は 収入なら正の値、支出なら負の値 で入力する必要があります。

入力した内容は即座に marumie の画面にグラフとして反映されます。
この即時性が、運用していてとても気持ちよく、データ入力のモチベーションにつながります 💡

最後に：企業利用でのポイント

複数人で使う場合は認証導入を検討（Supabase Authなど）
カテゴリの整備：会計科目とリンクさせると管理がラクに
部署別 slug 運用：slug = route_sales や slug = delivery などで分けてもOK

🌱 まとめ：森を抜けて、灯りがともるまで

最初は「チームで収支見える化したい」という動機からスタートした marumie 導入。

でも、

PowerShellの制限解除
Supabase CLIの仕様理解
Docker構築（初体験！）

…と、まるで迷宮のような開発者体験も味わいました。

しかし、このプロセス自体が「組織の健全性をコードで支える」未来への第一歩。

チームみらい収支表をベースにしながら、もっと多くの中小企業やスタートアップが、自分たちの数字と向き合う文化を持てるように──
そんな願いを込めて、今後も開発・発信していきます 🌍

🙏 Special Thanks

OSS公開してくれた @RuiHirano さん
→ 「まる見え家計簿」を作った理由──OSSから生まれたシンプルで美しい家計簿
収支表の発想源をくれた「チームみらい」の皆さん