VIDEO LESSON

TypeScriptのテンプレートリテラル型：文字列の組み合わせとイベント名を型安全に扱うの解説動画

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

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

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

0:00こんにちは。
0:00今回のテーマは、タイプスクリプトのテンプレートリテラル型です。
0:05これは、文字列のリテラルを組み合わせて、許可する文字列の集合を型で表す仕組みです。
0:12言語とページ名からアクセスパスを作ったり、項目の名前からイベント名を作ったりする場面で、
0:18文字列の書き間違いを早い段階で見つけられます。
0:23この動画では、基本の組み合わせ、定数から型を作る方法、外部入力の検証、そしてイベントハンドラーの型までを順に学びます。
0:32前回までのキーオフやアズコンスタントの知識を一歩進めた内容です。
0:38文字列をただのストリングとして扱うのではなく、形まで決めてしまう発想に触れていきます。
0:45まず基本です。
0:46ジャバスクリプトでは、バッククォートとドル記号付きの波括弧で文字列を組み立てます。
0:52タイプスクリプトでは、似た書き方を型の位置に書くと、文字列リテラル型同士を組み合わせられます。
0:59画面では、言語の候補が二つ、ページ名の候補が二つあり、その組み合わせでパスの型を作っています。
1:06結果は四通りの文字列だけを許す型になります。
1:10定義していない設定ページへのパスを代入すると、型エラーになります。
1:15ここで作っているのはあくまで型で、実行時に文字列の配列が自動で生まれるわけではありません。
1:21四通りという小さな集合だからこそ、間違った文字列が紛れ込む余地をなくせます。
1:27値と型を別々に手書きすると、候補を追加したときに片方だけ直し忘れる事故が起きます。
1:34そこで、候補の配列をアズコンスタントで固定し、そこから型を取り出します。
1:40タイプオブで配列の型を取得し、角括弧のナンバーで要素の型を抜き出す書き方がポイントです。
1:47この形なら、候補の置き場は配列の定義一か所だけになります。
1:52候補を増やせば、組み合わせの型も自動で広がります。
1:56型と実行時に使うデータを、同じ出発点から作るのがこの節の狙いです。
2:01前回のキーオフやタイプオブの知識が、ここで実践的な形でつながります。
2:07次に、パスを作る関数と、検証に使う集合を用意します。
2:11生成関数の引数と戻り値の両方に型を付けることで、呼び出し側の渡し間違いと、
2:16関数の中での組み立て間違いの両方を検出できます。
2:21許可済みパスの集合は、候補の配列から実際に文字列を組み立てて作ります。
2:27候補を増やせば、型だけでなく検証用のデータにも自動で反映されます。
2:32判定関数の戻り値に付けた、値がその型であるという宣言は型述語と呼ばれ、真になった分岐でその型として扱えるようになります。
2:42検証の正しさまでコンパイラーが証明してくれるわけではないので、実際の動作をテストで確かめる姿勢も大切です。
2:51大切な注意です。
2:52型を定義しても、フォームの入力やエーピーアイの応答が自動で検証されるわけではありません。
2:59外部から来た値は、まずアンノウンとして受け取り、条件を確認してから使います。
3:06画面の例では、許可済み集合と完全一致した値だけを通し、それ以外は使用できないパスです、
3:09と返します。
3:13実際に、正しいパスは移動先として表示され、未定義のパターンは拒否されました。
3:20末尾にスラッシュが付いた文字列などは一致しません。
3:24アズで型を付けるだけでは検証にならない点も、合わせて覚えてください。
3:29今回の判定は完全一致なので、末尾にスラッシュが付いた値や、クエリ文字列が付いた値は受け付けません。
3:37ユーアールエル全体を扱うときは、仕様に合わせてパスの取り出し方を決めてください。
3:43応用として、項目名からイベント名を作ります。
3:47記事のタイトルが変わったらタイトルチェンジド、閲覧数が変わったらビューズチェンジドを呼ぶ、
3:51という命名規則を型で表す例です。
3:56仕組みは、マップ型とキーの作り替えの組み合わせです。
4:00キーオフで元の型のキーを順に扱い、アズの後ろのテンプレートでキー名の末尾にチェンジドを付けます。
4:08アンドストリングは、文字列のキーだけを対象にするための絞り込みです。
4:13値の型は元の項目と対応付けて取り出すため、イベント名と、そこで扱う値の型を同じ元の型から作れます。
4:20ハンドラーを省略できる印も付いているため、必要なイベントだけを選んで実装できます。
4:27作った型でハンドラーの集まりを定義すると、各ハンドラーの引数の型が自動で決まります。
4:33タイトル用は文字列なので大文字化のメソッドが使え、閲覧数用は数値なので数値のメソッドが使えます。
4:40実際に呼び出すと、タイトルは大文字で表示され、閲覧数は百二十と表示されました。
4:45ハンドラーは省略可能にしているため、呼び出しにはクエスチョン付きのドットを使います。
4:52数値用のハンドラーへ文字列を渡すと型エラーになります。
4:56なお、変更の検知やイベントの配信そのものは、アプリ側で用意する処理です。
5:01イベント名の規則と値の型が連動するので、項目を増やしたときもハンドラーの形で迷わずに済みます。
5:08文字の形を変える組み込みの型も用意されています。
5:11アッパーケースは文字列型をすべて大文字にし、キャピタライズは先頭の文字だけを大文字にします。
5:18これらをテンプレートと組み合わせると、環境変数のキーのような命名規則も型で表せます。
5:24画面では、セクション名から大文字のキーと、ゲットで始まる名前の型を作り、
5:28正しい文字列が代入できることを確認しています。
5:32ただし、これらは型の世界の操作で、実行時に文字列を変換する処理ではありません。
5:37利用者向けの表示変換とは用途を分けてください。
5:41小文字化や、先頭だけを小文字化する型もあり、合わせて四種類が用意されています。
5:46使いどころの線引きも大切です。
5:49ユニオンを複数か所に埋め込むと、組み合わせの数は掛け算で増えます。
5:54たとえば十の言語、二十のページ、五つの表示モードをすべて組み合わせると、
5:58最大で千通りにもなります。
6:02候補が少なく、仕様として固定されている場合は便利ですが、大量のアイディーや自由入力まで文字列のリテラル型で表そうとすると、
6:08型が大きくなりすぎます。
6:14公式の案内でも、大きな文字列の集合は事前の生成を検討するよう勧められています。
6:20型で表す範囲は、見直しやすさも含めて決めましょう。
6:24自由入力の形式や範囲の確認は、実行時の検証に任せるのが現実的です。
6:29手元で試すときは、記事のファイル構成で保存し、型チェックだけを行うコマンドを実行します。
6:36実行したい場合は、出力先を指定して変換し、生成されたジャバスクリプトをノードで動かします。
6:43よくある疑問も整理します。
6:45テンプレートリテラル型と正規表現は別物で、前者はコンパイル時の検査、後者は実行時に文字列を調べる道具です。
6:53また、キーの作り替えに使うアズは、値を別の型として扱う型アサーションとは役割が異なります。
7:00疑問が残ったら、短い例に切り出して確認するのが近道です。
7:05ファイルを直接指定するコマンドでは設定ファイルは読まれないため、プロジェクト全体で確認したい場合は、
7:10設定のある場所で実行してください。
7:15まとめです。
7:16テンプレートリテラル型は、文字列リテラルの組み合わせを型で表し、許可する文字列だけを受け付ける仕組みです。
7:25候補は定数から一元管理し、型と検証用のデータを同じ出発点から作ると、追加や変更に強くなります。
7:33項目名からイベント名を作るように、命名規則も型にできます。
7:38一方で、外部入力の検証は実行時の処理が担い、候補が増えすぎる使い方も避ける必要があります。
7:46イベント名や設定キーのように、決まった文字列から使い始めてみてください。
7:52お疲れさまでした。
7:53まずは自分のコードの中で、書き間違いが起きやすい文字列を一つ見つけることから始めてみましょう。

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

この動画で学べること

TypeScriptのテンプレートリテラル型を実践コードで解説。文字列の組み合わせによるパスの型、keyofとマップ型によるイベント名の生成、Uppercase・Capitalize、外部入力の検証方法を学べます。

解説記事・サンプルコードを読む：TypeScriptのテンプレートリテラル型：文字列の組み合わせとイベント名を型安全に扱う →