紡Book の勉強ノート

「何を書いても色が変わらない」の犯人は優先順位ではなかった — 止まったタブと CSS トランジション

非表示のブラウザペインで色を検証したら、セレクタは当たっているのに getComputedStyle が旧色を返し続けた。CSS の優先順位を疑いかけたが、真因は開始したまま進まないトランジションだった。

テストに「この1つは対象外」と書いた行が、あとから来た決定を素通りさせた

登録表を全数走査するテストを入れて「15/15 完了」と記録した。数日後に実物を見たら、選べる8枚のうち3枚に機能が入っていなかった。原因は、走査の対象外にした1件がその後の一律決定を素通りしていたこと。

本が瞬間移動して見えたのは、位置を「開いた／閉じた」の2択で決めていたから — アニメに必要なのは途中の値

フォトブックを開くモーションで、本がパッと飛んで中身が先に出てしまう。原因は真偽値で持っていた状態が、アニメが始まった瞬間に反転していたこと。0か1を、めくりの進み具合に沿った連続量に変えた。

スクロール連動のアニメーションを、要素の数だけ伸ばす — animation-range に CSS 変数を入れる

1画面に1つの言葉を出すテンプレートで、言葉が増えたときにどう見せるか。比率で割ると増えるほど早口になるので、スクロール距離のほうを伸ばした。animation-range は calc と CSS 変数を受けてくれる。

「描く面を全部数える」と書いた同じ晩に、自分が数え漏らした

テストが緑なのに画面に出ない、という穴を踏んで「新しいフィールドを足したら、それを描く面を全部数える」と判断ログに書いた。同じ晩に grep をかけたら4面目があった。しかもその面は実データでは常に空だった。

テストが3本とも落ちたのに、落ちた理由が違った — 赤を確認しただけで実装に入りかけた話

TDD で先にテストを書いて、3本とも赤になるのを確認してから実装に入った。ところが赤の理由は「まだ配線していないから」ではなく、テンプレが遅延ロードで何も描かれていない画面を見ていたから。気づけたのは、直す前でも緑のはずの1本を混ぜていたからだった。

同じデータを2つの型で持っていたら、代表の選び方まで2つに分かれていた

写真1枚に綴った言葉の束を画面へ繋いだら、繋いだ先で別の欠陥が出た。同じデータを2つの型で並走させていて、片方は API の新着順の先を代表にし、もう片方は ID 順の先を代表にしていた。

全テスト緑なのに exit 1② — ランナーが指す「発生元」は犯人を教えてくれない

前回「新入りは無実」までで止めた exit 1 の続き。犯人はエラーの発生元表示からではなく、テストの書き方の差分から出てきた。直ったことをどう言うか（統計）と、直し方をどこに置くかの記録。

「消していい?」に答えるために、何が消えるかを Django に数えさせた

検証用のアカウントを消すことにしたが、消すと何が道連れになるのかを把握していなかった。deletion.Collector で cascade を全部列挙してから実行した話。数えるのは実行するためではなく、途中で止まるため。

公開中のはずの写真が3枚だけ出てこない — 導出フィールドの backfill 漏れ

公開中のはずの写真が3枚だけ一覧から消えた。原因は、別テーブルの存在から計算して持っていたフラグが、計算し直す口を1つにまとめた日より前のデータでズレていたこと。テストでは絶対に出ないズレだった。

「外す」には3つの層がある — どこで外すかで、戻せるかどうかが決まる

スマホで「web に出す」のチェックを外したとき、サーバ側で何を消すか。表示から下ろすだけか、「出す」という記録だけ消すか、写真ごと消すか。層を言わずに「どうする?」と聞かれると、人は一番強い方を想像して身構える。

全テスト緑なのに exit 1① — 新入りのせいか、前からかを切り分ける

vitest のフルランが全テスト合格なのに失敗扱いになった。Unhandled Error の正体と、新実装のせいか既存問題かを git の checkout 一発で切り分けた記録。

渡したはずのパスが、消えて届く・化けて届く — Windows と WSL の境界で踏んだ2つの事故

Windows側からWSLへコマンドを渡したら、シェル変数が空になり、/mnt/c のパスが C:/Program Files/Git/mnt/c に化けた。引数は境界で書き換えられる前提と、スクリプトファイル経由という回避策。

ページの途中で背景の色が切り替わる「帯」が出る — background-attachment: fixed の仕様

テンプレートの全景スクショに、背景が途中で白っぽく切り替わる継ぎ目が写っていた。原因はバグではなく background-attachment: fixed の仕様どおりの動きで、しかもコピペで増殖していた。目視で見つけた3つの裏に、見ていなかった2つが残っていた。

