湯婆婆をJavaScriptで再現する

知識のアップデートは時々必要。わたしの好きなプログラミング言語JavaScriptも常に進化しているので、新しい部分を勉強していたら千と千尋の神隠しに出てくる湯婆婆が色々なプログラミング言語で実装（プログラムで実現）されていることを知った。

【毎日自動更新】湯婆婆 LGTMランキング！ - Qiita

この記事は @Nemesis さんのJavaで湯婆婆を実装してみるよりはじまった「湯婆婆」関連記事のリンク集です"title:湯婆婆 OR tag:湯婆婆"で検索していますLGTM数順に並べてい…

すでにJavaScriptでも実装されているが、わたしも自分なりに作ってみた。

JavaScriptで湯婆婆と千尋との会話を再現する

処理はいたって簡単。
　１．名前を入力する
　２．新しい名前を湯婆婆が決定する（ランダムで1文字抽出）
　３．湯婆婆が新しい名前を告げる

一応、わたしなりのエラー対策として名前を入力しないで記すボタンを押したときは、勝手に1文字の名前（虚・空・無　の中から適当に選択）をつけるようにした。

ソースコード

yubaba.html

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>湯婆婆</title>
7    <style>
8        body{
9            margin: 50px;
10            font-family: serif;
11            font-size: 32px;
12        }
13    </style>
14    <script>
15        let btnChihiro, yubabaResult;
16 
17        document.addEventListener("DOMContentLoaded", function(){
18            // 記すボタンと湯婆婆のセリフ表示場所
19            btnChihiro = document.getElementById("btnChihiro");
20            yubabaResult = document.getElementById("yubabaResult");
21 
22            // 記すボタンを押したときの処理
23            btnChihiro.addEventListener("click", function(){
24                // 契約書の名前を取得
25                let myname = document.getElementById("myname").value;
26 
27                // 入力チェック
28                let yubaba = "";
29                if(myname === ""){  // 入力なし
30                    let choice = (v) => v[Math.floor(Math.random() * v.length)];
31                    myname = choice(["虚", "空", "無"]);
32                    console.log(myname);
33                    yubaba += `フン。名無しってかい。じゃあいいよ。<br>`;
34                }
35                else{               // 名前を記した
36                    yubaba += `フン。<strong>${myname}</strong>というのかい。贅沢な名だねぇ。<br>`;
37                }
38 
39                // 湯婆婆が新しい名前を決定する
40                let new_name = myname.charAt(Math.floor(Math.random() * myname.length));
41                new_name = "<strong>" + new_name + "</strong>";
42 
43                // 湯婆婆が新しい名前を告げる
44                yubaba += `今からお前の名前は${new_name}だ。いいかい、${new_name}だよ。<br>`;
45                yubaba += `分かったら返事をするんだ、${new_name}！`;
46 
47                yubabaResult.innerHTML = yubaba;
48            });
49        });
50 
51    </script>
52</head>
53<body>
54    <h1>湯婆婆</h1>
55    <p>契約書だよ。そこに名前を書きな。</p>
56    <input type="text" size="10" id="myname"><button id="btnChihiro">記す</button>
57    <p id="yubabaResult"></p>
58     
59</body>
60</html>