導入
TypeScriptプログラミング言語は、開発者にとってJavaScriptに比べて多くの利点があります。TypeScriptは追加機能を備えているため、より複雑なインタラクティブアプリケーションやウェブサイトを、より少ないバグで構築できます。.
TypeScript には、インライン ドキュメントやライブ コード レビューを提供する大規模な開発者ツールのエコシステムもあり、作業中にコーディング エラーを見つけやすくなります。.
この記事では、TypeScript とは何か、JavaScript とどのように関連しているかを説明し、フロントエンドおよびバックエンド アプリケーションの構築を開始するのに役立つリソースを提供します。.
TypeScript とは何ですか?
TypeScript は、JavaScript に追加機能を追加するプログラミング言語です。.
JavaScriptは、複雑なフロントエンドやバックエンドのアプリケーションを動かすために設計されたものではありません。元々は、ウェブサイトにシンプルなインタラクティブ機能を追加するために設計されました。例えば、クリック可能なボタンを作成したり、ドロップダウンメニューにアニメーションを付けたりといった機能です。.
しかし、JavaScriptは、その用途を超えた可能性を見出した開発者の間で人気が高まり、いくつかの問題を引き起こしました。JavaScriptはあまりにも寛容すぎる言語でした。プログラミングミスや、後でアプリケーションを壊してしまうような機能の誤用が起こりやすく、またJavaScriptには他の言語にある多くの機能が欠けていました。TypeScriptは、既存のJavaScript環境との互換性を保ちながら、これらの問題を解決するために開発されました。.
TypeScriptは静的型付け言語であり、JavaScriptの既存の構文と機能を基盤として構築されたJavaScriptのスーパーセットです。つまり、TypeScriptコード内でJavaScriptを使用することはできますが、TypeScriptで記述されたコードはJavaScriptでは利用できない機能と構文を使用しているため、JavaScriptコード内でTypeScriptを使用することはできません。.
TypeScriptは、WebブラウザやNode.jsなどの環境で実行するには、JavaScriptにコンパイルする必要があります（低水準言語に変換されないため、「変換」とは別の用語です）。TypeScriptコードをJavaScriptにコンパイルした場合、生成されたJavaScriptコードは直接編集できません。.
TypeScriptアプリケーションを構築するワークフローは、TypeScriptで記述し、JavaScriptにコンパイルしてデプロイするというものです。この追加ステップは不必要に複雑に見えるかもしれませんが、これには十分な理由があります。もしTypeScriptが全く新しい言語であれば、検討する価値はないでしょう。しかし、TypeScriptはJavaScriptをコンパイルして既存のシステムで実行できるため、広く受け入れられています。.
TypeScriptのファイル拡張子は.tsです。以下は、基本的なTypeScriptコードが記述されたindex.tsというサンプルファイルです。
let message: string = "Hello, World!";
function greeting () {
console.log(message);
}
greeting();構文は JavaScript と非常に似ていますが、この例では異なる点が見られます。メッセージ変数の後にコロン (:) が続き、その型 (この場合は TypeScript) により、メッセージが文字列である必要があり、異なる型の値を取ることができないことを指定できます。.
開発者にとっての TypeScript の主な機能とメリット
TypeScriptという名前は、JavaScriptに型安全性を導入するという主要な特徴に由来しています。上記の例では、message変数に文字列型が適用されているため、数値やその他の型は使用できません。これは制限的に思えるかもしれませんが、実際には開発者にとってメリットとなります。.
型安全性とコンパイル時のチェックによりプログラミングミスが減少
次のようなシナリオを考えてみましょう。2つのHTMLテキスト入力から値を取得し、それらを加算したいとします。JavaScriptはこれらの値を文字列（テキストボックスです！）として読み取ります。その結果は次のようになります。
let a = "2"; // Assuming the value has been read from a text input
let b = "5";
console.log(a + b); // Result is "25"このコードは警告やエラーなしで実行され、テキスト ボックス内の値は文字列として扱われます。つまり、算術演算を使用して加算されるのではなく、連結され、7 ではなく「25」という望ましくない結果になります。ビジネス ツールを構築していて、金銭的な価値を加算したい場合は、これは非常に悪い結果になる可能性があります。顧客に過剰請求していることになります。
これは型安全性がなぜ重要なのかを示しています。以下では、追加された変数の型は、型を追加することで適用されます。
let a: number = "2";
let b: number = "2";
console.log(a + b);このコードをコンパイルして実行しようとすると、動作せず、代わりにエラーが発生します。
タイプ「文字列」はタイプ「数値」に割り当てることはできません。.
これは、誤って文字列値を数値変数に代入しようとしたことを示しています。そのため、例えば文字列を明示的に数値に変換するなどして修正できます。TypeScriptは、タイプミスがあるとコードのコンパイルと実行さえも行わないため、プログラムのデバッグが容易になり、ユーザーにとって信頼性が向上します。.
TypeScript では、変数の型を指定する必要はありません（通常は指定する必要があります）。型推論により、型を指定せずに変数を宣言して使用することができ、TypeScript は値と使用方法に基づいて型を推論します。これは、型指定されていない JavaScript コードを TypeScript プロジェクトにインポートする場合に便利です。.
これを自分で試してみたい場合は、TypeScript Playground を使用すると、コンパイルせずにブラウザーで直接 TypeScript コードを記述してテストできます。.
カスタム型、クラス、インターフェースにより、データの一貫性が維持されます。
TypeScript は、独自のカスタム型のサポート、クラス、インターフェース、継承の改善により、JavaScript のオブジェクト指向プログラミングのサポートを拡張します。.
独自のオブジェクト タイプとインターフェイスを構築すると、TypeScript でデータをモデル化し、データが正しく処理され、保存されることを保証できます。.
クラスと継承により、クリーンなコードと DRY 原則が実現され、従来の JavaScript よりもコードベースが整理された状態を維持できます。.
列挙型とリテラル型を使用すると、コードが理解しやすくなります。
列挙型を使用すると、あいまいになる可能性のある値に名前を付けることで、コードが読みやすく便利になります。.
例えば、データベースのスペースを節約し、検索を高速化するために、注文のステータスを数値として保存するとします。「保留中」「支払済み」「発送済み」といったステータスではなく、それぞれ0、1、2といった数値として保存するとよいでしょう。.
副作用として、数値自体があまり意味をなさないため、コードが混乱してしまいます。どの数値がどの条件に対応しているかを忘れてしまい、間違った数値を使ってしまう可能性があります。列挙型は便利な解決策を提供します。
enum OrderStatus {
pending,
paid,
shipped,
}上記のリストでは、「pending」の値は0（プログラミングにおける他のインデックスと同様に、列挙型は項目の位置を0からカウントし始めます）、「paid」の値は1、「sent」の値は2です。列挙型を使用する場合、その値を名前で参照し、インデックス値が返されます。
console.log(注文ステータス.支払い済み); // 1を出力します
リテラル型と共用体は、変数に特定の値を代入します。例えば、「cat」または「dog」という値のみを受け取る関数があるとします。
function myFunction(pet: "cat" | "dog") {
console.log(pet);
}コードがこの関数に「cat」または「dog」以外の値を渡すと、エラーが発生します。これにより、開発中により多くの問題を発見できるようになります。特定の入力を期待する関数を記述することで、予期しない値が渡されるバグが発生した場合、プログラムがコンパイルされなくなることを認識できます。.
TypeScript をインストールして TypeScript コンパイラを使用する方法
TypeScript コードを Web ブラウザーや Node.js で実行できるようにするには、JavaScript にコンパイルする必要があります。そのためには、TypeScript コンパイラをインストールする必要があります。.
次の npm コマンドを使用して、TypeScript をグローバルにインストールできます。.
npm インストール -g タイプスクリプト
インストールしたら、npx を使用してターミナルのどこからでも tsc TypeScript コンパイル コマンドを実行できます。
tsc インデックス.ts
上記のコマンドは、TypeScript ファイル index.ts をコンパイルし、index.js という名前のコンパイル済み JavaScript ファイルを出力します。.
TypeScriptでプログラムを書く方法
TypeScriptは、複雑な複数ページのアプリケーションやウェブサイトの構築に最適です。多くの開発者は、個々のウェブページにインタラクティブ機能を追加するといった基本的な用途にはTypeScriptを使用しませんが、ReactやAngularを使った大規模なアプリケーションの構築にはTypeScriptを使用します。.
多くの開発者は、コード補完、インライン ドキュメント、エラーの強調表示を活用して開発およびデバッグのプロセスを効率化できるように、TypeScript 統合をサポートするコード エディターを使用しています。.
既存の JavaScript コードを使用できますか?
はい！TypeScriptはJavaScriptと互換性があります。古いJavaScriptコードをインポートしてTypeScriptプロジェクトで引き続き使用し、必要に応じて変更することで新しいTypeScript機能を活用することができます。.
ブラウザ用のTypeScriptでビルドを完了する
Reactは、フロントエンドアプリケーションのユーザーインターフェース作成を支援するライブラリです。再利用可能なコンポーネントを構築するための基盤を提供し、アプリケーション開発をモジュール化してシンプルにします。また、ページ上のコンテンツの表示、非表示、移動、外観の変更など、ユーザーが操作できる動的なページを作成することもできます。ReactアプリケーションはTypeScriptで記述でき、この組み合わせはフロントエンド開発者にとって人気があり強力なツールチェーンです。.
Angularは、TypeScriptを使用してコンポーネントを構築する包括的なフレームワークです。Reactを凌駕し、ユーザーインターフェース構築ツールに加えて、完全なアプリケーションのためのフレームワークも提供します。Angularの概念的なアプローチにより、開発者はアプリケーションのコンセプトがAngularアーキテクチャに適合していれば、より迅速に開発を進めることができます。.
ReactとAngularはどちらも、IonicとElectron向けのTypeScriptアプリの構築に使用できます。IonicではTypeScriptを使用してiOSおよびAndroid向けのモバイルアプリを構築でき、ElectronではWebアプリをWindows、Linux、MacOS向けのデスクトップアプリに埋め込むことができます。.
TypeScriptバックエンドをサーバーにデプロイする
TypeScriptはフロントエンドアプリケーションの構築に限定されません。Node.jsと組み合わせて、バックエンドサービスやコマンドラインアプリケーションの開発にも使用できます。.
また、Fastify Web フレームワークで TypeScript を使用したり、Nest などの TypeScript 固有のフレームワークを使用して型セーフな API を作成したりすることもできます。.
TypeScriptとGraphQL
GraphQLは、APIからデータを検索・取得するためのクエリ言語です。TypeScriptと同様に型付けされているため、構造化された一貫性のあるデータを提供します。GraphQLをサポートするサービスを利用してバックエンドにGraphQLを実装し、その型をTypeScriptコードに適合させることで、バックエンドサービスでモデル化されたすべてのデータがフロントエンドに正しく反映され、フロントエンドで収集されたすべてのデータがアップロード時に正しく保存されることが保証されるため、アプリケーションの品質を大幅に向上させることができます。.
Contentful を使用して構成可能なコンテンツを管理している場合、コミュニティのメンバーが、コンテンツ タイプの型宣言を生成し、TypeScript をコンテンツ モデルと同期するのに役立つアプリとツールを作成しました。.
