ゲーム『正規表現パズル』の紹介 - ゲーム作るくんのサイト
ゲーム作るくんのサイト
ゲーム作るくん
X

ゲーム『正規表現パズル』の紹介

この記事について

正規表現パズル』というゲームを作ったんですが、

という部分があるため、ゲームを遊ばなくても全体の雰囲気が分かるよう、『正規表現パズル』のチュートリアルをドキュメントに起こしました。

興味を持っていただけたらこちらのリンクから遊んでいただけると幸いです。

正規表現パズル

ブラウザゲームなのでアプリのインストールなしで始められます。アカウント登録とかもないので、お気軽にどうぞ。

ゲーム版の方ではチュートリアルだけでなく、正規表現を使ったパズルも遊べるようになっているので、パズル好きの方もぜひ。

それでは、以下、ゲーム版から持ってきたチュートリアルになります。

はじめに

正規表現パズルの世界へようこそ!
このゲームは パズルゲーム なんですが、パズルを解くには 正規表現を知らないといけない という問題があるため…
まずは正規表現の チュートリアル を用意しました!
正規表現については十分わかってる! 面倒なチュートリアルは スキップ したい! という方はメニュー パズル からパズル問題に飛んでくださいね!

※ パズル問題はこちらのゲーム版『正規表現パズル』から遊べます

正規表現パズル
…それでは! チュートリアルを始めます! わりと長くなりますが ご了承ください!
チュートリアルに 飽きたら パズルにいって、パズルが 解けなければ 戻ってくる、みたいな やりかたでもいいんですよ!

正規表現とは何か

では まずは! 正規表現とは何か? について説明しますね!
正規表現は 文章を検索するときに使う特別な書き方 です。

正規表現の例:郵便番号をひとつのパターンで表す

たとえば、郵便番号 は世の中に無数にあるわけですが…
正規表現を使うと \d{3}-\d{4} という ひとつのパターンで すべての郵便番号を検索できます!
マッチさせることば
1
2
3
-
4
5
6
7
6
6
0
-
0
0
5
1
7
5
4
-
1
3
1
1
マッチきんしワード
1
2
3
4
5
6
7
6
6
0
0
0
-
5
1
7
5
4
,
1
3
1
1
\d{3}-\d{4}

※ 「マッチさせることば」にマッチするような正規表現を入力する、というのがゲームの目的になっています。「マッチきんしワード」に一文字でもマッチさせてしまうと問題をクリアできないため、いろいろ考えないといけない…というゲームになります。

正規表現の例:表記ゆれをまとめる

「ウォーターサーバー」と「ウォータサーバ」のような 表記ゆれ がある場合でも…
ウォーター?サーバー? と書けば まとめて 検索することが可能です!
マッチさせることば
ウォーター?サーバー?
…という感じで、最初は難しく感じますが、一度覚えてしまえば 何かと便利なのが正規表現です!

チュートリアルの進め方

つづいては チュートリアルの進め方 について説明します!
まずは 画面上にある 「マッチさせることば」 の順番通りに もじパネル を選んでみてください!
マッチさせることば
こんな感じで、このチュートリアルでは 実際に正規表現を入力して 進めていきます。

ゲームのルール

「マッチさせることば」完全にマッチすれば クリア! 「マッチきんしワード」ちょっとでもマッチしてしまうと アウト! というルールになっています。
マッチさせることば
マッチきんしワード
正規表現の書き方一覧は 早見表 から見れますよ!

早見表はこちら

それでは始めましょう!

文章の頭にマッチさせる

まずは ^ です! ^文章の頭 を表す記号です!
例えば、いし という言葉だけなら単に いし と入力すればOKですが…
マッチさせることば
マッチきんしワードが 「めいし」 だった場合、「めいし」 の中にある 「いし」 にもマッチしてしまいます。
こういうときに! ^いし と書くと、文章の頭が 「いし」 で始まるものだけに絞ってマッチさせることができます!
マッチさせることば
マッチきんしワード
^

※ 正解は「^いし」なんですが、ゲームではプレイヤーに考えてもらうよう「め」の文字もあえて候補の中に入れています。

