74
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

クソアプリAdvent Calendar 2023

Day 3

2+2=5になる計算機を作った。2+2=4と答えると…

Last updated at Posted at 2023-12-02

『1984年』という小説をご存知でしょうか。
1949年に刊行された、ジョージ・オーウェルのSF小説で、現在に至るまでディストピア創作に多大な影響を与えている名作です。

著作権切れにより、有志による翻訳が無料で読めるので、興味のある方はこちらから。

その中に、このような一節があります。

口絵に描かれているビッグ・ブラザーの肖像画を見た。催眠術をかけるような目が彼を見つめていた。まるで何か強大な力に押しつぶされるようだ……

「ビッグ・ブラザー」とは、この世界の最高権力者です。
この世界には、街の至る所に「Big Brother is watching you」というポスターが貼られており、市民を常に監視し続けているのです。

続けて、主人公ウィンストンは次のような妄想をします。

最終的には党は二足す二は五だと発表し、それを信じなければならなくなるだろう。遅かれ早かれ彼らがそういったことを主張しなければならなくなることは避けがたかった。彼らの理論がそれを要求しているのだ。

ウィンストンは党員の一人でありながら、内心の自由すら奪おうとする党への反逆心が高まっていました。そして、書いていることが秘密警察にバレたら殺されてしまうのに、ついに次のように日記に書いてしまうのです。

自由とは二足す二が四だと言える自由だ。それが許される時、他の全てが後に続く。

党が2+2=5と言えば、それが真実になる。
そして心からそれが正しいと信じるようになる。

この式は、物語の根幹に関わっていきます。
しかし、人間は本当に2+2=5などという壊れた式を信じることができるのでしょうか。

そこで今回は、2+2=5が正しくなる計算機を作ってみました。

完成したもの

上のリンクから開いてみてください。
一見なんの変哲もない計算機に見えるかもしれません。

image.png

しかしよく見ると、式が間違っています。

左辺は編集できそうですね。適当な式に書き換えてみましょう。

image.png

image.png

左辺に同期して、右辺の答えが変わっています。
そして、左辺にはかなり複雑な四則演算が記述できるようです。

image.png

image.png

日本語や英語でも式を書けるみたいです。

でもこのままではまともに計算に使えません。
それどころか、この間違っている式が気持ち悪くて仕方ない。

ああ、答えが編集できたらいいのに……

image.png

できちゃうんです。

が、このように「正しい」答え以外を入力すると……

Animation.gif

BIG BROTHER IS WATCHING YOU !!!

さらに、「自由」を試みると……

Animation4.gif

ビッグ・ブラザー ガチギレ!!!!

技術構成

Deno Fresh

今回は、たまたまアドベントカレンダー担当日の2日前にDenoのWebフレームワーク「Fresh」がv1.6になったというニュースを見たので、DenoもFreshも初めてですが、使ってみることにしました。

Denoは、Node.jsのつらい部分を全部直してみたって感じのTypeScriptランタイムです。

ドキュメントやチュートリアルがとても親切で、簡単にインストールして、すぐに使うことができました。
日本語情報はまだまだ少ないですが、元が分かりやすいので特につまづくポイントはありません。

Freshは、Denoで最も使われているWebフレームワークです。

こちらも非常に簡単に始めることができました。
ドキュメントも分かりやすいですが、必要なことは大体以下の記事を読めば把握できます。

内部ではPreactというReactライクなライブラリが使われていて、Next.jsを使うような気持ちで触ることができました。
App RouterとPages Routerが混ざったようなルーティングが使われているのも馴染み深いし、TailwindやTypeScriptも最初から使えるので、私のようにNext.jsから入った人であれば、ごく自然に入門できるのではないでしょうか。

Freshが面白かったのは、デフォルトでMPA(非SPA)だということです。Reactライクな書き方でありながら、実際にはPHPのようにHTMLが組み立てられているというのは新しい体験でした。
SPAではない分、表示速度の犠牲はありますが、それを上回る開発の快適さがあるな、と個人的には感じました。

パーサコンビネータ

計算式の部分では、あらゆる四則演算を処理できるよう、パーサコンビネータという技術を利用しました。

実は以前こちらの記事で勉強して、四則演算パーサのプログラムがあったので、ちょっと書き換えるだけで利用することができました。
パーサに興味がある方は、ぜひ上に貼った記事を読んでみてください。

ちなみに、正規表現で事前処理している部分はかなり大変なことになりました。

image.png

相当めちゃくちゃな入力でも受け付けるので試してみてください。

ChatGPT

印象的なおじさん……ビッグ・ブラザーの顔は、ChatGPTに生成してもらいました。
原作だと肖像が指を指している描写はありませんが、『I Want YOU for U.S. Army』のイメージでこちらに指を指してもらいました。

image.png

ソースコード

実際のソースコードはこちらです。
興味があればご覧ください。

改めて、サービスのURLも貼っておきます。

余談

なぜかFreshのデプロイ先であるDeno DeployがTailwindをビルドしてくれず、めちゃくちゃなスタイルのまま吐き出してしまいます。

image.png

これを解決するためには、ローカルでビルドしたファイルをコミットに含める必要があります。
.gitignoreから_fresh/を削除して、

deno task build

を実行し、生成された_freshディレクトリをそのままコミットすると、適切にデプロイされるようになります。
もし同じ問題で困っている方がいたらご参考まで。

74
28
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
74
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?