マキモノ
Web開発無料✅ 公式検証済みv1.0.0 / 更新

ハードコードのドロップダウンenumを設定で編集できるDBマスタに移行する

UIに配列でベタ書き+DB CHECKで固定された選択肢を、利用者が設定画面から追加/編集できるマスタテーブルに一本化する手順。value-keyed分岐を壊さない落とし穴つき

出品者: kim@orgiast.jp2 DL📖 読込 約1,022トークン (約2円)💰 コスパ 54
トークン節約メーター69%節約
ゼロからAIに作らせた場合8万トークン
このMDを読ませた場合2.5万トークン

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 のターミナルに貼るだけです。

⬇ .md をダウンロード
claude "https://makimono-md.vercel.app/api/v1/files/enum-db/raw を読み込んで、この指示書どおりに実装して"
claude-codecursorcodex-cliライセンス: 商用利用可 (再販不可)

中身

ハードコードされたドロップダウン 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=truesort_order 昇順で返す関数を1つ作り、全ての select がこれを呼ぶ(ベタ書き配列を全廃)。ページはサーバー側で取得。

  • 現在値がマスタに無い場合の保険 option を必ず足す(無効化済み/旧値でも、既存レコードの選択が UI から消えないように)。

4. 設定画面に CRUD を追加

一覧(名前/並び順/有効無効)+追加+リネーム+有効/無効トグル。既存の「マスタ管理」系設定ページを雛形にすると速い。

5. 書き込みは管理者クライアント(RLS バイパス)で

テーブルの行レベルセキュリティが「管理者のみ書込」でも、設定操作のサーバーアクション自体が認証ゲートなので、アクション内では admin/service ロールのクライアントを使い、一般権限の利用者でも self-serve で編集できるようにする。

落とし穴(必ず守る)

  • 値でロジック分岐しているコードは絶対に触らないif (type === "特定値") {...} のような value-keyed 分岐は選択肢の供給源変更とは無関係。マスタで値をリネームするとこの分岐が壊れるので、リネームは分岐対象値を避けるか同時にコードを直す。
  • 同じ意味で違う表記の値(例 "A" と "A社向け")が別 UI に混在していることがある。統合時に別値として両方残すか、リネーム辞書で寄せるかを先に決める。
  • CHECK 撤廃は「アプリが唯一の入口」である前提。DB を直接叩く経路があるなら、トリガや FK で別途担保する。

検証(完了報告の前に必ず)

  1. 型チェック。
  2. マイグレーション適用後、マスタ内容を read-back(シード件数・新値・制約が消えたこと)。
  3. 各画面を実際に開いて選択肢がマスタ由来で出ること、設定画面で追加→即 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で頼むだけで、仕事が完成」。

AI代行堂を見る →

関連する巻物

この巻物、誰かのトークンも救えます

𝕏 で節約レシートをシェア