コース一覧
JavaScriptをTypeScriptへ移行する
完成と次のステップ

JavaScriptをTypeScriptへ移行する

tsconfigとstrict設定、移行順序、データ層・関数・DOMの型付け、型エラーの解消を通して、既存JavaScriptを段階的にTypeScriptへ移行する全9レッスンの実践プロジェクトです。完成済みのプロフィールサイトを止めずに、ファイル単位で安全なTypeScriptへ置き換えます。

1
実践 JSをTSに移行する
0. tsconfigのきほん10分
1. 移行の進め方10分
2. データ層のTS化15分
3. 関数のTS化15分
4. 型エラーを潰す15分
5. DOMと型15分
6. つくる - 丸ごとTS化完了20分
7. 自由移行20分
8. 完成と次のステップ10分

JavaScriptをTypeScriptへ移行する

01tsconfigのきほん
02移行の進め方
03データ層のTS化
04関数のTS化
05型エラーを潰す
06DOMと型
07つくる - 丸ごとTS化完了
08自由移行
09完成と次のステップ

JavaScriptをTypeScriptへ移行する

完成と次のステップ

54 レッスンで手に入ったもの

お疲れさまでした。最初のレッスンで見た、止まらないまま間違った答えを出すコードを覚えているでしょうか。あれを型で捕まえるところから始めて、いまは JavaScript のプロジェクトを 1 本まるごと移せるところまで来ました。

通ってきた道は 7 つです。型注釈、基本の型、関数の型、interface、union と型ガード、ジェネリクス、そして移行です。

持ち帰る資産

覚えた文法より、書いたコードのほうが役に立ちます。手元に残っているのは次の 3 つです。

TypeScript

interface Work { id: number; title: string; published: boolean; } interface Profile { name: string; nickname: string | null; workCount: number; } type LoadStatus = "loading" | "success" | "error";

Work と Profile はポートフォリオのデータの形です。LoadStatus は通信の状態です。この 3 つは次のコースでもそのまま使います。捨てずに置いておいてください。

もう 1 つ、文法ではないものも持ち帰っています。型を付けてから中身を直す、という手順です。第1章のつくる回で 1 関数に対してやり、第7章でプロジェクト全体に対してやりました。規模が変わっても順番は変わりません。

このコースで扱わなかったこと

正直に書いておきます。TypeScript には、ここで触れていない機能がまだあります。Partial や Pick といった型を加工する仕組み、keyof と typeof を型のほうで使う書き方、宣言ファイルの読み書き、tsconfig.json の細かい項目などです。

どれも、必要になったときに調べれば足ります。いま無いと困るものではありません。基礎の型が読めるようになっていれば、公式ドキュメントのページが読めるはずです。

次に進む先

まっすぐ進むなら、React実践です。TypeScript で React を書くコースで、このコースの Work と Profile と LoadStatus をそのまま持ち込みます。

最初に出てくるのが、コンポーネントの props に型を付ける話です。やることは第4章と同じで、オブジェクトの形を interface で決めて、受け取る側に付けるだけです。次に状態管理で LoadStatus の union が出てきます。第43レッスンで読んだ Promise<T> は、通信のところで実物として出てきます。

つまりこの章までの内容が、そのまま次の前提になります。

続けるための一手

コースを終えた直後にいちばん効くのは、自分のコードを 1 本移すことです。前のレッスンで選んだファイル以外に、もう 1 本選んでみてください。

型が付いたコードは、半年後の自分が読めます。書いた本人が忘れても、形だけは残っているからです。ここまで手を動かしてきた理由は、結局そこにあります。

それでは、次のコースで会いましょう。

このレッスンに出てくる用語

意味があいまいなまま進んだ語は、ここから読み直せます。

  • JavaScriptWeb で動的な振る舞いを担う言語
  • 型注釈変数や引数に : 型 で宣言する書式
  • 関数処理に名前を付けて再利用できる単位
  • ジェネリクス<String> のように型を指定する仕組み
  • TypeScript静的型を加えた JavaScript の上位互換
  • コンポーネントUI を構成する再利用可能な部品
  • オブジェクトキーと値のペアで構造を作るデータ
生田 陸人
監修生田 陸人
ゆめさくエンジニア / 現役ソフトウェアエンジニア監修者プロフィールを見る →
編集 ゆめさく編集部·公開 2026/08/06

関連レッスン

  • 自由移行

    過去に自分で書いたコードを1本選び、TypeScriptへ移行します。

  • つくる - 丸ごとTS化完了

    React入門の関数とデータ層の移行を終え、プロジェクト全体をTypeScriptに載せ替えます。

  • DOMと型

    フォーム取得のコードに型を付け、DOM操作の型を扱えるようになります。

  • 型エラーを潰す

    移行で出た型エラーを全部読み解いて解消し、エラーメッセージを自力で直せるようになります。

分からないところは Tap (AI先生) に質問できます

24 時間いつでも、あなたのレベルに合わせて日本語で答えます。