正規表現でガチャを回せる投稿サイトを作った話

（映像もつくりました） 正規表現ガチャ（英語名：Regech）という、正規表現から生成されるランダムな文字列でガチャを引ける投稿サイトをNext.jsで個人開発した話です。 筆者について 今までPHPやjQueryで開発をしてきた19歳です。 制作期間は20日ほどです。 もしよければ、読んで・遊んでいってもらえたら嬉しいです！ つくったもの 正規表現にマッチするランダムな文字列を生成するアプリです。 例：(にゃん?)+→にゃにゃんにゃんにゃ おもしろいガチャができたら投稿することでみんなで遊べるようになります。 ぜひ、おもしろいガチャを作って投稿してください！ 正規表現の学習にもおすすめです。 英語対応もしてみたので英語環境からアクセスするか、/en/にアクセスすると英語でも見れます。 私のおすすめガチャ 私のおすすめです。他にもおもしろいガチャが投稿されているので遊んでみてください！ リ

[cinefuk]

"遡ること5年前… Twitterで、友達が急に正規表現を送ってきました。 かくして、ここからガチャを引けたら面白いなと思い、正規表現ガチャを作ることになったのです。"

[shingo-sasaki-0529]

個人開発とは思えないほど設計の段取りが良くてすごい！

[shunkeen]

なるほど、使ってるライブラリ的に「$^」とか絶対にマッチしない位置指定与えると、空文字しか出ないのか。あと「.*」とかで任意の文字列生成すると文字化けみたいになって笑う。「a{1000}」は画面が爆発した。

[queeuq]

文字列生成部分はこれか。面白いね https://fent.github.io/randexp.js/

[yarumato]

“正規表現から生成されるランダムな文字列でガチャを引ける投稿サイトをはじめてのNext.jsで個人開発。ページごとの構成要素をもとにワイヤーフレームをつくりUIデザイン。コンポーネントを分けてStorybookで実装”

[ya--mada]

なるほどウワモノを作れば下地はいくらでもあるのか。 https://fent.github.io/randexp.js/ 普段からPOSIXクラスと拡張正規表現しか使わないけど通るのかな？

[diveintounlimit]

19さい？60進数とかかな（）

[l-_-ll]

“このアプリの根幹となる正規表現からのランダムなテキストの生成処理には、randexp.jsというぴったりなライブラリがあった”　採用したライブラリや制作過程が参考になる

[kikuchi1201]

すごいー！！！！

[nakayuki805]

ぽっと出アイデアの個人開発でこんな商業サイトかと思うくらいデザイン凝っててわざわざドメインも取ってるの凄いな…個人開発だと簡素なデザインにしがちだし

[ken10007]

めっちゃ良いやん。 自分のメディアにもガチャを取り入れたいぃぃ！

[yamadashy]

すげえな

[ene0kcal]

19歳でこの力量。素晴らしい！お兄さん（私）も頑張ります！

[natu3kan]

その正規表現の文字列の条件に見合うやつがガチャ的に出力されるってことか。

[cateiru]

ちゃんとStorybookでコンポーネント管理してたりzodで型ガードしてたりしっかりしててとても偉いすごい

[securecat]

興味深い

[uefi]

「正規表現でガチャ？」「何言ってるの？」と思ったら、無茶苦茶すごかったです。僕は正規表現がよくわかっていないので、作りたいガチャは作れませんけどね。

[ledsun]

WebAssemblyでいけそうなネタだ

[nori__3]

キジバト笑ってしまった

[tenari]

10連何故か笑っちゃう

[soybeancucumber]

おもしろい

[napsucks]

発想が(天才的){10,}。正規表現はマッチするかどうかを判断するのは得意だけど、肝心の文字列をどうやって生成してるんだろ。まさか無限のサルがシェイクスピアを書くまでチェックしてるわけでもあるまいし。

[u4cniics]

アイディアもすごいがデザインがすごく好き

[Caerleon0327]

無意味なパスワード作るにはいいかも（適当）

[Windymelt]

ちゃんと実装したstring_randomという感じで良い(似たようなものはいくらでもあるけどSNSのためのツールとしてパッケージ化したのが良いと思う)

[midnight-railgun]

(ズン)*(ドコ)*

[K-Ono]

すごい。

[Knoa]

タイトルからはまったくピンと来ないまま読み始めたけど、おもろい。実用的な使い道が思い浮かばないのも、対照的にビジュアルデザインのクオリティが高いのもよい。

[codehex]

凄い！

[cj3029412]

すごい(^^)