React TutorialをベースにReact + TypeScript五目並べアプリの開発

React チュートリアル

従来のReact公式のチュートリアルはクラスコンポーネントで作成されていました。
実際は関数コンポーネントで作成するケースがほとんどで、公式チュートリアルを書き換える記事も多くありました。
現在ベータ版(英語のみ)ですが関数コンポーネントで作成する公式チュートリアルがあり、実際に作成してみました。
三目並べのプログラムで、コードも英語もそこまで難しくないです。

ただあくまでチュートリアルであり、気になる点もちらほら。
そこで三目並べ作成後にReact + TypeScriptにして、五目並べのプログラムに変更しました。
ここではざっくりと、三目並べと五目並べの説明と修正箇所を記載します。

Introduction

• 製作者（私）
  • Web 系のスキルは業務ほぼ未経験（Pythonで簡単なFlaskサーバーをたてる程度）。
  • HTML + CSS + JavaScriptはググれば何とかなる（はず）。
  • ReactやTypeScriptは自習で軽く触った程度。
• 製作意図
  • Web 系転職に必要な言語スキル習得のため。
  • 数ヶ月後に当時のスキルを把握するため。

概要

チュートリアルの三目並べ

• 盤面は 3*3
• O と X で盤面を埋める。
• ターンプレイヤーを表示。
• 勝者を表示。
• 前に戻る（所謂「ちょっと待った！」）。
• ◯✕ ゲームといった方が馴染み深い。

作成した五目並べの追加機能

• 盤面は 10*10
• ● と ○ で盤面を埋める。

ソースコードの修正内容

• React + TypeScriptに変更。
• 盤面を設定で任意のサイズに変更。
• ファイル分割。
• ソースコードのリファクタリング。
  • ハードコーディングの解消。
  • TypeScriptの型。
  • JSDocの追加。
  • and so on.

ソースコード

React + TypeScriptで作成した五目並べは GitHub に公開しております。

感想

クラスコンポーネントのチュートリアルと比較してコーディングしたため、可読性の向上を確認できました。
React面白いのですが書き方に慣れなくてもどかしい気持ちが拭えませんね。
とはいえ今回チュートリアルを書き換えたことで、言語理解が深まったのではないかと思います。
なお、チュートリアル〜五目並べ完成まで約 7 時間でした。
今月は応用情報技術者試験も控えているため、チュートリアルだけにする予定でしたが......
良い日曜日の過ごし方でした。