Reactで作るVB6風レガシーフォーム

Reactで作るVB6風レガシーフォーム <VBForm onSubmit={handleSubmit}> <VBTextBox label="メールアドレス： " /> <VBButton type="submit">登録</VBButton> </VBForm> 2026/08/24 俺たちの勉強会 #7 #orestudy

自己紹介： murasuke murasuke（むらすけ） 株式会社ツールラボ 開発部 部長 SE／プログラマーとして20年、大変でした 転職後は、レガシーWebアプリのモダン化を進めてます 今年は新旧技術の融合を目指す LTをやってます ! （今日誕生日です！）

最近のWeb画面、誰が作ってもこんなイメージ React Tailwind shadcn/ui 社員マスタメンテ メールアドレス [email protected] 姓 便利。きれい。でも、 名 クリア 登録 どこかで⾒たことある感じ そこで、もう少しとがった⾒た⽬にします

このデザイン、結構好きでした 濃い⻘のタイトルバー ⾓丸なし‧狭い余⽩ 灰⾊フォームと半⾓カナ ⼊⼒する部品は沈む 押す部品は出る∕クリックでへこむ ● へこみ、膨らみなど複数コンポーネントで共通利用できるものを抽出 ● コンポーネント化することで、細かいデザインを意識しなくてよいようにします

立体感のあるボタンの仕組み 左上が明るい ∕ 右下が暗い OK raised：押せそう 左上が暗い ∕ 右下が明るい ⇄ OK sunken：凹んで⾒える クリック中は枠を反転してへこませる 右下へ⽂字を1pxずらすことで動きを付ける

Tailwindで、立体感を再利用可能な規則にする（ユーティリティー） vb-raised（ボタンのふくらみ） vb-active-sunken (クリック時にへこむ） @utility vb-raised { @utility vb-sunken { @apply border @apply border border-t-white active:border-t-[#404040] border-l-white active:border-l-[#404040] border-r-[#404040] active:border-r-white border-b-[#404040]; active:border-b-white; } } ユーティリティークラスを使って、デザインの最小単位で部品化 vb-raised 、vb-active-sunken でまとめて適⽤できる

見た目と動きをコンポーネントの中へ閉じ込める
export function VBButton({ children, className , ...props }) {
return (
<button className={
`vb-raised vb-active-sunken
text-black bg-[#c0c0c0] px-3 py-[3px]
${className}`

→

}
{...props}>

<VBButton>OK</VBButton>

{children}
</button>
);
}

使う側は、スタイルの詳細を
知らなくてよい

vb-raised 、vb-active-sunken で、凸凹をスタイルを⼀括適⽤

JSXで「フォーム」を組み立てる
<VBWindow title="社員ﾏｽﾀﾒﾝﾃ" status={status}>
<VBForm onSubmit={handleSubmit }>
<VBFrame title="【社員情報】" >
<VBTextBox label="ﾒｰﾙｱﾄﾞﾚｽ：" type="email" value={employee.email} />
<div className="grid grid-cols-2 gap-4 max-[560px]:grid-cols-1 max-[560px]:gap-3" >
<VBTextBox label="姓：" value={employee.lastName} />
<VBTextBox label="名：" value={employee.firstName} />
</div>
</VBFrame>
<div className="mt-3 flex justify-end gap-2" >
<VBButton type="submit">登録</VBButton>
<VBButton type="button">ｸﾘｱ</VBButton>
</div>
</VBForm>
</VBWindow>

レスポンシブなレイアウト込み。たったこれだけ！

見た目は平成、中身は令和 grid grid-cols-2 gap-4 max-[560px]:grid-cols-1 max-[560px]:gap-3 レイアウトエンジンへ意図 (制約)を伝えるだけで、幅広い端末 で利⽤可能な画⾯が⽣成できる

RADの基本形は、 25年前に完成していた Form1 x y Label TextBox Label TextBox 1 コントロールを置く 2 サイズを設定する 3 4 プロパティーを設定する イベントハンドラを書く CommandButton Form にコントロールを配置 「ここに置く」が、そのまま画面になる → 固定されたデスクトップ画面を とにかく速く作れる これが、 VB6のRADの大きな強みだった

Webでは「座標」ではなく、「レイアウトの制約」を書く VB6 Webブラウザ CSS 座標を指定 利用環境を 特定できない 「制約」を書く x = 120 y = 80 横に並べる 狭ければ縦に並べる 行間も合わせて調整 PC 画面サイズが決まっている 前提であればとても強い スマホ 幅・文字サイズ・入力方法を 事前に想定できない CSSが配置を計算 CSSのレイアウトエンジンが進化し、 同じHTMLでPCもスマホも扱えるようになった

VB6風レガシーフォームを、動かしてみます

CSSは「座標」を無くすことで、変化に強いフォームを手に入れた 1 古い見た目も、 CSSのルールとして表現できる 2 ルールを部品化すれば、 Reactで再利用できる 3 座標で配置する手軽さの代わりに、レスポンシブ対応を手に入れた 座標を指定する画面設計 → レイアウトの制約を指定する画面設計 ・・・とはいえ、 私は古い人間なので フォームデザイナでペタペタ置く手軽さは、今でも忘れられません。