「約11年12ヶ月」と表示された — 人間向けの時間表示は繰り上げ漏れでバグる

写真の間の経過時間を「それから 約11年12ヶ月」と表示していた。12ヶ月あるならそれは12年。丸め処理が繰り上がりの境界を考えていなかった小さなバグの記録。

同じ写真が2回並ぶ — データの「単位」がズレると React の key が衝突する

作品づくりのウィザードで同じ写真が二重に表示されるエラー。原因はAPIが返すデータの単位（綴り単位）と画面が扱う単位（写真単位）のズレだった。畳み込みで直すときの落とし穴も。

テンプレート29種の全景スクショを自動で撮る — ウィザード自動操縦と、途中で死んだ別ポート作戦

テンプレート選別の材料として29種の全景スクリーンショットが必要になり、AIにPlaywrightで撮ってもらった。CORSに阻まれて計画変更した経緯と、壊さないためのガードの話。

重なりのバグは「数字を上げる」前に測る — elementFromPoint で z-index を実測する

キャプションが写真の下敷きになるバグ。z-indexを大きくして殴る前に、getBoundingClientRect と elementFromPoint で「本当に重なっているか・どっちが上か」を測ってから直すやり方を見た。

画像の読み込み失敗は親まで伝わってこない — error はバブルしない性質で1点にまとめる

共有ページの写真が割れたときの受け皿を付けようとしたら、画像タグがテンプレ何種類にも散らばっていた。onError を配って回る代わりに、capture フェーズのリスナ1個で全部拾った記録。

時間で切れるリンクで写真を配ると、切れた瞬間が無言になる — 失効する配信と受け皿

写真を「一定時間で失効する署名付きURL」で配ると、失効した後に画像が無言で割れうる。失効を拾う受け皿（失敗の検知・取り直し・案内）を本体と同時に設計しないと核が静かに欠ける、という観察。

アルバムの並び順は保存しない — 表示するたびにサーバ側で並べ直す

撮影日時順・綴った日順でアルバムを作る機能で、並び順そのものは保存せず「選んだ写真 ＋ 並べ方の規則」だけを持たせた。並びの確定は表示のたびにサーバ側でやるので、後から写真が増えても時系列が崩れない。「綴った日順」で使う日付をどの日に決めたかも含めた制作メモ。

共有相手だけが写真を見られて、作った本人は見られない — アクセス経路ごとに「中身の解決」を書き分けた話

テンプレページが photoId の並びだけを保存し、写真への解決を「共有経路」にしか通していなかった。結果、共有相手は実写真を見られるのに、作った本人の画面にだけダミーが出る形になっていた。原因はロジックの偏在で、直し方は解決を1関数に集約し、全経路がそこを通っているかを見ること。

失敗の理由を、画面が間違えていた — 共有ページのエラーを種類ごとに書き分ける

綴Photo の共有ページで、合言葉が違うとき以外の失敗（通信が届かない・短時間に試しすぎ）に、英語の生メッセージがそのまま出ていた。受け皿が失敗の種類を見ていなかったのが原因で、種類ごとに違う言葉を返すようにした記録。

保存の形を変えても、画面は1行も触らずに済んだ — 「しまう形」と「返す形」を分けた話

テンプレページの保存を写真ID配列から source タグ付きユニオン（手で並べる／撮影日付順）へ作り替えた。描画側は写真IDの順番に強く依存していたが、APIが返す形を backend で解決して「前と同じ形」に戻すことで、フロントを無改修のまま保存形だけ進化させた制作メモ。

管は通ったのに、web はモックのデータを見たままだった — 表示側のデータ源を差し替える

モバイルから同期した写真が web に出てこなかった。バグを疑って4層を順に剥がしたら、実装ミスではなく、web がモック時代のデータ源（sampleData と☆お気に入り）を見たままだったのが原因だった。表示側のデータ源を /api/memories/ に差し替えるまでの記録。

テストは全部緑、でも dev サーバは全リクエスト落ちていた — Next.js 16 の middleware→proxy

綴Photo の /lab にオーナー専用の認証ゲートを足したとき、ユニットテストは全部緑なのに dev サーバが全リクエストで落ちていた。原因は Next.js 16 で middleware が proxy にリネームされていたこと。純関数のテストが規約変更を素通りし、ライブで起動して初めて捕まえた記録。

AI に『バグじゃなく読みやすさ』をレビューさせたら、ほとんどが『同じ判断が散ってる』に集約された

