TypeScriptとは？JavaScriptとの違いや勉強法を解説

TypeScriptの利用を検討しているものの、

・使い方が分からない…。
・JavaScriptとの違いが知りたい…。

という方も多いのではないでしょうか。そこでこの記事では、

・TypeScriptのメリット・デメリットやJavaScriptとの関係性
・TypeScriptのインストールからコンパイルまでの方法

について解説します。

TypeScriptの利用経験がない方でも、この記事を読めば、TypeScriptの特徴や基本的な使い方がわかります。

公開日：2020/03/16

【入門者向け】TypeScriptとは？

TypeScriptは、JavaScriptを拡張して作られたプログラミング言語です。2014年頃にMicrosoftによって開発・発表されました。

TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換されます。そのため、JavaScriptファイルが実行できる環境ならすぐに使えて、JavaScriptライブラリもTypeScriptから使用できるなど、互換性の高さが特徴です。

TypeScriptは、大人数のプログラマーが開発に携わる場合でもエラーを防ぎやすいように設計されています。ほかにも、変数のデータ型をあらかじめ決められることや、1つの関数定義で異なるデータ型の引数を処理できることなどの特徴があります。

なお、TypeScriptのより具体的な機能については、この記事の後半で解説します。

これらの大規模開発に耐えられる仕様のため、2017年にGoogleが社内の標準開発言語としてTypeScriptを採用し、需要が拡大してきました。TypeScriptは日本国内でも今後の普及が見込まれる、将来性の高い言語と言えるでしょう。

　

TypeScriptとJavaScriptの違い

TypeScriptは、JavaScriptが進化したような特徴を持つイメージのプログラミング言語です。TypeScriptとJavaScriptの具体的な違いや特徴として、以下の要素があります。

• JavaScriptは動的型付け、TypeScriptは静的型付け
• TypeScriptではJavaScriptと同様の構文が使える

ここからそれぞれ詳しく説明します。

JavaScriptは動的型付け、TypeScriptは静的型付け

JavaScriptとTypeScriptではデータ型の定義が異なります。

データ型とは、プログラムで扱われるデータの種類を示す用語で、JavaScriptコードでは実行時にデータ型が自動で決まります。この仕組みは動的型付けと呼ばれ、ソースコードを手軽に書ける反面、実行しないとエラーが分からないという短所があります。ほかの言語ではRubyやPythonなどで動的型付けが採用されています。

一方、TypeScriptは変数のデータ型をあらかじめ決めることのできる言語です。この仕組みは静的型付けと呼ばれ、コンパイルする時点でエラーが分かることや、コードの読みやすさ、大人数が開発に携わる環境で便利なことが特徴です。ほかの言語ではC#で静的型付けが採用されています。

TypeScriptではJavaScriptと同様の構文が使える

TypeScriptはJavaScriptの機能を拡張して作られているため、JavaScriptの構文が使えます。なお、JavaScriptの特徴や基本的な使い方については「JavaScriptとは？初心者向けプログラミング体験もできる！」の記事を参照してください。

　

TypeScriptのメリット

TypeScriptの主なメリットは、JavaScriptとの互換性があることや、エラーを未然に防げること、大規模開発に向いていることなどです。ここでは、TypeScriptのメリットについて解説します。

JavaScriptとの互換性がある

TypeScriptとJavaScriptは互換性があるため、すでにJavaScriptの開発環境がある場合は簡単に導入できます。また、開発環境の連携も容易で、JavaScriptファイルをTypeScriptから呼び出して使うことも可能です。

JavaScriptの使い方を学習済みの場合は、TypeScriptの習得までに時間がかからないこともメリットとして挙げられます。

型を宣言するためエラーを未然に防げる

TypeScriptは、変数の型をプログラムコード内で宣言できる静的型付けが採用されています。そのため、コードの可読性が高く、エラーを見つけやすいことがメリットです。コードを書く時点で変数や関数の型を定義する必要があるため、コンパイル時にエラーを見つけ、未然に防げます。

大規模な開発向きの機能がある

