ゲーム『正規表現パズル』の紹介
この記事について
『正規表現パズル』というゲームを作ったんですが、
- 実際に遊んでみないとどんな内容か分からない
- ちょっと遊んでみても一覧性がないので全体のボリューム感が分からない
- ゲームのリンクをクリックして遊ぶ、というのは記事を読むのに比べるとなかなかハードルが高い
という部分があるため、ゲームを遊ばなくても全体の雰囲気が分かるよう、『正規表現パズル』のチュートリアルをドキュメントに起こしました。
興味を持っていただけたらこちらのリンクから遊んでいただけると幸いです。
ブラウザゲームなのでアプリのインストールなしで始められます。アカウント登録とかもないので、お気軽にどうぞ。
ゲーム版の方ではチュートリアルだけでなく、正規表現を使ったパズルも遊べるようになっているので、パズル好きの方もぜひ。
それでは、以下、ゲーム版から持ってきたチュートリアルになります。
はじめに
このゲームは パズルゲーム なんですが、パズルを解くには 正規表現を知らないといけない という問題があるため…
まずは正規表現の チュートリアル を用意しました！
正規表現については十分わかってる！ 面倒なチュートリアルは
スキップ したい！ という方はメニュー
の
パズル からパズル問題に飛んでくださいね！
※ パズル問題はこちらのゲーム版『正規表現パズル』から遊べます
…それでは！ チュートリアルを始めます！ わりと長くなりますが ご了承ください！
チュートリアルに 飽きたら パズルにいって、パズルが 解けなければ 戻ってくる、みたいな やりかたでもいいんですよ！
正規表現とは何か
では まずは！ 正規表現とは何か？ について説明しますね！
正規表現は 文章を検索するときに使う特別な書き方 です。
正規表現の例：郵便番号をひとつのパターンで表す
たとえば、郵便番号 は世の中に無数にあるわけですが…
正規表現を使うと \d{3}-\d{4} という ひとつのパターンで すべての郵便番号を検索できます！
※ 「マッチさせることば」にマッチするような正規表現を入力する、というのがゲームの目的になっています。「マッチきんしワード」に一文字でもマッチさせてしまうと問題をクリアできないため、いろいろ考えないといけない…というゲームになります。
正規表現の例：表記ゆれをまとめる
「ウォーターサーバー」と「ウォータサーバ」のような 表記ゆれ がある場合でも…
ウォーター?サーバー? と書けば まとめて 検索することが可能です！
…という感じで、最初は難しく感じますが、一度覚えてしまえば 何かと便利なのが正規表現です！
チュートリアルの進め方
つづいては チュートリアルの進め方 について説明します！
まずは 画面上にある 「マッチさせることば」 の順番通りに もじパネル を選んでみてください！
こんな感じで、このチュートリアルでは 実際に正規表現を入力して 進めていきます。
ゲームのルール
「マッチさせることば」 に 完全にマッチすれば クリア！ 「マッチきんしワード」 に ちょっとでもマッチしてしまうと アウト！ というルールになっています。
正規表現の書き方一覧は
の
早見表 から見れますよ！
※ 早見表はこちら
文章の頭にマッチさせる
まずは ^ です！ ^ は 文章の頭 を表す記号です！
例えば、いし という言葉だけなら単に いし と入力すればＯＫですが…
マッチきんしワードが 「めいし」 だった場合、「めいし」 の中にある 「いし」 にもマッチしてしまいます。
こういうときに！ ^いし と書くと、文章の頭が 「いし」 で始まるものだけに絞ってマッチさせることができます！
※ 正解は「^いし」なんですが、ゲームではプレイヤーに考えてもらうよう「め」の文字もあえて候補の中に入れています。
ちなみに、この ^ のような特殊な記号のことを正規表現の世界では メタ文字 と呼んでいます。
^ を使って た で 始まる 文章だけに絞り込みましょう！
^ を使って あめ にマッチしてしまうのを防ぎましょう！
ちなみに、^ には キャレット、カレット、ハット、やま などの呼び方があるらしいですよ！
文章の最後にマッチさせる
では、次は $ です！ $ は 文章の最後 を表す メタ文字 になります！
さっそく問題です！ たこあげ にマッチしないよう、たこ$ と 書いて文章を 区切って ください！
$ を使って か で 終わる 文章だけに絞り込みましょう！
$ を使って へび で 終わる ようにしてください！
これは！ ^ と $ 両方で あし の 前後 をはさむ必要があります！
これも！ ^ と $ で いぬ の前後を 区切って ください！
^ や $ は文字そのものではなく 文字を区切る位置 を表すということに注意してくださいね！
ちなみに、$ は ドル、ドルマーク、ダラー などと呼ぶそうです！
文字の繰り返し
さて！ 次は + です！ + は 同じ文字の繰り返し を表す メタ文字 になります！
た が多い！ こんなときに た+ と書けば たたたたた… という 繰り返し を表現できます！
が
る
る
る
る
る
る
る
る
る
る
る
る
る
る
る
る
る
る
る
る
る
る
る
る
ちなみに、+ は プラス、たす などと呼ぶそうです！
文字クラス
次は [ ] です！
[ ] は 文字をまとめて指定 するときに使います！
例えばこのような場合、[がぎ]+ と書けば が と ぎ それぞれの繰り返しをまとめて 表現できます！
[ ] と + を組み合わせて 0 と 1 が 混ざった繰り返し を指定しましょう！
[0-9] と書けば [0123456789] と書いたのと同じことになります！ これが 文字の範囲指定 です！
[9-0] と逆に書いてしまうと動かないので注意してください！
- 自体を表したい場合は [-0-9] や [0-9-] というように、- を 先頭 か 最後 に書けばＯＫです！
アルファベットの小文字 を表すには [a-z] と書き…
アルファベットの大文字 を表すには [A-Z] と書けます。
\W は [a-zA-Z0-9_] 以外 のすべて！
…というように、正規表現にはいろいろな 省略形 が用意されています。
文字クラスの否定
次は [^ ] の説明です！ [^ ] は 指定した文字以外 を表します！
例えば [^あ] と書くと あ 以外のすべての文字 を表すことができます！
[] の中で ^ そのものを表したい場合は [^a-z^] や [^^] のように 先頭以外の場所 に書けばＯＫです！
以上で [ ^ ] の説明は終了です！ お疲れ様でした！
ちなみに、[ ] は かくかっこ、だいかっこ、かぎかっこ、ブラケット などと呼ぶらしいです。
複数の文を指定する
つづいては | です！
| を使うと 複数の文 を 同時に指定 できるようになります！
つ の と き ば の 間に | を置けば つの と きば の二つを同時に指定できます！
ちなみに、| は パイプ、パイプライン、たてぼう、たてせん などの呼び方があるんですって！
文字列単位のグループ化
どんどんいきます！ 次は ( ) です！
( ) を使うと 文字列単位のグループ化 ができるようになります！
例えば、こういう場合に あか と くろ の部分だけを (あか|くろ) という書き方で グループ化 できます！
くい と づか をグループとしてまとめてみましょう！
(ちゅう) と グループ にした上で + で繰り返せば短く書けますよ！
グループ内の文字列を参照する
\1 と書くと ( ) の中でマッチした言葉を 参照 できます！ (わん)\1\1 と書いてみましょう！
(にゃん)\1\1\1 と書くと \1 が にゃん を 参照し にゃんにゃんにゃんにゃん と書いたのと同じことになります！
\2 は２個目のグループを 参照 します！ (わん)(にゃん)\1\2\1\2 と書いてみてください！
( ) は かっこ、まるかっこ、しょうかっこ、パーレン とか言うらしいですよ！
文字があったりなかったりする場合
次は ? です！
? を使うと あってもなくてもいい というタイプの指定ができます！
ー の後に ? を付ければ ー が あってもなくても マッチするようになりますよ！
み の後に ? を付けて、み が あってもなくてもマッチするようにしてみましょう！
? は クエスチョンマーク、はてなマーク、疑問符 などの呼び方があるそうです。
0 文字以上の繰り返し
次は * です！ * があれば 繰り返してもいいし繰り返さなくてもいい というややこしい指定ができますよ！
ー が なかったり、何個続くかわからない というような場合に * が使えます！ ファイアー*! と書いてみてください！
繰り返しの数を細かく指定する
{ , } を使うと 繰り返しの数を細かく 指定できます！
ー{5} と書くと ー を ぴったり５回繰り返す という意味になりますよ！
ー{4,} で ー の ４回以上の繰り返し を表せます！
ー{3,4} と書けば ー を ３回から４回繰り返す という意味になります！
以上で * { , } の説明を終わります！ 疲れたらいったん休んでくださいね！
* は アスタリスク、アスター、ほし、スター などと、{ } は なみかっこ、ちゅうかっこ、ブレース、カーリーブラケット みたいに呼ぶらしいですよ！
すべてを表すメタ文字
改行にマッチさせたい場合は \n を使ってください！
. と + を組み合わせればこんなに長い文章も一発ですよ！
せ
い
き
ひ
ょ
う
げ
ん
は
も
じ
れ
つ
の
し
ゅ
う
ご
う
を
パ
タ
ー
ン
で
あ
ら
わ
す
ひ
ょ
う
げ
ん
の
い
っ
し
ゅ
で
す
. の説明は以上です！ . は ピリオド、ドット、てん、ぽち などと呼ぶんですって！
前後の言葉を考慮してマッチングさせる
※ ここでは「先読みアサーション」と「否定先読みアサーション」について説明しています。本当は「後読みアサーション」「否定後読みアサーション」も合わせて説明したかったんですが、Safari のバージョンによっては後読みアサーションをサポートしていないケースがあり、チュートリアルから除外したという経緯があります。ゲームの実装がブラウザの正規表現エンジンに依存している、という事情があり…。
お次は ( ? = ! ) です！
これを使うと 前後の言葉 を考慮したマッチングができるようになります！
.+(?=ねこ) と書くと ねこ が続く文にだけマッチするようになります！
.+(?=どん) と書いた場合、どん の 手前 が 区切り として扱われ、どん 自体にはマッチしません！
$ は 文の終わり を表す 区切り ですが、(?=いぬ) は いぬ の 手前 を 区切り にする、という意味になります！
日付から 月の部分 だけ取り出す場合は .+(?=/) と書けますよ！ (?=/) で / の 手前 を 区切り にしてるわけですね！
(?!) は (?=) の逆で、(?!じた) と書いた場合、じた 以外の言葉の 手前 が 区切り になります！
(?!あ) と書くと あ 以外の文字の 手前 が 区切り になります！ この場合は い の 手前 ですね！
(?!.*あ) と書いた場合は .*あ に マッチ しない 文字列の 手前 が区切りになります！ この場合は い の 手前 です！
日付から 日の部分 だけ取り出したい場合は (?!.*/) と書いて / の次の位置 を 区切り にしましょう！
以上で ( ? = ! ) の説明を終わります！ もう少しで終わりです！
! は びっくりマーク、エクスクラメーションマーク、感嘆符、 = は イコール、等号 などと呼ぶんですって！
最短マッチと最長マッチ
それでは ? の説明に移ります！
? を使うと どこまでマッチさせるか を調整できます！
.+?あ という形で ? を付けると、最初に あ が出てきたところでマッチを終わらせることができます！
? を付けない場合は 一番最後の あ までマッチしますよ！
.*?あ は .+?あ と違って、あ の前に文字が なくても マッチします！
? を付けなければ 最後の あ までマッチします！
メタ文字を普通の文字として扱う方法
最後に！ . などの メタ文字 を普通の文字として扱いたい場合は \. というように頭に \ を付けてください！
以上でチュートリアルはすべて終了です！ お疲れ様でした！ これであなたも正規表現マスター！
ゲーム版正規表現パズル
こちらがゲーム版『正規表現パズル』になります。よかったらぜひ！
正規表現 早見表
.あらゆる文字にマッチ
[あいう]
あ と い と う にマッチ
[^あいう]
あ と い と う 以外にマッチ
\d [0-9]数字
\D数字以外のすべて
[a-z]アルファベットの小文字
[A-Z]アルファベットの大文字
\sすべての空白
\S空白以外のすべて
\n改行文字
\tタブ文字
\w [a-zA-Z0-9_]
英数字とアンダースコア
\W
英数字とアンダースコア以外のすべて
^文の 頭 にマッチ
$文の 最後 にマッチ
あ(?=い)
あ の次が い ならマッチ
あ(?!い)
あ の次が い 以外ならマッチ
あ|いあ と い どちらにもマッチ
( )グループ化
(あ)(い)\1\2
マッチした文字列を
\数字 の形で参照
この場合 \1 は あ に \2 は い になる
?あってもなくてもマッチ
*0 回以上の繰り返し
+1 回以上の繰り返し
{n}ちょうど n 回の繰り返し
{n,}n 回以上の繰り返し
{n,m}n 〜 m 回の繰り返し
.*?あ
最初の あ までマッチ
あ の前に文字が なくても マッチ
.+?あ
最初の あ までマッチ
あ の前に 最低1文字 必要
.*あ
最後の あ までマッチ
あ の前に文字が なくても マッチ
.+あ
最後の あ までマッチ
あ の前に 最低1文字 必要
マッチさせることば
マッチきんしワード
