VIDEO LESSON

TypeScriptとは？JavaScriptとの違いと基本の書き方を入門解説の解説動画

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

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

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

0:00こんにちは。
0:01今回からタイプスクリプトの連載が始まります。
0:04第一回は、タイプスクリプトとは何か、ジャバスクリプトとの違いと基本の書き方を学びます。
0:12タイプスクリプトは、ジャバスクリプトに型の記述と静的な検査を加えた言語です。
0:18変数に入る値や関数の引数を型で表すことで、プログラムを実行する前に間違いを見つけやすくなります。
0:26この動画では、基本の型、型推論、関数の型、インターフェース、クラスを小さなコード例で一つずつ確認します。
0:35ジャバスクリプトの変数、関数、オブジェクトの基本を知っている方向けの内容です。
0:42まずジャバスクリプトとの関係です。
0:44タイプスクリプトのコードは、そのままではブラウザーやノード・ジェイエスで実行できません。
0:49通常は、型チェックを行ってからジャバスクリプトへ変換し、その結果を実行します。
0:54型注釈やインターフェースのような、型だけの記述は、生成されるジャバスクリプトから取り除かれます。
1:01スライドのように、数値型の注釈は変換後のコードには残りません。
1:05ジャバスクリプトのライブラリーも利用できますが、型を把握するには、ライブラリーに含まれる型宣言や、
1:09別途提供される型定義が必要になる場合があります。
1:14タイプスクリプトはジャバスクリプトの正しいコードをそのまま土台にできるため、
1:17これまでの知識が無駄になりません。
1:21基本の型をコードで確認します。
1:24ブーリアンは真か偽かを表す型、ナンバーは数値を表す型、ストリングは文字列を表す型です。
1:31書き方は、変数名の後ろにコロンと型名を続けるだけです。
1:36スライドの例では、公開状態をブーリアン、閲覧数をナンバー、タイトルをストリングで宣言しています。
1:45その後、公開状態をトゥルーに変え、閲覧数に五を足しています。
1:50実行結果は、タイプスクリプト入門、百二十五回となり、記事の期待出力と実機の結果が一致しました。
1:59型を書くことで、その変数に何が入るかが一目で分かります。
2:04次に型推論です。
2:05変数を宣言するときに初期値があると、タイプスクリプトがその値から型を自動で判断します。
2:11スライドのカテゴリという変数は、初期値が文字列なので、ストリング型と推論されます。
2:17すべての変数に型注釈を書く必要はありません。
2:20値が明確な箇所は推論に任せ、関数の引数など、意図を明示したい箇所に型を書くと、
2:24コードが読みやすくなります。
2:28ただし、推論された型は後から変えられません。
2:31ストリングと推論された変数に数値を入れようとすると、型エラーになります。
2:37実機でも同じ動作を確認済みです。
2:39迷ったときは、関数の入り口と出口に型を書くところから始めると、推論との役割分担がつかみやすくなります。
2:47型エラーを実際に体験します。
2:49ストリング型の変数に、数値の百二十三を代入するコードを書いてみます。
2:54このコードをコンパイルすると、ナンバー型はストリング型に代入できない、というエラーが表示され、
3:00エラーコードはティーエス二三二二でした。
3:05実機でも同じエラーが出ることを確認済みです。
3:08大切なのは、この検査は開発時のもので、実行時に値を自動で変換する処理ではない点です。
3:15間違いを実行前に知ることで、本番で初めて気づくトラブルを減らせます。
3:21エディター上でも、型に合わない代入にはその場で診断が表示されます。
3:26関数の入力と出力を型で表します。
3:28引数の型は、それぞれの名前の後ろに書きます。
3:31戻り値の型は、引数リストの閉じカッコの後ろに書きます。
3:35スライドの例は、タイトルと閲覧数を受け取り、文章にして返す関数です。
3:40実行すると、タイプスクリプト入門は百二十五回読まれました、と表示され、記事の期待出力と一致しました。
3:48戻り値の型注釈を省略しても、この例では処理の内容からストリングと推論されます。
3:53関数の境界に型を書いておくと、呼び出し側で引数を間違えたときに、すぐにエラーで気づけるようになります。
4:01インターフェースで、オブジェクトの形を表します。
4:04インターフェースは、オブジェクトに必要なプロパティと、その型を定義する仕組みです。
4:11スライドでは、名前と記事数を持つオーサーという型を定義し、その型の値を作っています。
4:17記事の例では、この値を受け取る関数が、葵は三本の記事を公開しています、という文章を返し、
4:22実機でも同じ結果でした。
4:26関数は、必要な形を満たす値を受け取ります。
4:29特定のクラスで作った値である必要はなく、形さえ合っていればよい点がポイントです。
4:35オブジェクトの形が決まると、プロパティ名の書き間違いもエラーで検出できます。
4:41クラスで、状態と処理をまとめます。
4:44クラスは、状態を保持するオブジェクトと、その状態を扱う処理を一つにまとめる方法です。
4:52スライドの例では、記事数を数えるカウンターを作っています。
4:57プライベートなカウントが状態で、パブリッシュを呼ぶたびに数が一つ増えます。
5:04コンストラクターの引数にパブリック・リードオンリーと書くと、引数を受け取ると同時に、
5:09読み取り専用のプロパティを定義できます。
5:15二回公開して要約を表示すると、葵、二本となり、記事の期待出力と一致しました。
5:22なお、プライベートやリードオンリーは型チェック上の制約です。
5:27実行の流れを確認します。
5:29記事の環境では、ティーエスシーというコマンドで、型チェックとジャバスクリプトへの変換を行います。
5:36ストリクトという設定を付けると、厳しめのチェックが有効になります。
5:42エラーがある場合は出力を止める設定も、記事の例には含まれています。
5:47変換でできたジャバスクリプトのファイルを、ノードで実行すると結果が表示されます。
5:53記事のサンプルはタイプスクリプト四・九・四のストリクト設定で確認されており、
5:57今回の実機確認でも同じ出力が得られました。
6:02型チェック、変換、実行という三つの段階を意識しましょう。
6:06コマンドの詳しい手順やインストール方法は、次回の環境構築の回で画面を見ながら確認しますので、
6:11今回は流れだけ押さえてください。
6:16最後に、型の限界を押さえます。
6:18型を書いても、外部から来るデータが本当にその形かどうかは保証されません。
6:23たとえばエーピーアイのレスポンスに型を付けても、実際にプロパティが存在するかは別の検証が必要です。
6:31また、コンパイラのターゲット設定で古いジャバスクリプト向けに構文を変換できますが、
6:36実行環境にない新しいエーピーアイを自動で追加するわけではありません。
6:42クラスのプライベートも型チェック上の制約で、実行時の秘匿を保証するものではありません。
6:49型で防げる間違いと、実行時の検証が必要な箇所を分けて考えることが大切です。
6:54画面の入力値や共有する関数が増える大きなアプリほど、型の効果は出やすくなりますが、
7:00業務ルールの正しさまで保証されるわけではない点も覚えておきましょう。
7:05まとめです。
7:06タイプスクリプトは、ジャバスクリプトに型の記述と静的な検査を加えた言語で、
7:12型チェックを経てジャバスクリプトへ変換してから実行します。
7:17基本の型はブーリアン、ナンバー、ストリングで、初期値があれば型は推論されます。
7:23関数の境界やオブジェクトの形には型を書き、インターフェースやクラスで構造を表せます。
7:30一方で、外部データの検証など、型だけでは守れない部分もあります。
7:35配列や非同期処理の動きはジャバスクリプトの知識が土台です。
7:39次回は環境構築として、インストールから最初のコンパイルと実行までを進めます。
7:45お疲れさまでした。

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

この動画で学べること

TypeScriptでできることを基本のコードから解説。JavaScriptとの関係、型推論、関数とオブジェクトの型、外部入力の検証、コンパイルと実行の流れを学べます。

解説記事・サンプルコードを読む：TypeScriptとは？JavaScriptとの違いと基本の書き方を入門解説 →