Codex 目線で、バグではなく読み味・責務分離だけをレビューさせたときのメモ。挙がった指摘の多くが『同じ小さな判断が複数箇所に散っている → helper / service に寄せる』に集約された。どれから直すかは自分で選んだ。

同じ写真を2回取りに行ってた — home で取ったのを sessionStorage で渡す

綴Photo の home → add-meaning の遷移で、同じ『次の写真』を2回 fetch していた。home で取った結果を sessionStorage に置いて、add-meaning 側が ID 一致なら拾う、で二重フェッチを1回にした話。

モックを実データに繋ぐまで出なかった2つの落とし穴 — 空の src とポートが揃っていない CORS

綴Photo の web 版で、お気に入り画面をモック（localStorage のダミー）から backend の実データに繋ぎ替えた。型は通るのに、ブラウザで初めて2つ踏んだ。画像が無いと空の src がページを再取得する罠と、開発用フロントのポートが CORS の許可リストから漏れていた件。モックは欠けを見せてくれない、という話。

モックから本番データに繋いだら、詳細画面だけ空になった — モック専用に作った関数が、本番の id を想定していなかった

綴Photo の web 版を、開発用のモックから本番の実データに繋ぎ替えている途中で踏んだバグ。リストは実データになったのに、クリックして開く詳細画面だけが空になった。原因は、詳細画面が中で使う関数がモック専用に作られていて、本番の id を想定していなかったこと。モックのうちは出ず、本番に繋いだ瞬間だけ出る類のバグ。

AI が作った『星座』レイアウト、線が写真につながっていなかった — 座標系が2つあった話

写真が線でつながる『星座』テンプレを AI に作ってもらったら、線が宙に浮いて写真とつながっていなかった。原因は、線（固定SVG座標）とノード（CSS grid）が別々の座標系にいたこと。座標を1か所に集約して一致させた過程と、『AI は見た目の叩き台・構造は人が決める』という分担をまとめる。

Cookie 認証の書き込み API に CSRF 保護を付け忘れる — DRF は『認証クラスごとに守りが変わる』

綴Photo のコードレビューで見つかった CSRF 保護漏れを題材に、なぜ Cookie 認証だけ CSRF 対策が要るのか、Django REST Framework では認証クラスによって CSRF の自動強制が効いたり効かなかったりするのか、横展開した防御が1箇所だけ漏れる構造をまとめる。

1回ぶんを守るだけでは足りない — 公開エンドポイントに『どこで線を引くか』

綴Photo のレビューで浮かんだ『上限と検証』まわりの観察を、勉強のためにまとめる。テキストの長さ上限と共有パスワードの最小長はレビュー後に対応済み。ユーザー単位の累積上限は今後の課題として残っている。『どこに線を引くか』をテーマに整理する。

フォントの先読み指定が逆効果になり、画像が見えるのに3秒待たされた — next/font preload と motion fade-in の罠

画像のファイルは 600ms で届いているのに、画面に出るまで 3 秒待たされていた。PageSpeed をもう一度開いたら 3 つの問題が並んでいた──日本語フォントの先読み指定が 240 個も出ていた件、fade-in 演出のせいでメイン画像が最初は透明になっていた件、つなぎフォントを書き忘れていた件。順に潰して LCP を 3.4 秒から 1.6 秒に落とした記録。

2ステップ保存で空ページが残った — transaction.atomic() を「いつ使い、いつ使わないか」

保存を 2 ステップに分けたら、2 つ目が失敗したときに「中身が空のページ」だけが DB に残った。Django の transaction.atomic() で「全部成功か、全部なし」を保証する直し方と、いつ atomic を使うべきかの見分け方を整理する。

正しいコードなのにツールに怒られた — コメント1行で lint を黙らせる仕組み

Next.js のエラー画面で意図的に素のリンクを使ったら ESLint が「Link を使え」と警告してきた。コードは正しいのに警告が出るとき、コメント1行で「ここは意図的」とツールに伝えられる。なぜコメントが命令として効くのかを、Lint と Formatter の役割の違いから整理する。

使ってないファイルが警告を出し続ける — 黙らせるより置き場所を直す（ESLint globalIgnores）

使っていない試作ファイルが ESLint 警告を量産していた。警告を黙らせるより、ファイルの居場所を直すほうが筋がいい。スキャンルートの外へ出す方法と、ESLint の globalIgnores でディレクトリごと除外する仕組みを、無視の選び方として整理する。

正しいエラー文（パスワードが違います）がユーザーに届かなくなった — エラーの種類を表す番号(HTTPステータス)401と400の使い分け

