---
title: Reactで作るVB6風レガシーフォーム
tags: 
author: [murasuke](https://docswell.com/user/4962106)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/Y76WGM567V.jpg?width=480
description: Reactで作るVB6風レガシーフォーム by murasuke
published: August 24, 26
canonical: https://docswell.com/s/4962106/ZR8WNE-2026-08-24-202204
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/Y76WGM567V.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/G75MVZY574.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/9J293RGGER.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/DEY41DVGJM.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/VJNY26M878.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/YE9P1LNXJ3.jpg)

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 でまとめて適⽤できる


# Page. 7

![Page Image](https://bcdn.docswell.com/page/GE8D4XK9ED.jpg)

見た目と動きをコンポーネントの中へ閉じ込める
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 で、凸凹をスタイルを⼀括適⽤


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LELM68ZM7R.jpg)

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>
レスポンシブなレイアウト込み。たったこれだけ！


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4JMY56V6JW.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/PJR93P2N79.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PEXQ43D8JX.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/3EK9ZYXLED.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/L73WD95675.jpg)

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