はじめまして！
take と言います。
今回、新しく個人開発としてWEBアプリを作りましたので、その内容をまとめていきます。
何を作ったか
作ったのは「週刊少年ジャンプ」掲載漫画の順位情報を一覧・分析・可視化するアプリです。
現在はスマホのみ対応です。PCだと表記崩れになります。
なぜ作ったか
私は小さい頃から、ジャンプを読んで育ちました。
毎週月曜日が楽しみだったんです。
ある時、「この作品はどれくらいの順位で、どれくらい盛り上がっているんだろう？」と疑問に思いました。
それを調べるには前号やその前の号を調べる必要があり、少し手間。
気になる作品がどれくらいの順位を推移しているか分かれば、結構嬉しいなと思い開発に着手しました。
私以外のジャンプっ子たちが、直感的に人気推移を把握できることで、ジャンプ界隈が盛り上げたいという隠れた意図もあります！
ゆくゆくは、
- アンケートの過熱化
- 作品への応援熱を高める
といった、ジャンプ業界を盛り上げる盛大な野望もございます。
一旦は自分含めて、身近な人が楽しめるアプリを目指しました。
主なニーズとターゲット
- 「気になるジャンプ作品は、どんな順位で移動してきているかな？」
- 「人気出てきたかな？」
- 「前回、前々回からどれくらい順位が上がっているかな？」
- 「前回よりも順位が下がっちゃったら、もっと応援しないと」
- 「推し作品の盛り上がり」を一目で把握したい
ターゲットとしては、漫画ファン・ジャンプ読者や、データ分析好き・ジャンプ考察勢を想定しています。
機能紹介
全体画面
ダッシュボード(ホーム画面）
今週号に掲載されている作品の順位表と、現在から過去のトレンド推移グラフを載せています。
トレンド推移グラフは、
- 表示期間(1ヶ月、3ヶ月)
- 表示作品数(TOP3, TOP5, TOP10)
が変更可能です。
またグラフの作品タイトルをクリックすることで、その作品をグラフから除外することができます。
好きな作品だけ、または比べたい作品だけをグラフ表示することができて、単純な比較に役立ちますね。
個人作品の詳細ページ
ダッシュボード画面の順位表で作品名をクリックすると、その作品の詳細情報を表示するページへ遷移します。
- あらすじ
- 最新順位、平均順位、最高順位、最低順位
- 順位推移グラフ
- 単行本情報
などが載っています。
最新順位の部分で、前号から高くなったか、低くなったかを直感的に分かるようにしました。
号別の順位表
ここは、ジャンプ号ごとに掲載順位をまとめました。
ここでも、
前号の順位と比較して、どれくらい順位が推移したのかも視覚情報として載せています。
詳細リンクを押すと、前述した個人作品の詳細ページへ遷移します。
技術スタック
フロントエンド
- TypeScript, React, Tailwind CSS, Vite
パッケージマネージャー：npm
フレームワーク：Vite / Create React App
Reactを選択した理由は、普段使い慣れていることと、
ジャンプの順位データは、巻数、作品名、順位、カラーの有無などの状態(state)が多いです。Reactではそういったデータが更新されたら、UIを自動で書き換えるのに適していると考えたからです。
また今回は「推移グラフ」を作りたかったので、React にある Recharts や Victory といったグラフライブラリを使いたったんです。
Recharts はいいですね。アニメーション付きの滑らかな折れ線グラフを実装できたり、掲載順の「急落」や「急上昇」を視覚的にリッチに表現できます。
バックエンド
- Go 言語
バックエンドとしてGoを選んだ理由として、
半分は勉強のためで、もう半分はスクレイピングに適していると考えたからです。
また、Goは並列処理に強いため、過去の掲載順データをDBから取得したり、外部から一括取得してDBへ保存する際、並列処理することで実行時間が短縮できるかと思いまして。
将来的な大量データのバッチ処理を見据えて、静的型付けでパフォーマンスの高いGoを選択しました。
DB
- PostgreSQL
データベースの運用負荷と可用性のトレードオフを重視し、Amazon RDS を採用しました。
エンジンに PostgreSQL を選んだ理由は、堅牢な機能セット、高い信頼性、優れたスケーラビリティ、費用対効果があると感じたからです。
インフラ/その他
- Docker
- AWS
- Route53, ALB, CloudFront, ECS/ECR, S3, Amazon RDS, EventBridge, Lambda
インフラ構成図
◯ドメイン
- お名前.com で取得した「toma39blog.com」のサブドメインとして「jump-rank.toma39blog.com」を利用
◯フロントエンド
- S3
◯バックエンド
- ALB, ECS(Fargate)
Dockerで開発していたのでコンテナを流用できる ECS/ECR 構成を採用しました。手間削減のためサーバレスのFargateを利用しています。
◯DB
- Amazon RDS(PostgreSQL)
◯バッチ
- EventBridge + Lambda
- バッチ処理でデータ反映後、Discordへ完了チャットを送信
ジャンプ掲載作品や掲載順位といったデータを外部から取得してDBに反映します。
工夫ポイント
データ整合性の自動維持: 毎週のインポートデータと既存DBを照合し、リストから消えた作品に自動で「連載終了フラグ」を立てるバッチロジックを実装。手動管理を排し、データ整合性を担保する仕組みを構築しました。
ユーザー体験（UX）の追求: 前号との順位差分を動的に計算・表示するロジックをフロントエンドに実装。単なるデータの表示にとどまらず、情報の「読み取りやすさ」にこだわりました。
苦労した点と解決方法
具体的に課題となったのは『作品の連載終了』の判定です。
毎週全作品をチェックするのは非効率なため、『最新の取得リストに含まれない作品を自動で完結扱いにする』という差分更新ロジックをSQLのALL演算子を活用して実装しました。
他にも、リレーショナルDBの最適化にも苦労がありましたね。
作品と各号の順位を分離し、過去の掲載順位推移を効率的に取得できるスキーマ設計を行いました。
まとめと展望
ここまでお読みいただき、ありがとうございました！
ジャンプ好きによる、ジャンプ好きのためのアプリが、無事に完成できました。
今後は、より多くの人に触ってもらう施策を考えつつ、収益化も狙えたらいいなと思っています。
機能としては、随時追加していきたいなと考えています
- 各作品に打ち切り危険度スコアAPI
- ユーザーお気に入り & 通知
より面白く考察できる要素を盛り込んで、多くのジャンプ好き界隈に使ってもらえたら嬉しいです！