履修登録サイトTupickの開発

制作理由

受講申込み可能なウェブサイトTupickを開発することになった。開発期間も短いだろうし、様々な用途に使われるだろうと思い、軽く制作した。

開発開始から終了まで合計1週間かかった。サービス規模に比べて迅速に開発を完了できた最大の理由は、AIの支援のおかげだ。CURSOR IDEのComposer機能を活用してコーディングの方向性を指示する方法で進めたため、開発時間が大幅に短縮された。

この過程でCURSOR IDE APIの使用料として約36ドル(基本サブスクリプション料金20ドル + 追加料金16ドル)を支払ったが、節約された時間を考えると十分に価値のある投資だった。

SEOが重要なサービスではないため、フロントエンドフレームワークとしてReactを選択した。開発生産性を高めるためにTypeScript、TailwindCSS、Viteを併用した。

バックエンドは軽量で高性能なGoとMongoDBの組み合わせで構築した。

CI/CDはGitHub Actionsを使用してDockerイメージをビルドし、個人用Harbor Dockerレジストリにアップロードした後、自宅に設置したローカルサーバーで実行する方式で構成した。

AWSを使用すればより便利だが、費用負担が大きいため、既存のゲーム用PCを初期化してProxmox上にUbuntuをインストールし、UPSを接続して運用している。

以下は例として作成した受講申込みイベント画面である。各プログラムごとに定められた人数を割り当てることができ、リンクを共有して参加者の申込みを受け付けることができる。また、同時申込みによる衝突を防止する機能が含まれており、安定した運営が可能である。

主催者は申込み時に受け取るデータ項目を自由に設定することができ、様々な形式のイベントに合わせて活用することができる。以下の例では名前のみ入力するように設定されているが、メール、電話番号など追加情報を受け取ることもできる。

申込者リストはウェブページでリアルタイムで確認することができ、Excelファイルとしてダウンロードして別途管理することも可能である。

また、複製機能を活用すると、既存のテンプレートをそのままコピーして新しい受講申込みを受けることができる。特に毎週繰り返される受講申込みを運営する場合非常に便利な機能である。

受講申込みサイトは同時に多くのユーザーが押し寄せる場合、パフォーマンスの低下が発生する可能性がある。これを確認するためにk6を使用したHTTPストレステストを実施した。

追加的なトラフィック増加にも安定したサービスを維持できるように、引き続き最適化を進める予定である。

以前は1つのサービスを開発するのにはるかに時間がかかり、繰り返し作業に簡単に疲れることが多かった。しかし、AI技術の発展のおかげで今ではそのような作業がはるかに容易になった。

私はインディーハッカー(Indie Hacker)として複数のサービスを運営したいという目標がある。過去には高いサーバー費用と長い開発期間が障害となり、簡単に挑戦できなかったが、インフラが整備され、開発生産性が向上すると、障害が次第に取り除かれている。

経済的に独立する道が遠く見えたが、こうして着実にサービスを作り、運営していくことでその目標もだんだん近づいているという確信がある。