ジェネリクス
ジェネリクスを使って再利用可能なコンポーネントを作成する方法を学びます
「ジェネリクス」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
ジェネリクス入門
ジェネリクス
次のレッスンへようこそ！このレッスンでは、再利用可能で型安全なコンポーネントを作成できる TypeScript の強力な機能、ジェネリクスについて学びます。さっそく始めましょう！
ジェネリクスとは
ジェネリクスとは
ジェネリクスを使うと、任意の型で動作する再利用可能なコードを記述できます。ジェネリクスは、使用時に指定できる型のプレースホルダーとして機能します。
例： ジェネリック関数：
課題： 引数を受け取り、変更せずにそのまま返すジェネリック関数を作成してください。
function identity<T>(value: T): T {
return value;
}
console.log(identity<string>("Hello"));
// Output: Hello
console.log(identity<number>(42));
// Output: 42
ジェネリクスを使用する理由
ジェネリクスを使用する理由
ジェネリクスを使うと、次のことができます：
- 再利用可能なコードを書く： 関数やクラスを異なる型で使用できます。
- 型安全性を確保する： 柔軟性を損なわずに特定の型を強制できます。
- 冗長性を減らす： 異なる型ごとに同じ関数やクラスの別バージョンを書く必要がなくなります。
ヒント： より柔軟で保守しやすいコードを書くには、ジェネリクスを使用してください。
ジェネリック関数
ジェネリック関数
ジェネリクスを使って柔軟な関数を作成できます。例：
課題： 2つのオブジェクトをマージして結果を返すジェネリック関数を作成してください。
function merge<T, U>(obj1: T, obj2: U): T & U {
return { ...obj1, ...obj2 };
}
let merged = merge({ name: "Alice" }, { age: 25 });
console.log(merged);
// Output: { name: "Alice", age: 25 }
ジェネリッククラス
ジェネリッククラス
クラスでジェネリクスを使用すると、異なる型で再利用できるようになります。例：
class Box<T> {
private contents: T;
constructor(contents: T) {
this.contents = contents;
}
getContents(): T {
return this.contents;
}
}
let stringBox = new Box<string>("Hello");
console.log(stringBox.getContents());
// Output: Hello
let numberBox = new Box<number>(42);
console.log(numberBox.getContents());
// Output: 42
ジェネリックインターフェース
ジェネリックインターフェース
インターフェースでもジェネリクスを使用して、異なる型に対する構造を強制できます。例：
課題： ジェネリックインターフェースを定義し、それを実装するオブジェクトを作成してください。
interface Pair<T, U> {
first: T;
second: U;
}
let coordinates: Pair<number, number> = { first: 10, second: 20 };
console.log(coordinates);
// Output: { first: 10, second: 20 }
ジェネリック制約
ジェネリック制約
ジェネリクスに制約を追加すると、特定の型でのみ動作するようにできます。例：
function printLength<T extends { length: number }>(item: T): void {
console.log(`Length: ${item.length}`);
}
printLength("Hello");
// Output: Length: 5
printLength([1, 2, 3]);
// Output: Length: 3
// printLength(42);
// Error: Argument of type 'number' is not assignable to parameter of type '{ length: number }'.
ジェネリックのデフォルト値
ジェネリックのデフォルト値
型が指定されない場合に使用するデフォルトの型を、ジェネリクスに指定できます。例：
課題： デフォルトの型を持つジェネリック関数を作成し、異なる型でテストしてください。
function wrap<T = string>(value: T): T[] {
return [value];
}
console.log(wrap("Hello")); // Output: ["Hello"]
console.log(wrap(42)); // Output: [42]
よくできました！
よくできました！
おめでとうございます！TypeScript でジェネリクスを使用して、再利用可能で型安全な関数、クラス、インターフェースを作成する方法を学びました。ジェネリクスは、柔軟でスケーラブルなコードを書くための強力なツールです。次のレッスンでは、マップ型や条件付き型などの高度な型について学びます。この調子でコーディングを続けましょう！
よくある質問
「ジェネリクス」レッスンは無料ですか？
はい。「ジェネリクス」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「ジェネリクス」で何を学びますか？
ジェネリクスを使って再利用可能なコンポーネントを作成する方法を学びます ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「ジェネリクス」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。