公開した技術スタックが間違っていた — 実装を読まずに書いた代償
サイトを作り直したときに、自分のプロダクトを紹介するページを3つ作りました。 そこに書いた技術スタックのうち1つが、実物とまったく違っていました。
しかも気づいたのは本番へ出したあとです。
何が違っていたか
サムネジェネレーターというツールの紹介ページです。
Next.jsもTypeScriptも使っていません。package.json を開けば依存が無いことは一目で分かります。
配信先もVercelではなくCloudflare Pagesでした。wrangler.toml が置いてあります。
なぜ間違えたのか
他のプロダクトがそうだったからです。
ちょうぼっちもValscopeも Next.js + TypeScript + Vercel で作っています。 3つめも当然そうだろう、と手が勝手に書きました。
もっと正確に言うと、確かめる工程を挟まなかった。
package.json を1つ開けば済む話で、時間の問題ですらありません。
「たぶんこうだろう」で書けてしまったから、書いてしまった。
紹介ページはサイトを作り直す作業のいち部分でしかなく、 本体はデザインと実装のほうにありました。 気を抜いたのが、いちばん確かめやすい場所だったわけです。
気づいた経緯
サイトのWIKIに、実際に使っている技術スタックを貯めていくことにしました。
そのために各プロダクトの package.json を並べて読んだ。
=== thumbnail-app ===
(dependencies なし)
依存が空でした。Next.jsで動くはずのアプリに依存が無い。
README.md を開くと、ONNX Runtime Web で SD-Turbo をWebGPU上で動かす、と書いてあります。
自分で書いたREADMEです。
何が問題だったか
事実として間違っているのはもちろんですが、たちが悪いのは それらしく読めてしまうことです。
Next.js + TypeScript + Vercel は、私のプロダクトとしてありそうな並びです。 知らない人が読んでも違和感はありません。読んだ人が気づく仕組みがない。
自分のプロダクトについて自分で書いた文章が間違っている、というのは、 このサイトが主張したいこと(実際に作って動かしている)を直接損ないます。
変えたこと
WIKIの書き方に条件を付けました。技術について書くページには、 次の4つを必ず入れます。
- どのプロダクトで、何に使っているか
- なぜ選んだか(比較した相手も書く)
- 代わりに背負ったもの(制約・弱点)
- 実際に踏んだ挙動と対処
2と3を書こうとすると、実装を読まないと書けません。 「なぜCloudflare Pagesなのか」は、そのアプリにビルドが要らないと知らないと書けない。 「代わりに背負ったもの」は、WebGPU必須で初回1GBだと知らないと書けない。
つまり書く内容の側から、確かめざるを得なくするという手当てです。 「確認しましょう」というルールは、忙しいときに最初に飛びます。
配信基盤の使い分けは 配信基盤の使い分け に、 ブラウザ内で推論する構成は ブラウザ内でAIを動かす にまとめました。
訂正について
誤りは本番から取り除きました。 現在のサムネジェネレーターのページは実装と一致しています。
推測で書いた箇所が他にないか、残る2つも package.json で確認しました。
ちょうぼっちとValscopeは実物と一致していました。
教訓
似ているものが3つあるとき、3つめを確かめない。 これは今回に限った話ではなく、たぶん繰り返します。
だから「気をつける」ではなく、確かめないと書けない形に変える。 そこまでやって、ようやく再発が減ります。