空いている時間に、ちょこちょこと小さなWebアプリを作っていました。
大きなサービスを作るというより、「これ、あったら便利そう」「このUIを一度ちゃんと作ってみたい」 くらいの温度感で作ったものです。
今回作ったのは、次の2つです。
| 作ったもの | 内容 | 技術 |
|---|---|---|
| Counter | 複数の数値を増減できるデジタルカウンター | Vite / TypeScript / Tailwind CSS |
| Kakeibo | 支出を登録して月ごとに確認できる家計簿アプリ | React / TypeScript / Vite / Tailwind CSS / PocketBase |
どちらも派手なアプリではありません。
でも、こういう小さいアプリを実際に動くところまで作ると、学べることがかなり多いです。
Counter
まず作ったのが、シンプルなデジタルカウンターです。
機能としてはかなり単純です。
- カウンターの数値を増やす
- カウンターの数値を減らす
-5、-2、+2、+5のようにまとめて調整する- カウンター名を変える
- カウンターを追加する
- カウンターを削除する
- 数値をリセットする
ただ、実際に作ってみると、単純なカウンターでも考えることがあります。
たとえば、プラスボタンとマイナスボタンはどれくらい大きい方が押しやすいのか。
リセットボタンは目立たせるべきなのか、それとも誤操作しないように少し控えめにするべきなのか。
複数カウンターを並べたとき、デスクトップでは横に並べて、スマホでは縦に積む方が使いやすいのか。
こういう細かいところは、実際に画面にして触ってみないと分かりにくいです。
Counterで意識したこと
Counterは、Vanilla TypeScriptでコンポーネントっぽく作っています。
Reactなどのフレームワークを使わず、Counter クラスが自分でDOMを生成して、イベントを持つ形です。
この作り方にすると、Webの基本を思い出せます。
- DOMを作る
- イベントを登録する
- 状態を持つ
- 状態が変わったら表示を更新する
- 要素を追加・削除する
普段フレームワークを使っていると、状態更新や再描画はかなり隠れます。
でも、こういう小さなアプリを素のTypeScriptで作ると、UIが動く仕組みを手で確認できる感じがあります。
Kakeibo
もうひとつ作ったのが、家計簿アプリです。
こちらはReactで作っています。
日付、カテゴリ、金額、メモを入力して、支出を登録できるアプリです。
登録した支出は、月ごとに一覧表示されます。
画面下の切り替えから、履歴表示とカテゴリ別分析を切り替えられるようにもしています。
Kakeiboで意識したこと
家計簿アプリは、Counterよりも少し実用寄りです。
支出データを保存する必要があるので、バックエンドにPocketBaseを使いました。
PocketBaseは、小さな個人開発ではかなり使いやすいです。
- SQLiteベースで軽い
- REST APIがすぐ使える
- 管理画面がある
- コンテナで起動しやすい
- 小さなアプリなら十分な機能がある
今回は、Podman ComposeでフロントエンドとPocketBaseをまとめて起動できるようにしています。
フロントエンドはReact + Vite、バックエンドはPocketBaseという構成です。
作ってみて良かったこと
小さいアプリでも、実際に完成させるといろいろ見えてきます。
1. UIは触らないと分からない
画面を見ているだけだと良さそうでも、実際にクリックすると違和感が出ることがあります。
ボタンの大きさ、余白、入力欄の順番、文字の濃さ、エラー時の見え方。
こういうものは、スクショだけでは判断しづらいです。
とりあえず動くものを作って、何度も触るのが一番早いです。
2. 小さいアプリでも状態管理は大事
Counterでは、カウンターごとの数値をどう持つか。
Kakeiboでは、現在の月、履歴データ、ローディング状態、表示モードをどう持つか。
規模は小さくても、状態管理を雑にするとすぐ分かりにくくなります。
逆に、小さいアプリで状態の持ち方を整理しておくと、大きいアプリを作るときにも効いてくると思います。
3. コンテナ化しておくと再開しやすい
どちらのアプリもPodman Composeで起動できるようにしています。
これは地味に大事です。
時間が空いてから触るときに、ローカルのNode.jsのバージョンや依存関係で詰まると、そこでやる気が少し削られます。
podman compose up -d で立ち上がる状態にしておくと、あとから続きを作りやすいです。
今後やるなら
まだ小さな試作品なので、改善したいところもあります。
| アプリ | やりたい改善 |
|---|---|
| Counter | localStorage保存、ドラッグで並び替え、カウンターごとの色設定 |
| Kakeibo | 収入対応、月別グラフ、カテゴリ編集、CSVエクスポート |
Counterは、今のままだとリロードすると状態が消えます。
なので、まずはlocalStorageに保存できるようにしたいです。
Kakeiboは、支出管理としては動きますが、家計簿として考えるなら収入や月別推移も見たくなります。
カテゴリ編集やCSVエクスポートまで入れると、かなり実用に近づきそうです。
まとめ
空いている時間に、小さなWebアプリを2つ作ってみました。
ひとつは、素のTypeScriptで作ったデジタルカウンター。
もうひとつは、ReactとPocketBaseで作った家計簿アプリ。
どちらも小さいですが、実際に作るとUI、状態管理、データ保存、コンテナ環境など、学べることがちゃんとあります。
個人開発というと大きなサービスを想像しがちですが、まずは小さく作って、触って、改善するくらいで十分楽しいです。
完成度が高くなくても、動く形にしておくと後から育てられます。
こういう小さい制作物も、これから少しずつ残していきたいと思います。