【手を動かして学ぶ】TypeScript完全入門 - エラーで学ぶ安全なコードの書き方

本コースにはAIの使用が含まれています。

このコースについて

「JavaScriptでコードを書いていると、実行するまでエラーに気づけない…」

「TypeScriptの公式ドキュメントを読んでも、ジェネリクスやユニオン型が難しくて挫折した…」

そんな悩みを持っていませんか？

このコースは、「実際にコードを書き、エラーを出し、それを修正する」というハンズオンを中心にしたTypeScript入門講座です。

ただ文法を暗記するのではなく、「なぜこの型が必要なのか？」「型がないとどうなるのか？」を体験しながら学ぶことで、実務で使える生きた知識を身につけます。

このコースで学べること

• TypeScriptの基本: プリミティブ型から関数、配列、オブジェクトの型定義

• 型推論の仕組み: TypeScriptがどのようにコードを理解しているかを読み解く力

• 柔軟な型定義: ユニオン型、リテラル型を使った「厳格かつ柔軟」な設計

• 安全なコード: null/undefinedの適切な扱いと、予期せぬエラーの防ぎ方

• 脱初心者: 難関と言われる「ジェネリクス」の直感的な理解とUtility Typesの活用

受講対象者

• JavaScriptの基礎（変数、関数、if文など）は理解しており、次のステップに進みたい方

• ReactやVueなどのフレームワークを学ぶ前に、TypeScriptの基礎を固めたい方

• 独学でTypeScriptを触ってみたが、any型ばかり使ってしまいメリットを感じられていない方

• 「型定義」の考え方を、手を動かしながら体系的に学びたい方

コースカリキュラム

本コースは、レッスンごとに「講義」と「演習」がセットになっています。

【序章】 TypeScriptの世界へようこそ

TypeScriptがなぜ現代の開発で必須とされているのかを理解します。

【第1章】 基本の型と関数の基礎

まずは「変数の型」を明示することから始めます。あえてエラーを出す演習を通じて、TSの守りの堅さを実感しましょう。

• Lesson 1-1: プリミティブ型（基本の3つ）

  • 内容: string, number, boolean の定義。

  • 演習: 変数 price: number に "100円" という文字列を代入して、赤い波線（エラー）が出るのを確認する。

• Lesson 1-2: 型推論（Type Inference）

  • 内容: let name = "Tanaka" と書けば、自動で string になる仕組み。

  • 演習: マウスカーソルを変数に乗せて、TSが型をどう認識しているか確認する（ホバー確認）。

• Lesson 1-3: 関数の型定義（引数と戻り値）

  • 内容: function add(a: number, b: number): number の書き方。

  • 演習: BMI計算関数を作る。身長と体重を引数に取り、数値を返す。文字列を渡してエラーを起こしてみる。

• Lesson 1-4: アロー関数での書き方

  • 内容: const add = (a: number, b: number): number => ...

  • 演習: Lesson 1-3の関数をアロー関数に書き換える。

【第2章】 データの構造化（オブジェクトと配列）

実務で最も使う「データの塊」を定義します。

• Lesson 2-1: 型エイリアス（Type Alias）

  • 内容: type User = { ... } を使って、独自の型を作る。

  • 演習: 「商品（Product）」型を定義する（名前、価格）。その型を使って変数を作る。

• Lesson 2-2: オプショナルプロパティ

  • 内容: データによって「あったりなかったりする」項目の扱い。

  • 演習: 商品型に description?: string を追加。説明文がある商品とない商品を両方作ってみる。

• Lesson 2-3: 配列の型（Array）

  • 内容: string[] や User[] の書き方。

  • 演習: 作成した「商品」を複数入れた cart: Product[]（買い物かご）配列を作る。

• Lesson 2-4: 読み取り専用（readonly）

  • 内容: IDなど、後から変更してはいけないデータ。

  • 演習: readonly id: number を定義し、後から id = 999 と書き換えてエラーを確認する。

【第3章】 柔軟な型定義（ユニオンとリテラル）

TypeScriptらしさが最も出る、柔軟かつ厳格な部分です。

• Lesson 3-1: ユニオン型（Union Types）

  • 内容: string | number （文字列 または 数値）。

  • 演習: IDとして「数値」も「文字列（UUIDなど）」も受け取れる関数を作る。

• Lesson 3-2: リテラル型（Literal Types）

  • 内容: 具体的な値しか許さない型。

  • 演習: 信号機の色（"red", "blue", "yellow"）以外を入れるとエラーになる変数を作る。

• Lesson 3-3: 型の絞り込み（Type Narrowing）

  • 内容: ユニオン型を使った時、中身がどっちなのか判定する (typeof を使用)。

  • 演習: input: string | number を受け取り、数値なら2倍、文字列なら文字数を返す関数を作る（if (typeof input === "string") を書かないとエラーになる体験）。

【第4章】 null/undefinedと例外処理

「データがない」状態を安全に扱う方法です。

• Lesson 4-1: null と undefined

  • 内容: JSの落とし穴であるこれらを、TSはどう扱うか（strictNullChecks）。

  • 演習: 引数が来るかわからない関数で、値がない場合の処理を書く。

• Lesson 4-2: オプショナルチェーン（Optional Chaining）

  • 内容: user?.profile?.bio のように、安全に深階層のデータにアクセスする記法。

  • 演習: ネストされたオブジェクトを作り、途中のデータがない場合にクラッシュせずに undefined が返ることを確認する。

【第5章】 応用と抽象化（ジェネリクス入門）

初心者の壁「ジェネリクス」を、難しい言葉を使わずに「箱」として教えます。

• Lesson 5-1: any型はなぜダメなのか

  • 内容: any を使うとTSの恩恵が消えることを理解する。

  • 演習: any を使って、存在しないメソッドを呼び出し、実行時エラーを起こしてみる。

• Lesson 5-2: ジェネリクス（Generics）基礎

  • 内容: 型を引数のように渡す概念。<T> を「何でも入るラベル付きの箱」と説明。

  • 演習: 渡した値を配列に入れて返すだけの関数 toArray<T>(value: T): T[] を作り、数値や文字列で試す。

• Lesson 5-3: よく使うUtility Types

  • 内容: 既存の型を加工する便利機能。

  • 演習: Pick（特定項目だけ選ぶ）と Omit（特定項目だけ除外）を使って、User型から「パスワードを含まないUser表示用型」を作る。

さあ、TypeScriptの世界へ踏み出しましょう