--- title: React (JavaScript) で湯婆婆を実装してみる tags: React JavaScript ネタ 湯婆婆 author: drytt slide: false --- ##はじめに 原作者様: [Javaで湯婆婆を実装してみる - Qiita](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2) この壮大なビッグウェーブならぬビッグ湯婆婆に乗るっきゃない! ##コード ```html:index.html React 湯婆婆
``` こちらがコードになります。これを textfile とかにコピペしてブラウザ起動すれば動きます。 ##コードの解説 ### 湯婆婆の部屋に入る準備 React と babel を CDN で読み込む。 ```html ``` レンダー用の div 要素 (root) を記述して、あとは JS のお作法を記述する。 ```html
``` ### 契約書と名前を奪う Yubaba コンポーネントを作成 Yubaba コンポーネントをつくる! フック (useState) も使う! ```javascript const {useState} = React; function Yubaba() { const [name, setName] = useState(''); const newName = name.substr(Math.floor(Math.random() * name.length), 1); return (

契約書だよ。そこに名前を書きな。

setName(e.target.value)}/>

フン。{name}というのかい。贅沢な名だねぇ。

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

); } ReactDOM.render( , document.getElementById('root') ); ``` ##実行結果 ![react-yubaba.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230524/b4932339-e47c-4d6b-b8ab-ad43f73fca02.png) ## おまけ 名前の入力が空白だった場合のクラッシュ湯婆婆は入室しませんでした! SPA なので名前を言い終える前に湯婆婆は名前を奪い始めるという。**早とちり湯婆婆**降臨。 ## 最後に ここまで読んでいただきありがとうございました!