初心者向け。React.js製の超簡単なおみくじ
640 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回はReact.js製のおみくじアプリの解説です。
これからReact.jsを勉強する人に向いていると思います。
それでは解説します。
仕様とデモ
最初の状態が↓です。
「？」をクリックするたびに「大吉、中吉、凶」のどれかに変わります。
デモはここから見ることができます。
簡単にやりたいのでnpm インストールはせずバベルでやります。
まずは↓をコピペしてください。
最初の状態
まずは最初の状態にしますがコードを↓にします。
これで↓の表示になります。(CSSはGitから取ってください)
ボタンを押すと「？」が変わるようにしたいのでonClickメソッドを使います。
「onClick={onClick}」の{onClick}を4行目〜15行目に書いています。
クリックするたびに「大吉、中吉、凶」を変えるのですがクリックすることで得られる任意の数値で変えます。
状態の切り分けは「if」で行います。
0以上1未満の任意の数値を取るのは「Math.random()」です。
大吉、中吉、凶の切り替え
コードを↓にます。
「？」を変えることができるようにしますがuseStateで行います。
?を変えることができるようにする
コードを↓にします。
これで「？」をクリックすれば「大吉、中吉、凶」のどれかに変わりますが1回しか変わりません。
何度も変えないといけないのでuseEffectを使います。
大吉、中吉、凶を何度も変更できるようにする
コードを↓にします。
7〜9行目ですがこれがないと画面を開いた時に「？」が「大吉、中吉、凶」のどれかになっていてそれを防ぐためです。
これでおみくじの完成です。
最後に全てのコードを載せます。