TypeScriptには、まとまった機能を簡単に記述・再利用できるクラスやモジュール、使いやすいインターフェースなど大規模開発に適した機能が備わっています。そのため、開発の規模が大きくなっても品質を保つことが可能です。

複数のエンジニアが関わる開発プロジェクトにおいても、一貫性のあるコードを書くことで実装内容を理解しやすくなり、予期せぬエラーを避けられるというメリットがあります。

　

TypeScriptのデメリット

一方、TypeScriptには以下のようなデメリットもあります。

学習コストがかかる

TypeScriptは、型を使用した独特なシステムが特徴です。他のプログラム言語との違いが大きいため、クラスの作り方やデータ型の設定方法など、新たな知識の習得に時間がかかる場合があります。

JavaScriptの知識がある開発者にとっては、TypeScriptの学習はそれほど難しくありません。ただし、JavaScriptで柔軟に設計できていたものが、TypeScriptでは複雑化する可能性があります。

日本語の情報が少ない

TypeScriptは2017年に正式にリリースされた、比較的新しい言語です。そのため、他のプログラム言語と比べて日本語で書かれた情報が少なく、トラブル時の問題解決に時間がかかる場合があります。

　

TypeScriptとJavaScriptフレームワークとの関係性

TypeScriptでアプリケーションを作成するなら、JavaScriptフレームワークとの関係性を知ることが大切です。

フレームワークを使えば、アプリケーションを効率よく開発できます。フレームワークによって決められた設定ファイルの書き換えにより、アプリケーションを簡単に作ることが可能です。

JavaScriptフレームワークには複数の種類があります。主なフレームワークの特徴とTypeScriptとの関係性は以下の通りです。

AngularJS

AngularJSはGoogleによって開発されました。AngularJSの特徴は、様々な動作端末で動くことです。ページ数の少ないWebアプリケーションや、管理画面系のアプリケーションの作成に向いています。

AngularJSは、TypeScriptでの開発が推奨されているJavaScriptフレームワークです。なお、AngularJSについてさらに詳しく知りたい方はAngularJS入門の記事を参照してください。

React

ReactはFacebookによって開発されました。Reactの特徴は改良の早さと、動作が高速であることです。UIやシングルページアプリケーションの開発に向いています。

Reactは、JavaScriptでの開発が想定されたJavaScriptフレームワークです。拡張機能を使えばTypeScriptでも使えますが、推奨はされていません。

Reactの詳細については、「初心者向け React入門！その特徴や導入・実装方法について解説」を参考にしてください。

Vue.js

Vue.jsはEvan Youによって開発されました。Vue.jsの特徴は、ほかのライブラリと組み合わせやすいことです。簡単で小規模なアプリケーションから本格的な開発まで、柔軟に対応できます。

Vue.jsも、Reactと同様にJavaScriptでの開発が想定されたJavaScriptフレームワークです。

Vue.jsの特徴や他のフレームワークとの違いについて詳しく知りたい方は、「【Vue.js入門】特徴や他のフレームワークとの比較などを紹介！」を参照してください。

　

TypeScriptのインストール～コンパイルの方法を解説

TypeScriptの動作環境を整え、簡単なコードを実行するまでの手順を具体的に解説します。

TypeScriptをインストールするためにnpmを用意する

TypeScriptファイルはJavaScriptに変換された上で実行されるため、まずはJavaScriptが実行できる環境を整えましょう。今回は、JavaScriptをデスクトップで使用できるNode.jsというプラットフォームを使用します。なお、Node.jsのインストール方法についての記事も併せてご覧ください。

Node.jsをインストールすると、パッケージ管理ツールのnpm（Node Package Manager）も自動的にインストールされます。

TypeScriptをインストール

コマンドプロンプトで次のコードを実行し、npmからTypeScriptをインストールしましょう。

実行後、以下の赤枠内のような文字列が表示されればインストールは成功です。

なお、正しくインストールできているかは、次のコードでも確認できます。

実行後にVersion 3.6.4やVersion 3.8.3などと表示されたら、TypeScriptのインストールは成功です。

TypeScriptで「Hello World!」を表示する

