見出し画像

TypeScript 入門の記録(7)三目並べを作ってみる(その1)

前回サバイバルTypeScript の、作って学ぶTypeScriptの課題ができたので、次に何をするかネタを探そうと思ったのですが、以前React公式チュートリアルで手順のとおりに入力して完成させた「三目並べ」をTypeScriptで作ってみたくなりました。前回作った「いいねボタン」を3×3個並べて、ポチポチする感じで遊べたらいいなと。作っていく中で、Reactの理解も進むのでは?なんて期待もあります。やるぜ。

TypeScript で三目並べを作ろう

JavaScript→TypeScript

TypeScriptについて調べていると、「JavaScript からTypeScript に移行する」という取組がたくさん見つかります。7万行とか100万行とか、長年育ててきたシステムの JavaScript のコードを移行するというものもあって、いつまでもこのまま運用し続けるのか?という課題へのひとつの解としてTypeScriptへの移行があるようです。私自身、現職で開発運用を担当しているシステムも、5年前にClassic ASP からASP.Netに移行して、現在も機能改善などしながら維持管理しているので、いつまで現在の構成で運用できるのか?というのは、避けられない問題です。と、前置きはさておいて、Reactチュートリアルの三目並べを、TypeScriptでなぞっていきたいと思います。

移行手順の確認

TypeScript Deep Dive の JavaScript からの移行ガイドによると、ざっくりした移行手順は、

1.tsconfig.json を追加する。
2.ソースコードの拡張子.jsを.tsに変更する。
3.any型を使ってエラーを抑制する。
4.型アノテーションを追加し、バグを修正する。
5.サードパーティ製JavaScriptコードの型定義を使用する

なのですが、完成した三目並べをそのままTypeScriptに移行するのではなく、前回作成した「いいねボタン」を土台にして、三目並べを作り込んでいきます。つまり、最初は、ボタンが9個並んで表示されるところから始めるわけです。(移行って書いておきながら、移行じゃないですね)

初期画面の表示

さて、3×3のボタンを並べるわけですが、WSL2を起動して、いいねボタンのプロジェクトを三目並べ用のディレクトリにコピーします。

cp -r でまるっとコピー

さて、コードを追加していきます。

Reactチュートリアルのコードを反映

三目並べの、初期画面用のコードを、App.tsxに反映してみます。ただし、Squareの表示は、いいねボタンを表示する関数を流用します。スタイルはあとから調整するとして、初期表示を確認します。

ぎゅうぎゅう

ぎゅうぎゅう詰めのいいねボタンたちが表示できました。ボタンを並べることができたので、この先、チュートリアルのコードを参考に、TypeScriptで実装していきたいと思います。さて、今日の学習はここまで。続きは、次の週末の予定です。

【参考リンク】
ASP→ASP.NET移行テクニック(@IT)
「JavaScript TypeScript 移行」の Google 検索結果

この記事が気に入ったらサポートをしてみませんか?