目標管理アプリ「Steper」の紹介
Posted on 2024年11月16日 (土) in 自作ツール
目次
Steper とは
目標を管理して達成を目指す web アプリ。
具体的には以下のステップで目標達成を目指していく。
目標のゴールと達成したときの状況、制限時間を設定する。
次にゴールを達成するための小目標であるステップ・ご褒美・ステップの制限時間を設定する。
自分で設定したステップを意識して目標達成を目指す。
問題の分割・目標達成時の自分を明確化・自分へのご褒美 など、目標達成のためにモチベーションを維持することを目指したアプリとなっている。
使い方のすゝめ
このアプリをどう使うのかは使用者の自由（そのためにあえて細かくタスク管理するようになっていない）だが、開発者おすすめの使い方はある。
ステップの粒度
1 つめは、ステップ（小目標）は長くとも 1 週間ほどで達成できる粒度で設定することだ。
このステップを用意した意図としては、できる限り細かく課題を分割しつつ、自分がやったこと・できたことを見返せるようにしている。
しかしあまりにも大きい粒度で設定してしまうと、ステップ達成に時間がかかり、また今までのステップを見返しても自分の成長を感じられなくなってしまう。
そのためできる限り細かい粒度でステップを設定することをおすすめする。
ご褒美の設定
2 つめは、ご褒美の設定を工夫することだ。
自分で使ってて思ったのだが、ご褒美を「ちょっと豪華」程度の適当なものに設定するとあんまりモチベーションにならない。
そこで自分はご褒美に「友達誘って焼き肉に行く」など周りを巻き込んだご褒美を設定することで、失敗したときのプレッシャー込みでモチベを上げることができた。
また普段からやりたいことを思いついたらその場でメモしておくことによって、飽きない多様なご褒美を設定できるのでおすすめ。
目標の理由付け
3 つめは目標を達成したときの状況を考えることだ。
その目標はなぜ必要なのか、もし目標を達成したら周りからどう思われるのか、その目標を達成したら何に成れるのかをしっかりと考えるのが重要だと自分は考えている。
なんとなくの目標は必要性が曖昧な目標は大抵時間の無駄になるため、目標の取捨選択や詰まったときに必要性の再確認できるよう、しっかりとこの欄を考えてほしい。
このアプリを作った理由
もともと Next.js と express.js を使ったアプリを作りたいと思っていた最中、たまたま知り合いに見せてもらったジャンプスクエアのワールドトリガーの話に影響を受けたのがきっかけ。（詳しくは 2024 年 11 月号参照）
昔に色々タスク管理だったり目標設定のアプリやらなんやらを試していたのだが、どうにも怠惰な自分には細かい入力が続かず最近は軽くまとめる程度に収めていた。
ただワールドトリガーの内容を見て、「細かく問題を分割する」「自分の成長を実感する」という点を押さえていれば、細かい入力をせずとも良いのではと思い、とりあえず作ってみた。
元もと Notion 上でツールを作って試していたのだが、Notion の表示や動作の遅さに耐えられずこうした web アプリの形にしている。
使用している主要な技術
フロント
Next.js
- フロントのフレームワークはこれしか知らないのと、別のを使う理由が思いつかなかった
TailwindCss
- CSS がかなり苦手でしっくりこない中で手に馴染んだ CSS フレームワーク。YamadaUI とかのコンポーネントライブラリも好みだが、AI と相性の良いこちらを採用（別に併用もあり）
バックエンド
Express.js
- Node.js のシンプルで使いやすいフレームワーク。ただ今回ぐらいシンプルなアプリなら Next.js で API を生やしたほうが楽だったかもしれない。
Prisma
- TypeScript で簡単に DB を扱える ORM。初めて使ってみたが有名なのもあって supabase との連携がコピペで終わって便利だった。
PostgreSQL
- supabase で使える SQL。本当は何でも良かったが supabase を使ってみたいなと思い使ってみた。
工夫した点
スマホ対応・PWA 対応
スマホユーザーにも使ってほしいなと思って UI やらなんやら考えていた。
しかし体感スマホユーザーは web アプリよりもスマホアプリを優先して使うイメージがあったため、極力スマホアプリっぽく使えるように PWA に対応押した。
以前 Vite での PWA に失敗しており、今回も怖かったのだが「next-pwa」というパッケージを使ったところ簡単に設定できた。
参考にした記事はこれ
https://qiita.com/Coa3/items/c81c8c7984bd5fc4ec69
無料運用
今回は vercel・Render・supabase を使用しているが、全部無料の範囲内で運用されている。
vercel は収益化さえしなければ楽だが、Render や supabase は一定時間使われないと停止してしまうため、少しめんどくさい。
これらのサービスは非常に便利でありお金を払うに十分の価値があると思うのだが、今後のことも考えると AWS などで自分で環境を作ったほうが運用的には安そう。
その他
他にもモダンな感じのデザインを意識したり、ステップ画面を階段っぽくしたり（できてないが）、極力ユーザーの入力が最小限で済むようにしている。
初めて一般公開するアプリを作って気がついたこと
自分は今まで web アプリは一部の人向けのものしか作ったことがなく、一般公開するようなものは初めてだった。
そのため色々抜けていた視点があり、今回はそれを学ぶ良い機会になった。
セキュリティ
このアプリではメールアドレスとパスワードを使ったアカウント認証で実装している。
当初はメールアドレスとパスワードを入力するだけでアカウントが作れてしまう極悪セキュリティ構成で考えていたのだが、流石に駄目だと思いメールアドレスから認証コードを送るよう変更した。
今までは Firebase SDK に甘えた認証しか実装をしたことがなく、また今回 NextAuth などを使わずに設計したせいで、あとから nextAuth を適用する子ができずに心が折れかけた。
結局メールアドレス認証を維持したままマシにするために、バックエンドでメールに認証コードを送るようにして作った。
今回最初から NextAuth 使えばいいじゃないと大事な気づきを得たが、同時にログイン認証について色々調べているうちに最低限は理解できたので良しとする。
入力制限
ユーザーが入力してサーバーにデータが保存されるものとして入力フォームがあるが、作ってからよくよく考えたらると擬似的なデータ保管庫になってしまうことに気付いた。
いくら自由に使えるようにしたといえども望む結果ではないので、フロント・バック両方で対策したが、次アプリを作るときは設計段階から気をつけたい。
（今まで PC ソフトを作ってたのでこの問題はなかった。）
ドメイン
今までホスティングサービスから提供される URL をそのまま使っていたが、一般公開するにあたって今回はドメインを取得して使ってみた。
なんとなく設定が難しいイメージがあったが、少なくても Vercel とお名前ドットコムを試した感じ設定は思ったより簡単にできた。
ドメインが増えれば維持料や管理が大変そうだが、ドメインの取得と利用はそこまで大変ではないことをしれたのは良い機会だった。
感想
全体的に事前の調査・設計不足で無駄な時間を使ってしまった（いつものことだが）。
しかしログイン認証についてや、Next.js への理解、ドメインなどアプリ開発をするうえでの足元が身につけられたのが良かった。
正直誰も使わない気がするので 1 年後あたりにひっそりと消えていると思うが、この経験は次の開発につなげていきたい。
次は T3 スタックとか使ってアプリを作るか、Next.js + FastAPI で作る予定の web 版 YAk を作るか悩むが、しばらくは Java や Flutter などを勉強することになりそう。