Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

ジェネリクスが解決する問題(駄文)

More than 1 year has passed since last update.

この投稿は「ジェネリクス - TypeScript技術書 by YYTypeScript」をくだけた言葉でリメイクしたものです。

ここに2つの文字列のどちらかを五分五分の確率で返す関数があるよ。

function chooseRandomlyString(v1: string, v2: string): string {
  return Math.random() <= 0.5 ? v1 : v2;
}

対戦結果とかおみくじとか、いろいろ使えて便利!

const winOrLose = chooseRandomlyString("勝ち", "負け");

数字にも対応したぞ↓

function chooseRandomlyNumber(v1: number, v2: number): number {
  return Math.random() <= 0.5 ? v1 : v2;
}
const num: number = chooseRandomlyNumber(1, 2);

URL版も作った! 広告のA/Bテストとかにも使えて便利だね。

function chooseRandomlyURL(v1: URL, v2: URL): URL {
  return Math.random() <= 0.5 ? v1 : v2;
}
const url: URL = chooseRandomlyURL(urlA, urlB);

ん……、気がついたら同じような関数、3つになったぞ……

function chooseRandomlyString(v1: string, v2: string): string {
  return Math.random() <= 0.5 ? v1 : v2;
}
function chooseRandomlyNumber(v1: number, v2: number): number {
  return Math.random() <= 0.5 ? v1 : v2;
}
function chooseRandomlyURL(v1: URL, v2: URL): URL {
  return Math.random() <= 0.5 ? v1 : v2;
}

リファクタリングだ!共通化だ!

function chooseRandomly(v1: any, v2: any): any {
  return Math.random() <= 0.5 ? v1 : v2;
}

anyにしたからどんな型も扱える。天才。

let str = chooseRandomly(0, 1);
str = str.toLowerCase();

あれ、なんか実行時にエラー出るんだけど……😱

TypeError: str.toLowerCase is not a function

string入れるところにnumber入れてたー😱

さっきまでは、ちゃんとstring型とかnumber型を書いて、コンパイラさんがチェックできるようにしてたからなあ。今までこんなバグらせ方、あり得なかったのになあ……。

もうany型だし、コンパイラさんもここはわからないよな……。しょうがないよな。。

・・・

コンパイラがチェックできるようにしようとすると、関数を量産しないといけない。。

かといって、関数を共通化しようとすると、コンパイラのチェックが効かなくなってしまう。。

悩ましい。

・・・

まてよ、

こんなふうに型も引数みたいに扱えたらいいのに!
そしたら、コンパイラさんも変なバグに気づいて教えてくれるのに!

function chooseRandomly<type>(v1: <type>, v2: <type>): <type> {
  return Math.random() <= 0.5 ? v1 : v2;
}
chooseRandomly<string>("勝ち", "負け");
chooseRandomly<number>(1, 2);
chooseRandomly<URL>(urlA, urlB);

TypeScriptにこんな機能あったらな──!

・・・

それがジェネリクスです。

ジェネリクスを使うと、型の安全性とコードの共通化を両立できます!

function chooseRandomly<T>(v1: T, v2: T): T {
  return Math.random() <= 0.5 ? v1 : v2;
}

さきほどのバグったコードも、コンパイルチェックで見つけられるようになります。

let str = chooseRandomly<string>(0, 1); // コンパイルエラー
str = str.toLowerCase();

コンパイラさん「Argument of type '0' is not assignable to parameter of type 'string'.」

めでたし、めでたし。

suin
Qiita 4位/TypeScript入門書執筆中/TypeScripterのための座談会「YYTypeScript」主催/『実践ドメイン駆動設計』書籍邦訳レビュア/分報Slack考案/YYPHP主催/CodeIQマガジン執筆/株式会社クラフトマンソフトウェア創設/Web自動テスト「ShouldBee」の開発/TypeScript/DDD/OOP
https://yyts.connpass.com/
craftsman_software
「インフラの心配は、もうおしまい」 インフラ運用を自動化し、手作業を限りなくゼロにする会社
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away