ツンデレ湯婆婆はReactで色恋するのか？

11219 ワード
湯婆婆 React TypeScript TypeScript テキストリンク

あらすじ

みなさま、お腹いっぱいでしょうか？
「湯婆婆ネタはもういらない」と？
いまさら感が強いですが、またまた湯婆婆のラブコメと学ぶ入門記事です。

湯婆婆ブームもそろそろ落ち着いてきましたね。
Javaで湯婆婆を実装してみるが元ネタです。

難易度☆★★★★

書いたコードの難易度としては、
ProgateのReactコース修了レベルです。
やはり湯婆婆は入門者のゲーミフィケーションに最適ですね。

相違点

Reactは既に「React (JavaScript) で湯婆婆を実装してみる」で紹介されています。
後発として差別化をします。

  • BabelではなくTypeScriptを使用
  • CodePen.ioで形成した湯婆婆を埋め込み
  • 書き終えた契約書はReactiveに瞬間移動し湯婆婆の手の中へ
  • 契約書はQiitaカラー#55c500にして統一感を演出

恋する乙女、ツンデレ湯婆婆ちゃん

See the Pen React-Yubaba by ShortArrow (@ShortArrow) on CodePen.

言語による冷静な事務対応の限界

２つの言語を試してみて、気が付いたことがあります。
どの時点まで𠮷田さんに冷静に対応できるのか？
それが言語によって「簡単に調節できるか」が異なるのです。

以前書いた記事「Powershellで湯婆婆の召喚魔法を実装」では、
Powershellでした。

契約書だよ。そこに名前を書きな。
��田
フン。��というのかい。贅沢な名だねぇ。
今からお前の名前は��。いいかい、��よ。分かったら返事をするんだ、、�!�!!

この時の湯婆婆ちゃんは、
契約書に記載した𠮷田という正式名すら発声できません。
それどころか視界不良に陥り、契約書が見えていないようです。
「デレデレ」過ぎてこっちが恥ずかしいですね。

ツンデレ湯婆婆ちゃん

今回の湯婆婆ちゃんは、Javascriptです。
𠮷田さんという名前を発声することができました。

フン。𠮷田というのかい。贅沢な名だねぇ。

ここまでは「ツン」ですね。
ところがその直後、自分で考えたニックネームを発声できません。

今からお前の名前は�だ。いいかい、�だよ。分かったら返事をするんだ、�!!

恥ずかしくて「デレ」ています。

「アオハルかよ」って感じですね。
挿絵として「少女漫画風の湯婆婆」が欲しいです。

冷静な事務対応を執行するには

湯婆婆ちゃんを失恋させる

湯婆婆ちゃんを失恋させるにはサロゲートペアを考慮する必要がありました。
なぜ絵文字を含む文字を1文字ずつに分けるのにArray.fromだけで十分なのか？
という記事で詳細に解説されています。

また、Flutterの湯婆婆にサロゲートペア文字を理解させたら可愛くなった💗で紹介されていますが、
Dartの場合Charactersクラスを使って簡単に処理することが出来るそうです。

※サロゲートという言葉の語感は、石黒研究室のサロゲートが出演するサロゲートという映画をご覧いただくと理解しやすいと思います。

湯婆婆失恋バージョン

See the Pen React-Yubaba-LostLove by ShortArrow (@ShortArrow) on CodePen.

失恋バージョンではhandleClick()を書き換えています。

handleClick() {
    const randamIndex = Math.round(Math.random() * (Array.from(this.state.name).length - 1));
    const madeName = Array.from(this.state.name)[randamIndex];
    this.setState({
        clicked: true,
        handleName: madeName
    });
}

恋する乙女バージョンではthis.state.nameのlengthプロパティから長さを取得していました。
これをArray.from()で配列化してから長さを見るようにしています。

また、substring()を使って切り出していたところを、配列のインデックスで指定して取り出すように変えました。

失恋バージョンへの入力

𠮷田さんのほうから、アプローチを仕掛けてみましょう。
ちょっとハートマークが騒がしいですね。

失恋バージョンの結果

この通り、全く緊張感の欠片もありません。
淡々と機械的に読み上げる様を見る限り、
微塵も恋している様子はありませんね。

添え字の境界値に気を付けよう

境界値に気を付けなければ、以下の等式が成り立つ恐れがあります。

1 ÷ (名前の長さ + 1) = 湯婆婆が絶句する確率

下記のhandleClick()は湯婆婆の名前を盗むロジックのコアです。
この中で、(this.state.name.length - 1)として配列の添え字の番号に合わせています。

handleClick() {
    const randamIndex = Math.round(Math.random() * (this.state.name.length - 1));
    const madeName = this.state.name.substring(randamIndex, randamIndex + 1);
    this.setState({
        clicked: true,
        handleName: madeName
    });
}

仮に、randamIndexの定義が、

const randamIndex = Math.round(Math.random() * this.state.name.length);

だとしましょう。

Math.random()で0～1の範囲を作り出しています。
その結果、名前が御成敗式目の場合にrandamIndexの値は0～5となります。
そうすると、randamIndexの値が0の時はmadeNameが御で、4の時はmadeNameが目です。

そうなんです。randamIndexが5になれば、madeNameの値はヌル文字列です。

やはり、添え字に気を付けて「マイナス１」をするのは大切です。

環境設定

CodePen.ioで書いています。

CodePen.ioでの設定内容

まとめ

多言語でも同じ方法で失恋させることが出来る場合とそうでない場合がありそうです。
この記事を読んで「別の言語で失恋をさせてみたいな」と感じてもらえたらハッピーです。

Excelsior!