Twitch のフォロワー分析するWebアプリを個人開発して公開したら累計アクティブユーザーが10万人超えた体験談です！
目次
Open 目次
嬉しかったこと
- SNS で使ってくれている様子が確認できたり、
いくつかのブログで
Twitch Follower Checkerを紹介していただけたこと - 累計アクティブユーザー10万ユーザーに使っていただけたこと(Google Analytics 4 集計)
2023年12月に急激にアクセス伸びたのは、Twitch PartnerでYouTube PartnerのWataxxxさんに紹介頂けたこと。ここから加速度的にユーザーが増えたと思います。このツール教えてもらったのですが、Twitchのフォロー外した人が見えるリストです
— Wataxxx (@Wataxxx_) November 29, 2023
配信開始時にフォローが減る現象があったのですが、これで目視できるようになりました
アカウント紐づけしてからアンフォローが見えるので興味ある人は早めに紐づけしてみてください#Twitchhttps://t.co/9FWrRYCNEq - 色んな国の方に使って頂けたこと
ちょっと後悔してること
嬉しかったこととして SNS 等で話題になっていることを挙げましたが、内容はだいたい「アンフォロー確認」の話題なこと。
つまり、負の感情を生みやすい機能でもあるな……と、たまに悩むことがあります。申し訳ない気持ちにもなってしまい、これが後悔ポイント。
技術的な話
といっても、実装自体はそこまで大したことはしていません。
ReactもNext.jsも初見だったので、フレームワークの仕様を覚えるのがかなり大変でした。
AG Grid が検索（フィルタ）やページングをいい感じに提供してくれて、しかも軽くて、めちゃくちゃ助かりました。
技術スタック
TypeScript: もう JavaScript には戻れないNext.js: ナウい React フレームワークNextra: Next.js 上のドキュメントフレームワークとして利用AG Grid: いい感じの表コンポーネントを提供しているライブラリ
データフローアーキテクチャ
処理の流れはこんな感じ。初めて触るReactを意識しながら設計するのが大変でした。Twitch OAuth周りとか。
こうしておけばよかったこと
Nextraの実装が当時のalpha版前提に寄ってしまった
Next.jsおよびReactを初めて触る状態で開発を進めていたのですが、
ちょうどその頃に Nextra の新しいメジャーバージョン（alpha）が出て、「せっかくなら最新のやつ使ったろ！」って突っ込んだ結果、情報が少ない＆フレームワークとの互換の揺れでだいぶ苦しみました。
一応動くものは作れたけど、結果として「当時の alpha版前提」のアプリになってしまい、今もちゃんと追従できていない状態です。
完全なる技術的負債。今なら React / Next / Nextra の理解もだいぶ深まっているので、ちゃんとGAバージョンに上げつつ正常に動くようにリファクタできると思うんですが、まあ動いてるしええやろ！と後回しになってます。
もっと使いやすく、もっとモバイルフレンドリーに作りたかった
先に PC 前提で作って、あとからスマホ対応を足したので、モバイルだと見た目がちょっと「無理やり感」ある。
最初からレスポンシブ前提で設計しておけばよかった。
特にこういったアプリはどこからでも確認したい需要があるので、モバイルフレンドリーと相性が良いよなぁ、、、と、学び。
多言語ドキュメントの更新の同期が難しい
グローバルに使ってもらう想定だったので、Twitch ユーザーが多い国を調べて上位 8 言語ぶんのドキュメントを作りました。
ただ、言語ごとにページを持つ設計にしたせいで、管理があり得ないほどめんどうになりました。
ちょっと機能を追加したり、文言を直すたびに「8回やる」必要があって、まあ大変。
次に何か作るときは i18n のメンテナンスコストも込みで設計したいですね。
さいごに
今ならもっと使いやすくて、もっとモバイルフレンドリーな Web アプリを作れる気がしてるので、Twitch Follower Checker V3 作ります。
（モチベと時間ができたらね）
