WEBVTT

1
00:00:00.000 --> 00:00:00.946
こんにちは。

2
00:00:00.946 --> 00:00:04.101
今回はタイプスクリプトの概要ガイドです。

3
00:00:04.101 --> 00:00:09.621
連載七本で個別のテーマを学んできましたが、この回では全体を一望します。

4
00:00:09.621 --> 00:00:16.087
タイプスクリプトは、ジャバスクリプトに型の記述と静的な型チェックを加えた言語です。

5
00:00:16.087 --> 00:00:20.661
文字列を受け取る関数へ数値を渡す、存在しない項目を参照する、といった間違いを、

6
00:00:20.661 --> 00:00:25.235
実行する前の段階で見つけやすくします。

7
00:00:25.235 --> 00:00:29.887
この動画では、ジャバスクリプトとの違い、開発環境、基本型、型エラーの直し方、

8
00:00:29.887 --> 00:00:34.540
そして実践的な型設計までを順に整理します。

9
00:00:34.540 --> 00:00:38.010
難しい構文を一度に暗記する必要はありません。

10
00:00:38.010 --> 00:00:42.268
全体像をつかんでから、目的に合うテーマへ進みましょう。

11
00:00:42.268 --> 00:00:49.178
タイプスクリプトは、マイクロソフトが中心となって開発するオープンソースの言語です。

12
00:00:49.178 --> 00:00:58.953
ジャバスクリプトの変数、関数、配列、クラスといった仕組みを土台に、値の種類やオブジェクトの形を型として記述できます。

13
00:00:58.953 --> 00:01:06.368
静的な型チェックとは、プログラムを実行する前に、コード上の値の使い方を検査することです。

14
00:01:06.368 --> 00:01:13.446
型の情報は、エディターの入力補完、定義への移動、そしてコンパイラの診断に使われます。

15
00:01:13.446 --> 00:01:20.693
一方で、型注釈やインターフェースは、ジャバスクリプトへの変換時に通常は取り除かれます。

16
00:01:20.693 --> 00:01:29.288
実行される処理そのものはジャバスクリプトなので、ブラウザーやノードの動きも合わせて学ぶ必要があります。

17
00:01:29.288 --> 00:01:33.900
ジャバスクリプトでは、実行時の値に応じて動作が決まります。

18
00:01:33.900 --> 00:01:39.943
タイプスクリプトを導入すると、それに加えて開発中に型の整合性を確認できます。

19
00:01:39.943 --> 00:01:45.986
ソースファイルは通常、ティーエスという拡張子を使い、ジェイエスエックスを含む場合はティーエスエックス、

20
00:01:45.986 --> 00:01:52.029
型宣言だけのファイルはディーティーエスを使います。

21
00:01:52.029 --> 00:01:58.549
メリットが大きいのは、複数人で同じデータを扱う開発や、長期間保守するシステムです。

22
00:01:58.549 --> 00:02:03.956
項目名を変えたときに、古い名前を読む箇所を型チェックで発見できます。

23
00:02:03.956 --> 00:02:07.931
一方で、型設計の学習やビルド設定の保守は必要です。

24
00:02:07.931 --> 00:02:13.020
変更の頻度やチームの人数に合わせて、導入する範囲を決めましょう。

25
00:02:13.020 --> 00:02:21.543
フロントエンドでは、画面の入力データ、コンポーネントへ渡す値、通信中・成功・失敗といった状態を型で表せます。

26
00:02:21.543 --> 00:02:28.645
たとえば記事一覧がタイトルとアイディーを必要とするなら、受け取るデータの形を明示できます。

27
00:02:28.645 --> 00:02:35.274
ただし、タイプスクリプト自体が画面表示を行うフレームワークになるわけではありません。

28
00:02:35.274 --> 00:02:41.903
バックエンドでは、ノードで動くエーピーアイやデータ変換、バッチ処理にも利用できます。

29
00:02:41.903 --> 00:02:48.296
前と後で型定義を共有すると変更を追いやすくなりますが、外部から受け取る値は共有した型だけを信頼せず、

30
00:02:48.296 --> 00:02:54.688
サーバー側で検証し、認証や業務ルールを適用することが大切です。

31
00:02:54.688 --> 00:03:03.403
まずは公式のプレイグラウンドで短い例を試し、診断と生成されるジャバスクリプトを見比べるのが手軽です。

32
00:03:03.403 --> 00:03:14.733
本格的に始める場合は、ノードとエヌピーエムを用意し、学習用のフォルダーでタイプスクリプトを開発用依存関係としてインストールします。

33
00:03:14.733 --> 00:03:19.091
画面の例は、文字列を受け取って挨拶を返す関数です。

34
00:03:19.091 --> 00:03:25.715
コンパイルして実行すると、こんにちは、タイプスクリプトさん、と表示されます。

35
00:03:25.715 --> 00:03:33.210
引数を数値の百二十三に変えると、文字列の引数へ数値を渡しているため型エラーになります。

36
00:03:33.210 --> 00:03:41.228
型チェック、ジャバスクリプトへの変換、実行は、それぞれ別の役割を持つことを押さえてください。

37
00:03:41.228 --> 00:03:43.164
基本の型を確認します。

38
00:03:43.164 --> 00:03:52.317
ストリングは文字列、ナンバーは数値、ブーリアンは真偽値を表し、ストリングの配列は文字列の並びを表します。

39
00:03:52.317 --> 00:03:57.861
型は変数名の後ろに書きますが、初期値などから分かる箇所では型推論を利用でき、

40
00:03:57.861 --> 00:04:03.406
すべての変数へ同じ注釈を繰り返す必要はありません。

41
00:04:03.406 --> 00:04:07.894
画面の例では、記事のタイトル、閲覧数、公開フラグ、タグを一つの型で表し、

