Respo Checkの設計・技術選定・コミット履歴を解説

01 / 概要

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

respo check（cosmewatch.jp）— スマホ表示チェック リポジトリ名は respo check だが、公開先は cosmewatch.jp。 商品ページを、スマホ・タブレット・PCの幅で撮って並べる。 公開先: https://cosmewatch.jp 配信: GitHub Pages（ dist/CNAME は scripts/build site.mjs の SITE DOMAIN から作る） iframe では作れない 「スマホ表示をPCで確認」を iframe で作ろうとすると必ず失敗する。 楽天もYahooも X Frame Options を返すので、他所のページは埋め込めない。 ヘッドレスブラウザで幅を変えて実際に開き、スクショを撮る。 JavaScript で作られている部分もそのまま写る。 決めたこと スマホを左端に置く。 店主はPCで作業しているので、放っておくと PCの見た目だけで判断してしまう。並び順で「まずスマホ」を作る。 幅の比はそのまま並べる。 3つを同じ大きさに揃えると、スマホで どれだけ狭いかが分からなくなる。狭さこそ見せたいもの。 「開いた瞬間に見える範囲」だけ撮る。 縦に全部つなげた画像にしない。 見たいのは、来た人が最初に何を見るか。 networkidle で待たない。 楽天のような広告と計測の多いページは 通信が止まらず、待ち続けて失敗する（2026 09 04 実測）。 使い方 相手のサイトへの負荷 自分の商品ページを見に行くだけで、1ページにつき幅の数だけ開く。 3秒あける。 人が手で確認するより速く叩く理由がない。

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

02 / 使用技術

使用技術と役割

03 / 設計

構成から読み解く設計

主な項目は です。

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

04 / 変更履歴

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

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

1. 2026/09/14
   スクショを撮り直すcd5238fをGitHubで確認 ↗
2. 2026/09/07
   スクショを撮り直すbb1d8c2をGitHubで確認 ↗
3. 2026/09/04
   撮った画像をリポジトリに入れないようにする86d1aefをGitHubで確認 ↗
4. 2026/09/04
   商品ページを幅別に撮って並べる7073865をGitHubで確認 ↗

05 / 学び

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

• 変更を小さく記録する

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

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

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

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

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

06 / よくある質問

よくある質問