Curated Tech Reading Map

次に読むべき技術書が見つかるサイト

ブログ記事

TypeScriptの型を『制約』から『安全装置』に変える:プログラミングTypeScript

著者: DevBookPath 編集部公開日: 更新日:

TypeScript を書いているのに、型エラーを消すためだけに any を使い続けているなら、それは型システムを活かしているのではなくオフにしているだけだ。型が「コンパイラとのいたちごっこ」に感じるなら、見方を変える必要がある。

元 Facebook のリードエンジニアである Boris Cherny が書いた『プログラミングTypeScript』は、TypeScript の型システムをコンパイラの動作原理から解き明かした一冊だ。基本的な型注釈から条件型・変性の理論、既存 JavaScript コードベースの段階的な移行手順まで、実務で問われる論点を一貫した設計思想でつないでいる。JavaScript の経験を持ち、堅牢なフロントエンド設計に踏み込みたい開発者を想定して書かれており、完全な初学者向けではない点は注意が必要だ。

1. any を捨てて unknown へ——型安全の設計姿勢

本書が一貫して訴えるのは、コンパイル時にバグを排除し切る「型安全」の追求だ。any は型チェッカーの恩恵をまるごと放棄する選択であり、著者はその危険性を具体的に示しながら代替手段を提示する。

推奨されるのが unknown 型だ。すべての値を受け入れながらも、型が確定するまで操作を制限する。実行時の型判定と組み合わせる「ユーザー定義型ガード」によって、絞り込みをエディターの補完機能と安全に連携させられる。「コントロールフロー解析」を活用してコード上で型を段階的に絞り込む手法もあわせて解説されており、any への依存から抜け出す道筋が論理的に示されている。

flowchart LR
    subgraph NG["❌ any(型チェックを放棄)"]
        A1["any\nなんでも許可\nランタイムエラーが残る"]
    end
    subgraph OK["✅ unknown(安全な未知型)"]
        U1["unknown\nすべての値を受け入れる"]
        U1 -->|"型ガードで絞り込む"| U2["string / number 等\n操作が許可される"]
    end
    style NG fill:#fce8e8,stroke:#e53935
    style OK fill:#e8f8e8,stroke:#4caf50

2. 変性とジェネリクス——直感に反する挙動を集合論で解く

「共変・反変」という概念は、他言語の経験者でも直感に反する挙動を引き起こしがちで、TypeScript でつまずく箇所の一つだ。本書はこれを集合論(スーパータイプとサブタイプの関係)に立脚して説明しており、ルールの導出過程が明快に示されている。

なぜ関数のパラメータが反変でなければ安全性が壊れるのか、tsconfig.jsonstrictFunctionTypes を有効にすると何が変わるのか——実際にランタイムエラーが生じる具体例を交えながら解説する。条件型(Conditional Types)や infer キーワードを使った高度な型演算も同じ理論的基盤の延長として位置づけられており、読み終えるころには「なぜそう書くのか」が理解できている。

3. enum を使うな、移行は5段階で——著者の率直な意見

仕様を中立的に並べるだけの技術書と違い、本書には著者の明確な推奨と批判が随所に出てくる。TypeScript 独自の enum(列挙型)については、実行時に余分なコードが生成されること、型の安全性に欠陥があることを具体的に指摘し、代わりにオブジェクト型や文字列リテラルのユニオン型を使うよう明示する。この「使うな」というスタンスは、実務での意思決定に直結する。

また、既存の大規模 JavaScript プロジェクトを TypeScript へ移行する手順として第 11 章で提示される 5 段階の実務的なプロセス(TSC 設定の導入・JSDoc の活用・拡張子の段階的な変更・厳格オプションの引き上げ)は、テックリードが現場の計画を立てる際のそのまま使える指針になる。日本語版の付録では、原書刊行後に非推奨となった TSLint に代わり、ESLint の設定と AST を操作したカスタム静的解析ルールの書き方が追加されており、チームのコード品質を均一化したい層にとって実用性の高いアップデートだ。

4. どんな詰まりに効くか

