概要

「8桁の英数字,4桁の英数字」のような指定されたフォーマットに従って、テスト用のダミーデータを大量に作成したいケースはそれなりにあるかと思います。
今回そのためのオンラインツールを作ったのでその紹介と、開発中に得た知見について書きます。

技術要素

React+Redux+TypeScript+Material-UI+Firebaseで作っています。

ツール

Random String Generator

指定フォーマットの正規表現を入力して

作る数を入れて、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周りなどいくつか書きたいことがありますが、長くなるのでこの辺りで。
テストデータを作る必要があるときに利用してもらえるととても嬉しいです！