Buyback Price Alertの設計・技術選定・コミット履歴を解説

01 / 概要

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

buyback price alert — BuybackAlert（buybackalert.jp） 同じJANコードの商品を扱う店舗の販売価格を集計し、最安値と中央値の差が大きい順に並べるサイト。 本・DVD・CD・ゲーム・トレーディングカード・フィギュア・プレミアグッズを扱う。 この数字が何であって、何でないか 表示している「価格差」は、同じ商品を出している店舗間の販売価格の差。 買取価格でも、確定利益でもない。仕入れ候補を絞るための指標として扱うこと。 UI・静的ページ・構造化データのすべてにこの旨を明記している。 含まれるもの、含まれないものは以下のとおり。 モール 状態 理由 Yahoo ショッピング ○ 出品者ごとの実価格（新品・中古とも） JANコードで全出品を取得できる 楽天ブックス ○ 一部商品の価格 本・DVD・CD・ゲームのみ対応 Amazon × PA APIの資格情報が無い。アソシエイト審査と売上実績が必要 楽天市場 × 現在のアプリIDでは IchibaItem/Search が使えない。 新規アプリID登録で解決する メルカリ × 任意商品の相場を取得する公開APIが存在しない ヤフオク × 一般向けAPIの提供状況を確認できていない 実店舗の買取業者 × 公開APIが無い 中古価格は Yahoo ショッピングに出店している中古販売店の出品分。 駿河屋・ブックオフ等のYahoo店は含まれるが、実店舗のみの業者は含まれない。 なぜビルド時にデータを作るのか Yahoo ショッピングAPIは CORSヘッダを返さない ため、静的サイトのブラウザから直接呼べない。 楽天APIも Referer を登録URLで検証する。サーバを持たない構成では、ビルド時に取得して 静的JSONにするのが唯一の方法になる。 副次的な効果として、全商品ページが静的HTMLになり検索エンジンに中身が見えるようになった。 以前は全ページがJS描画で、配信HTMLが2KB弱の空の殻だった。 データの更新 ジャンルごとに実キーワードで検索してJANを集め、 JANごとに全出

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

02 / 使用技術

使用技術と役割

03 / 設計

構成から読み解く設計

主な項目は です。

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

04 / 変更履歴

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

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

1. 2026/08/15
   支援・購入への導線を追加するd50d3cdをGitHubで確認 ↗
2. 2026/08/10
   機能・コンテンツを追加0899197をGitHubで確認 ↗
3. 2026/08/10
   機能・コンテンツを追加97f8f4bをGitHubで確認 ↗
4. 2026/08/10
   機能・コンテンツを追加99e3d67をGitHubで確認 ↗
5. 2026/08/10
   機能・コンテンツを追加da2963cをGitHubで確認 ↗
6. 2026/08/10
   機能・コンテンツを追加4627048をGitHubで確認 ↗
7. 2026/08/10
   実装内容を更新bc83208をGitHubで確認 ↗
8. 2026/08/04
   不具合や設定を修正6a0e922をGitHubで確認 ↗
9. 2026/08/04
   機能・コンテンツを追加7b94a5dをGitHubで確認 ↗
10. 2026/08/04
    実装内容を更新bcf085cをGitHubで確認 ↗
11. 2026/08/03
    機能・コンテンツを追加e2095a0をGitHubで確認 ↗
12. 2026/08/03
    機能・コンテンツを追加e395be6をGitHubで確認 ↗

05 / 学び

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

• 変更を小さく記録する

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

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

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

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

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

06 / よくある質問

よくある質問