TypeScriptで「Hello World!」を表示するために、以下の手順で作業を進めます。

 1.TypeScriptファイルや設定ファイルを保存するためのディレクトリを作成し、移動

上記のコードをコマンドプロンプトで実行すると、sample-projectというディレクトリが作成され、その直下へと移動できます。

2.コンパイルのための設定ファイルを作成

上記のコードを実行すると、sample-project内にtsconfig.jsonという設定ファイルが作成されます。このファイルは、TypeScriptファイルをJavaScriptファイルに変換する際の設定が書かれたものです。

3.「Hello World!」を表示するためのTypeScriptファイルを作成

sample-project内に拡張子をtsとしたファイルを作成し、次のサンプルコードを記述してください。ファイル名は任意で構いませんが、今回はsample.tsとして解説を進めます。

4.コンパイルを実行し、TypeScriptファイルからJavaScriptファイルに変換

コマンドプロンプトで次のコードを実行してください。

成功すると、sample-project内にsample.jsというファイルが作成されます。

5.出力されたJavaScriptファイルをコマンドプロンプトで実行

コマンドプロンプトで次のコードを入力すると、先ほど作成されたsample.jsファイルが実行できます。

実行後、「Hello World!」の文字列が表示されれば成功です。

TypeScriptのコードをhtmlで表示する

最後に、TypeScriptのコードをhtmlで表示する方法を解説します。

ただし、TypeScriptのコードはブラウザで直接実行できないため、手順③と同様にJavaScriptファイルに変換してからhtmlに組み込みましょう。具体的な方法は次の通りです。

1.手順③で作成したディレクトリに新たなTypeScriptファイルを作成

手順③で作成したsample-projectディレクトリ内に新たなTypeScriptファイル（sample2.ts）を作成します。そして、次のサンプルコードを記述してください。

2.コンパイルを実行し、TypeScriptファイルからJavaScriptファイルに変換

コマンドプロンプトで次のコードを実行してください。

成功すると、sample-project内にsample2.jsというファイルが出力されます。

3.出力されたJavaScriptファイルをhtmlファイルに組み込み、ブラウザで開く

出力されたsample2.jsと同じディレクトリにhtmlファイルを作成し、次のサンプルコードを記述してください。

作成したhtmlファイルを任意のブラウザで開き、「Hello! World!」の文字列が表示されていれば成功です。

TypeScriptファイルからJavaScriptファイルへトランスクリプトすれば、Webページに組み込むことができます。

　

TypeScript入門者におすすめの学習法

TypeScript入門者におすすめの学習法は、参考書や本による独学や、スクール・勉強会への参加、オンライン学習などです。

TypeScriptの参考書や本を使えば、まとまった情報が自分のペースで学べます。そのため、好きな時間に独学で学習したい人におすすめです。

スクールや勉強会は、分からない点を講師に質問できるメリットがあります。ただし、スケジュールや開催場所の都合によっては、学習しづらい点がデメリットです。

オンライン学習なら、自分のペースで学びながら、必要に応じて講師への質問ができます。独学を基本として、分からないことを随時質問したい人におすすめです。

　

TypeScriptを実際に触ってみよう！

この記事では、TypeScriptの特徴や基本的な使い方について解説しました。TypeScriptは、JavaScriptの機能を拡張して作られたプログラミング言語です。大規模開発に耐えられる仕様のため、世界的に需要が高まっています。

プログラミング学習では実際にコードを書くことが重要です。

TypeScriptの基礎から応用的な使い方まで効率よく学びたい方には、以下の講座がおすすめです。

評価：★★★★★
コメント：業務でtypescriptを使用するため受講いたしました。解りやすい説明かつ網羅的に学習でき、大変助かりました。普通の開発現場で使用する知識として十分かと思われます。

評価：★★★★★
コメント：元々別の教材で学んでいましたが、こちらの方が良かったので評価を付けさせていただきます。こちらでTSを幅広く勉強出来て自分の選択肢が増えました。今は実際に仕事で使っています。この教材には感謝です！

TypeScriptの実行環境に触れながら使い方を習得して、開発者としてのスキルアップに役立てましょう。