Regex Hunting

         

サービス URL

https://www.regex-hunting.com/

サービス概要

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

遊び方

1. ゲーム選択

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

2. スライド学習

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

3. ゲームスタート

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

4. ゲームクリア

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

その他の機能

新規会員登録	ログイン
Google や Github のアカウントを用いて、新規会員登録することもできます。	Google や Github のアカウントを用いて、ログインすることもできます。

学習管理	アカウント設定
ゲームの学習頻度と各難易度のプレイ時間、クリア回数、最速タイムを確認できます。	アカウントのアイコン、名前、メールアドレス、ランキング公開の有無を設定できます。

ランキング	称号
各難易度における上位 10 件の最速タイムを持つユーザーを見ることができます。アカウント設定でランキングを非公開にすることも可能です。	解放条件を満たすと、称号を解放できます。称号はマイページから設定できます。

ログアウト	パスワードリセット
アイコンメニュー内のログアウトをクリックすると、ログアウトできます。	メールアドレスを入力すると、そのメールアドレス宛に、パスワード再設定用のメールが届きます。メール内の手順に沿って、必要事項を入力します。成功すると、パスワードを変更できます。

使用技術

フロントエンド

• 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 図

画面遷移図

https://www.figma.com/file/VNjsqixD6sQPJy7ljlJiV0/portfolio?node-id=260%3A2

リリースしてから 1 週間後の総 PV 数と UU 数

総 PV 数: 3903

UU 数: 610

サービス紹介記事

【個人開発】正規表現を学ぶ狩りに出ませんか？モンスターを倒しながら正規表現が学べるゲーム「Regex Hunting」を作りました
正規表現学習ゲーム「Regex Hunting」の開発方法について、ざっくりまとめてみた
正規表現を使ってモンスターを討伐していくゲーム「Regex Hunting」をプレイしてみた