ジェネリクスの概要と利用ケース
はじめに
本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含めアウトプットしています。
書籍に記載されている内容を順序立ててまとめるというよりは、整理しておきたい周辺の知識と深ぼった内容を雑多に書いています。
ジェネリクス
ジェネリクスは、型の定義を使用時に動的に決まるため、いろいろな型の値を受け入れられる機能を作るときに使います。
型のエラーを防ぎ再利用可能なコードを作成することができます。
定義方法
ジェネリクスは、<T>のような形式で定義されます。ここでTは"Type"を意味し、具体的な型ではなく、あらゆる型を表します。
下記はジェネリクスを使った関数の定義です。
function identity<T>(arg: T): T { return arg; }
この関数は、型Tを引数argと戻り値の型として使用しています。
関数を呼び出すときに、具体的な型（例えばstringやnumber）を指定します。
let output = identity<string>("myString");
ジェネリクスの特徴
ジェネリクスの最大の特徴は、型安全性を保ちつつ、柔軟性を持たせることができることでメリットでもあります。
ジェネリクスを使わない場合、特定の関数やクラスが扱う型は固定されてしまいます。
ジェネリクスを使うと、関数やクラスの一部の型を汎用的に扱うことができます。
ジェネリクスの実際の使用例
ジェネリクスの最も一般的な使用例は、配列を扱う関数やクラスです。
下記は配列の要素を逆順にする関数です。
この関数は、どのような型の配列でも動作する必要があります。
ジェネリクスを使わない場合、この関数は次のようになります。
function reverseArray(array: any[]): any[] { return array.reverse(); }
この関数は任意の型の配列を受け取り、任意の型の配列を返すため、全ての型を許容するため安全とはいえません。
ジェネリクスを使うと、次のように型安全な関数を作ることができます。
function reverseArray<T>(array: T[]): T[] { return array.reverse(); }
上記の関数は、どんな型Tの配列でも受け取ることができ、逆順にした配列を返します。
関数を使うときには、具体的な型を指定することで、型安全性を保つことができます。
下記のように呼び出します。
let numbers = reverseArray<number>([1, 2, 3, 4, 5]); let strings = reverseArray<string>(["a", "b", "c", "d", "e"]);
ジェネリクスは、異なる型に対して同一の操作を適用する一般的なロジックを記述する際に非常に有用です。
また、ジェネリクスは型エラーを防ぎ、コードの可読性と保守性を向上させる効果もあります。
開発者がジェネリクスの重要性と効果を理解し活用することで、効率的で安全なコードを書くことが可能になりますので使えるようになっておきましょう。
参考
続く…
コメント
本記事の内容は以上になります！
書籍の続きのアウトプットも随時更新したいと思います。
プログラミングスクールのご紹介 (卒業生より)
お世話になったプログラミングスクールであるRUNTEQです♪
こちらのリンクを経由すると１万円引きになります。
RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。
もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。
