🍅

俺流ポモドーロタイマー 兼 作業記録アプリを作ったのと、個人開発で便利だったものたちについて

2025/01/14に公開

Zennを見てる皆さんであれば、技術書読んだり個人開発したり、日頃から自己研鑽に励んでいると思います。

せっかくだったらモチベを上げるために学習記録をつけたくないですか?私はつけたいです。
そして増えていく学習記録を眺めて「あぁ、俺って頑張ってるな……😍」ってうっとりしたいのです。手段を目的化したいのです。

作ったもの

https://shuchu-timer.vercel.app/?utm_source=zenn&utm_medium=blog&utm_id=1

見た目

Top タイマー 記録
top pomodoro report

主な機能

  • ポモドーロタイマー(時間を区切って集中)
  • ストップウォッチ(時間を決めずに集中)
    • わかりやすいので「ポモドーロタイマーアプリ」としていますが自分はこっちばっか使います
  • うっとりするためのいい感じの視覚化
  • PWA対応(Android一筋なのでiPhoneでの挙動は不明)

この手の学習記録サービスは他にもありますが、とても細かくToDoを登録できたり、なんかコミュニティ機能があったりして、そこまでリッチじゃなくて良いんだよなぁと思うことがままあります。

そんな自分は今まで集中というアプリを使っていました。シンプルでとても気に入ってたのですが、ふと気が向いて細かいところまでオレ好みなものを作りたくなりました。(なのでとても影響を受けています)

個人開発で便利だったものたち

アプリ自体はあんまり技術的に特筆すべきことはないので、個人開発に役立つものたちを紹介します。
私はちょくちょく個人開発でクソアプリを作るのですが、毎回といっていいほどお世話になっているかも。

Noto Emoji

Googleのemoji用Webフォントで、ちょっとしたアイコン代わりに重宝しました。

アイコン用の画像を用意するのって案外めんどくないですか?LucideとかGoogle FontsのIconsも使いやすいですが、「トマトのアイコンがほしい!」とか思ってもなかなか無いので、emojiの手軽さがありがたいです。

Material Theme Builder

マテリアルデザインに則った(?)カラーテーマを作れます。
これで生成したカラーコードをtailwind.config.tsにシコシコ登録しておけば、開発中はbg-primaryContainerのように指定していけば悩むこと無くいい感じの配色になって嬉しいです。

Cursor

VSCodeベースのエディタ
Cursorのchat機能の使いやすさやコードベース全体に対して質問を投げられるCodebase Answersがやはりありがたい。(私が触っていないあいだにVSCodeも進化していると思いますが)

Cursor無料版 & gpt-4o APIで使っているのでコード補完はGitHub Copilotですが、Cursor有料版の補完はグロいほど優秀(というか積極的)なので、毎月20ドル払えるぐらいお金持ちになったら有料版にしたいです。

v0

今や言うまでもないUI作成ツール
Vue.jsのほうが好きな自分ですが、これのためにReactを選んでいるといってもいいです。
ノッてきたら自分でUI調整するので最初しか使わないですが、その最初の取っ掛かりがなかなか難しいのでとてもありがたい。

shadcn/ui

普通に優秀で使いやすいUIライブラリ。
個人開発でWebフロントエンド作るなら何らかUIライブラリは使うと思いますが、これはv0のためにも必要。たまにドキュメントが微妙だったりかゆいところに手が届かないことはありますが、十分使いやすい。

余談

妥協したUIやパフォーマンスの悪さなどいろいろ直したいところがあったり、現状Localstorageに全てのデータを保存する個人開発仕草満開なので、DBと認証を用意したいと思っています。
あとはこのアプリの肝である「実績を振り返ってうっとりする」機能をもっと強めたいですね。
モチベが続けば!

Discussion