WEBVTT

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

2
00:00:01.020 --> 00:00:04.761
今回からタイプスクリプトの連載が始まります。

3
00:00:04.761 --> 00:00:12.073
第一回は、タイプスクリプトとは何か、ジャバスクリプトとの違いと基本の書き方を学びます。

4
00:00:12.073 --> 00:00:18.535
タイプスクリプトは、ジャバスクリプトに型の記述と静的な検査を加えた言語です。

5
00:00:18.535 --> 00:00:26.698
変数に入る値や関数の引数を型で表すことで、プログラムを実行する前に間違いを見つけやすくなります。

6
00:00:26.698 --> 00:00:35.540
この動画では、基本の型、型推論、関数の型、インターフェース、クラスを小さなコード例で一つずつ確認します。

7
00:00:35.540 --> 00:00:42.172
ジャバスクリプトの変数、関数、オブジェクトの基本を知っている方向けの内容です。

8
00:00:42.172 --> 00:00:44.341
まずジャバスクリプトとの関係です。

9
00:00:44.341 --> 00:00:49.955
タイプスクリプトのコードは、そのままではブラウザーやノード・ジェイエスで実行できません。

10
00:00:49.955 --> 00:00:54.932
通常は、型チェックを行ってからジャバスクリプトへ変換し、その結果を実行します。

11
00:00:54.932 --> 00:01:01.056
型注釈やインターフェースのような、型だけの記述は、生成されるジャバスクリプトから取り除かれます。

12
00:01:01.056 --> 00:01:05.012
スライドのように、数値型の注釈は変換後のコードには残りません。

13
00:01:05.012 --> 00:01:09.669
ジャバスクリプトのライブラリーも利用できますが、型を把握するには、ライブラリーに含まれる型宣言や、

14
00:01:09.669 --> 00:01:14.326
別途提供される型定義が必要になる場合があります。

15
00:01:14.326 --> 00:01:17.835
タイプスクリプトはジャバスクリプトの正しいコードをそのまま土台にできるため、

16
00:01:17.835 --> 00:01:21.344
これまでの知識が無駄になりません。

17
00:01:21.344 --> 00:01:24.043
基本の型をコードで確認します。

18
00:01:24.043 --> 00:01:31.779
ブーリアンは真か偽かを表す型、ナンバーは数値を表す型、ストリングは文字列を表す型です。

19
00:01:31.779 --> 00:01:36.637
書き方は、変数名の後ろにコロンと型名を続けるだけです。

20
00:01:36.637 --> 00:01:45.273
スライドの例では、公開状態をブーリアン、閲覧数をナンバー、タイトルをストリングで宣言しています。

21
00:01:45.273 --> 00:01:50.670
その後、公開状態をトゥルーに変え、閲覧数に五を足しています。

22
00:01:50.670 --> 00:01:59.126
実行結果は、タイプスクリプト入門、百二十五回となり、記事の期待出力と実機の結果が一致しました。

23
00:01:59.126 --> 00:02:04.164
型を書くことで、その変数に何が入るかが一目で分かります。

24
00:02:04.164 --> 00:02:05.340
次に型推論です。

25
00:02:05.340 --> 00:02:11.664
変数を宣言するときに初期値があると、タイプスクリプトがその値から型を自動で判断します。

26
00:02:11.664 --> 00:02:17.693
スライドのカテゴリという変数は、初期値が文字列なので、ストリング型と推論されます。

27
00:02:17.693 --> 00:02:20.928
すべての変数に型注釈を書く必要はありません。

28
00:02:20.928 --> 00:02:24.825
値が明確な箇所は推論に任せ、関数の引数など、意図を明示したい箇所に型を書くと、

29
00:02:24.825 --> 00:02:28.722
コードが読みやすくなります。

30
00:02:28.722 --> 00:02:31.957
ただし、推論された型は後から変えられません。

31
00:02:31.957 --> 00:02:37.251
ストリングと推論された変数に数値を入れようとすると、型エラーになります。

