Ranking Widget Hubの設計・技術選定・コミット履歴を解説

01 / 概要

プロジェクトの概要と目的

ranking widget hub 地域サイト向けのランキング表示ウィジェットを、ジャンルごとに切り替えながら作成・確認できる RankKit のデモアプリです。 主な機能 40 以上のジャンルを切り替えてランキングを表示 市区町村や駅名を入れ替えてローカル向けの見せ方を確認 テーマカラーを変更してウィジェット見た目を即時確認 埋め込みコードをコピーして外部サイト掲載を想定した導線を確認 表示回数、CTR、通知登録率、推定報酬のダッシュボード表示 セットアップ 前提: Node.js =22.13.0 手順: ビルド確認: 技術構成 Next.js 16 React 19 Vinext Tailwind CSS 4 Cloudflare Workers 想定の worker エントリ 補足 app/page.tsx にウィジェットビルダー本体があります app/globals.css にページ全体のスタイルがあります worker/index.ts は Cloudflare Workers 向けエントリです コマンド npm run dev : ローカル起動 npm run build : 本番ビルド npm run start : ビルド済みアプリ起動 npm run lint : ESLint 実行 npm test : ビルド + HTML レンダリング確認 npm run db:generate : Drizzle migration 生成

本記事は公開されている構成と main ブランチのコミットを一次情報として整理しています。

02 / 使用技術

使用技術と役割

03 / 設計

構成から読み解く設計

主な項目は です。

• 単一アプリケーション構成
• 機能単位の責務分割

04 / 変更履歴

コミットから見る実装の変遷

以下は既定ブランチの直近の変更です。リンク先で原文と一次情報を確認できます。

1. 2026/08/15
   支援・購入への導線を追加する04790ecをGitHubで確認 ↗
2. 2026/08/11
   実装内容を更新776bafdをGitHubで確認 ↗
3. 2026/08/11
   feat: ジャンル40種以上・計520件に大幅拡充（釣り/自転車/スキー/マリン/ゴルフ/テニス/ヨガ/ランニング/音楽/カメラ/手芸/美術/PC/スマホ/電気工事/塾/保険/転職/家事代行/防災/ペット病院 等追加）6f44f17をGitHubで確認 ↗
4. 2026/08/11
   feat: 22ジャンル×12件に拡充（計264件・ブライダル・医療・農業追加）5677aabをGitHubで確認 ↗
5. 2026/08/11
   feat: 20ジャンル×5件・6色テーマ・クイックプリセット・埋め込みコード確認追加37f5db2をGitHubで確認 ↗
6. 2026/07/20
   実装内容を更新81e15eeをGitHubで確認 ↗
7. 2026/07/20
   プロジェクトの初期構成を作成97bc935をGitHubで確認 ↗

05 / 学び

このプロジェクトから得られる学び

• 変更を小さく記録する

  コミット単位で目的を分けると、実装の意図を追跡しやすくなります。

• 構成と技術選定を結び付ける

  TypeScriptの採用理由と各ディレクトリの責務を説明できることが保守性につながります。

• READMEと実装を同時に育てる

  説明とコードを近い状態に保つことが、再利用と振り返りを助けます。

06 / よくある質問

よくある質問