「JavaScript で組んだ画面は動くのに、リファクタリングのたびに実行するまで気づけないエラーが出る」——本書が最も効くのはこの詰まりだ。動的型付けでは、引数の形が変わったことも、プロパティ名の打ち間違いも、実行して初めて表面化する。本書の「型駆動開発」を通すと、これらがコンパイル時に赤線として現れ、リファクタリングは「動かして確かめる」から「型が通れば安全」へ変わる。もう一つは、型エラーを消すために any を書き続けた結果、補完も効かなくなっている状況だ。§1 の絞り込みの作法がそのまま処方箋になる。

5. 誰に効き、誰には早すぎるか

向いている人

  • JavaScript で Web アプリを作った経験があり、規模が増えるにつれて型のなさによる不安を感じ始めている
  • Java や C# の静的型システムに慣れていて、TypeScript の構造的型付けや実行時に型が消える挙動に戸惑っている
  • 既存の JavaScript 資産を止めずに TypeScript へ移行する手順を探しているテックリード

向いていない人

  • プログラミングや JavaScript の基礎をこれから学ぶ人。本書は call・apply・bind やイテレーター、非同期のイベントループを既知として進むため、先に『独習JavaScript 新版』のような JS の土台固めから入る方が近道になる
  • React や Vue で動くアプリを組み上げるチュートリアルを期待する人。本書は型システムそのものに焦点を絞り、フレームワークでの長編実装は扱わない

6. 2020年刊、今読んでも古びない部分

本書が対象とするのは原著が TypeScript 3.4、日本語版が 3.8 までの仕様だ。バージョンは現在 5 系まで進み、細かな型機能は増えている。それでも本書の軸——型安全という設計姿勢、変性を集合論で捉える見方、any を避けて unknown と型ガードで絞り込む作法、第 11 章の段階的移行の手順——は言語の版に依存しない考え方で、古びていない。前提が変わったのはツール周りで、非推奨になった TSLint は日本語版付録で ESLint 補完へ差し替え済みだ。個別の新機能や最新ツールは公式ドキュメントで補い、本書は判断の骨格を得るために読む、という位置づけが今の使い方に合う。

7. 読んだ次に開く本と最初の一歩

本書で型システムの骨格を掴んだら、関心の方向で次が分かれる。型の設計をさらに深めたいなら、日本語で前提を丁寧に埋める『プロを目指す人のためのTypeScript入門』か、型を武器にする83の判断基準を示す『Effective TypeScript 第2版』へ。学んだ型を実際の UI で動かしたいなら、手を動かして学ぶ『Reactハンズオンラーニング 第2版』や『Vue 3 フロントエンド開発の教科書』が受け皿になる。実務での最初の一歩は、担当プロジェクトの tsconfig.json の厳格オプションを一段上げ、そこで現れた any を一つ、unknown と型ガードに書き換えてみることだ。本書の作法は、自分のコードで試して初めて定着する。

筆者の体験から

入門書で一通り書けるようになった後、ジェネリクスを使った共通処理を書こうとして手が止まった時期があった。toBの管理画面で汎用的なテーブル用フックを作ろうとしたところ、コールバックの型がうまく絞り込めず、結局anyだらけになったのがきっかけで本書に頼った。

変性の説明とstrictFunctionTypesを読んで以来、関数の引数が反変であるべき理由が腹落ちした。複数画面で使い回すフックのソート比較関数で、渡す側の型エラーがどうしても消えずanyで黙らせていた箇所を、比較関数の引数型をより広い型で受けるよう書き直すだけで解決できたのは、この理屈を理解して初めて分かったことだ。anyを剥がすと、後日別の担当者が引数を間違えて渡した際にコンパイル時点で赤線が出るようになり、以前なら実行時まで気づけなかったバグを未然に防げた。

一方で前提知識のハードルは正直きつい。call・apply・bindやイベントループが曖昧なまま読み始めると、理論パートで置いていかれる。

DevBookPath のマップで確認する

この本の学習パス上の位置づけ・前後の読書順は、DevBookPath のグラフで辿れます。

👉 フロントエンドの地図を見る

📖 Amazon で購入する


本記事のリンクには Amazon アソシエイト等の広告が含まれる場合があります。リンク経由の購入で運営者に紹介料が支払われることがあります。

この記事を共有

この地図を共有