はじめに
副業として、Webアプリの開発・運用全体を、自分がサービスの所有権を持った状態で担当できたので記事にします。
サービス概要
パチンコで狙い目の台を探すためのサービスです。
外部サイトから複数の手段で必要な情報を取得し、下記の画像のように狙い目の台を色分けして表示しています。
狙い目：赤 狙わない方が良い：青
製作者の経歴
1年前ごろからReactを学び始めた個人開発者です。（社会人3年目）
半年前から、以下のサービスをリリースして運営しています。
機能一覧
ログイン機能
今回、センシティブな情報を保持しておらず、不正ログインされてもあまり問題にならないため、認証はFunctions側に問い合わせた上で、適当なトークンを返す単純なものにしています。
※専用の拡張機能とセットで使わないとあまり意味がないという理由もあります。
そのため、拡張機能側でも同じエンドポイントに問い合わせることで、簡単にログインできるようになっています。
台情報一覧表示機能
サービス概要で説明している、主要機能です。
CSVエクスポート機能
一覧表示している情報を、CSVとしてダウンロードする機能です。
台情報インポート機能（Chrome拡張機能）
指定のサイトから、Webアプリ側で使用する台情報をダウンロードするための拡張機能です。（スクレイピングができないため）
開発経緯
JISOUのコミュニティ内で募集されていたので、実績づくりのため担当しました。
技術スタック
- React
- Tanstack Router
- UnoCSS
- Arktype
- HTMLRewriter
- Jotai
アーキテクチャ図
技術選定基準
一般公開するサイトではなく、SSRの必要があまりないため、基本構成はCloudflare PagesとReactを採用しました。
スクレイピングはフロントでは行えないため、Cloudflare Pages FunctionsとHTMLRewriterを使用しています。（HTMLRewriterはEdge環境で使用できるHTML操作ライブラリが他になかったため）
その他は以下の理由です。
- Tanstack Router
- 安全にファイルベースルーティングを行うため
- UnoCSS
- Jotai
- 軽くてサイズが小さいため
- Arktype
- エラーを例外ではなく型で受け取ることができ、エラー処理がしやすいため
学び・気づき
ユースケースについて詳しく聞いておくべきだった
このアプリを作る際、当初は取得した台の情報を保存しておき、それを検索できるような機能を作っていました。
しかし、実際はユーザーが指定した台の情報だけ表示できればよく、永続化機能は不要でした。
原因は、実際のユースケースとは違う物語を自分の頭の中で空想してしまったことなので、最初にユースケースの認識が合っているか擦り合わせておくべきでした。
開発において困ることはなくなった
前回のサービスリリース時は、自分が主体となってちゃんとしたサービスを作るのが初めてだったため、技術選定（主にサーバなどのインフラ周り）に苦労しました。
ですが今回は、前回あまり考慮できなかったパフォーマンスなども含めて、特に問題なく使用技術を選定し、必要に応じて新しい技術を学んでいくこともできました。
そのため、問題なくサービスの開発を行えることを確信できました。
※参考として、本格的に開発を学び始めたのは、去年の11月ごろです。
JISOUに入って最初の記事：
収益
- 開発費
- 8万円
- サービス維持費（ドメイン代など）
- 年1万円
おわりに
個人開発の場合、アイデアの面で考えたり本当に需要があるかわからないなどの問題に直面しますが、既に誰かが欲しくて依頼される場合、その辺りの問題が解決された状態で始めることができます。
そのため、何かしらの依頼を受けてみるというのも、個人の実績づくりとして強力な選択だと思いました。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからLINE登録をお願いします！👇