【ITニュース解説】I Built a Subscription Tracker in 14 Days Using Angular 20 (And Made $0… Yet)

現代社会では、音楽や動画配信、様々な便利ツールなど、毎月自動的に料金が引き落とされる「サブスクリプションサービス」が数多く存在する。これらのサービスは生活を豊かにしてくれる一方で、いつの間にか利用していないサービスにも料金を払い続けてしまったり、一体いくら払っているのか把握しきれなくなったりするという問題が多くの人に共通して起きている。筆者も自身の銀行明細を見て、使っていないAIツールや、数ヶ月開いていない「生産性向上アプリ」に課金していることに気づき、この問題の解決を決意した。

そこで筆者は、ウェブ開発の経験を活かし、たった14日間でこのサブスクリプションを管理するアプリ「SubTrack」をゼロから開発するという挑戦を始めた。このアプリは、筆者自身の問題を解決するだけでなく、最新のウェブ開発技術であるAngular 20について実践的に学ぶ良い機会にもなったという。この開発プロジェクトは「ゼロからSaaSを14日間で」というシリーズの第一弾であり、短期間で実用的なソフトウェアを構築し、その中で得られたリアルな教訓を共有することを目的としている。

多くの人が直面するサブスクリプションの問題点は、料金がいつの間にか上がっていたり、一度試したきりのサービスに課金し続けていたり、年に一度の更新を忘れていたりすることだ。既存の解決策としては、操作が複雑なモバイルアプリや、銀行口座との連携を必須とする大がかりな家計簿アプリが中心で、気軽に使えるものが少なかった。筆者が求めていたのは、銀行口座と連携せずともサブスクリプションを追跡でき、更新が近づいたら通知し、美しいグラフで支出の内訳を可視化できる、軽量でブラウザベースのアプリだった。さらに、オフラインでも動作し、後で同期できる「ローカルファースト」という考え方を取り入れたかったという。このアプリ開発を通じて、現代のウェブ開発技術がこの古い問題をいかにスマートに解決できるかを試したかったのだ。

14日間の開発スプリントは、まず基盤の構築から始まった。Angular 20の大きな特徴である「スタンドアロンコンポーネント」と、画期的な「Signals（シグナル）」という新しい仕組みが導入された。これまでのAngular開発では必要だった複雑な「モジュール」の概念が不要になり、よりシンプルにコンポーネントを構成できるようになった。Signalsは、アプリケーション内のデータ（例えばサブスクリプションのリストや合計金額）が変更されたときに、それに関連する表示や計算が自動的に更新されるようにするための強力な機能で、これによりプログラムが非常に分かりやすくなり、データの状態管理が格段に簡単になった。

さらに、SubTrackでは「ローカルファースト」という設計思想が採用されている。これは、アプリのデータをまずユーザーのウェブブラウザのストレージ（ローカルストレージ）に保存することで、インターネット接続がない状態でもアプリが動作したり、読み込みが非常に高速になったりする利点がある。データがすぐに手元にあるため、サーバーからのデータ取得を待つ必要がなく、「ネットワークが必要です」といったメッセージが表示されることもない。これは、従来のウェブアプリが常にサーバーとの通信を前提としていたのと大きく異なる点だ。筆者は、この仕組みによって、アプリがユーザーにとって常に「即座に動作する」感覚を提供できたと語る。

開発の次の段階では、サブスクリプションの作成、読み込み、更新、削除といった基本的な操作（これらを総称してCRUDと呼ぶ）の実装に重点が置かれた。最新のAngularの機能を使うことで、入力フォームの検証機能や、使いやすいダイアログ、タイムゾーンに左右されない正確な日付処理などが効率的に実装された。特に日付処理では、通知バッジが正しく表示されないというバグに直面したが、すべての時間をその日の始まり（深夜0時）に正規化するというシンプルな解決策で、予測可能で信頼性の高い動作を実現できたという。

さらに、多くのアプリケーションで課題となりがちな検索とフィルタリング機能も、Signalsの力を借りて非常にスムーズに実現された。ユーザーが検索語を入力したり、カテゴリや請求サイクルなどのフィルターを変更したりすると、Signalsがその変更を即座に検知し、ロード中の表示を待つことなく、リアルタイムで結果が更新される仕組みだ。入力と同時に結果が表示されるため、データがスムーズに絞り込まれる体験をユーザーに提供できるようになった。

そして開発の終盤には、ユーザーの支出状況を分かりやすく示すグラフ機能が追加された。円グラフや棒グラフを使って、どのサブスクリプションにどれだけお金を使っているのかを視覚的に表示することで、筆者自身もAdobe Creative Cloudに月に約53ドルも支払っていることに気づき、その瞬間に不要なサブスクリプションをキャンセルして節約できたという。この「気づき」こそが、単なるデータ管理アプリを超えて、ユーザーの経済的な意識を変えるアプリとしての価値を生み出した瞬間だった。

開発の過程ではいくつかの課題にも直面した。特に、期日通知のバグは、通知バッジが今日が支払い日であるはずのサブスクリプションに対して表示されないというものだった。これも日付の計算における時間の扱いが原因で、すべての日付をその日の始まりに統一するという修正で解決された。最も単純な解決策が、時に最も困難なバグを解決するという教訓を得た。また、当初は付随的な機能と考えていた「更新通知バッジ」が、実はユーザーが最も求めている「サブスクリプションを忘れていられる」というニーズを満たす中核機能であることに気づいたことも大きな発見だった。

技術的な深掘りとして、Angular 20のSignalsは、従来の複雑な「RxJS」というライブラリを使ったデータ管理に比べて、コードがはるかに簡潔になり、メモリリークのリスクも減らせる点で、開発者にとって大きな喜びをもたらすものだと筆者は確信した。また、ローカルファースト・アーキテクチャは、サーバー構築にかかる費用をゼロにし、アプリの起動を瞬時にし、ユーザーが登録なしで手軽に試せるという大きなメリットを生み出した。データの損失を防ぐための堅牢なデータ取得・保存処理も実装され、ユーザーデータの安全にも配慮されている。

最終的にSubTrackからは直接的な収益はゼロだったが、筆者はこれを失敗とは考えていない。このプロジェクトを通じて、最新のAngular技術であるSignalsを深く習得し、ローカルファーストという新しい開発アプローチの有効性を検証し、現代の開発プラクティスを示すポートフォリオ作品を構築できた。そして何よりも、自分自身のサブスクリプションを見直し、年間約840ドルもの節約につながったことは、アプリが自分自身のために価値を生み出したという何よりの成功体験だった。

このプロジェクトは、開発者が自身の抱える問題を解決するために、最新のツールと技術を駆使して自ら解決策を構築することが、最も有意義な学びと成果につながることを示している。SubTrackはまだ始まったばかりであり、筆者はユーザーからのフィードバックを通じて、さらに使いやすく、本当に役立つサブスクリプション管理アプリへと進化させていきたいと考えている。