32
00:02:37.251 --> 00:02:39.604
実機でも同じ動作を確認済みです。

33
00:02:39.604 --> 00:02:47.104
迷ったときは、関数の入り口と出口に型を書くところから始めると、推論との役割分担がつかみやすくなります。

34
00:02:47.104 --> 00:02:49.339
型エラーを実際に体験します。

35
00:02:49.339 --> 00:02:54.766
ストリング型の変数に、数値の百二十三を代入するコードを書いてみます。

36
00:02:54.766 --> 00:03:00.114
このコードをコンパイルすると、ナンバー型はストリング型に代入できない、というエラーが表示され、

37
00:03:00.114 --> 00:03:05.461
エラーコードはティーエス二三二二でした。

38
00:03:05.461 --> 00:03:08.973
実機でも同じエラーが出ることを確認済みです。

39
00:03:08.973 --> 00:03:15.677
大切なのは、この検査は開発時のもので、実行時に値を自動で変換する処理ではない点です。

40
00:03:15.677 --> 00:03:21.104
間違いを実行前に知ることで、本番で初めて気づくトラブルを減らせます。

41
00:03:21.104 --> 00:03:26.372
エディター上でも、型に合わない代入にはその場で診断が表示されます。

42
00:03:26.372 --> 00:03:28.704
関数の入力と出力を型で表します。

43
00:03:28.704 --> 00:03:31.910
引数の型は、それぞれの名前の後ろに書きます。

44
00:03:31.910 --> 00:03:35.844
戻り値の型は、引数リストの閉じカッコの後ろに書きます。

45
00:03:35.844 --> 00:03:40.799
スライドの例は、タイトルと閲覧数を受け取り、文章にして返す関数です。

46
00:03:40.799 --> 00:03:48.085
実行すると、タイプスクリプト入門は百二十五回読まれました、と表示され、記事の期待出力と一致しました。

47
00:03:48.085 --> 00:03:53.768
戻り値の型注釈を省略しても、この例では処理の内容からストリングと推論されます。

48
00:03:53.768 --> 00:04:01.200
関数の境界に型を書いておくと、呼び出し側で引数を間違えたときに、すぐにエラーで気づけるようになります。

49
00:04:01.200 --> 00:04:04.909
インターフェースで、オブジェクトの形を表します。

50
00:04:04.909 --> 00:04:11.246
インターフェースは、オブジェクトに必要なプロパティと、その型を定義する仕組みです。

51
00:04:11.246 --> 00:04:17.737
スライドでは、名前と記事数を持つオーサーという型を定義し、その型の値を作っています。

52
00:04:17.737 --> 00:04:22.064
記事の例では、この値を受け取る関数が、葵は三本の記事を公開しています、という文章を返し、

53
00:04:22.064 --> 00:04:26.392
実機でも同じ結果でした。

54
00:04:26.392 --> 00:04:29.637
関数は、必要な形を満たす値を受け取ります。

55
00:04:29.637 --> 00:04:35.819
特定のクラスで作った値である必要はなく、形さえ合っていればよい点がポイントです。

56
00:04:35.819 --> 00:04:41.692
オブジェクトの形が決まると、プロパティ名の書き間違いもエラーで検出できます。

57
00:04:41.692 --> 00:04:44.766
クラスで、状態と処理をまとめます。

58
00:04:44.766 --> 00:04:52.360
クラスは、状態を保持するオブジェクトと、その状態を扱う処理を一つにまとめる方法です。

59
00:04:52.360 --> 00:04:57.604
スライドの例では、記事数を数えるカウンターを作っています。

60
00:04:57.604 --> 00:05:04.294
プライベートなカウントが状態で、パブリッシュを呼ぶたびに数が一つ増えます。

61
00:05:04.294 --> 00:05:09.899
コンストラクターの引数にパブリック・リードオンリーと書くと、引数を受け取ると同時に、