42
00:04:07.894 --> 00:04:12.383
表示用の文字列を作っています。

43
00:04:12.383 --> 00:04:16.959
実行すると、型を学ぶ、十二回、公開、と表示されます。

44
00:04:16.959 --> 00:04:22.240
なお、ナンバーだけでは正の整数や価格の上限までは表せません。

45
00:04:22.240 --> 00:04:26.640
型の範囲と、実際の値の条件は区別して考えましょう。

46
00:04:26.640 --> 00:04:33.228
型エラーが出たら、まず渡している値の型と、受け取り側が求める型を確認します。

47
00:04:33.228 --> 00:04:37.735
数値が必要な場所へ文字列を渡しているなら、入力の形式を確認して変換するか、

48
00:04:37.735 --> 00:04:42.242
受け取り側の仕様を見直します。

49
00:04:42.242 --> 00:04:49.177
理由を確認せずエニーやアズで診断を消すと、問題を実行時まで見逃すことがあります。

50
00:04:49.177 --> 00:04:52.990
特にアズは、値を変換する命令ではありません。

51
00:04:52.990 --> 00:04:57.671
文字列にアズナンバーと書いても数値にはならないのです。

52
00:04:57.671 --> 00:05:03.392
実際に変換する処理と、不正な入力を拒否する処理を用意してください。

53
00:05:03.392 --> 00:05:12.580
インポートや設定のエラーでは、パスの大文字小文字や、設定ファイルが読み込まれているかも合わせて確認します。

54
00:05:12.580 --> 00:05:17.104
ヌルやアンディファインドの可能性を指摘された場合は、存在しない値にメソッドを呼ぶ前に、

55
00:05:17.104 --> 00:05:21.628
分岐で扱いを決めます。

56
00:05:21.628 --> 00:05:27.493
画面のフォーマットネーム関数は、名前が省略されたらゲストと表示します。

57
00:05:27.493 --> 00:05:35.535
アンディファインドでないことが分かった分岐の中だけで、前後の空白を取り除くトリムを呼んでいます。

58
00:05:35.535 --> 00:05:42.740
実際に、アンディファインドを渡すとゲスト、空白に囲まれた葵を渡すと葵、と表示されます。

59
00:05:42.740 --> 00:05:52.794
なお、条件に数値をそのまま使う書き方は、ゼロも除外してしまうため、値の有無だけを調べたい場合には適さないことがあります。

60
00:05:52.794 --> 00:05:56.480
分岐による型の絞り込みが、ここでの要点です。

61
00:05:56.480 --> 00:05:59.706
実務では、まずジェネリクスが役立ちます。

62
00:05:59.706 --> 00:06:04.546
入力と出力の型の関係を保って共通処理を作る仕組みで、数値の配列から取り出せば数値、

63
00:06:04.546 --> 00:06:09.385
文字列の配列なら文字列として扱えます。

64
00:06:09.385 --> 00:06:15.515
一つのデータ型から登録用や表示用の型を導くには、ユーティリティ型を使います。

65
00:06:15.515 --> 00:06:20.596
ピックは項目の選択、オミットは除外、パーシャルは任意項目化、レコードはキーと値の対応、

66
00:06:20.596 --> 00:06:25.678
リードオンリーは読み取り専用を表します。

67
00:06:25.678 --> 00:06:30.840
これらは型の世界の操作で、実データを削除する処理ではありません。

68
00:06:30.840 --> 00:06:35.034
非同期処理ではプロミスで成功した値の型を表し、画面の状態にはユニオンを使うと、

69
00:06:35.034 --> 00:06:39.228
矛盾した状態を減らせます。

70
00:06:39.228 --> 00:06:41.156
学習は三段階で進めます。

71
00:06:41.156 --> 00:06:48.225
入門では、型を間違えたときの診断と、正しいコードの出力を両方説明できることを目指します。

72
00:06:48.225 --> 00:06:54.651
基礎では、関数、インターフェース、モジュール、型ガードを順に確認し、入力を受け取り、

73
00:06:54.651 --> 00:07:01.077
確認や変換を行って、別ファイルの関数で結果を返す小さなプログラムを作ります。

74
00:07:01.077 --> 00:07:07.986
実践では、ジェネリクスとユーティリティ型で重複を整理し、非同期処理と型設計へ進みます。

75
00:07:07.986 --> 00:07:12.002
よくある疑問として、テストは型があっても必要です。

76
00:07:12.002 --> 00:07:16.179
計算の間違いや不正な応答は型だけでは確認できません。

77
00:07:16.179 --> 00:07:23.248
進み具合は記事数ではなく、サンプルの値を変えたときに結果を予測できるかで判断しましょう。

78
00:07:23.248 --> 00:07:24.261
まとめです。

79
00:07:24.261 --> 00:07:33.208
タイプスクリプトは、ジャバスクリプトに型と静的なチェックを加え、間違いを実行前に見つけやすくする言語です。

80
00:07:33.208 --> 00:07:42.493
型チェック、変換、実行の役割を区別し、基本型と推論から始めて、エラーを両側の型で読み解くことが土台になります。

81
00:07:42.493 --> 00:07:49.245
外部の値は実行時に検証し、確認できたデータだけを使うこと、そしてジェネリクスやユーティリティ型は、

82
00:07:49.245 --> 00:07:55.997
困っている処理を解くために必要な範囲で導入することが大切です。

83
00:07:55.997 --> 00:08:05.113
既存のプロジェクトへは、外部入力の境界や、複数箇所から使う関数を一つ選んで小さく取り入れるのがおすすめです。

84
00:08:05.113 --> 00:08:07.477
これで概要ガイドは完了です。

85
00:08:07.477 --> 00:08:08.996
お疲れさまでした。