webエンジニアが子育てするらしいですよ

RubyやPython, JSなど、IT関連の記事を書いています

Reactチュートリアル+追加課題やってみました

こんにちは、さもです。

ブログなど漁ってみて、RailsへReactを導入してみようと思ったのですが、理解が及ばず。

まずはちゃんと入門してからにしようと、Reactの公式チュートリアルとチュートリアルの最後に書かれている追加課題をやってみました。

難しかったですが、なんとなくReactについて分かったような気がしなくもないです。

こちらのレポジトリにプッシュしています。

github.com

スポンサーリンク

目次

チュートリアルを始める

Tutorial: Intro To React - Reactからチュートリアルページへ飛びます。

※チュートリアルを始める前にNode.jsをインストールしておいてください。

まずは金型を作ってくれるcreate-react-appをインストールし、最初のプロジェクトを作ります

npm install -g create-react-app
create-react-app my-app
cd my-app

次に、新しく始めるために、srcフォルダを空にしておきます

rm -f src/*

srcフォルダにindex.jsとindex.cssを作成して、それぞれ、

Tic Tac Toe

Tic Tac Toe

からコピペしておきます。

あとはチュートリアルにしたがって進めていくと、履歴も見れちゃう○×ゲームが完成します。

環境構築は簡単でした!

特にnpm startとするだけで、サーバーが立てられブラウザが開いて、さらにファイルを保存するだけですぐに画面に反映されます。すぎょい!

解決した疑問・新たに抱いた疑問

親って何だ?

クラスをインスタンス化?描画?埋め込み?するクラス

HTMLでいう親要素とほぼ同じようなものかと思いました。

propsとstate何が違う?

  • propsは子供へ伝えたり、親から伝わってきたりするプロパティ
  • stateは自分自身だけがもつステータス。stateが変わるとすぐに画面に反映される

子へpropsを伝えるためだけのコード

途中から、ボタンクリック時のイベントがGameクラスで定義され、Boardクラスを通過してSquareに伝わります。

BoardクラスはGameクラスのonClickプロパティをそのままSquareクラスに伝えます。

なんとなく、Boardクラスのこの部分は無駄なコードのように見える。

最終的にトップクラスが太る

チュートリアル中でもそうですが、だんだんと処理がゲーム全体を見て行うようになっていくため、Gameクラスへ処理が集まってきました。

そういうものなんでしょうか?

追加課題

○×を置いた場所の位置を表示

f:id:s-uotani-zetakansu:20180130132757p:plain

各historyに以下のプロパティを追加して、ボタンクリック時に位置を記録しておき、画面に表示しています

        position: {
          col: null,
          row: null,
        },

選択中のステップを太字にする

f:id:s-uotani-zetakansu:20180130132807p:plain

Gameクラスのrenderメソッドにて、現在のstepNumberとループ中のindexを比較して、同じならselectedというクラスを付与するようにしました。

2重ループでボードを作る

本当はfor文で実装したかったのですが、よく分からず。

mapを使った例はチュートリアルでも出てくるので、こちらを使いました。

以下はBoardクラスのrenderメソッドです

  render() {
    return (
      <div>
        {
          Array(3).fill(0).map((row, i) => {
            return (
              <div className="board-row" key={i}>
                {
                  Array(3).fill(0).map((col, j) => {
                    return(
                      this.renderSquare(i * 3 + j)
                    )
                  })
                }
              </div>
            )
          })
        }
      </div>
    );
  }

揃ったラインをハイライト

f:id:s-uotani-zetakansu:20180130132818p:plain

caclulateWinnerメソッドがどのラインが揃ったのかも返すようにし、

Gameクラス、Boardクラスを通してハイライトするかどうかをSquareクラスへ伝えています。

トグルボタンでボタンの並び順を変える

f:id:s-uotani-zetakansu:20180130132830p:plain

Ganeクラスに新しくorderステータスとトグルボタンを追加し、

ボタンが押されたらorderステータスを更新。

orderステータスがdescならmoves.reverse()してから描画、ということをしています。

チュートリアルをやってみた感想

(仮想)DOMとロジックが入り混じっているのでコードを読むのが結構大変だと思いました。結構泥臭い感じ?

もうちょっと勉強してみないと、Reactの良さが分からないですね。でも同じ機能をjQueryで実装するのもそこそこ大変そうです。今度jQueryでも同じやつやってみよう!

よく入門をうたうブログではReduxやFluxも使おうとしますが、Reactだけで精一杯です。公式のチュートリアルはReactだけなので、まず入門したい方は公式チュートリアルをやってみるのがいいと思います。英語ですが、Google翻訳しながらできましたよ!笑

以上、Reactチュートリアルやってみました。

読者登録はこちらからお願いします。