自作アプリのJSX→TSX移行：TypeScriptという「ガードレール」

はじめに

JavaScriptと比較して、TypeScriptは開発中に自分を守ってくれるガードレールのような存在です。
正直なところ、「最初からTypeScriptで書いておけばよかった！」というのが今の本音ではありますが、今回は勉強も兼ね、そして今後アプリを機能拡張していくことを考えて、既存のJSX（JavaScript）で作成していたアプリをTSX（TypeScript）へ書き換えてみました。

書き換えの過程で学んだポイントを3つに絞ってまとめます。

---

1. 表示させる単語データの型定義（interfaceの活用）

データの構造を明確にするため、interfaceを使用して型を定義しました。

単語一つの型を定義

interface WordItem {
  en: string;
  jp: string;
  emoji: string;
}

データの全体構造を定義

ネストされたデータ構造も、以下のように定義することで整理されます。

interface DataStructure {
  magic: WordItem[];
  themes: {
    animals: WordItem[];
    foods: WordItem[];
  };
}

学んだこと：

単語一つの型から全体の構造まで定義しておくことで、今後のアップデート（単語やテーマの追加）の際も、エラーにならない形で安全にデータ拡張ができるようになります。

2. 親（App.tsx）から子（Game.tsx）へのProps受け渡しの厳格化

コンポーネント間でのデータのやり取りに型を導入しました。

App.tsx 内での呼び出し例

<Game 
  magicData={FUSION_DATA.magic} 
  themeData={FUSION_DATA.themes[selectedTheme]} 
  onBack={goToHome}
/>

学んだこと：

受け渡すデータが「WordItemの配列であること」などを型で保証することで、子コンポーネント側で誤ってデータを別の型（数値など）として扱おうとした際、TypeScriptが即座に警告を出してくれます。 開発中のミスを未然に防げるようになりました。

3. イベントの型と型推論

関数の定義についても、TypeScriptの恩恵を感じるポイントがありました。

const goToHome = () => setStatus('home');

学んだこと：

コード自体はJavaScriptの時と変わりませんが、TypeScript環境であればこれを見ただけで**「引数がなく、何も返さない（void型）関数」**だと自動的に理解（型推論）してくれます。開発者がいちいち説明しなくても、コードが自身の役割を語ってくれる安心感があります。

まとめ：移行を終えて

JavaScriptからTypeScriptへの移行は「後からやると大変」な面もありますが、一度型というガードレールを設置してしまえば、エディタが常に自分をサポートしてくれるようになります。

特にデータの受け渡しが多いReact開発において、この安心感は代えがたいものだと実感しました。