Reactのチュートリアルは難しい？三目並べゲーム開発に挑戦しよう！

Reactチュートリアルとは？

Reactチュートリアルとは、Reactの公式サイトに記載されているチュートリアル情報を指します。 【参考】：チュートリアル：React の導入

そもそもチュートリアルとは学習教材を意味しており、一般的には入門情報や基本情報をまとめた教材をチュートリアルと言います。利用度の高いソフトウェアは市販・オープンソースソフトウェア問わず、チュートリアル情報が掲載されていることが多いです。

Reactとは、ユーザーインターフェース構築のためのJavaScriptライブラリを指します。Facebook（現Meta）とコミュニティによって開発されました。

JavaScriptライブラリですので、モジュールの再利用性が高いのが特長です。「コンポーネント」という部品から複雑なユーザーインターフェースを組み立てることができますので、学習効果が高まります。モバイルアプリケーションでも動作するので、開発生産性が総合的に高いことがメリットとして挙げられます。 【参考】：React

一言で何ができるかまとめると、コード開発が簡単でサクサク動作し、ウェブアプリや静的サイトでも対応可能ということになります。

Reactの公式ページは2つの分類で入門情報が提供されています。 ・スタートガイド 　Reactの入門情報が掲載されています。 　ドキュメントベースで知識吸収をしたい方向けの情報が掲載されています。 　【参考】：スタートガイド

・チュートリアル 　「Reactの導入」を目標とした初心者向け学習情報です。 　スターターコードの変更箇所を解説していく学習方式です。 　実際にコードサンプルの動作を確認しながら理解を深めたい方向けの自己学習情報となります。 　【参考】：チュートリアルを見る

上記の他にDocsサイトに必要な情報が掲載されています。なお、入門情報の「スタートガイド」の実体はDocsサイトの「Installation」「Getting Started」の掲載情報となっています。

Reactチュートリアル概要

Reactチュートリアルの最初のステップはとても簡単です。ブラウザでコードを書くためにあらかじめ、「Tic Tac Toe」という三目並べのゲームを用います。このコードを編集しながら理解を深めていきます。

Reactチュートリアルでは、オープンソース学習環境であるCodePenを利用しています。CodePenはちょっとしたプログラムの開発や実行に最適で、「Tic Tac Toe」のような小さいプログラムコードの学習には最適です。 【参考】：CodePen

Reactチュートリアルは「Reactの事前知識ゼロでも読み進められる」という考えに基づいて情報提供されています。実際に手を動かしながら学ぶ人を想定しています。Reactチュートリアルは、「Tic Tac Toe」のベースコードを用いて以下のような肉付けを最終的に行います。

・マス目を表示するだけ 　　　　↓ ・三目並べが遊べる ・決着がついたときに表示する ・履歴を保存する ・履歴や前の状態が確認できる

Reactチュートリアルでは、「Tic Tac Toe」のベースコードを用いて言語の理解を深めます。その際に用いるベースコードはコードの原型で、スターターコードと呼んでいます。スターターコードを表示するには、「スターターコード」のリンクをクリックします。 【参考】：スターターコード

　図：スターターコードの表示

最初に提示されている「スターターコード」では、まだマス目が表示されただけでゲームとして使うことはできません。以降で説明される「Tic Tac Toe」の改良と修正指示により、必要とされるソフトウェアコードを追加していきます。

　図：「スターターコード」から「インタラクティブなコンポーネントを作る」までの流れ

具体的な各ステップで改良している機能は以下のコード部分です。

・「データを Props経由で渡す」 　BoardのrenderSquareメソッドの戻り値を設定します。 　Squareのrenderメソッドで値を表示します。

・「インタラクティブなコンポーネントを作る」 　Squareコンポーネントのrender()関数の戻すボタンタグに’click’と表示します。 　コンストラクタでthis.stateを初期化設定し、状態を持たせます。 　renderメソッドを修正し、stateの現在値’X’を表示させます。

ここまでで、三目並べのの基本部品が用意できましたので、以降でゲームとして必要な処理を追加し完成させていきます。