共有ページでパスワードを間違えたとき、本来出したいメッセージが消えて汎用エラーになった。原因はエラーの種類を表す番号(401)の取り違えで、frontend 側が認証切れと誤解して無関係な再ログイン処理を走らせていた。

ライブラリの版を変えても、ビルドが落ちる場所が移動するだけだった — motion + React 19 + Next.js 16 の SSR エラー調査

ビルドが最後の組み立てで落ちる。原因のライブラリ版を入れ替えても、止まらず別ページに飛び火するだけ。motion + React 19 + Next.js 16 の三者組み合わせで起きる構造的なエラーを掘って、直すか撤退するかを判断した記録。

フォントの読み込み方を変えたら、速度スコアが悪化「したように見えた」 — Google Fonts の @import を next/font へ

速度スコアが上がった指標と下がった指標が混ざり、最初は「失敗した？」と思った。フォントの読み込み方を直したら、隠れていた真の主犯（画像）が露出しただけだった話。

「CSPって何？」から XSS 防御の層構造を理解するまで

next.config.ts から CSP-Report-Only を外した差分を起点に、CSP違反 / Enforce モード / XSS防御の3層構造 / レポート受け皿の3パターン と、形骸化した設定を一旦外す判断軸を整理した学習ノート。

とりあえず大きい画像を置いておけば綺麗、という話じゃなかった — Next.js の icon convention

Next.js の app/icon.png に 2048×2048 / 6.7MB の PNG を置いていたら、favicon として全ユーザに毎回 6.7MB を配ることになっていた。convention の便利さと「素のまま配る」リスクを整理する。

ページを開いた瞬間、メニューが一瞬チラつく — 最初の表示は useState の初期値で決める（Next.js）

Next.js (App Router) のトップページで、ナビ右上の APP バッジが一瞬表示されてから消える現象が起きていた。useEffect で判定していた可視状態を、usePathname を使って useState の初期値で確定させたら直った。SSR と CSR の役割分担、Hydration、Core Web Vitals の話まで。

同じコンポーネントに別の見た目を足したら、片方が真っ白になった — デフォルト引数を置いてはいけない場面

AI に書いてもらった variant コンポーネントに見た目を1つ足したら、デフォルト値の型が合わずビルドが落ちた。原因を後から追って腑に落ちた『型ずれ』の進行形の記録。

一覧に出していない記事が、URL直叩きで見えていた — Next.js 動的ルートの落とし穴

Next.js App Router で generateStaticParams を「アクセス制御」と勘違いして、ドラフト記事が URL 直叩きで見えてしまっていたパターンの学習まとめ

React の img onError を再レンダで使うと無限ループになる話

img onError で state を更新すると再マウント → 再失敗ループに入る React の典型パターンと、それを避ける書き方の学習メモ

エラーコードはフロントの受け取り方に合わせる — JWT リフレッシュを 500 ではなく 401 に

フロントは「401 が来たらトークンを更新して再試行」でリカバリを組む。だからサーバーも期限切れトークンを 500 ではなく 401 に寄せる——クライアントの受け取り方を前提にステータスコードを設計する話。simplejwt の TokenError ハンドリングを題材に。

綴PhotoのLPを3回作り直した。「これだ」という感覚はどこから来たか

完成主義を手放したら、LPの方向性が決まった話

「先頭の1件」は並び順を指定しないと毎回変わる — Django prefetch_related の落とし穴

N+1 を解消しようと prefetch_related を入れたら、表示するキャプションが画面ごとに揺れるようになった。「先頭の1件」は並び順を明示しないとブレる（.first() と list[0] は同義じゃない）という Django ORM の落とし穴の学習まとめ。

認証不要の共有ページを総当たりから守る3つの層

ログイン不要で開ける共有ページを、レートリミット（DRF Throttle）・パスワードのハッシュ保存・最低文字数の3層で総当たりから守る設計を、綴Photo の実装でまとめる。

Next.js ミドルウェアで JWT 検証をするかしないかの設計判断

Edge Runtime の制約とミドルウェアの責務をどう整理して、Django API 側との二重防御の境界を決めたかの学習まとめ

motion + React 19 で MotionValue が style に反映されない。13.0.0-alpha.0 で逃げた話

値は正しいのに style に反映されない。React state にブリッジする逃げ道を試したが motion を使う意味がなくなったので、結局プレリリース版 13.0.0-alpha.0 に上げて解決した記録

ユーザー入力 HTML の XSS をなんとかする

「そもそもサニタイズって何?」から始めて、自分のコードに潜んでいた XSS 脆弱性を nh3 で直したときの学習まとめ