メインコンテンツまでスキップ

2026-01-13 チュートリアル大幅刷新など

2026年1月13日の更新内容をお届けします。

✨ ハイライト​

Vitestチュートリアルを新規追加​

テスティングフレームワークの解説が新しくなりました。近年人気が高まっているVitestのチュートリアルを新規追加しました。Vitestはビルドツール「Vite」との親和性が高く、TypeScriptプロジェクトでも設定なしで使い始められるのが魅力です。基本的なテストの書き方からコンポーネントテストまで、実践的な内容をカバーしています。（#1040 by @suin）

📄️ Vitestでテストを書こう

このチュートリアルでは、テストフレームワーク「Vitest」を使い、ユニットテストをTypeScriptで書くことを学びます。

📄️ Reactコンポーネントのテストを書こう

このチュートリアルでは、Vitestのコンポーネントテスト(component testing)機能を使って、Reactコンポーネントのテストを書くことを学びます。

「オブジェクトのスプレッド構文」解説を新規追加​

配列のスプレッド構文は以前から解説していましたが、オブジェクトのスプレッド構文が未紹介でした。今回、オブジェクトの作成・プロパティの上書き・コピー・マージ、そして分割代入と残余パターン（const { a, ...rest } = obj）まで網羅した解説ページを追加しました。浅いコピーの注意点など、実務で気をつけるべきポイントも押さえています。（#1051 by @suin）

📄️ オブジェクトのスプレッド構文「...」

JavaScriptのオブジェクトではスプレッド構文「...」を使うことで、プロパティを展開することができます。

interfaceとtypeの違いに「インデックス型への代入互換性」を追加​

「なぜかinterfaceで定義した型がRecord型に代入できない！」とハマった経験はありませんか？interfaceとtype aliasにはインデックス型への代入互換性に違いがあります。この違いを理解していないと思わぬ型エラーに遭遇することがあるため、比較表への追加と詳細な解説セクションを設けました。回避策（スプレッド構文、Pick、明示的なインデックス型の追加）も紹介しています。（#1049 by @suin）

📄️ interfaceとtypeの違い

interfaceでの宣言とtype aliasによる宣言の違い

ESLintチュートリアルを最新化​

ESLint v9で導入されたflat config（eslint.config.ts）に対応したチュートリアルに刷新しました。TypeScriptで設定ファイルを書けるようになり、IDEの補完も効くようになっています。また、長年メンテナンスされていないAirbnbのshared configに代わり、@eslint/jsとtypescript-eslintを使った現代的な構成を紹介しています。型情報を使ったルール（switch-exhaustiveness-checkなど）の設定方法も解説しています。（#1045 by @suin）

📄️ ESLintでコーディング規約を自動化しよう

本章では、ESLintイーエスリントを使って、TypeScriptをチェックするためのノウハウをチュートリアル形式で学びます。

プロジェクト参照チュートリアルをnpmに移行​

本ドキュメント全体でnpmをデフォルトのパッケージマネージャーとして使用する方針に合わせ、プロジェクト参照のチュートリアルをYarnからnpmに移行しました。Node.js v24以降の環境を前提に、ワークスペース機能やパッケージ間の依存関係の設定方法を最新化しています。（#1064 by @suin）

📄️ プロジェクト参照

TypeScriptのプロジェクト参照(project references)は、大規模なTypeScriptプログラムを効率的に管理するための強力な機能です。この機能を使用することで、開発者は大きなコードベースを小さな部分に分割し、より効率的に作業を進めることができます。

PrettierチュートリアルにEditorConfigの説明を追加​

Prettierを使うプロジェクトでは、EditorConfigと組み合わせて使うことが一般的です。EditorConfigはエディター間で共通のコードスタイル（インデント幅、改行コードなど）を設定できるツールで、Prettierと役割分担することでより堅牢なコードフォーマット環境を構築できます。今回、EditorConfigの基本的な使い方とPrettierとの連携方法を解説するセクションを追加しました。（#570 by @tats-u）

📄️ Prettierでコード整形を自動化しよう

このチュートリアルでは、コードフォーマッターの「Prettier」を使いTypeScriptのコードフォーマットを自動化することを学びます。

「AIに質問する」機能をWeb検索ベースに変更​

ナビゲーションバーの「AIに質問する」機能がパワーアップしました。従来は事前生成したJSONを知識として使用していましたが、Web検索を活用する方式に変更しました。これにより、存在しないURLを提示してしまうハルシネーションを防ぎ、常に最新のコンテンツを参照できるようになります。また、ChatGPTに加えてClaudeも選択できるようになり、お好みのAIアシスタントで本書の内容について質問できます。（#1050 by @suin）

修正・改善​

👥 コントリビューター​

今回のアップデートに貢献してくださった方々です。ありがとうございます！

いつもサバイバルTypeScriptをご利用いただきありがとうございます。
ご意見・ご要望は GitHub Issues までお寄せください。

  • 質問する ─ 読んでも分からなかったこと、TypeScriptで分からないこと、お気軽にGitHubまで🙂
  • 問題を報告する ─ 文章やサンプルコードなどの誤植はお知らせください。