SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

TypeScriptの関数入門：引数・戻り値・オーバーロードの型を指定するの解説動画

再生時間 8:21動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:01タイプスクリプト入門、第五回は関数の型です。
  3. 0:05前回はインターフェースとタイプでオブジェクトの形を学びました。
  4. 0:10今回は、関数が受け取る引数と、返す戻り値に型を付ける方法を学びます。
  5. 0:17引数と戻り値の型が分かれば、関数の使い方は名前と型を見るだけで判断できます。
  6. 0:24さらに、関数そのものを表す関数型、省略できる引数、個数が決まらない引数、
  7. 0:30そして呼び出し方を複数表すオーバーロードまで順に確認します。
  8. 0:36この回を終えるころには、関数を安全に定義し、正しく呼び出せるようになります。
  9. 0:43関数はプログラムの部品です。
  10. 0:45その部品の入り口と出口に型という説明書が付いていれば、使う側は中身を読まなくても安心して呼び出せます。
  11. 0:55まず基本です。
  12. 0:56引数の型は引数名の後ろに、戻り値の型は引数リストの後ろに書きます。
  13. 1:01たとえば二つの数値を受け取り数値を返す関数は、そのまま型で表せます。
  14. 1:07戻り値の型は省略もできます。
  15. 1:10数値同士のかけ算なら、戻り値はナンバーだと推論されるからです。
  16. 1:15ただし、戻り値を明記すると関数の契約が読み取りやすくなり、返す値をうっかり変えたときにも気づけます。
  17. 1:24一方、メッセージを表示するだけの関数の戻り値はボイドと書き、呼び出し側が結果の値を使わないことを表します。
  18. 1:33推論に任せる場面と、明記する場面を使い分けましょう。
  19. 1:37関数を変数や引数として扱う場合は、関数そのものの型を書けます。
  20. 1:43引数リストと矢印を使って、受け取る値と返す値をまとめて表す書き方です。
  21. 1:49たとえば、数値二つを受け取り数値を返す計算、という関数型に名前を付けます。
  22. 1:56引き算の関数をその型で宣言すると、引数の型は代入先の関数型から推論されるため、
  23. 2:01改めて書く必要はありません。
  24. 2:06計算方法を受け取る関数は、その関数型を引数の型に指定します。
  25. 2:11関数型を使うと、コールバックがどんな値を受け取り、何を返すのかを一か所で示せます。
  26. 2:19この考え方は、処理の一部だけを差し替えたい場面で特に役立ちます。
  27. 2:25差し替える関数が守るべき形が型で決まっているため、違う形の関数を渡すミスを防げます。
  28. 2:32引数名の後ろにクエスチョンマークを付けると、その引数は省略できるようになります。
  29. 2:39これをオプション引数と呼びます。
  30. 2:41省略された場合、関数の中ではその値はアンディファインドになります。
  31. 2:47そのため、使う前に値があるかどうかを確認する必要があります。
  32. 2:52ここで注意したいのが、ゼロとの区別です。
  33. 2:55値があるかどうかをざっくり判定すると、ゼロも未指定と同じように扱われてしまいます。
  34. 3:02省略されたのか、ゼロが渡されたのかを区別したいときは、アンディファインドと等しいかどうかで確認しましょう。
  35. 3:10小さな違いですが、件数のような値では結果が変わります。
  36. 3:15デフォルト引数は、引数を省略したときに使う既定値をあらかじめ用意する仕組みです。
  37. 3:21たとえば、メッセージを繰り返す回数の既定値を一回としておけば、回数を指定しない呼び出しでもそのまま動きます。
  38. 3:30既定値から型は推論されるため、回数の型を別に書く必要はありません。
  39. 3:35既定値が使われるのは、引数を省略した場合と、アンディファインドを渡した場合です。
  40. 3:41ヌルやゼロを渡した場合は、その値がそのまま使われ、既定値には置き換わりません。
  41. 3:48また、回数のような値は、負の数や小数でないかを実行時に検証すると、より安全になります。
  42. 3:54渡される値の個数が決まっていない場合は、残余引数を使います。
  43. 3:59引数名の前にドットを三つ書き、型には配列を指定します。
  44. 4:04呼び出しで渡された値は、すべて一つの配列としてまとめて受け取れます。
  45. 4:09たとえば合計を求める関数は、ゼロ個から何個でも数値を受け取れます。
  46. 4:14一つも渡されなければ空の配列になり、合計はゼロです。
  47. 4:18二つ渡せばその合計、六つでも同じ処理で対応できます。
  48. 4:23残余引数は引数リストの最後に置く決まりです。
  49. 4:26可変長の入力を、配列の処理として素直に書けるのが利点です。
  50. 4:31合計を求める処理自体は、配列に対する繰り返し処理として書かれています。
  51. 4:36引数の個数が変わっても、受け取った後の処理は一つで済むのが分かりやすい点です。
  52. 4:43オーバーロードは、一つの関数に複数の呼び出し方を型で表す仕組みです。
  53. 4:48書き方は、まず呼び出し方の型だけを上に並べ、その下に実際の処理を持つ実装を一つ書きます。
  54. 4:55たとえば、文字列を渡せば文字列が返り、数値を渡せば数値が返る関数です。
  55. 5:01文字列なら二つつなげ、数値なら二倍にする、といった分岐は実装の中に書きます。
  56. 5:07呼び出し側は、渡した引数の型に応じて戻り値の型も正確に分かります。
  57. 5:12文字列の戻り値には文字列のメソッドが、数値の戻り値には数値のメソッドが、
  58. 5:16そのまま安全に使えます。
  59. 5:20つまり、呼び出し側に見せる顔が複数あり、実体は一つ、という構造です。
  60. 5:26型の世界では別々の関数に見えても、実行される処理は共通であることを覚えておきましょう。
  61. 5:32オーバーロードには大切な注意点があります。
  62. 5:36タイプスクリプトが実行時に別々の関数を自動で選ぶわけではありません。
  63. 5:41コンパイル後のジャバスクリプトに残るのは実装だけであり、分岐は自分で書く必要があります。
  64. 5:48また、呼び出し側から使えるのは、上に宣言したシグネチャだけです。
  65. 5:53実装が文字列か数値のユニオン型を受け取れても、そのユニオン型の変数をそのまま渡す呼び出し方は、
  66. 5:58宣言されていなければエラーになります。
  67. 6:03さらに、入力と出力の対応が変わらないなら、ユニオン型の引数を持つ関数一つで十分な場合もあります。
  68. 6:11増やす前に必要性を考えましょう。
  69. 6:13書いた例は、実際にコンパイルして確かめましょう。
  70. 6:17最初の例のファイルを指定し、ストリクトを有効にしてコンパイルすると、型の誤りがあればそこで止まります。
  71. 6:24エラーがあれば出力しないオプションも付けておきます。
  72. 6:27コンパイルが成功したら、生成されたジャバスクリプトをノードで実行します。
  73. 6:32合計は七、積は十二と表示されれば、型チェックと実行結果の両方が期待どおりです。
  74. 6:37他の節の例も、入力と出力のファイル名を対応させれば、同じ手順で確認できます。
  75. 6:43型が通ることと、結果が合うこと、その両方を見る習慣が大切です。
  76. 6:47最後に、実務での判断基準を整理します。
  77. 6:50複数ファイルから使う公開的な関数では、引数と戻り値を読めば使い方が分かるように、
  78. 6:54型を明記して契約を示しましょう。
  79. 6:58一方、内部だけで使う短いコールバックは、型推論に任せると同じ説明を繰り返さずに済みます。
  80. 7:05オーバーロードについては、呼び出し形式を増やすほど実装の分岐やテストも増えます。
  81. 7:11利用側にどの型情報が必要かを先に決め、ユニオン型で足りる場合はそちらを選びましょう。
  82. 7:17そして、外部から取得したデータには、型注釈だけでなく値の検証も必要です。
  83. 7:22この線引きが、読みやすく安全な関数につながります。
  84. 7:26型を書く目的は、チェックを増やすこと自体ではなく、使う側の迷いを減らすことです。
  85. 7:32どこまで明記すれば読み手が助かるか、という視点で判断するとよいでしょう。
  86. 7:37まとめです。
  87. 7:38関数の引数には受け取る値の型を、戻り値には返す値の型を指定し、値を返さない関数はボイドで表します。
  88. 7:46関数型を使えば、関数そのものやコールバックの入出力もまとめて表せます。
  89. 7:52省略できる引数はクエスチョンマーク、既定値はイコール、個数が決まらない引数は残余引数で表し、
  90. 7:57それぞれ省略された場合の扱いを意識しましょう。
  91. 8:03オーバーロードは複数の呼び出し方と一つの実装で表しますが、実行時に自動で選ばれる仕組みではなく、
  92. 8:09ユニオン型で足りる場合も多い点を忘れないでください。
  93. 8:15次回は第六回として、ユニオン型と型ガードを学びます。
  94. 8:19お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

TypeScriptの関数の引数と戻り値、型推論、関数型、オプション引数、デフォルト引数、残余引数、オーバーロードを実行できるコードで解説します。

解説記事・サンプルコードを読む：TypeScriptの関数入門：引数・戻り値・オーバーロードの型を指定する →