Webですぐ読めるTypeScript解説書「TypeScript Deep Dive」
オリジナルの「TypeScript Deep Dive」はTypeScriptのエキスパートであり、Microsoft MVP for TypeScriptを獲得しているBasarat氏によって書かれたTypeScriptの解説書です。GitHubでは1万6000個のスターを獲得しており、世界的に品質を認められた内容です。今回紹介する「TypeScript Deep Dive 日本語版」は、オリジナルをフォークし、忠実に日本語化したものです。初心者が日本語で学習するうえで最適な資料のひとつといえます。次に「TypeScript Deep Dive 日本語版」を使って学べることや、学習方法について紹介します。
「TypeScript Deep Dive 日本語版」で学べること
「TypeScript Deep Dive 日本語版」では次のことを学ぶことができます。
JavaScriptの注意点
TypeScriptはJavaScriptの拡張であるため、JavaScriptについても知っておく必要があります。真偽値のコンテキストでtrueと扱われる値の種類や、thisの動作といったことです。「JavaScript」の章では、これらのJavaScriptの注意するべき動作について知ることができます。
モダンなJavaScriptの機能
TypeScriptには新しい世代のJavaScriptの機能が組み込まれています。クラス構文や、アロー関数、async/awaitといった機能です。「モダンなJavaScriptの機能」の章では、これらの機能ひとつひとつについて、詳しく知ることができます。
TypeScriptと型
「なぜTypeScriptを使うのか？」の章ではTypeScriptとは何か、なぜTypeScriptを使うのか、ということを理解することができます。また、TypeScriptで使える型の種類について「TypeScriptの型システム」の章で知ることができます。
TypeScriptのコーディング規約
「スタイルガイド（コーディング規約）」の章では、TypeScriptを書くうえで、一般的に推奨されている書き方を知ることができます。nullとundefinedの使い分けなど、実際の開発で迷いがちな点について解説されています。
「TypeScript Deep Dive 日本語版」で効率的に学習を進めるには？
以下の順序で読むことをおすすめします。
- まずは、なぜTypeScriptを使うのか？ について読んでください。TypeScriptとは何か、なぜ便利なのか、ということを理解できます。
- 次にJavaScriptの章を読んでください。TypeScriptを使う上でも、JavaScriptの動作を理解しておく必要があります。また単なるJavaScriptの読み物としても面白い内容です。
- 次にモダンなJavaScriptの機能のページを読んでください。TypeScriptの大きなメリットのひとつは、モダンなJavaScriptの機能を使って、簡潔で分かりやすいコードを書けることです。クラス、アロー関数、letとconstの違いなど、重要な機能について、一通り、簡単に学ぶことができます。
-
ここから本格的にTypeScriptの機能を学びます。まずはTypeScript入門＆環境構築のページを参照して、Node.js、TypeScriptおよびVSCodeをローカルにインストールしてください。TypeScriptをインストールすれば、
`tsc`コマンドを打つだけで、TypeScriptをJavaScriptにコンパイルすることができます。 - TypeScriptの型システムの章のうち、まずは、インターフェース、Enum、関数の型、Type Assertion（型アサーション）、型ガード、リテラル型、readonly、型推論、型の互換性、判別可能なUnion型のページを読んでください。これらについて実際にTypeScriptを書いて、試してみましょう。これらを理解したら、他のページも読んでみてください。
- TypeScriptには、たくさんのコンパイルオプションがあります。「TypeScriptコンパイラが、どれくらい厳密に型をチェックするか」ということを細かく設定できます。tsconfig.jsonページにその内容が書かれていますが、全てを覚える必要はありません。コンパイル対象ファイルの設定、noImplicitAny、strictNullChecksのページを読んでみてください。
- 最後に、スタイルガイド（コーディング規約）のページを読んでみてください。
ここまで来たら、モダンなJavaScriptとTypeScriptの基本について理解できたと言えます。ここからは、実際の開発プロジェクトに参加してコードを読んだり、何かを作ってみたりしながら、TypeScriptへの理解を広げていくと良いでしょう。
「TypeScript Deep Dive 日本語版」へのコントリビューション
「TypeScript Deep Dive 日本語版」の翻訳は有志によって行われています。もし翻訳がおかしかったり、改善できる箇所に気づいたりしたら、リポジトリにプルリクエストを送っていただけると大変うれしく存じます。どのような修正でも歓迎いたします。
TypeScriptの基本を学んだ後の学習方法
近年のWebフロントエンド開発では、TypeScript以外にも学習しておくと良いものがあります。
Webpack（モジュールバンドラ）
一般に開発プロジェクトでは、ソースコードのファイルを機能単位に分割して開発します。これにより、複数人が並行して開発できます。しかし、分割された状態のファイルでは、ブラウザで実行するときに不便です。ブラウザで実行する際に、依存関係を解決しながら各ファイルを順番にダウンロードしなければならないからです。この問題を解決する一般的なツールが「Webpack」です。Webpackではコードを最適化（ミニファイ）しつつ、複数のファイルに分かれたコードをひとつのファイルにまとめることができます。また、本番と開発用の自動ビルド設定をすることで、開発の流れをスムーズにできます。
フロントエンドフレームワーク
近年の開発では、フロントエンドのフレームワークを用いることが一般的です。ReactまたはVueの使い方を学ぶと良いでしょう。
まとめ
「TypeScript Deep Dive 日本語版」は世界的に評価の高いTypeScriptの解説書です。これをうまく活用することで、短期間で効率よくTypeScriptの基本をつかむことができます。TypeScriptはJavaScriptの拡張であるため、JavaScriptについて、しっかり理解することが重要ですが、「TypeScript Deep Dive」では、その点がしっかりとカバーされています。TypeScriptの採用に二の足を踏んでいるプロジェクトでは、学習コストについて懸念しているケースが多いと感じています。基本的にJavaScriptの理解が重要であるため、TypeScript自体について学ぶことはそれほど多くありません。また、JavaScriptのコードはTypeScriptのコードでもあるため、徐々に移行することができます。今後のプロジェクトでは、ぜひTypeScriptを採用することを検討してみてください。
