はじめに
@Nemesis さんの Javaで湯婆婆を実装してみる がバズってるとのことで、Vue.jsで実装してみました。
コード
indext.html
<!DOCTYPE html>
<html>
<head>
<title>湯婆婆</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<p> 契約書だよ。そこに名前を書きな。</p>
<input v-model="name"><br />
<p>
フン。{{ name }}というのかい。贅沢な名だねぇ。<br />
今からお前の名前は{{ newName }}だ。いいかい、{{ newName }}だよ。分かったら返事をするんだ、{{ newName }}!!
</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: '',
},
computed: {
newName: function () {
const random = Math.floor(Math.random() * this.name.length)
return this.name.substr(random, 1)
}
}
})
</script>
</body>
</html>
例外処理とかコンポーネント化したい衝動を抑えながら、元ネタをリスペクトしました。
実行結果
クラッシュ湯婆婆の再現
文字入力なし状態ですと、
フン。というのかい。贅沢な名だねぇ。
今からお前の名前はだ。いいかい、だよ。分かったら返事をするんだ、!!
と、名無しでも何か言ってますね・・・
ある意味、おかしくなってしまった湯婆婆ということで！
感想
「HelloWorldの代わりに、湯婆婆を！」って声も耳にしました。
たしかにHelloWorldは「出力」だけなのですが、湯婆婆だと「入力、出力、文字列（メモリの扱い？）、例外処理」が含まれていて、各言語の特徴を実感するにはほんと良いネタだなぁと思いました。
追記：
IchigoJam BASIC版も書いてみました。