FizzBuzz問題から始めるReact.js

はじめに

React.jsを始めるにあたって、FizzBuzz問題をしながら学んでいきます。

Reactとは

https://ja.reactjs.org/

FizzBuzz問題とは

https://ja.wikipedia.org/wiki/Fizz_Buzz

準備

手軽に触りたかったのでCodepenを使用しました。
https://crieit.net/posts/CodePen-React
上記設定に加えて、bootstrapも使用したかったので、codepenのPen Settings > CSSで以下を追加してください。

https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css

HTML

HTMLは中央に配置したいので以下で設定。

<div id="app" class="d-flex justify-content-center align-items-center"></div>

CSS

画面いっぱいで設定します。

#app {
  height: 100vh;
  width: 100%;
}

実際に書いてみる

まずはクラスの作成をして、表示用のテキストボックスとカウントアップ用のボタンを配置します。

class app extends React.Component {
  render() {
    return (
      <div class="text-center">
        <h1></h1>
        <button
          class="btn btn-lg btn-primary">
          <i class="bi bi-plus"></i>
        </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#app'));

次にカウントの変数宣言とカウントアップ処理をするメソッドを作成します。

class app extends React.Component {
+ constructor() {
+   super();
+   this.state = {
+     count: 1,
+   }
+ }

  render() {
    return (
      <div class="text-center">
-       <h1></h1>
+       <h1>{this.state.count}</h1>
        <button
+         onClick={this._countUp.bind(this)}
          class="btn btn-lg btn-primary">
          <i class="bi bi-plus"></i>
        </button>
      </div>
    );
  }

+ _countUp() {
+   this.setState({
+     count: ++this.state.count,
+   });
+ }
}

ReactDOM.render(<App />, document.querySelector('#app'));

FizzBuzz処理も加えていきます。

class app extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 1,
+     text: "",
    }
  }

  render() {
    return (
      <div class="text-center">
-       <h1>{this.state.count}</h1>
+       <h1>{ this.state.text || this.state.count }</h1>
        <button
          onClick={this._countUp.bind(this)}
          class="btn btn-lg btn-primary">
          <i class="bi bi-plus"></i>
        </button>
      </div>
    );
  }

+ _fizzBuzz(num) {
+   let text = "";
+   if ( num % 3 === 0 ) {
+     text += "Fizz";
+   }
+   if ( num % 5 === 0 ) {
+     text += "Buzz";
+   }
+   this.setState({text: text});
+ }

  _countUp() {
    this.setState({
      count: ++this.state.count,
    });
+   this._fizzBuzz(this.state.count);
  }
}

ReactDOM.render(<App />, document.querySelector('#app'));

これで基本的なFizzBuzz問題は完成です。

実行結果

最終的にカウントダウンとリセットのメソッドを追加して、完成したのがこちら。

おわりに

今回はReact.jsでFizzBuzz問題をやってみました。
他の言語だと動きそうなものなのにReactではうまくいかないということが多々あったので苦戦しました。
次回は実際に開発環境を整えていきたいと思います。