便利ですよね!
ちなみに、この ^ のような特殊な記号のことを正規表現の世界では メタ文字 と呼んでいます。
それでは ^ を 使った問題を続けます!
^ を使って 始まる 文章だけに絞り込みましょう!
マッチさせることば
マッチきんしワード
^
^ を使って あめ にマッチしてしまうのを防ぎましょう!
マッチさせることば
マッチきんしワード
^
最後にこちら!
マッチさせることば
マッチきんしワード
^
以上で ^ の説明は終了です! お疲れ様でした!
ちなみに、^ には キャレット、カレット、ハット、やま などの呼び方があるらしいですよ!

文章の最後にマッチさせる

では、次は $ です! $文章の最後 を表す メタ文字 になります!
さっそく問題です! たこあげ にマッチしないよう、たこ$ と 書いて文章を 区切って ください!
マッチさせることば
マッチきんしワード
$
$ を使って 終わる 文章だけに絞り込みましょう!
マッチさせることば
マッチきんしワード
$
$ を使って へび終わる ようにしてください!
マッチさせることば
マッチきんしワード
$
これは! ^$ 両方で あし前後 をはさむ必要があります!
マッチさせることば
マッチきんしワード
^
$
これも! ^$いぬ の前後を 区切って ください!
マッチさせることば
マッチきんしワード
^
$
以上で $ の説明は終了です! お疲れ様でした!
^$ は文字そのものではなく 文字を区切る位置 を表すということに注意してくださいね!
ちなみに、$ドル、ドルマーク、ダラー などと呼ぶそうです!

文字の繰り返し

さて! 次は + です! +同じ文字の繰り返し を表す メタ文字 になります!
が多い! こんなときに た+ と書けば たたたたた… という 繰り返し を表現できます!
マッチさせることば
+
る+繰り返し を指定しましょう!
マッチさせることば
+
+同じ文字の繰り返し を指定してください!
マッチさせることば
+
以上で + の説明は終了です! お疲れ様でした!
ちなみに、+プラス、たす などと呼ぶそうです!

文字クラス

次は [ ] です!
[ ]文字をまとめて指定 するときに使います!
例えばこのような場合、[がぎ]+ と書けば それぞれの繰り返しをまとめて 表現できます!
マッチさせることば
[
]
+
[ ]+ を組み合わせて 01混ざった繰り返し を指定しましょう!
マッチさせることば
0
1
0
1
0
1
0
1
0
0
0
0
0
0
0
0
1
1
1
1
1
1
1
1
[
0
1
]
+
[0-9] と書けば [0123456789] と書いたのと同じことになります! これが 文字の範囲指定 です!
マッチさせることば
8
0
4
5
0
0
0
0
0
0
[
0
-
9
]
+
[9-0] と逆に書いてしまうと動かないので注意してください!
マッチさせることば
3
4
2
3
1
3
4
0
マッチきんしワード
8
9
6
7
5
8
6
9
[
0
-
4
]
+
5
9
- 自体を表したい場合は [-0-9][0-9-] というように、-先頭最後 に書けばOKです!
マッチさせることば
-
-
-
3
9
2
[
0
-
9
-
]
+
アルファベットの小文字 を表すには [a-z] と書き…
マッチさせることば
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
マッチきんしワード
A
B
C
[
a
-
z
]
+
アルファベットの大文字 を表すには [A-Z] と書けます。
マッチさせることば
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
マッチきんしワード
a
b
c
[
A
-
Z
]
+
\d[0-9]省略形 になります!
マッチさせることば
2
1
1
2
0
9
0
3
\d
+
\D数字以外 のすべての文字!
マッチさせることば
a
b
c
A
B
C
!
#
%

マッチきんしワード
0
1
2
3
4
5
6
7
8
9
\D
+
\sすべての 空白文字
マッチさせることば
\s
+
\S空白文字以外のすべて
マッチさせることば
マッチきんしワード

