AI開発はスマートじゃない。PWA対応で7回連続エラーを吐き出し、直しては壊れる無限ループに陥った絶望。

※この記事は、Claude Codeで1人開発しているSNS運用SaaS「ThreadPost」の開発日記です。

PWA対応で7回コミット、全部エラーだった

PWA対応は「ライブラリ一つ入れれば終わる」作業のはずだった。

結果は7回コミットして成功率0%。Service Workerが死んで、manifest.jsonがブラウザごとに違うエラーを吐いて、AIは「仕様が複雑です」しか言わなかった。

最終的にスマホに「ホーム画面に追加」ボタンが出た。感動より先に「やっとかよ…」って脱力した。

今週の全体像はコミット38件、新機能10件、バグ修正5件。残り23件は直しては壊すを繰り返した痕跡だ。

PWAの泥沼：7回コミットして全部エラー

「next-pwa」を入れた。「feat: PWA対応とHTTPS強制設定」をコミットした。

動かない。画面が真っ白になった。

Service Workerはブラウザの裏で動くプロキシで、ネットワークリクエストを傍受してキャッシュを返す仕組みだ。オフラインでもアプリを動かすための心臓部で、企業開発ならキャッシュ戦略の設計だけで数週間のテスト期間を設けると言われている。僕はそれをAIに丸投げした。

「fix: next-pwaを削除してService Workerエラーを解決」をコミットした。ライブラリを捨てて「Serwist」に乗り換えた。

「feat: SerwistでPWA対応を実装」をコミットした。今度はmanifest.jsonが怒り出した。

アイコンのサイズ、テーマカラー、表示モード。PWAとして認識されるには厳格な仕様を満たす必要がある。AIに聞いても「仕様が複雑です」しか返ってこない。

「fix: PWA manifest screenshotsを追加」をコミットした。スクリーンショットの画像サイズが違うと怒られた。

「fix: manifest purpose any maskable削除」をコミットした。今度はpurpose属性の書き方が古いと怒られた。

Chromeは通るのにSafariは無視する。ブラウザごとに要求する仕様が微妙に違う。

結局、公式ドキュメントを僕が読み漁って手作業で直した。

しんたろー:
7回コミットして全部エラー。成功率0%。AIは「仕様が複雑です」しか言わない。知ってるんだよそれは。結局公式ドキュメントを僕が読んで指示を出した。AI開発と言いながら、やってることはただのデバッグ作業だ。

ダークモードの実装も別の地獄だった。

「feat: ダーク/ライトモード切り替え機能を追加」をコミットした。Tailwind CSSとnext-themesを組み合わせた。

ローカルでは動いた。本番にデプロイしたら挙動がおかしい。

Next.jsのSSR環境では、サーバーはユーザーのOS設定を知らない。だから最初は必ずライトモードのHTMLを生成する。ブラウザ側でJavaScriptが動いて初めてダークモードに切り替わる。このタイムラグで画面が一瞬ちらつく。FOUCと呼ばれる現象だ。

「fix: Tailwind darkModeをclass設定に修正してテーマ切り替えを修正」をコミットした。

AIはTailwindの設定をメディアクエリからクラス制御に書き換えた。直ったと思った。甘かった。

今度はCTAセクションの文字が見えなくなった。白背景に白文字になっていた。

「fix: CTAセクションのライト/ダークモード配色を反転」をコミットした。AIに「ここを直して」と指示したら、関係ないヘッダーの配色まで書き換えてきた。

「fix: テーマをシステム設定から独立させ手動切り替えを可能に」をコミットした。

「この変数だけ触れ」と明示するまで無限ループだった。

サムネ生成のAI化：ルールベース20行がAIに負けた

PWAで地獄を見た後、予想外にうまくいったのがサムネイルのテキスト抽出だ。

今まで正規表現のルールベースで書いていた。「3文字以下の単語は削る」「助詞は無視する」。そういうルールを積み上げて、長いタイトルから短いキーワードを抽出していた。

例外が無限に出る。企業がこういう構文解析器を作る場合、専任のエンジニアが辞書をメンテナンスし続けると言われている。

「feat: サムネテキスト抽出をAI化 + devlogサムネ品質大幅強化」をコミットした。Gemini FlashのAPIを叩くように書き換えた。

結果、僕が書いたルールベースより圧倒的に上手かった。

LLMは文字数ではなく、文脈上の重要度で判断する。僕が「3文字だから削る」としていた単語を、AIは「意味の核だから残す」と判断した。逆に長い単語でも、文脈から不要だと判断すればバッサリ削った。

抽出ロジックのコードは20行から200行に増えた。でも精度は桁違いだ。

しんたろー:
僕が数日かけて調整した正規表現が、たった1回のプロンプトに負けた。悔しいけど認めるしかない。コードは増えたのに、仕事は減った。なんか複雑な気持ちだ。

