VIDEO LESSON

TypeScriptとは？JavaScriptとの違い・入門から実践までの学習ガイドの解説動画

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

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

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

0:00こんにちは。
0:00今回はタイプスクリプトの概要ガイドです。
0:04連載七本で個別のテーマを学んできましたが、この回では全体を一望します。
0:09タイプスクリプトは、ジャバスクリプトに型の記述と静的な型チェックを加えた言語です。
0:16文字列を受け取る関数へ数値を渡す、存在しない項目を参照する、といった間違いを、
0:20実行する前の段階で見つけやすくします。
0:25この動画では、ジャバスクリプトとの違い、開発環境、基本型、型エラーの直し方、
0:29そして実践的な型設計までを順に整理します。
0:34難しい構文を一度に暗記する必要はありません。
0:38全体像をつかんでから、目的に合うテーマへ進みましょう。
0:42タイプスクリプトは、マイクロソフトが中心となって開発するオープンソースの言語です。
0:49ジャバスクリプトの変数、関数、配列、クラスといった仕組みを土台に、値の種類やオブジェクトの形を型として記述できます。
0:58静的な型チェックとは、プログラムを実行する前に、コード上の値の使い方を検査することです。
1:06型の情報は、エディターの入力補完、定義への移動、そしてコンパイラの診断に使われます。
1:13一方で、型注釈やインターフェースは、ジャバスクリプトへの変換時に通常は取り除かれます。
1:20実行される処理そのものはジャバスクリプトなので、ブラウザーやノードの動きも合わせて学ぶ必要があります。
1:29ジャバスクリプトでは、実行時の値に応じて動作が決まります。
1:33タイプスクリプトを導入すると、それに加えて開発中に型の整合性を確認できます。
1:39ソースファイルは通常、ティーエスという拡張子を使い、ジェイエスエックスを含む場合はティーエスエックス、
1:45型宣言だけのファイルはディーティーエスを使います。
1:52メリットが大きいのは、複数人で同じデータを扱う開発や、長期間保守するシステムです。
1:58項目名を変えたときに、古い名前を読む箇所を型チェックで発見できます。
2:03一方で、型設計の学習やビルド設定の保守は必要です。
2:07変更の頻度やチームの人数に合わせて、導入する範囲を決めましょう。
2:13フロントエンドでは、画面の入力データ、コンポーネントへ渡す値、通信中・成功・失敗といった状態を型で表せます。
2:21たとえば記事一覧がタイトルとアイディーを必要とするなら、受け取るデータの形を明示できます。
2:28ただし、タイプスクリプト自体が画面表示を行うフレームワークになるわけではありません。
2:35バックエンドでは、ノードで動くエーピーアイやデータ変換、バッチ処理にも利用できます。
2:41前と後で型定義を共有すると変更を追いやすくなりますが、外部から受け取る値は共有した型だけを信頼せず、
2:48サーバー側で検証し、認証や業務ルールを適用することが大切です。
2:54まずは公式のプレイグラウンドで短い例を試し、診断と生成されるジャバスクリプトを見比べるのが手軽です。
3:03本格的に始める場合は、ノードとエヌピーエムを用意し、学習用のフォルダーでタイプスクリプトを開発用依存関係としてインストールします。
3:14画面の例は、文字列を受け取って挨拶を返す関数です。
3:19コンパイルして実行すると、こんにちは、タイプスクリプトさん、と表示されます。
3:25引数を数値の百二十三に変えると、文字列の引数へ数値を渡しているため型エラーになります。
3:33型チェック、ジャバスクリプトへの変換、実行は、それぞれ別の役割を持つことを押さえてください。
3:41基本の型を確認します。
3:43ストリングは文字列、ナンバーは数値、ブーリアンは真偽値を表し、ストリングの配列は文字列の並びを表します。
3:52型は変数名の後ろに書きますが、初期値などから分かる箇所では型推論を利用でき、
3:57すべての変数へ同じ注釈を繰り返す必要はありません。
4:03画面の例では、記事のタイトル、閲覧数、公開フラグ、タグを一つの型で表し、
4:07表示用の文字列を作っています。
4:12実行すると、型を学ぶ、十二回、公開、と表示されます。
4:16なお、ナンバーだけでは正の整数や価格の上限までは表せません。
4:22型の範囲と、実際の値の条件は区別して考えましょう。
4:26型エラーが出たら、まず渡している値の型と、受け取り側が求める型を確認します。
4:33数値が必要な場所へ文字列を渡しているなら、入力の形式を確認して変換するか、
4:37受け取り側の仕様を見直します。
4:42理由を確認せずエニーやアズで診断を消すと、問題を実行時まで見逃すことがあります。
4:49特にアズは、値を変換する命令ではありません。
4:52文字列にアズナンバーと書いても数値にはならないのです。
4:57実際に変換する処理と、不正な入力を拒否する処理を用意してください。
5:03インポートや設定のエラーでは、パスの大文字小文字や、設定ファイルが読み込まれているかも合わせて確認します。
5:12ヌルやアンディファインドの可能性を指摘された場合は、存在しない値にメソッドを呼ぶ前に、
5:17分岐で扱いを決めます。
5:21画面のフォーマットネーム関数は、名前が省略されたらゲストと表示します。
5:27アンディファインドでないことが分かった分岐の中だけで、前後の空白を取り除くトリムを呼んでいます。
5:35実際に、アンディファインドを渡すとゲスト、空白に囲まれた葵を渡すと葵、と表示されます。
5:42なお、条件に数値をそのまま使う書き方は、ゼロも除外してしまうため、値の有無だけを調べたい場合には適さないことがあります。
5:52分岐による型の絞り込みが、ここでの要点です。
5:56実務では、まずジェネリクスが役立ちます。
5:59入力と出力の型の関係を保って共通処理を作る仕組みで、数値の配列から取り出せば数値、
6:04文字列の配列なら文字列として扱えます。
6:09一つのデータ型から登録用や表示用の型を導くには、ユーティリティ型を使います。
6:15ピックは項目の選択、オミットは除外、パーシャルは任意項目化、レコードはキーと値の対応、
6:20リードオンリーは読み取り専用を表します。
6:25これらは型の世界の操作で、実データを削除する処理ではありません。
6:30非同期処理ではプロミスで成功した値の型を表し、画面の状態にはユニオンを使うと、
6:35矛盾した状態を減らせます。
6:39学習は三段階で進めます。
6:41入門では、型を間違えたときの診断と、正しいコードの出力を両方説明できることを目指します。
6:48基礎では、関数、インターフェース、モジュール、型ガードを順に確認し、入力を受け取り、
6:54確認や変換を行って、別ファイルの関数で結果を返す小さなプログラムを作ります。
7:01実践では、ジェネリクスとユーティリティ型で重複を整理し、非同期処理と型設計へ進みます。
7:07よくある疑問として、テストは型があっても必要です。
7:12計算の間違いや不正な応答は型だけでは確認できません。
7:16進み具合は記事数ではなく、サンプルの値を変えたときに結果を予測できるかで判断しましょう。
7:23まとめです。
7:24タイプスクリプトは、ジャバスクリプトに型と静的なチェックを加え、間違いを実行前に見つけやすくする言語です。
7:33型チェック、変換、実行の役割を区別し、基本型と推論から始めて、エラーを両側の型で読み解くことが土台になります。
7:42外部の値は実行時に検証し、確認できたデータだけを使うこと、そしてジェネリクスやユーティリティ型は、
7:49困っている処理を解くために必要な範囲で導入することが大切です。
7:55既存のプロジェクトへは、外部入力の境界や、複数箇所から使う関数を一つ選んで小さく取り入れるのがおすすめです。
8:05これで概要ガイドは完了です。
8:07お疲れさまでした。

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

この動画で学べること

TypeScriptとは何か、JavaScriptとの違い、環境構築、基本型、型エラーの解決方法を解説。TypeScriptの入門から実践まで、コード例と目的別の学習順で理解を深められます。

解説記事・サンプルコードを読む：TypeScriptとは？JavaScriptとの違い・入門から実践までの学習ガイド →