VIDEO LESSON

TypeScriptのジェネリクス入門：型推論・制約・共通関数の作り方の解説動画

再生時間 7:53動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00タイプスクリプト入門、第七回はジェネリクスです。
0:04前回はユニオン型と型ガードを学びました。
0:07今回は、引数と戻り値などの型の関係を保ちながら、同じ処理を複数の型で使う仕組みを学びます。
0:14何でも許すエニー型に置き換えると、型の情報が消えて、存在しないメソッドを呼ぶ誤りも見つけられなくなります。
0:22ジェネリクスなら、文字列を渡せば文字列が返り、数値を渡せば数値が返る、という関係をそのまま表せます。
0:30型パラメータと型推論、エクステンズによる制約、キーオブによるキーの制限、
0:35そして外部入力の検証まで、順に確認していきましょう。
0:39型パラメータは生成されるジャバスクリプトには残らず、実行時には通常の関数として動く点も、
0:44最後に押さえます。
0:48まず基本の形です。
0:49値をそのまま返すアイデンティティ関数で見てみましょう。
0:53関数を定義するときに書く山括弧のティーが型パラメータ、呼び出しで指定する山括弧の文字列型が型引数です。
1:00引数と戻り値の両方に同じティーを使うことで、入れた値の型がそのまま返る、
1:04という関係を表しています。
1:08文字列を渡した戻り値は文字列型なので、文字列専用の大文字化メソッドを安全に呼べます。
1:14ティーは慣習的な名前で、ティーバリューなど別の名前に変えても動作は同じです。
1:19型を一か所で結び付けるのがポイントです。
1:22型引数は、多くの場合、省略できます。
1:25渡した引数からコンパイラが型を推論してくれるからです。
1:30文字列を渡せば、その戻り値には文字列としての操作が使え、長さは五と表示されます。
1:37数値を渡せば、数値専用のメソッドで小数第一位まで表示でき、結果は百二十三点ゼロです。
1:44なお、定数に直接渡した場合などでは、広い文字列型ではなく、特定の文字列そのものを表すリテラル型が推論されることもあります。
1:54逆に、文字列に対して数値専用のメソッドを呼ぼうとすると型エラーになります。
2:00戻り値をエニー型にしてしまうと、こうした確認は働かなくなります。
2:06次に、配列の先頭を取り出す共通関数を作ります。
2:10引数をリードオンリーの配列として受け取ると、配列としての操作と、要素の型との関係を同時に表せます。
2:19読み取り専用の配列も渡せるのが利点です。
2:22ただし、戻り値には注意が必要です。
2:25配列が空かもしれないため、戻り値は要素の型かアンディファインド、となります。
2:32型パラメータを使っても、配列に値が存在する保証は生まれません。
2:38空の配列では結果がアンディファインドになり、ヌル合体演算子で、なし、と表示されます。
2:45要素がある場合は先頭の、あかり、が返ります。
2:49呼び出し側で、値がない場合を必ず扱う設計にしましょう。
2:54オブジェクトのプロパティを安全に取り出す関数も作れます。
2:59ここでは型パラメータが二つ登場します。
3:02対象の型ティーと、キーの型ケーです。
3:05ケーには、ティーが持つキーの集合であるキーオブによる制約を付けます。
3:10これにより、指定できるキーは、そのオブジェクトに実際に存在するキーだけに制限されます。
3:17存在しないキーを渡すと型エラーになります。
3:20戻り値の型は、選んだキーの先の型を表す表記で決まります。
3:25名前のキーを選べば戻り値は文字列型になり、結果として、あかり、が表示されます。
3:31キーと値の型の対応関係を保てるのが、この書き方の強みです。
3:36制約がない型パラメータでは、その値にレングスがあるとは限りません。
3:41長さを使いたいなら、エクステンズで制約を付けます。
3:45数値のレングスを持つこと、という条件を課すと、その範囲内でのみレングスを安全に読めます。
3:52文字列や配列はこの条件を満たすので使えますが、レングスを持たない数値を渡すと型エラーになります。
4:00実際に文字列を渡すと、長さの十が表示され、元の文字列がそのまま返ります。
4:06制約は、処理に必要な性質を示してから、そのプロパティを利用するための仕組みです。
4:12要求は必要最小限に絞るほど、使える値の幅が残ります。
4:16ここからは外部入力の話です。
4:18ジェイソンを読み込むとき、パースの結果をアズで型断定して返すだけの関数では、
4:22構造は何も確認されません。
4:26型引数にユーザー型を指定しても、入力に必要なプロパティが追加されるわけではないからです。
4:32そこで、検証する関数自体を別の引数として受け取る設計にします。
4:36パース結果はまずアンノウンとして受け取り、検証関数に渡します。
4:41戻り値の型は検証関数の戻り値から推論されるので、呼び出し側では、検証済みの型として安全に使えます。
4:48ジェネリクスは型の関係を表す仕組みであり、実行時の検証の代わりにはならない、
4:51という区別が大切です。
4:55検証関数の中身を見てみましょう。
4:57まず、値がオブジェクトであること、ヌルでないこと、アイディーと名前の項目が存在することを確認します。
5:05次に、アイディーが数値であり、正の整数であること、名前が空でない文字列であることまで調べます。
5:12一つでも満たさなければ例外を投げます。
5:14最後に、必要な項目だけを持つ新しいオブジェクトを作って返します。
5:19名前が取れることだけでなく、業務上の条件まで実行時に確認している点がポイントです。
5:25ただし、ジェネリクスは検証関数の正しさまで証明しません。
5:30不正な入力のテストも合わせて用意しましょう。
5:33条件を一つにまとめず、項目ごとに分けて書くことで、どの確認で弾かれたかが読み取りやすくなります。
5:40実際に動かして確かめましょう。
5:42正しいジェイソンを検証関数と一緒に渡すと、ユーザーの名前である、あかり、
5:46が表示されます。
5:49一方、アイディーがゼロのデータ、名前が欠けたデータ、空白だけの名前のデータは、
5:54いずれも形式が正しくないとして例外になります。
5:59ジェイソン自体の構文が壊れている場合は、パースの段階で別の例外が投げられます。
6:05つまり、構文の不正と構造の不正は、別の場所で検出されるわけです。
6:10コンパイルはストリクトと、添字アクセスのチェックを有効にして行い、生成されたジャバスクリプトをノードで実行して、
6:15表示と例外の両方を確認しました。
6:21すべての関数をジェネリクスにする必要はありません。
6:25判断の基準は、入力の型を戻り値や別の引数に結び付けたいかどうかです。
6:31たとえば、文字列配列と数値配列で結果の型も対応させたい場面が対象になります。
6:38逆に、文字列の長さだけを返すなら、引数を文字列型、戻り値を数値型とする単純な関数で十分です。
6:46また、型エラーをアズで消す前に、その操作がすべての型で成立するかを確認してください。
6:53必要なプロパティがあるなら制約を追加し、外部入力なら検証する。
6:58根拠のない断定は、関係が正しくない実装を隠してしまいます。
7:03まとめです。
7:04ジェネリクスは、引数と戻り値などの型の関係を保ちながら、処理を共通化する仕組みです。
7:12定義側の型パラメータと呼び出し側の型引数を区別し、通常は型推論に任せて簡潔に書きます。
7:19配列の先頭のように値がない可能性は、戻り値の型に正直に表します。
7:24キーオブとエクステンズによる制約で、キーや必要なプロパティを制限できます。
7:31一方、ジェイソンのような外部入力は、型引数だけでは検証できません。
7:36アンノウンを受け取り、検証を通してから使うのが原則です。
7:41制約で要求する項目は、処理に必要な範囲に絞ることが、共通化の効果を保つコツです。
7:48これで実践連載の第七回は完了です。
7:51お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

TypeScriptのジェネリクスを型推論・extends・keyofから解説。空の配列を扱う戻り値と、unknownを検証してJSONを読み込む実践例を掲載します。

解説記事・サンプルコードを読む：TypeScriptのジェネリクス入門：型推論・制約・共通関数の作り方 →