プログラミングでハマって消耗しないためのアプリ「はまったいまー」をリリースしました

今年の1月から始めたフィヨルドブートキャンプの最終課題として、個人開発のWebアプリはまったいまーをリリースしました。

この記事では、今回リリースしたアプリについてと、その開発の過程を紹介します。

アプリについて

hamattimer.app

はまったいまーの概要

はまったいまーは、ハマった時に時間を浪費してしまう問題を解決したいプログラミング学習者のためのタイマー付きメモアプリです。

タイマー機能で時間に区切りを設け、メモ機能で何を考えて何をやったのか客観視しやすくすることで、問題解決までの道のりをサポートします。

screenshot.png

はまったいまーでできること

タイマーによるリマインド

image.png image.png

メモ

はじめに「解決したいこと」を宣言して、それから「試したこと」を書く形式にすることで、何の問題に取り組んでいて何をしたのか意識しやすくしています。

メモの保存

作成したメモはMarkdownファイルとしてGistにエクスポートできます。また、Markdown形式のテキストとしてクリップボードにコピーして、お好みのメモツールで管理することもできます。

使用技術

フレームワーク

Next.js + Vercel

テスト
外部サービス連携

開発の過程

開発に至る経緯

フィヨルドブートキャンプの課題に取り組んでいる時、思わぬエラーに遭遇することがちょくちょくありました。すぐに解決策が見つかることもありますが、1つのエラーであっという間に2時間経ってた!とか、何も解決してないけど2時間経ってた!という事もありました。

ところで私はフィヨルドブートキャンプに入る前までは、情報システム部の一員としてバックオフィス業務の自動化などに携わっていました。またそれ以前には企業向けSaaSのテクニカルサポートとして、問題発生時の切り分けと、解決方法(時にはワークアラウンド)の提供を行ったりもしていました。

そういった今までの仕事では、例えばタイムリミットから逆算して今この位置にいると間に合わなくなりそうだ、となった時点で代替策に切り替えるというように、限られた時間で問題を解決するために作業時間を常に意識して業務にあたっていました。

フィヨルドブートキャンプを始めた当初は自然と仕事と同じスタンスで課題を進めていましたが、仕事でやってきたように学習をすると学びが少ないまま先に進んでしまうと気づいてからは仕事のやり方を持ち込まないように意識していました。それでも、プログラミングでハマってる時間はもうちょっと何とかできるんじゃないかと思ったのが始まりでした。

そこで、ハマっている時の自分を振り返ってみて、改善できそうなポイントとして次の3点に着目しました。

  • 仮説を立てて検証することに没頭して時間を忘れてしまう
  • 検証した結果を記録していないために同じ作業を繰り返してしまう
  • 仮説を手放せない

そして、タイマーで時間を教えてくれて、自分がやっていることを整理するためのメモを取れる、この2つをワンストップで実現できるツールがあれば解決できるのではないかと考えました。

開発の進め方で工夫したこと

1. プロトタイピングの手法を取り入れる

着想を得てからリリースまで、プロトタイピングを繰り返しました。

最初はこのアイデアで本当に問題が解決するのか検証するため、次の段階では実際に自分で使いながら必要な機能を見極めるため、そしてその次は他の受講生の方にも使ってもらってUIが分かりやすいかどうかフィードバックを得るため、というようにそれぞれの段階で目的を持って進めました。

また、実装に入ってからは早い段階でコア機能を作り上げて改善する形をとったことで、少なくとも最低限の機能は実現できると自信をもって取り組むことができました。

イデアを検証するための最初のプロトタイプ(Discord) image.png

ペーパープロトタイプ image.png

コアの機能だけ先に実装して使いながら改善するためのプロトタイプ image.png

2. Issueのサイズを小さくする

前提として、フィヨルドブートキャンプでは自作サービスの課題に入ると毎週水曜日に進捗報告の場があり、その進捗は受講生が自分のGitHub Projectを作って管理します。