「ゲームを完成させる」では最終的な三目並べのゲームを完成させていきます。若干細かい作業や指示が続いていきますので、難しいと感じる方も少なくないのではと思います。ここでは完成に向けた変更作業の概要をお伝えします。

　図：「State のリフトアップ」から「手番の処理」までの流れ

・「State のリフトアップ」 　Boardにコンストラクタを追加、9個のマス目にnull値を設定します。 　Squareに現在の値（'X'、'O' または null）を設定します。 　BoardのrenderSquareがSquareから現在の値を読み込みます。 　renderSquareメソッドをマス目がクリックされたときに関数を呼び出すように修正します。 　関連してrenderメソッド内のthis.state.valueやthis.setState()を修正し、不要なSquareのconstructorを削除します。 　マス目をクリックした時のエラーに対処するために、handleClickをBoardクラスに追加します。

・「関数コンポーネント」 　SquareをReact.Componentを継承するクラスではなく、propsを入力し表示内容を返す関数を定義します。

・「手番の処理」 　’O’がマス目に表示されるよう、BoardのhandleClick関数をxIsNextの値を反転させます。 　Boardのrender内“status”にプレイヤーの順番を表示させます。

かなり修正指示が増えてきましたので、脱落しないように作業を進めていきましょう。

　図：「ゲーム勝者の判定」から「Stateのリフトアップ、再び」までの流れ

・「ゲーム勝者の判定」 　Boardのrender関数内でcalculateWinner(squares)の戻り値を、Boardのrender関数のstatusに反映させます。 　BoardのhandleClickに、決着済みの場合とマス目が埋まっている際のクリックできないようにします。

以降はタイムトラベル機能を追加するために指示が続いていきます。 ・「着手の履歴の保存」 　過去のsquaresの配列を、historyという別の配列に保存します。

・「Stateのリフトアップ、再び」 　トップレベルのGameコンポーネントにBoardにあるstateをリフトアップし、過去の手番履歴を表示します。

もう少しで修正が完了します。もうひと頑張りです。

　図：「過去の着手の表示」から「タイムトラベルの実装」までの流れ

・「過去の着手の表示」 　renderメソッド内でhistoryにmapメソッドを使い、ボタンに反映します。

・「keyを選ぶ」 　リスト項目に対してkeyプロパティを与え、アイテムを区別可能にします。

・「タイムトラベルの実装」 　GameコンポーネントのstateにstepNumberを加え、jumpToメソッドを実装します。 　jumpToメソッドでは、stepNumberを更新できるようにします。

以上で無事三目並べが完成しました。お疲れ様でした。

ReactはJavaScriptのライブラリですが、Hooksを利用するとコンポーネントをクラスを書かずに関数として定義できるようになりました。これにより、コード量削減が可能になるほか保全性が向上します。 【参考】：フックの導入

ここまでのチュートリアル作業で物足りない方は、スターターコードのJavaScriptをTypeScriptへの置換に挑戦することもできます。特にReactの機能拡張Hooksを使って関数定義してしまうとシステム移行の際にも工数をかけずに作業ができますので効果的です。

Google社が統一的なデザインを提供するために「Material Design」というガイドラインを制定しました。Google公式ライブラリに採用され、サードパーティ製品もデザインガイドラインにしたがってユーザーインターフェースを設計するケースが増えています。 【参考】：Material Design

Reactはコードの再利用性を高めるために考案させましたが、デザインにもこだわる場合はMaterial Designコンポーネントライブラリが提供されています。

そのライブラリMaterial-UIは、Material-UI社とコミュニティによってメンテナンスされているソリューションです。AmazonやNETFLIX・Unity等多くの企業に採用されています。Material-UIにより、より統一感のあるユーザーインターフェースを提供することが可能です。 【参考】：Material-UI

Reactを活用して効率的にユーザーインターフェースを開発しましょう

Reactは、軽量で高速なユーザーインターフェースを開発できるJavaScriptライブラリです。機能拡張で追加されたHooksによる関数定義でさらに保全性が向上しています。

レイアウトにこだわる場合もMaterial Designコンポーネントライブラリで対応できますから、見栄えにもこだわったユーザーインターフェース開発にはうってつけのライブラリです。