devlogのサムネイルも合わせてデザインを刷新した。感情別にレイアウトを変える処理もAIに判定させている。記事のトーンに合わせて、最適な背景色と文字配置を自動で選ぶ。

オンボーディングとニュース設定の刷新も行った。

「feat: ニュースソース設定機能の完全実装」をコミットした。最初に設計したとき、ニュースのカテゴリをグローバルで管理していた。

しかし、ペルソナごとに設定が変わらない。当たり前だ。設計がそうなっていないからだ。

「fix: ニュース設定を正しい設計に修正（ペルソナ単位管理）」をコミットした。

ペルソナ単位で管理する設計に直した。今度は国内と海外でカテゴリの呼び方がバラバラになった。「統一して」と指示したら、カテゴリの種類が増えていた。

結局、RSSとカテゴリのマッピング方式から設計し直すことにした。

「feat: ニュース設計を抜本的に変更（カテゴリ→RSSマッピング方式）」をコミットした。

しんたろー:
設計を直したのに、また直した。3回目も直した。AIのせいじゃない。僕の設計がクソだっただけだ。これを認めるのに3サイクルかかった。

落とし穴：「ライブラリ一つで終わる」は幻想だった

PWA対応、ライブラリ入れたらサクッと終わるっしょ、と本気で思っていた。

Next.jsのエコシステムなら、プラグイン一つで勝手にService Workerが生成されるはずだと。

7回コミットして全部エラー。AIに聞いたら「仕様が複雑です」って、いや知ってるんだよそれは。

ライブラリを窓から投げ捨てて、別のツールに乗り換えた。それでもまだ怒られた。

Next.jsのApp Router環境下でのPWA対応は、AIの学習データの中でベストプラクティスがまだ固まっていない。AIが提案してくる設定は、古い仕様や別のフレームワークの定石が混ざっている。最新の環境では、AIの提案をそのまま信じると痛い目を見る。

最終的にスマホの画面に「ホーム画面に追加」のインストールボタンが出た。感動より先に「やっとかよ…」って脱力した。あの達成感、もっとキラキラしてるはずだったのに。

今日の数字

| 指標 | 結果 | 比較対象 |

|------|------|----------|

| PWA対応コミット数 | 7回（全部エラー） | 企業なら1〜2回で終わる作業 |

| サムネ抽出ロジック | 200行 | 僕が書いたルールベースは20行。精度は桁違い |

| ダークモード修正 | 3回 | 「この変数だけ触れ」と言うまで止まらなかった |

| 総コミット数 | 38件 | 新機能10件、バグ修正5件、残り23件は泥沼の痕跡 |

PWA対応の7回が今週のハイライトだ。通常、企業開発でPWAの初期設定をする場合、ライブラリの導入とマニフェストの作成は1〜2回のコミットで終わる。環境構築の定石が決まっているからだ。

僕は7回コミットして、その全てでエラーを出した。

一方でサムネ抽出ロジックの200行はAIの勝利だ。外注のライターにタイトル作成を頼めば1件数百円は下らない。それがAPIを叩くだけで、人間以上の精度で返ってくる。

ダークモード修正の3回は、スコープを限定しなかった僕の指示不足が招いた結果だ。

FAQ

Q: PWA対応でService Workerが壊れたとき、どうやって原因を特定したの？

AIに聞いても「仕様が複雑です」しか返ってこなかったので、Chrome DevToolsの「Application」タブでService Workerの登録状態を直接確認した。エラーログにはライブラリが生成したService Workerのスコープ設定がNext.jsのApp Routerと競合していると出ていた。結局、ライブラリを捨てて別ツールに乗り換えるまで原因が特定できなかった。

Q: AIにテキスト抽出を任せるとき、コストはどれくらいかかるの？

Gemini Flashは入力1Mトークンあたり$0.075と言われている。サムネ1枚あたりのテキスト量は数百トークン程度なので、1,000枚処理しても数セント以下だ。外注で1件数百円払うのと比べると、コスト差は100倍以上になる。精度も上だった。

Q: ダークモードのFOUC（画面ちらつき）は最終的に解決できたの？

TailwindのdarkModeをメディアクエリからクラス制御に切り替えて、next-themesのscript注入でSSR時にクラスを先付けする方法で対処した。企業開発ではこのちらつきを消すためだけに数人日をかけると言われているが、ライブラリの設定変更だけで対応できた。ただし、Tailwindの設定ファイルとnext-themesの設定を両方変えないと片方が上書きされるので注意が必要だ。

まとめ + CTA

PWAで7回コミットして全部エラー。サムネ抽出でAIに完敗。ニュース設計を3回やり直した。

そういう週だった。

👉 ThreadPostでSNS運用を自動化する