【個人開発】正規表現を学ぶ狩りに出ませんか？モンスターを倒しながら正規表現が学べるゲーム「Regex Hunting」を作りました

はじめに

はじめまして！
個人開発者のハガユウキと申します。

突然ですが、皆さん正規表現はお好きですか？
私は好きです。「複数の文字列を一つのパターンで表現できる」部分にすごく面白味を感じています。
もっといろんな方に正規表現を知っていただきたい、好きになってほしいと思っています。

しかし、現状では2つの課題があると感じています。

• 正規表現の勉強自体がそもそも面白くない。
• 正規表現を勉強しても、しばらく使わないと忘れる。

この2つの課題を突破できるサービスは、現状存在しません。
そのため、楽しみながら正規表現を学べるサービスがあれば良いなと思いました。

作りました。

▼スライド型正規表現学習ゲーム【Regex Hunting】
https://www.regex-hunting.com/
(※) 端末はPC、ブラウザはChromeが推奨です。

サービス概要

Regex Huntingは、モンスターを倒しながら正規表現が学ベる学習ゲームです。
正規表現を知らない方でも楽しめるように、スライド学習とゲームの構成になっています。

遊び方

1. ゲーム選択

初級編, 中級編, 上級編の中から、プレイしたいゲームを選択します。

2. スライド学習

ゲーム選択後、前半はスライドで学習します。スライド1ページ目の「スライドを見ずに始める」をクリックすると、スライド学習を飛ばしてゲームをプレイすることも可能です。

3. ゲームスタート

スライド1ページ目の「スライドを見ずに始める」または、最後のスライドの「ゲームを始める」をクリックすると、ゲームがスタートします。制限時間内に問題文を満たす正規表現を入力してエンターキーを押すと、モンスターに攻撃できます。

4. ゲームクリア

モンスターのHPを0にしたら、ゲームクリアです。

その他の機能

Regex Huntingはただのゲームではありません。学習ゲームです。
ユーザーの学習モチベーションを上げる為に、3つの機能を実装しました。

1. 学習管理

ログインした状態でゲームをプレイすると、ゲームの学習頻度・プレイ時間・クリア回数・最速タイムが記録されます。記録したデータは、マイページから確認できます。過去の学習状況を可視化することで、ユーザーのモチベーションが上げられると思い、作成しました。

2. ランキング

各難易度における上位10件の最速タイムを持つユーザーを見ることができます。ログインした状態でゲームをプレイすると、ランキングにエントリーできます。アカウント設定で自分の順位を非公開にすることも可能です。「他者と競うことが好きな方」のモチベーションを上げる為に、作成しました。

3. 称号

解放条件を満たすと、称号を解放できます。称号はマイページから設定できます。
「1人でコツコツと学習することが好きな方」のモチベーションを上げる為に、作成しました。

使用技術

フロントエンド

• React 17.0.2
• TypeScript 4.6.2

その他の主要なライブラリ

• @mui/material 5.3.1
• @mui/icons-material 5.2.1
• axios 0.24.0
• react-animations 1.0.0
• react-calendar-heatmap 1.8.1
• react-circular-progressbar 2.0.4
• react-hook-form 7.21.0
• react-router-dom 6.0.2
• react-scroll 1.8.4
• react-tooltip 4.2.21
• styled-components 5.3.3

バックエンド

• Ruby 2.7.4
• Ruby on Rails 6.0.3.6
• Rspec 5.0.3

その他の主要なGem

• sorcery
• rack-cors
• pg
• aws-sdk-s3
• active_model_serializers
• seed-fu

インフラ

• Heroku
• Amazon S3
• PostgreSQL
• New Relic

ER図

こだわったポイント

Regex Huntingを開発するにあたって、こだわったポイントが3点あります。

1. 学習を挫折させないUI設計

分からない問題に遭遇しても挫折させないように、全ての問題にヒントが用意されています。
ヒントはゲーム画面の左側に表示されます。

そして、ゲーム中にヒントの内容を調べることができます。フッターの「特殊文字一覧」から調べられます。特殊文字一覧のモーダルが開いている間は、ゲームの進行がストップします。そのため、ヒントの内容を落ち着いて学習することができます。

以上のUI設計にすることで、ゲーム中でも分からない箇所を簡単に調べることができます。
その結果、学習を挫折させずに、学習効率を上げて正規表現を学ぶことができます。

2. ゲームに臨場感を出すためのUX設計

臨場感を出すために、BGMや効果音を流したり、攻撃エフェクトを表示させました。
例として、正解時と不正解時のUXを紹介させていただきます。

正解時のUX

不正解時のUX

3. 全ての問題に解答と解説を用意

ゲーム終了後、「答えを確認する」をクリックすると、自分が解いた問題の解答と解説を確認できます。全ての問題に解答と解説を用意することで、分からない箇所を自分で調べなくても効率的に復習できます。

さらなる高みを目指したい方へ

あくまで、「正規表現面白い！」と思っていただく為に、本サービスを作成しました。
そのため、厳密性やマッチ効率より、見やすさと分かりやすさを重視しています。
より厳密性のある正規表現やマッチ効率の高い正規表現を書きたい場合、以下の参考書がお勧めです。
私もこちらの書籍で勉強しました。

▼詳説正規表現

終わりに

最後までご覧いただきありがとうございました！
このサービスを通して、一人でも多くの方に「正規表現面白い！」と思っていただけたら嬉しいです。

ぜひ、最強の正規表現ハンターを目指してみてください！

▼今回作成したサービス
https://www.regex-hunting.com/
(※) 端末はPC、ブラウザはChromeが推奨です。

▼Twitterアカウント
https://twitter.com/KvOKJo6SH85w2Q8

P.S. ゲームロジックの詳細については、Zennで書きました。ご興味のある方は一読していただけると幸いです。

▼Zenn
https://zenn.dev/yukihaga/articles/aafb50df7a08b6

追記：指摘していただいた改善点

多くの方にRegex Huntingをプレイしていただき、本当に嬉しいです！
ありがとうございます！！
指摘していただいた改善点を以下にまとめます。

1. スライド1ページ目のカーソルが分かりづらい(2022/04/13対応済)

スライド1ページ目のカーソルが分かりづらく、目立たせた方が良いというご意見をいただきました。
そのため、バウンドアニメーションの吹き出しを追加しました。

2. 正規表現入力時にカーソルを動かしたい

こちらに関しましては、良い実装方法を現在模索中です。
実装方法がまとまり次第、迅速に対応させていただきます。

3. ブラウザバックの挙動について

• ログアウト後にブラウザバックをすると、マイページに戻ってしまう
• OAuthログイン後にログアウトしてブラウザバックをすると、コールバックのページに戻ってしまう

上記の2点に関しましては、useNavigateの設定を変更することによって、解消できました。
そのため、ログイン後でも快適に操作できるようになりました。

4. データの保存ができない状況について

最近、DBのデータ容量が限界に到達しました。そのため、ゲーム自体はプレイできますが、データの保存ができない状況です。今後は、「DBのデータ容量を増やすか、または、不要なレコードを自動で削除する仕組みを実装すること」を検討しようと思います。

上記の改善点以外に、別の改善点やご意見等ございましたら、コメント・TwitterDM・プルリクエストでご連絡をお願い致します！

▼Twitterアカウント
https://twitter.com/KvOKJo6SH85w2Q8

▼プルリクエスト
https://github.com/yukiHaga/regex-hunting/pulls