TypeScript初心者向け完全ガイド

# TypeScript初心者向け完全ガイド
## JavaScriptのスーパーセットから
## モダン開発の標準へ

Transcript

1. TypeScript 初心者向け完全ガイド JavaScript のスーパーセットから モダン開発の標準へ
2. パート1 ：TypeScript の「なぜ」を理解する
3. 1. TypeScript とは？ Microsoftが開発・提供するオープンソース言語 JavaScriptの**「スーパーセット（上位互換）」** 重要な原則： 有効なJavaScriptコードは、すべて有効なTypeScriptコード 既存のJSプロジェクトに段階的に導入可能 JSの広大なエコシステム（ライブラリ等）をそのまま使える
4. 2. なぜTypeScript が生まれたか？ JavaScript のスケーリング問題 元々JSは小規模なスクリプト用に設計された「動的型付け言語」 大規模・複雑なアプリ開発では、柔軟性が弱点になる （実行時エラー、保守性の低下） TypeScript の目的 JSに「静的型システム」を追加 大規模開発でも堅牢で保守性の高いコードを実現する
5. 3. 動的型付け vs 静的型付け 動的型付け (JavaScript) 変数の型は、 実行時（ランタイム）にチェックされる let age = 25; age = "twenty-five"; // JSではエラーにならない 柔軟だが、バグが実行されるまで潜在する 静的型付け (TypeScript) 変数の型は、 開発時（コンパイル時）にチェックされる let age: number = 25; age = "twenty-five"; // TSでは即エラー エラーを早期に発見し、コードの信頼性を高める
6. 4. 静的型付けの絶大なメリット 1. バグの早期発見 タイプミス、関数への誤ったデータ渡し、 undefined エラーなど。 実行前にエディタがエラーを教えてくれる。 2. コードがドキュメントになる 型定義自体が「この変数や関数が何を意図しているか」を明確に示す。 3. 強力なエディタサポート (IntelliSense) VS Codeなどで、正確なコード補完やリファクタリングが可能になる。
7. 5. トランスパイルとは？ (.ts → .js) ブラウザやNode.js はTS コード(.ts) を直接実行できない トランスパイル TSコード( .ts )を、ブラウザが理解できる標準的なJSコード( .js )に変換する プロセス tsc (TypeScript Compiler) というコマンドが実行する ポイント 型情報は、開発者を助けるために 開発時にのみ存在する 型情報は、トランスパイル後の .js ファイルからは 消去される
8. パート2 ：TypeScript を実際に使ってみる
9. 6. 開発環境のセットアップ 1. Node.js と npm のインストール npm (Node Package Manager) を使ってTSをインストールするため Node.js公式サイトからLTS（推奨版）をインストール 2. TypeScript コンパイラ (tsc) のインストール プロジェクト毎（ローカル）にインストールするのが現代のベストプラクテ ィス npm install typescript --save-dev 3. コードエディタ：VS Code Visual Studio Code の使用を強く推奨 TSと同じMicrosoft製で、最高クラスのTSサポートが組み込まれている
10. 7. Hello, TypeScript! ( 作成・実行) 1. プロジェクト初期化 npm init -y 2. TS インストール npm install typescript --save-dev 3. TS ファイル作成 ( index.ts ) const message: string = "Hello, TypeScript!"; console.log(message); 4. コンパイル (TS → JS) npx tsc index.ts → index.js ファイルが生成される 5. 実行 (JS ファイルを実行)
11. 8. tsconfig.json 入門 TypeScript プロジェクトの「設定ファイル」 役割： i. そのディレクトリがTSプロジェクトのルートであることを示す ii. コンパイラオプション（ルール）を指定する iii. コンパイル対象のファイルを指定する 生成方法： npx tsc --init コマンドで、デフォルト設定のファイルを自動生成できる
12. 9. 必須 tsconfig.json オプション オプション 説明 一般的な値 target 生成するJSのバージョン "ES2020" module モジュールシステム "CommonJS" rootDir TSソースファイルの場所 "./src" outDir JS出力先の場所 "./dist" strict 厳格な型チェックを有効化 true ( 強く推奨) esModuleInterop モジュール間の互換性を向上 true include コンパイル対象 ["src/**/*"]
13. パート3 ：TypeScript の型システム
14. 10. 基本の型 ( プリミティブ型) JavaScriptの基本データ型に対応する型が用意されています。 string : 文字列 (例: "Hello" , 'world' ) number : 数値 (例: 42 , 3.14 ) boolean : 真偽値 (例: true , false ) null : 値が存在しないことを示す undefined : 値がまだ代入されていない bigint , symbol 構文： let 変数名: 型 = 値; let myName: string = "Alice"; let myAge: number = 30; let isLoggedIn: boolean = false;
15. 11. データの構造化 ( 配列・オブジェクト) 配列 (Arrays) 書き方は2種類。前者が一般的。 let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3]; // ジェネリック構文 オブジェクト (Objects) インラインで「形」を定義できる let person: { name: string; age: number; } = { name: "Bob", age: 42 };
16. 12. 型注釈 vs 型推論 型注釈 (Annotation) 開発者が「この変数はこの型です」と明示的に指定する方法 let message: string = "This is a message"; 型推論 (Inference) TSが初期値から「この変数はこの型だろう」と自動で推論する機能 let message = "This is a message"; // messageはstring型と推論 ベストプラクティス 初期値から型が明らかな場合は「型推論」に任せ、コードを簡潔に保つ
17. 13. カスタム型①：type エイリアス type キーワードで、型に「別名」を付ける機能 同じ「形」を何度も再利用できる オブジェクト、プリミティブ、ユニオン型など、 あらゆる型に使える // オブジェクトの型エイリアス type Point = { x: number; y: number; }; let coordinates: Point = { x: 10, y: 20 }; // ユニオン型のエイリアス type UserID = string | number; let myId: UserID = "user-123";
18. 14. カスタム型②：interface オブジェクトの「形」や「契約（contract）」を定義するもう一つの方法 主にオブジェクトの構造定義に特化している // Personという名前のインターフェースを定義 interface Person { name: string; age: number; } // 定義したインターフェースを使用 let user: Person = { name: "Carol", age: 25 };
19. 15. type vs interface ( 使い分け) これは初心者が最も混乱しやすい点の一つです。 interface を使う場面: **オブジェクトの「形」**を定義するとき extends キーワードで型を「 継承（拡張）」したいとき type を使う場面: ユニオン型 ( string | number ) を定義するとき プリミティブ型 ( type Name = string; ) に別名を付けるとき 結論： プロジェクト内でルールを一貫させることが最も重要です。 迷ったら、オブジェクトには interface 、それ以外には type と覚えるのも良 いでしょう。
20. 16. 関数の型付け ( 基本) 関数の**「入力（パラメータ）」 と「出力（戻り値）」**の型を定義 バグを防ぎ、関数の意図を明確にする // パラメータ a, b は number型 // 戻り値も ( ): number 型と定義 function add(a: number, b: number): number { return a + b; } // 何も値を返さない場合、戻り値の型は `void` function logMessage(message: string): void { console.log(message); }
21. 17. 関数の型付け ( 応用) オプショナルパラメータ ( ? ) パラメータ名の後に ? を付けると、そのパラメータは省略可能になる function greet(name: string, greeting?: string) { // ... } greet("Alice"); // OK greet("Bob", "Good morning"); // OK デフォルトパラメータ パラメータに初期値を設定（型は自動で推論される） function greetWithDefault(name: string, greeting = "Hello") { // greeting は string型と推論される }
22. 18. ユニオン型 (Union Type) | **「または」**を意味する型 ある変数が、複数の型のうちのいずれか一つであることを許容 パイプ記号 | を使って表現する let id: string | number; id = 101; // OK id = "user-101"; // OK // id = true; // エラー: boolean型は許容されていない 異なる型の入力を受け付ける関数などで非常に便利
23. 19. 型の絞り込み (Type Narrowing) ユニオン型の変数が「今、どの型であるか」を特定する処理 typeof 演算子を使った**型ガード (Type Guard)**が最も一般的 function printId(id: string | number) { if (typeof id === "string") { // このifブロックの中では、TSは`id`がstring型だと知っている console.log(id.toUpperCase()); // 安全にstringのメソッドが使える } else { // このelseブロックの中では、TSは`id`がnumber型だと知っている console.log(id); } }
24. パート4 ：よりスマートなコードを書く
25. 20. ジェネリクス：問題提起 問題点： 型が違うだけで、ロジックが全く同じ関数を複数書く必要がある 例：「配列の最初の要素を返す」関数 function getFirstNumber(arr: number[]): number | undefined { return arr[0]; } function getFirstString(arr: string[]): string | undefined { return arr[0]; } any 型を使えば一つにまとめられるが、 型安全性が失われ、TSのメリットがなく なる
26. 21. ジェネリクス <T> ：解決策 型を「 パラメータ（変数）」のように扱う仕組み T （Typeの略）という名前が慣習的に使われる 柔軟性（どんな型でも扱える）と 型安全性（型チェックが効く）を両立できる // Tは「呼び出される時に決まる型」のためのプレースホルダー function getFirstElement<T>(arr: T[]): T | undefined { return arr[0]; } // 呼び出すと、T が number に決まる const numbers = [1, 2, 3]; const firstNum = getFirstElement(numbers); // firstNum は number型 // 呼び出すと、T が string に決まる const strings = ["a", "b", "c"]; const firstStr = getFirstElement(strings); // firstStr は string型
27. まとめ TypeScriptはJSの スーパーセットで、 静的型付けを提供する バグを**開発の早期段階（実行前）**に発見できる VS Codeとの連携で、**生産性（コード補完など）**が劇的に向上する type や interface で、再利用可能な「型（形）」を定義できる Generics により、 型安全とコードの再利用性を両立できる
28. 次のステップ エコシステムを探求する ここで学んだスキルは、React, Angular, Vue, Node.js (NestJS) など、あら ゆるモダンな開発で即戦力となります。 まず、小さなプロジェクトを始めてみましょう！ 実際にコードを書き、エラーを解決する経験が、知識をスキルに変える最良 の方法です。 TypeScript の旅は始まったばかりです！