未知の事ばかりの自作サービスの開発でできるだけつまずかないようにするため、1日から半日以下で終わるサイズにIssueを分解して取り組むようにしていました。 *1

こうしたことで、以下のメリットを得られました。

  • 見積もりのブレを少なくする
  • やることが明確なので迷わない
  • 毎週一定の成果を報告できる
3. 進捗報告や質問タイムを活用する

一人だけで考えて妙な方向に進んでしまうと結局は手戻りになるので、そうならないように気を付けていました。

対策として、進捗報告・質問タイム・受講生の集まりの場で、開発の進め方やアプリの機能について自分が考えていることを話すようにしました。それに対してメンターの方のプロのエンジニアとしての視点であったり、他の受講生や卒業生の方のユーザーとしての視点からフィードバックを貰うことで、大きな手戻りを発生させることなく開発を進めることができました。

4. ロゴとイラストは専門家にお願いする

今回、アプリの顔となるロゴとイラストは専門家の方にお願いしたいと考えて、それぞれフリーランスの方に依頼をしました。

今までのお仕事で自分が依頼を受ける側の時に、要望を引き出すのに苦労することもあったため、お願いした方に存分に力を発揮していただくためにはどういう風に伝えれば良いか、自分が逆の立場だったらどう受け取るかなど考えて工夫しながらやり取りをしました。

いざ依頼する立場になってみると、依頼を受ける側にとってはやりづらい要望を出してしまう方の気持ちに納得することもありました。今後、依頼を受ける側の開発者として仕事をしていく上でも、貴重な経験となったように感じます。

苦労したこと

1. 意思決定

振り返ってみると、どんな技術を採用するか、どの機能を入れてどの機能は入れないかなど、次から次へとやってくる意思決定の場面に対応するのが一番大変だったと感じます。プロダクトオーナーとしての自分と、開発者としての自分と、ユーザーとしての自分がそれぞれの立場で意見を言ってくるので、開発中はだいぶ頭の中が騒がしかったです。

大変だったと同時に、コミュニケーションミスの起きようがない自分1人だけのプロジェクトであっても視点の違いでこれだけ違うことを言うと実感したので、今後意見のすり合わせが必要な場面に出会った時は今までよりも気持ちに余裕が持てそうです。

2. 分かりやすさを実現する

過去のお仕事では画面設計に携わったこともありますが、いずれも業務システムでした。業務システムの場合でも使いやすいに越したことはないですが、仕事を回すために必要なシステムを使わないという選択肢は無いので、そこが今回の個人開発のサービスとは大きく違う点になります。

そのため、このアプリを必要としていてまだ使ったことがない人に届けるために、分かりやすさをどうやって実現するか考えたり実装したりする部分では苦労しましたし、まだまだだなぁと思う部分です。

フィヨルドブートキャンプでは個人開発のサービスを完成させたらデザインに関してもレビューをしていただけます。そこで教えていただいたことを元に、今後も少しずつ改善していくつもりです。

おわりに

実は個人開発の課題を本格的に始める前は、全く違う題材のWebアプリを作ろうと考えていました。ですが今は、はまったいまーにして良かったと思っています。

これは何とかしないと、と心底思える題材なので、開発を始めてから今までずっと楽しくここまでたどり着くことができました。

そして個人開発を通じて気付いたのは、目の前に現れた問題に対する何とかしないと!という思いが今までの仕事でもずっと、自分の一番の推進力になってきたということでした。今後のキャリアを考えるに当たって、大事な指針になりそうです。

オブジェクト指向も自動テストもGitのお作法も何も分からなかった私が、小さいながらも1つのWebアプリを作り上げることができるようになったのは、フィヨルドブートキャンプのカリキュラムとメンターの皆さま、一緒に学んできた受講生・卒業生の皆さまのお陰です。本当にありがとうございました。

hamattimer.app

*1:1日あたりの作業時間は7~8時間としていました