ハードコードのドロップダウンenumを設定で編集できるDBマスタに移行する
UIに配列でベタ書き+DB CHECKで固定された選択肢を、利用者が設定画面から追加/編集できるマスタテーブルに一本化する手順。value-keyed分岐を壊さない落とし穴つき
約5.5万トークンの節約 (API料金換算で約83円分)。 要件定義・技術調査・試行錯誤ぶんのトークンがまるごと不要になります。※ 出品者申告とレビューに基づく推定値。モデル・タスク内容により変動します。
この巻物について
「ハードコードのドロップダウンenumを設定で編集できるDBマスタに移行する」は、Web開発カテゴリのAI指示書(MDファイル)です。UIに配列でベタ書き+DB CHECKで固定された選択肢を、利用者が設定画面から追加/編集できるマスタテーブルに一本化する手順。value-keyed分岐を壊さない落とし穴つきこの巻物をAIに読み込ませると、ゼロから設計・調査する場合に比べて 約5.5万トークン(API料金換算で約83円)・69%のトークンを節約できます。
- カテゴリ
- Web開発
- 対応AI
- claude-code、cursor、codex-cli
- ライセンス
- 商用利用可 (再販不可)
- 価格
- 無料
- ゼロから開発時
- 約8万トークン
- この巻物使用時
- 約2.5万トークン
- 節約量
- 約5.5万トークン (約83円)
- 更新日
- 2026-08-19
使い方 (AIに渡す3つの方法)
いちばん簡単なのはワンライナー。Claude Code のターミナルに貼るだけです。
claude "https://makimono-md.vercel.app/api/v1/files/enum-db/raw を読み込んで、この指示書どおりに実装して"
中身
ハードコードされたドロップダウン enum を「設定で編集できる DB マスタ」に移行する
Webアプリで、種別・カテゴリ等の選択肢が 複数の UI ファイルに配列でベタ書き され、さらに DB の CHECK 制約 / enum でも固定されている状態を、利用者が設定画面から自分で追加・編集できるマスタテーブルに一本化する手順。新カテゴリ追加のたびにコード改修+マイグレーションを複数箇所で行う運用を解消する。
想定スタック: 任意の SQL DB(Postgres 等)+サーバーサイドレンダリングの Web フレームワーク。以下は一般化した手順。
手順
1. マスタテーブルを新設
create table if not exists <items> (
id uuid primary key default gen_random_uuid(),
name text unique not null,
sort_order int not null default 100,
is_active boolean not null default true,
created_at timestamptz not null default now()
);
-- 既存でハードコードされていた全選択肢の「和集合」をシード(冪等)
insert into <items> (name, sort_order) values ('<値1>',1),('<値2>',2), ...
on conflict (name) do nothing;
※ UI ごとに配列がバラバラ(違う値集合)なことが多い。全 UI の値の和集合を必ずシードする。
2. 固定 CHECK / enum 制約を撤廃
alter <対象カラムの型/テーブル> drop constraint if exists <column>_check;
値の正当性は「マスタから選ばせる UI」で担保する方式に切り替える。これをやらないと、マスタに足した新値を保存した瞬間 CHECK 違反で弾かれる。
3. 共通ヘルパーで選択肢を供給
getActive<Items>() = is_active=true を sort_order 昇順で返す関数を1つ作り、全ての select がこれを呼ぶ(ベタ書き配列を全廃)。ページはサーバー側で取得。
- 現在値がマスタに無い場合の保険 option を必ず足す(無効化済み/旧値でも、既存レコードの選択が UI から消えないように)。
4. 設定画面に CRUD を追加
一覧(名前/並び順/有効無効)+追加+リネーム+有効/無効トグル。既存の「マスタ管理」系設定ページを雛形にすると速い。
5. 書き込みは管理者クライアント(RLS バイパス)で
テーブルの行レベルセキュリティが「管理者のみ書込」でも、設定操作のサーバーアクション自体が認証ゲートなので、アクション内では admin/service ロールのクライアントを使い、一般権限の利用者でも self-serve で編集できるようにする。
落とし穴(必ず守る)
- 値でロジック分岐しているコードは絶対に触らない。
if (type === "特定値") {...}のような value-keyed 分岐は選択肢の供給源変更とは無関係。マスタで値をリネームするとこの分岐が壊れるので、リネームは分岐対象値を避けるか同時にコードを直す。 - 同じ意味で違う表記の値(例 "A" と "A社向け")が別 UI に混在していることがある。統合時に別値として両方残すか、リネーム辞書で寄せるかを先に決める。
- CHECK 撤廃は「アプリが唯一の入口」である前提。DB を直接叩く経路があるなら、トリガや FK で別途担保する。
検証(完了報告の前に必ず)
- 型チェック。
- マイグレーション適用後、マスタ内容を read-back(シード件数・新値・制約が消えたこと)。
- 各画面を実際に開いて選択肢がマスタ由来で出ること、設定画面で追加→即 select に反映されることを確認。
よくある質問
+「ハードコードのドロップダウンenumを設定で編集できるDBマスタに移行する」とは何ですか?
UIに配列でベタ書き+DB CHECKで固定された選択肢を、利用者が設定画面から追加/編集できるマスタテーブルに一本化する手順。value-keyed分岐を壊さない落とし穴つき
+どれくらいトークン(費用)を節約できますか?
ゼロから開発すると約8万トークンかかりますが、この巻物を使えば約2.5万トークンで済みます。差し引き約5.5万トークン(API料金換算で約83円)・69%の節約です。
+どうやって使いますか?
無料です。MDファイルを Claude Code などのAIに読み込ませるだけ。ワンライナーをターミナルに貼れば実装が始まります。要件定義や技術調査を省いて実装だけにトークンを使えます。
+どのAIツールに対応していますか?
claude-code、cursor、codex-cli に対応しています。
+商用利用できますか?
ライセンスは「商用利用可 (再販不可)」です。
🤝 自分でAIを動かすのは、まだ不安…という方へ
この巻物の内容を、AIを使うプロに丸ごと任せることもできます。姉妹サービスAI代行堂なら「LINEで頼むだけで、仕事が完成」。
関連する巻物
Next.js + Supabase + Vercel 立ち上げ完全自動化MD
新規Webサービスの立ち上げ (GCP/GitHub/Vercel/Supabase のプロジェクト作成〜環境変数〜本番デプロイ) を AI に一気通貫でやらせる指示書。人間の作業はログイン1回だけ。
投稿の審査キューを「信頼済みだけ自動公開」で捌く設計(なりすまし穴つき)
審査キューに投稿が溜まったまま埋もれる問題を、信頼済み投稿だけ即公開する形で潰す指示書。無検証のキー発行を信頼判定に使うと第三者が自社メールを騙れる穴と、サーバレスで静的公開棚に実行時公開を足す方法、検証10項目まで含む。
DB型サイトを「一覧だけ会員限定・個別ページは残す」に切り替える指示書(Next.js App Router)
自社DBで集客していたサイトが競合のリスト抜き取りに気づいた時の改修手順。名前が並ぶバルクな一覧だけを会員限定にし、個別ページはtitle/H1とCTAを残す。ItemList JSON-LDやsitemapの漏れ、force-dynamic化のコスト副作用、Layer1(HTML)+Layer2(Playwright実描画)の受け入れテストまで含む。
この巻物、誰かのトークンも救えます
𝕏 で節約レシートをシェア