【おれの備忘録】ReactチュートリアルをTypescriptに-ゲーム勝者の判定まで

「劇場版「鬼滅の刃」 無限列車編」の煉獄さんの姿にいつも泣きそうになるオウルです。ついにBlu-ray&DVDが発売されましたね。妻から父の日にプレゼントしてもらってからは何度も見てます。ただ僕以上に娘がよく見てますけど。

Reactには以前から興味はあって、本業で使う機会があればと思っていましたが、当面そういう機会もなさそうなので、Rust同様、プライベートで学習していきます。

Reactの公式ドキュメントは、とても洗礼されてると思うのでチュートリアル:React の導入をまずは挑戦です。せっかくなので最新情報を追いながら、Typescriptに置き換えていきます。また、後で復習しやすいように、参考にしたドキュメントのリンクを貼っていきます。

ローカル環境
language React v17.0
os WSL Ubuntu 21.04
editor VSCode

Reactチュートリアル

では、チュートリアル:React の導入を進めていきます。

チュートリアルの前提知識にも記載がありますが、ある程度JavaScriptの知識が前提となっています。JavaScriptを復習したい人や、はじめての人は紹介されているガイドから始める方が、Reactチュートリアルを早く理解できると思います。後、おまけで過去のJacascriptについて記事も紹介しておきます。

Create React App

Create React App は React を学習するのに快適な環境であり、React で新しいシングルページアプリケーションを作成するのに最も良い方法です。

とありますので、Create React Appを使用していきます。内部ではBabelwebpackを利用しているとのことですが、チュートリアルに関して言えば、この辺りは意識する必要なくTypescriptで実装していけます。因みにBabelとwebpackとTypescriptの環境構築には、以下の記事で説明していますが、この辺りをまるっとCreate React Appがいいようにしてくれる感じです。

ステートフックの利用法

Reactチュートリアルを読み進めると、はじめにクラスコンポーネントで記述されていた箇所を関数コンポーネントに書き換える流れになっています。ですが、React 16.8 で追加された新機能のhookの補足がありません。なので、ステートフックの利用法を参考に関数コンポーネントを実装していきます。

このhookにはルールがあり、詳細はフックのルールに記載されています。Create React Appでは、デフォルトで自動的に、このルールを強制するためのlinter プラグインが含まれているみたいです。

三目並べゲーム

React.FunctionComponent(React.FC)とReact.VoidFunctionComponent(React.VFC)について色々意見があるようですが、初心者の僕としては、React TypeScript CheatsheetのFunction Componentsを参考に実装していきます。

Squareコンポーネント

Boardコンポーネント

今回はここまで。次は、タイムトラベル機能の追加を学習しつつ、Typescriptに置き換えていく予定です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA