VIDEO LESSON

TypeScriptのユーティリティ型入門：Partial・Pick・Omit・Record・Readonlyの使い分けの解説動画

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

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

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

0:00こんにちは。
0:01今回のテーマは、タイプスクリプトのユーティリティ型です。
0:05一つの元の型から、一覧用、登録用、更新用といった用途別の型を作る仕組みを、
0:10会員管理の例で学びます。
0:14ピックは使う項目を選び、オミットは不要な項目を除きます。
0:19パーシャルは項目を任意にし、レコードはキーと値の対応を定め、リードオンリーは再代入を禁止します。
0:27大切な前提は、これらは型を作る道具であり、実行時のオブジェクトの中身を変える処理ではない、
0:31という点です。
0:36元の型を変更すると、導いた型も追従する便利さと、データ自体は消えない注意点を、
0:41実行できる例で確認していきましょう。
0:46登録、更新、表示で必要な項目が違う場面を思い浮かべながら、五つの道具の違いを順に押さえていきましょう。
0:54出発点は、会員を表すメンバー型です。
0:58数字のアイディー、文字列の名前とメール、リーダーかエディターのどちらかである役割を持ちます。
1:06記事では、この一つの型から三つの用途別の型を導きます。
1:10一覧表示にはアイディーと名前だけ、登録時にはサーバーが決めるアイディーを除いた入力、
1:17更新時には名前とメールだけを任意で渡せる形、という具合です。
1:23項目を何度も書き直すのではなく、元の型から導くことで、メンバーに項目が増えたときも、
1:28関係する型が一緒に変わります。
1:33次から、一つずつ作り方を見ていきます。
1:36この元の型が確かな土台になるからこそ、導いた型の意図も読み手に伝わりやすくなります。
1:44まずピックです。
1:45ピック・メンバー・アイディー・名前、と書くと、メンバーからアイディーと名前だけを選んだ、
1:49メンバーサマリー型ができます。
1:54一覧画面ではメールや役割まで必要ないことが多く、使う項目だけの型にすると意図が明確になります。
2:01ただし後で説明するように、型を選んだだけでは実データからは消えません。
2:06そこで記事のトゥーサマリー関数は、アイディーと名前だけを新しいオブジェクトに取り出して返します。
2:13型の指定と、実際に値を組み立てる処理をセットで考えることが、ピックを使うときのポイントです。
2:20次はオミットです。
2:22オミット・メンバー・アイディー、と書くと、アイディーを除いた残りの型、ニューメンバーができます。
2:29登録フォームから受け取る入力には、まだ決まっていないアイディーは含めません。
2:36名前、メール、役割だけを入力として受け取り、保存する段階でアイディー7を付け加えると、
2:40完全なメンバー型になります。
2:45ピックが使うものを選ぶ発想、オミットが除くものを指定する発想です。
2:50どちらが分かりやすいかは、項目の数や、将来増える項目を自動で含めたいかどうかで選んでください。
2:58迷ったときは、残したい項目が多いか、除きたい項目が明確か、という観点で比べると選びやすくなります。
3:06更新用の型には、パーシャルとピックを組み合わせます。
3:10パーシャル・メンバーだけでは、アイディーや役割まで任意の更新候補になってしまいます。
3:16そこで先にピックで名前とメールを選び、それをパーシャルで任意項目にしたものが、
3:20メンバーパッチです。
3:23更新関数は、パッチに値がなければ元の値を使う形で、新しいオブジェクトを返します。
3:29注意点として、パッチ全体をそのまま広げる実装では、型だけではアイディーの上書きを防ぎきれません。
3:37記事の関数のように、許可した項目だけを読み取る実装と組み合わせてください。
3:42元の会員名が変わらないことも、実機で確認済みです。
3:46レコードは、キーと値の対応を定める型です。
3:50ロールラベルズでは、メンバーの役割の型、つまりリーダーとエディターをキーにし、
3:54表示名の文字列を値にします。
3:58この形では、どちらか一方の表示名を書き忘れると型エラーになります。
4:04実際に役割へアドミンを追加した練習では、ラベル不足がエラー・ティーエス2741になることを実機で確認しました。
4:13逆に、レコード・文字列・文字列、のように任意の文字列をキーにすると、存在しないキーの読み取りまで考える必要があります。
4:23キーの候補が有限かどうかを区別して使ってください。
4:27リードオンリーは、その型を通じた再代入を禁止します。
4:31更新後の会員をリードオンリー・メンバーとして受け取ったスナップショットでは、
4:36名前への代入がエラー・ティーエス2540になることを確認しました。
4:41ただしこれはコピーを作る処理ではなく、同じオブジェクトを参照します。
4:46別の変更可能な参照から書き換えれば、その変更は見えてしまいます。
4:51あわせて紹介されるゲットフィールドは、キーオブでキーを制限するジェネリクス関数です。
4:58名前を取得すると文字列が返り、存在しないキーを渡すとエラー・ティーエス2345になります。
5:04表示結果は、あかりさん、閲覧者、一覧のジェイソン、あかり、の順で、記事と一致しました。
5:11ここが最も大切な注意点です。
5:13更新後の会員をメンバーサマリー型の変数に代入しても、実際のオブジェクトにはメールや役割が残っています。
5:21実機でも、そのままジェイソン化すると全項目が出ることを確認しました。
5:27ピックやオミットは、型の世界で見える項目を決めるだけであり、安全なレスポンスへ変換する処理ではありません。
5:35公開する項目を減らしたい場合は、トゥーサマリーのように、返してよい値だけを新しいオブジェクトへ詰め直し、
5:42シリアライズした結果にも不要な情報が含まれないか確認してください。
5:49パーシャルとリードオンリーは、浅い範囲にだけ働きます。
5:53設定オブジェクトを持つプロファイル型で考えます。
5:57パーシャルでは設定自体を省略できますが、設定を指定するなら、その中のテーマは必須です。
6:05空の設定を渡すとテーマ不足でエラーになることも確認しました。
6:10リードオンリーでは、設定そのものの再代入は禁止されますが、設定の中のテーマは変更でき、
6:14実行結果もダークに変わります。
6:19リードオンリーは実行時の凍結処理ではありません。
6:23ネストした全体を守りたい場合は、内側にも個別に型を付けるなどの設計が別途必要です。
6:30任意項目とアンディファインドの違いも決めておきます。
6:34今回の設定、イグザクトオプショナルプロパティタイプスが有効な場合、名前を省略することはできますが、
6:41名前 colon アンディファインド、を明示して渡すと、エラー・ティーエス2375になります。
6:48実機でも同じエラーを確認しました。
6:51アンディファインドも値として認めたい場合は、型へ明示的に追加します。
6:56またパーシャルは空のオブジェクトも許すため、最低一つは変更が必要というルールがあるなら、
7:00それは実行時に検証してください。
7:05項目を消す操作が必要なら、ヌルや専用の命令で意味を別途設計します。
7:10まとめです。
7:11実行は、初期化してタイプスクリプトとノードの型定義を入れ、三つのファイルをエスアールシーに保存し、
7:17ストリクトに加えて二つの追加チェックを有効にした設定でビルドします。
7:24ピックは選ぶ、オミットは除く、パーシャルは任意にする、レコードは対応表、
7:29リードオンリーは再代入の禁止、と目的で使い分けます。
7:34ただし、どれも実行時のデータ変換や検証、権限確認の代わりにはなりません。
7:40練習として、役割にアドミンを追加してラベルの書き漏れを型チェックで見つけ、
7:46次に権限変更の機能では型、実装、実行時確認がそれぞれ必要な理由を考えてみてください。
7:53お疲れさまでした。
7:54まずは会員管理の小さな例を自分で打ち換え、項目を一つ増やしたときに、どの型が追従するかを確認してみてください。

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

この動画で学べること

Partial・Pick・Omit・Record・Readonlyを会員管理の例で解説。更新項目の制限、実データの削除との違い、ネストやundefinedの注意点も確認します。

解説記事・サンプルコードを読む：TypeScriptのユーティリティ型入門：Partial・Pick・Omit・Record・Readonlyの使い分け →