🐥

FizzBuzz問題風の装置をNext.jsで書いてみる

2022/11/23に公開約800字

FizzBuzz問題とは

「1から100までの数字を画面に表示する。ただし、3の倍数のときは数字の代わりにFizzと表示し、5の倍数のときは数字の代わりにBuzzと表示し、15の倍数のときは数字の代わりにFizzBuzzと表示する」問題のこと。

やったこと

入力した数字が15の倍数なのか5の倍数なのか3の倍数なのかそれ以外なのかをalertで判別する関数を作りました。

目的

React及びNext.jsのコードを簡潔に書く記録

工夫した点

  • ifelseを使わないこと
  • なるべくコード量を少なくすること

コード


  const CheckNumberFunc = () => {
    const [number, setNumber] = useState(0);

    const handleChange = (e) => {
      setNumber(() => e.target.value);
    };

    const FizzBuzz = (number) => {
      number % 15 == 0
        ? alert("15の倍数だよ")
        : number % 5 == 0
        ? alert("5の倍数だよ")
        : number % 3 == 0
        ? alert("3の倍数だよ")
        : alert(number + "だよ");
    };

    return (
      <>
        <p>number : {number}</p>
        <input value={number} onChange={handleChange} type="number" />
        <button onClick={() => FizzBuzz(number)}>値の確認</button>
      </>
    );
  };

Discussion

ログインするとコメントできます