62
00:05:09.899 --> 00:05:15.505
読み取り専用のプロパティを定義できます。

63
00:05:15.505 --> 00:05:22.376
二回公開して要約を表示すると、葵、二本となり、記事の期待出力と一致しました。

64
00:05:22.376 --> 00:05:27.800
なお、プライベートやリードオンリーは型チェック上の制約です。

65
00:05:27.800 --> 00:05:29.640
実行の流れを確認します。

66
00:05:29.640 --> 00:05:36.998
記事の環境では、ティーエスシーというコマンドで、型チェックとジャバスクリプトへの変換を行います。

67
00:05:36.998 --> 00:05:42.058
ストリクトという設定を付けると、厳しめのチェックが有効になります。

68
00:05:42.058 --> 00:05:47.117
エラーがある場合は出力を止める設定も、記事の例には含まれています。

69
00:05:47.117 --> 00:05:53.249
変換でできたジャバスクリプトのファイルを、ノードで実行すると結果が表示されます。

70
00:05:53.249 --> 00:05:57.772
記事のサンプルはタイプスクリプト四・九・四のストリクト設定で確認されており、

71
00:05:57.772 --> 00:06:02.294
今回の実機確認でも同じ出力が得られました。

72
00:06:02.294 --> 00:06:06.587
型チェック、変換、実行という三つの段階を意識しましょう。

73
00:06:06.587 --> 00:06:11.339
コマンドの詳しい手順やインストール方法は、次回の環境構築の回で画面を見ながら確認しますので、

74
00:06:11.339 --> 00:06:16.092
今回は流れだけ押さえてください。

75
00:06:16.092 --> 00:06:18.360
最後に、型の限界を押さえます。

76
00:06:18.360 --> 00:06:23.804
型を書いても、外部から来るデータが本当にその形かどうかは保証されません。

77
00:06:23.804 --> 00:06:31.213
たとえばエーピーアイのレスポンスに型を付けても、実際にプロパティが存在するかは別の検証が必要です。

78
00:06:31.213 --> 00:06:36.884
また、コンパイラのターゲット設定で古いジャバスクリプト向けに構文を変換できますが、

79
00:06:36.884 --> 00:06:42.554
実行環境にない新しいエーピーアイを自動で追加するわけではありません。

80
00:06:42.554 --> 00:06:49.056
クラスのプライベートも型チェック上の制約で、実行時の秘匿を保証するものではありません。

81
00:06:49.056 --> 00:06:54.651
型で防げる間違いと、実行時の検証が必要な箇所を分けて考えることが大切です。

82
00:06:54.651 --> 00:07:00.322
画面の入力値や共有する関数が増える大きなアプリほど、型の効果は出やすくなりますが、

83
00:07:00.322 --> 00:07:05.992
業務ルールの正しさまで保証されるわけではない点も覚えておきましょう。

84
00:07:05.992 --> 00:07:06.936
まとめです。

85
00:07:06.936 --> 00:07:12.129
タイプスクリプトは、ジャバスクリプトに型の記述と静的な検査を加えた言語で、

86
00:07:12.129 --> 00:07:17.321
型チェックを経てジャバスクリプトへ変換してから実行します。

87
00:07:17.321 --> 00:07:23.458
基本の型はブーリアン、ナンバー、ストリングで、初期値があれば型は推論されます。

88
00:07:23.458 --> 00:07:30.066
関数の境界やオブジェクトの形には型を書き、インターフェースやクラスで構造を表せます。

89
00:07:30.066 --> 00:07:35.102
一方で、外部データの検証など、型だけでは守れない部分もあります。

90
00:07:35.102 --> 00:07:39.665
配列や非同期処理の動きはジャバスクリプトの知識が土台です。

91
00:07:39.665 --> 00:07:45.644
次回は環境構築として、インストールから最初のコンパイルと実行までを進めます。

92
00:07:45.644 --> 00:07:47.060
お疲れさまでした。