2019年12月18日スポンサーリンク前回、こちらの記事でReactの公式チュートリアルを解説しました。【入門】Reactチュートリアルをやりながら実践入門業務で開発しているプロジェクトでReactを入れることになりまして、そのためのインプットとしてReactの公式チュートリアルを行いました。Reactには入門として公式のチュートリアルがあります。英語で書かれていますが、この記事では日本語で解説していきます。初心者の方でもわかってもらえるように、押さえておくべき部分が出てきた時にその都度解説を挟むようにしています。...公式のチュートリアルでは、最後に追加課題が出されています。今回はその追加課題をやっていこうと思います。引き分けの時にはdrawを表示まとめチュートリアル本編で作ったもの公式のReactチュートリアルで、このようなものを作成しました。誰でもやってことがある「○×ゲーム」です。公式ページではtic-tac-toeゲーム(三目並べ)と呼ばれています。上に現状のプレイヤーが誰か、勝負がついた場合に勝者が通知される右に履歴がでてきてボタンを押したらその時点に遡ることができる。本家の完成版がこちらにのっています。https://github.com/fkt1993/react-sample-app前回作成したものはこちらのリポジトリにまとめましたのでそちらでも確認ができます。今回扱う内容もこちらのリポジトリに追加していきます。公式のチュートリアルではこのように出されています。引き分けの時にはdrawを表示こんなかんじになります。1つずつ実装していきましょう。実際にやってみる課題1.それぞれの遷移に(col,row)の表示をする右側に履歴が表示されているかと思いますが、その1つ1つの履歴に現状は「#1」というような表示だったのを「#1(0,1)」のようにどのマスを選択したかがわかるように表示していきます。この履歴に関してはGameコンポーネントのhistoryに格納されている配列を、map関数で表示しています。このhistoryにクリックしたマスの情報も加えて格納するように変更していきます。stateを書き換えているので、handleClickメソッドを書き換えます。});}historyに新しい配列の要素を追加する際にcolとrowを追加するようにしています。これをもとにhistoryの内容をレンダリングする部分で、この値を使ってマスの位置を表示するように書き換えます。Gameコンポーネントのrenderメソッド内でhistoryに対してmap関数を通していたのでその部分を書き換えました。実際に確認してみましょう。↓このように座標も表示されるようになりました。遷移リストの現在選択されているものを太字に方針としては、GameコンポーネントにstepNumberをステートとして保持しているので、これを利用してstepNumberとhistoryのindexの役割をするmoveが一致した際にboldというclassを付与します。);});boldクラスがついたときに文字が太字になるようにcssも編集します。bold;}以上です。実際に確認してみましょう。↓このように現在選択されているものが太字になりました。Boardをloopを2回つかって書いてみる現状Boardコンポーネントのrenderメソッドでは以下のようにハードコーディングされています。}}課題3では、こちらをloopを2回使って書き換えていきます。具体的にはmap関数を2重で使っていきます。以下のように書き換えました。}}ポイントとしてはmap関数を使うときはkeyを加えることです。keyを使うかというのは、こちらの記事でまとめているのでわからない場合は参考にしてみてください。【入門】Reactチュートリアルをやりながら実践入門業務で開発しているプロジェクトでReactを入れることになりまして、そのためのインプットとしてReactの公式チュートリアルを行いました。Reactには入門として公式のチュートリアルがあります。英語で書かれていますが、この記事では日本語で解説していきます。初心者の方でもわかってもらえるように、押さえておくべき部分が出てきた時にその都度解説を挟むようにしています。...以上で課題3が完成です!遷移リストを昇順/降順にする遷移リストの上にボタンを設置して、クリックすると遷移リストが昇順か降順か切り替わるようにしていきます。方針としては、新たに昇順か降順かどうかを保持するstateを新しく定義して、遷移リストをレンダリングする際にstateの状態によって昇順か降順を切り替える。ボタンを1つ設置し、onclickでstateを切り替えるというようにしていきます。遷移リストをレンダリングするGameコンポーネントをいじっていきます。}}これによってまずボタンが設置されました。次に昇順か降順を保持するstateを増やします。チュートリアル本編でも出てきたように、stateはなるべく親階層で持つべきでした。GameコンポーネントにisAscというstateを追加します。isAscがtrueの場合は昇順、falseの場合は降順とします。...}遷移リストをレンダリングする際に、次に追加したisAscをもとに昇順か降順かどうかを考慮するように書き換えます。}}最後に、isAscを切り替えるメソッドを定義して、ボタンをクリックした際に呼び出すようにします。実際にちゃんと動くかどうかを確認していきます。↓このようにボタンで切り替えれるようになっています。誰かが勝った時に、3つ揃ったセルをハイライトする方針として、勝者がいるかどうかをcalculateWinner関数で判定していますが、こちらが勝者がいない場合にnullを、いる場合に勝者のプレイヤー名の文字列を返していましたが、同時にどのマスの列が揃ったかの配列も返すようにします。それをもとに、マスを描画する際に、揃っているマスなのかどうかを判断し、そうであればハイライトする用のclassを付与していきます。いうことで、まずはcalculateWinner関数を変更していきます。null;}このように列が揃った場合の返り値に揃った列の情報も返すようにしました。次にGameコンポーネントを書き換えます。calculateWinnerの返り値を変更したのでそれに伴い修正しています。加えてBoardコンポーネントに揃った列のマスを渡すようにしています。}}Boardコンポーネントも書き換えます。揃った列のマスの配列を受け取って、マスをレンダリングする際に、そのマスが揃ったマスに含まれているかどうかを判定し、isHighlightで渡すようにしています。}}次にSquareコンポーネントを変更します。isHighlightがtrueのときのみhighlightクラスを付与するようにしています。);}仕上げにhighlightクラスがついたときに背景色が変わるようにcssを編集します。yellow;}以上で修正は完了です。実際に挙動を確認していきます。↓このように決着がついたときにハイライトされるようになりました。方針としては、課題5と同様にcalculateWinner関数で引き分けかどうかの情報も返すようにします。calculateWinner関数を以下のように変更していきます。null;}次にGameコンポーネントのrenderメソッドを書き換えていきます。実際の動作を確認していきましょう。↓引き分けの際に「Draw」が表示されることが確認できました!以上で追加課題のすべてが完了です。まとめ今回は、公式のreactチュートリアルの追加課題を行っていきました。難易度としてはそこまで難しくなくて、チュートリアルの本編をちゃんと理解していればできる内容であったかなと思います。今回のコードは本編も含めてGithubのリポジトリにまとめているので、よかったら参考にしてください。https://github.com/fkt1993/react-sample-appこの記事が学習の参考になっていただければうれしいです。当サイトはエックスサーバーで運営しています。方はこちらの記事を参考にしてください。仮想通貨1【windows】FFmpegをインストールする手順2FFmpegで動画変換!各OSごとのインストール方法と使い方まとめ3【簡単】MacにHomebrewをインストールする方法と基本的な使い方4macOSにXcodeをインストールしよう5HomebrewでMacにFFmpegをインストールする方法と使い方6BootCampでMacにWindows10をインストールする7〜初心者でもわかるswift入門〜基本文法からiOSアプリを開発するまで8【swift入門】apiを叩いてTableViewに表示させる9【Xcode】ファイル追加削除するときの注意10【入門】Reactチュートリアルをやりながら実践入門お問い合わせこちらからお願いいたします。