TypeScript 入門の記録（７）三目並べを作ってみる（その１）
前回、サバイバルTypeScript の、作って学ぶTypeScriptの課題ができたので、次に何をするかネタを探そうと思ったのですが、以前React公式チュートリアルで手順のとおりに入力して完成させた「三目並べ」をTypeScriptで作ってみたくなりました。前回作った「いいねボタン」を３×３個並べて、ポチポチする感じで遊べたらいいなと。作っていく中で、Reactの理解も進むのでは？なんて期待もあります。やるぜ。
TypeScript で三目並べを作ろう
JavaScript→TypeScript
TypeScriptについて調べていると、「JavaScript からTypeScript に移行する」という取組がたくさん見つかります。7万行とか100万行とか、長年育ててきたシステムの JavaScript のコードを移行するというものもあって、いつまでもこのまま運用し続けるのか？という課題へのひとつの解としてTypeScriptへの移行があるようです。私自身、現職で開発運用を担当しているシステムも、5年前にClassic ASP からASP.Netに移行して、現在も機能改善などしながら維持管理しているので、いつまで現在の構成で運用できるのか？というのは、避けられない問題です。と、前置きはさておいて、Reactチュートリアルの三目並べを、TypeScriptでなぞっていきたいと思います。
移行手順の確認
TypeScript Deep Dive の JavaScript からの移行ガイドによると、ざっくりした移行手順は、
１．tsconfig.json を追加する。
２．ソースコードの拡張子.jsを.tsに変更する。
３．any型を使ってエラーを抑制する。
４．型アノテーションを追加し、バグを修正する。
５．サードパーティ製JavaScriptコードの型定義を使用する
なのですが、完成した三目並べをそのままTypeScriptに移行するのではなく、前回作成した「いいねボタン」を土台にして、三目並べを作り込んでいきます。つまり、最初は、ボタンが９個並んで表示されるところから始めるわけです。（移行って書いておきながら、移行じゃないですね）
初期画面の表示
さて、３×３のボタンを並べるわけですが、WSL2を起動して、いいねボタンのプロジェクトを三目並べ用のディレクトリにコピーします。
さて、コードを追加していきます。
三目並べの、初期画面用のコードを、App.tsxに反映してみます。ただし、Squareの表示は、いいねボタンを表示する関数を流用します。スタイルはあとから調整するとして、初期表示を確認します。
ぎゅうぎゅう詰めのいいねボタンたちが表示できました。ボタンを並べることができたので、この先、チュートリアルのコードを参考に、TypeScriptで実装していきたいと思います。さて、今日の学習はここまで。続きは、次の週末の予定です。
【参考リンク】
ASP→ASP.NET移行テクニック（＠IT）
「JavaScript TypeScript 移行」の Google 検索結果