\S
+
\w[a-zA-Z0-9_] と同じ!
マッチさせることば
a
b
c
_
A
B
C
_
1
2
3
マッチきんしワード
\w
+
\W[a-zA-Z0-9_] 以外 のすべて!
マッチさせることば
マッチきんしワード
a
b
c
_
A
B
C
_
1
2
3
\W
+
…というように、正規表現にはいろいろな 省略形 が用意されています。
それでは こちらの問題をどうぞ!
マッチさせることば
[
]
[
]

文字クラスの否定

次は [^ ] の説明です! [^ ]指定した文字以外 を表します!
例えば [^あ] と書くと 以外のすべての文字 を表すことができます!
マッチさせることば
0
1
2
A
B
C
[
^
]
+
[] の中で ^ そのものを表したい場合は [^a-z^][^^] のように 先頭以外の場所 に書けばOKです!
マッチさせることば
マッチきんしワード
^
^
^
^
^
[
^
^
]
+
以上で [ ^ ] の説明は終了です! お疲れ様でした!
ちなみに、[ ]かくかっこ、だいかっこ、かぎかっこ、ブラケット などと呼ぶらしいです。

複数の文を指定する

つづいては | です!
| を使うと 複数の文同時に指定 できるようになります!
間に | を置けば つのきば の二つを同時に指定できます!
マッチさせることば
|
| は何個でも指定できますよ!
マッチさせることば
|
|
| の説明は以上です!
ちなみに、|パイプ、パイプライン、たてぼう、たてせん などの呼び方があるんですって!

文字列単位のグループ化

どんどんいきます! 次は ( ) です!
( ) を使うと 文字列単位のグループ化 ができるようになります!
例えば、こういう場合に あかくろ の部分だけを (あか|くろ) という書き方で グループ化 できます!
マッチさせることば
(
|
)
くいづか をグループとしてまとめてみましょう!
マッチさせることば
(
|
)
(ちゅう)グループ にした上で + で繰り返せば短く書けますよ!
マッチさせることば
(
)
+
これも グループ化 を使えば短くできます!
マッチさせることば
(
)
+

グループ内の文字列を参照する

\1 と書くと ( ) の中でマッチした言葉を 参照 できます! (わん)\1\1 と書いてみましょう!
マッチさせることば
(
)
\
1
(にゃん)\1\1\1 と書くと \1にゃん参照し にゃんにゃんにゃんにゃん と書いたのと同じことになります!
マッチさせることば
(
)
\
1
\2 は2個目のグループを 参照 します! (わん)(にゃん)\1\2\1\2 と書いてみてください!
マッチさせることば
(
)
\
1
2
以上で ( ) の説明を終わります!
( )かっこ、まるかっこ、しょうかっこ、パーレン とか言うらしいですよ!

文字があったりなかったりする場合

次は ? です!
? を使うと あってもなくてもいい というタイプの指定ができます!
の後に ? を付ければ あってもなくても マッチするようになりますよ!
マッチさせることば
?
の後に ? を付けて、 が あってもなくてもマッチするようにしてみましょう!
マッチさせることば
?
? の説明は以上です!
?クエスチョンマーク、はてなマーク、疑問符 などの呼び方があるそうです。

0 文字以上の繰り返し

次は * です! * があれば 繰り返してもいいし繰り返さなくてもいい というややこしい指定ができますよ!
なかったり、何個続くかわからない というような場合に * が使えます! ファイアー*! と書いてみてください!
マッチさせることば
*
* を使ってマッチさせてみましょう!
マッチさせることば
*

繰り返しの数を細かく指定する

{ , } を使うと 繰り返しの数を細かく 指定できます!
ー{5} と書くと ぴったり5回繰り返す という意味になりますよ!
マッチさせることば
{
5
}
ー{4,}4回以上の繰り返し を表せます!
マッチさせることば
マッチきんしワード
{
4
,
}
ー{3,4} と書けば 3回から4回繰り返す という意味になります!
マッチさせることば
マッチきんしワード
{
3
,
4
}
5
以上で * { , } の説明を終わります! 疲れたらいったん休んでくださいね!
*アスタリスク、アスター、ほし、スター などと、{ }なみかっこ、ちゅうかっこ、ブレース、カーリーブラケット みたいに呼ぶらしいですよ!

すべてを表すメタ文字

次は .
. はすべての文字を表します!
.改行以外 のあらゆる文字にマッチします!
マッチさせることば
a
b
c
d
A
B
C
D
1
2
3
4
!
%
&
@
.
+
改行にマッチさせたい場合は \n を使ってください!
マッチさせることば





\n
+
.+ を組み合わせればこんなに長い文章も一発ですよ!
マッチさせることば
.
+
. の説明は以上です! .ピリオド、ドット、てん、ぽち などと呼ぶんですって!

前後の言葉を考慮してマッチングさせる

※ ここでは「先読みアサーション」と「否定先読みアサーション」について説明しています。本当は「後読みアサーション」「否定後読みアサーション」も合わせて説明したかったんですが、Safari のバージョンによっては後読みアサーションをサポートしていないケースがあり、チュートリアルから除外したという経緯があります。ゲームの実装がブラウザの正規表現エンジンに依存している、という事情があり…。

お次は ( ? = ! ) です!
これを使うと 前後の言葉 を考慮したマッチングができるようになります!
.+(?=ねこ) と書くと ねこ が続く文にだけマッチするようになります!
マッチさせることば
マッチきんしワード
.
+
(
?
=
)
.+(?=どん) と書いた場合、どん手前区切り として扱われ、どん 自体にはマッチしません!
マッチさせることば
マッチきんしワード
.
+
(
?
=
)
$文の終わり を表す 区切り ですが、(?=いぬ)いぬ手前区切り にする、という意味になります!
マッチさせることば
.
+
(
?
=
)
日付から 月の部分 だけ取り出す場合は .+(?=/) と書けますよ! (?=/)/手前区切り にしてるわけですね!
マッチさせることば
1
2
/
2
4
8
/
3
1
.
+
(
?
=
/
)
(?!)(?=) の逆で、(?!じた) と書いた場合、じた 以外の言葉の 手前区切り になります!
マッチさせることば
マッチきんしワード
(
?
!
)
(?!あ) と書くと 以外の文字の 手前区切り になります! この場合は 手前 ですね!
マッチさせることば
(
?
!
)
.
+
(?!.*あ) と書いた場合は .*あ に マッチ しない 文字列の 手前 が区切りになります! この場合は 手前 です!
マッチさせることば
(
?
!
.
*
)
.
+
日付から 日の部分 だけ取り出したい場合は (?!.*/) と書いて / の次の位置 を 区切り にしましょう!
マッチさせることば
1
2
/
2
4
8
/
3
1
(
?
!
.
*
/
)
.
+
以上で ( ? = ! ) の説明を終わります! もう少しで終わりです!
!びっくりマーク、エクスクラメーションマーク、感嘆符、 =イコール、等号 などと呼ぶんですって!

最短マッチと最長マッチ

それでは ? の説明に移ります!
? を使うと どこまでマッチさせるか を調整できます!
.+?あ という形で ? を付けると、最初に が出てきたところでマッチを終わらせることができます!
マッチさせることば
.
+
?
? を付けない場合は 一番最後の までマッチしますよ!
マッチさせることば
.
+
?
.*?あ.+?あ と違って、 の前に文字が なくても マッチします!
マッチさせることば
.
*
?
+
? を付けなければ 最後の までマッチします!
マッチさせることば
.
*
?
+
以上で ? の説明を終わります! あと一個!

メタ文字を普通の文字として扱う方法

最後に! . などの メタ文字 を普通の文字として扱いたい場合は \. というように頭に \ を付けてください!
マッチさせることば
.
^
$
[
]
*
+
\
.
^
$
[
]
*
+
以上でチュートリアルはすべて終了です! お疲れ様でした! これであなたも正規表現マスター!

ゲーム版正規表現パズル

こちらがゲーム版『正規表現パズル』になります。よかったらぜひ!

正規表現パズル

正規表現 早見表

正規表現 早見表
.あらゆる文字にマッチ
[あいう]
にマッチ
[^あいう]
以外にマッチ
\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文字 必要