概要
「8桁の英数字,4桁の英数字」のような指定されたフォーマットに従って、テスト用のダミーデータを大量に作成したいケースはそれなりにあるかと思います。
今回そのためのオンラインツールを作ったのでその紹介と、開発中に得た知見について書きます。
技術要素
React+Redux+TypeScript+Material-UI+Firebaseで作っています。
ツール
指定フォーマットの正規表現を入力して
作る数を入れて、GENERATEボタンを押すと、
テストデータが生成されます。
生成されたデータはダウンロード、またはクリップボードへコピーできます。
作成できる数の上限は10,000件までに設定しています。
正規表現から文字列の生成
randexpというライブラリを使って、正規表現からそれに沿ったランダムの文字列を生成しています。
基本的な正規表現は問題なく使えるようですが、
*+{3,}
のような、生成できる文字列の長さに上限がないものは、上限１００としているようです。
なので、
a+
といった正規表現からは
# 最短
a
# 最長
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
といった文字列が生成されます。
previewの生成
正規表現を入力した後、1秒間更新が無ければ、入力欄下部にpreviewを出しています。
この処理はせっかくなのでHookを使って実装してみました。
useEffectとuseDebouceを使って、下記のようにして実装しています。
const [debounceSourceText] = useDebounce(sourceText, 1000);
useEffect(() => {
dispatch(actions.previewUpdate());
}, [debounceSourceText]);
debounceSourceTextは1000ミリ秒間sourceTextに更新がなかった場合に、最新の状態に更新されます。
useEffectはdebounceSourceTextが更新されたときのみに実行されるので、結果として正規表現の最終更新から1秒後にactionがdispatchされてpreviewが更新されることになります。
まとめ
他にもmaterial-ui周りなどいくつか書きたいことがありますが、長くなるのでこの辺りで。
テストデータを作る必要があるときに利用してもらえるととても嬉しいです！