正規表現でガチャを回せる投稿サイトを作った話
（映像もつくりました）
正規表現ガチャ（英語名：Regech）という、正規表現から生成されるランダムな文字列でガチャを引ける投稿サイトをNext.jsで個人開発した話です。
筆者について
今までPHPやjQueryで開発をしてきた19歳です。
制作期間は20日ほどです。
もしよければ、読んで・遊んでいってもらえたら嬉しいです！
つくったもの
正規表現にマッチするランダムな文字列を生成するアプリです。
例：(にゃん?)+→にゃにゃんにゃんにゃ
おもしろいガチャができたら投稿することでみんなで遊べるようになります。
ぜひ、おもしろいガチャを作って投稿してください！
正規表現の学習にもおすすめです。
英語対応もしてみたので英語環境からアクセスするか、/en/にアクセスすると英語でも見れます。
私のおすすめガチャ
私のおすすめです。他にもおもしろいガチャが投稿されているので遊んでみてください！
リポジトリ
技術とその感想
-
言語 TypeScript
- 初めての静的型付け言語を触って半年くらいですが、もう型なしには戻れないくらいに快適です。
-
フレームワーク Next.js
- SSRやSSGはもちろんですが、直感的なfile-based routingや手軽にバックエンドが実装できるAPI Routesがとても便利でした。今後なにか作る際には積極的に採用したいと思います。
-
ORM Prisma
- DBへのアクセスがとても直感的に型安全に書けてすごく良かったです。
-
データベース PlanetScale
- UIがモダンで使いやすく、サーバーレス構成をするのに便利でした。
-
状態管理 Jotai
- Recoilに似ていましたが、RecoilよりもGlobal Stateがとてもシンプルに書けていい感じでした。
-
コンポーネント管理 Storybook
- 今回はボトムアップで最初に細かいパーツから実装していったので、コンポーネントの確認にStorybookは重宝しました。
-
ユーザー認証 Firebase Authentication
- Twitter認証を利用しましたが、iOS16.1以上でうまく動かない問題があり、今回少し苦戦しました。結果的に2種類のログイン方法を併用しています。次はNextAuthを使ってみたいです。
- バリデーション zod
-
API通信 zod+axios
- API通信は、APIのパラメーターと返り値をzodのスキーマで定義し、バックエンド・フロントエンドでzodを通して型安全にできました。
-
スタイリング CSS Modules+clsx
- 前回prizmを作ったときにEmotionを採用したのですが、JSファイルの見通しが悪くなってしまうのが嫌だったので、今回はCSS ModulesでCSSファイルを分けて書いてみました。どちらも使ってみて、CSS in JSの良さもあったので一長一短という感じです。
- アイコンのコンポーネント生成 SVGR
-
正規表現からのテキストの生成 randexp.js
- このアプリの根幹となる正規表現からのランダムなテキストの生成処理には、randexp.jsというぴったりなライブラリがあったので使用させていただきました。
-
紙吹雪の演出 particles.js
- 紙吹雪の演出にはparticles.js（正確にはtsparticles)を使っています。
-
3Dカプセルの演出 zdog
- 3Dのカプセルはzdogを使っています。簡単なJSの記述でフラットな3Dモデルができました。今回はアニメーションさせるだけにとどめましたが、マウスでぐりぐり動かすことも簡単にできるみたいです。
-
3Dの文字の演出 ztext.js
- prizmに続き今回もztext.jsを使いました。prizmのときもそうでしたが、reactと若干相性が悪いのか文字の変更がうまくいかなかったので、直接DOMをいじる必要がありました。
- 文字のシャッフルアニメーション演出 shuffle-text
-
OGP生成 vercel/og
- 内部でsatoriが使われているそうで、JSXを使った動的なOGP生成が想像以上にかんたんにできました。
-
ホスティング Vercel
- めちゃくちゃ簡単でした！便利！
正規表現ガチャができるまで
遡ること5年前…
こんな感じで、友達が急に正規表現を送ってきました。
かくして、ここからガチャを引けたら面白いなと思い、正規表現ガチャを作ることになったのです。
一度jQueryなどで作ったもの
そうして2018年の4月、この超シンプルな正規表現ガチャができました。
そして時は過ぎ、2023年1月
そういえばと思い・・
という感じで今回作ることになりました。
要件を（適当に）書き出した
Notionで要件を適当に書き出しました。
ページごとの構成要素を書き出した
ページごとの構成要素を書き出しました。
この時点では全部で2ページを想定していましたが、最終的には4ページになっています。
ビジュアルデザイン
ワイヤーフレーム
ページごとの構成要素をもとにワイヤーフレームをつくりました。
UIデザイン
ワイヤーフレームをもとにUIデザインを行っていきました。
最初はこのようにカラフルでしたが、
ガチャ画面とのメリハリをつけたかったので、他の画面はシンプルめにしました。
またこのスクショを見るとわかるように、最初は1画面に新着投稿も新規作成も入れていました。
が、それだと情報過多だという問題がありました。具体的には、最初に何をしたらいいのかわからず、Twitterでログインすればいいのか、「正規表現ガチャとは」を見ればいいのか、ガチャを引けばいいのか、投稿を見ればいいのかわからないのです。
そこでもう少しユーザーの行動を絞ることにしました。
このように機能ごとに画面を分割していきました。（この画像も最終のものではないけれど・・）
アイコンデザイン
最近アイコンを作ることにハマっているので、今回アイコンも1から制作しました。
ロゴデザイン
ロゴについては、正規表現のモチーフ「.*」と、ガチャのモチーフ・カプセルをベースにいろいろな案を考えました。最終的に中段左のものに決定しました。
設計
ER図
ER図をdraw.ioで描きました。
フローチャート
ページのフローチャートを描き、どこをSSRするか決めていきました。（最終的にかなり違うふうになっていますが・・）
実装
デザインからコンポーネントを細かく分けて、Storybookでひたすら実装していきました。
トグルボタン
こちらのトグルボタンはCSSのみで実装しています。まずcodepenで実装してからコンポーネント化しました。
集中線
こちらの集中線もCSSのみのアニメーションです。
さいごに
少し前、作業の進捗をみんなで共有できるDiscordサーバーを開始したのですが、今回正規表現ガチャを作る際に私自身入り浸っていて、詰まったときに色々教えていただいたりもして大変助かりました😭相談に乗ってくださった方、この場を借りてお礼申し上げます🌟
作業通話サーバーに興味のある方はぜひTwitterのDM等でお声がけください🙋
Discussion