ジェネリクスについてめちゃくちゃ簡単に説明する

＜対象者＞
・プログラミングを始めて3，4年以上
・ジェネリクスを見たことがあるし、使っている
・しかし、ジェネリクスについてあんまりわかっていない

＜内容＞
ジェネリクスについて説明します。
ジェネリクスは本来難しいものではないのですが、検索したりして出てくる内容は難しいことが多いので、避けている人も多いかと思います。
そこで、なるべく平たい言葉と絵で説明しました。

Transcript

1. ジェネリクスについて めちゃくちゃ簡単に説明する -若手プログラマーの 疑問に答えていく - 株式会社オンラインコンサルタント 代表取締役 後藤 暁子
2. 2 自己紹介 • 株式会社オンラインコンサルタント 代表取締役 • プログラミング歴は16年 • 受託開発・自社サービスなど多数の開発 • メインの実績は3000社以上の導入実績がある 「ODIN リアルタイム配送システム」 という配送会社向けのシステム https://delivery-system.com/ @Akiko_Goto999
3. 3 こんな人向け • プログラミングを始めて3，4年以上 • ジェネリクスを見たことがあるし、使っている • しかし、ジェネリクスについてあんまりわかって いない
4. 4 ジェネリクスとは？
5. 5 これ function getFirstItem<T>(list: T[]): T | undefined { return list.length > 0 ? list[0] : undefined; } ※この後、サンプルコードはTypeScriptで書いていきますが、ジェネリクス が使える言語全般に共通の話をしていきます。
6. 6 ジェネリクスについてよくある意見 記号＜＞とか、TとかUとか 出てきて難しい。 しかし、業務に大して 支障はないので、スルーしている。
7. 7 ジェネリクスについてよくある意見 正直 よくわかっていない。
8. 8 ジェネリクスについての説明 何を言っているのか わからない ジェネリクスは、主にJavaやC#、TypeScriptなどのプログ ラミング言語で使われます。<>記号で囲まれた型パラ メータを使用して、クラスやメソッドを定義します。これに より、コンパイル時に型チェックが行われ、実行時の型 エラーを防ぐことができます。 ＜よくあるジェネリクスの説明＞
9. 9 ジェネリクスのサンプル // 配列の最初の要素を取ってきて返す function getFirstItem<T>(list: T[]): T | undefined { return list.length > 0 ? list[0] : undefined; } // 使用例 const numbers = [1, 2, 3]; const firstNumber = getFirstItem(numbers); // number型 console.log("First number:", firstNumber); // → 1 const words = ["apple", "banana", "cherry"]; const firstWord = getFirstItem(words); // string型 console.log("First word:", firstWord); // → "apple" 整数の配列を入れたら 整数を返さないといけない Stringの配列を入れたら Stringを入れないと いけない このサンプルを使って説明します。
10. 10 ジェネリクスのサンプル 前ページのジェネリクスを使ったこの関数にフォーカスしてみていく function getFirstItem<T>(list: T[]): T | undefined { return list.length > 0 ? list[0] : undefined; }
11. 11 ジェネリクスのサンプル ジェネリクスとはパズルのようなもの function getFirstItem<T>(list: T[]): T | undefined { return list.length > 0 ? list[0] : undefined; } 同じ記号が書かれた部分が一緒でなければいけないという意味
12. 12 ジェネリクスのサンプル function getFirstItem< >(list: []): | undefined { return list.length > 0 ? list[0] : undefined; } りんごの部分に同じものを入れないといけない関数という意味 絵のほうがわかりやすいかもしれない
13. 13 よくある質問 それは、普通の型制限とは 違うんですか？ 白河君
14. 14 違います。 逆に考えてみると もしジェネリクスがなかったら
15. 15 サンプルはこうなる // Stringの配列用の配列の最初を取ってきて返す関数 function getFirstItemForString(list: string[]): string | undefined { return list.length > 0 ? list[0] : undefined; } // numberの配列用の配列の最初を取ってきて返す関数 function getFirstItemForNumber(list: number[]): number | undefined { return list.length > 0 ? list[0] : undefined; } Stringを扱う関数とnumberを扱う関数を分けなければならない。
16. 16 よくある質問 あのー。 それはユニオン型で書ける と思うんですけど。 白河君
17. 17 確かにユニオン型で書けば 一つの関数で済むが … function getFirstItem(list: (string|number)[]): string | number | undefined { return list.length > 0 ? list[0] : undefined; } 将来的にこの関数の引数と戻り値 を違う型でも使いたくなった時に、 このユニオン型を書き換えなけれ ばならない手間が発生！
18. 18 この手間を抑えてくれるのが ジェネリクス
19. 19 皆さんがよく目にするアレもジェネリクス const list:Array<string> = [ "apple", "banana", "cherry"]; interface Array<T> 毎日使っている、Arrayの中身もジェネリクス 上記の例では、このTがStringということになる。