JavaScriptを拡張して作られたTypeScript。JavaScriptとの高い互換性を保ちながら、エラーを未然に防げる、クラスの作成ができるなどのメリットがあります。

この記事では「TypeScript入門編」としてTypeScriptとは？という基本から特徴、メリット、JavaScriptとの違いについて解説します。初心者におすすめの学習本についても紹介するのでぜひ参考にしてください。

TypeScriptとは

TypeScriptとは、2012年にMicrosoftが開発したオープンソースのプログラミング言語です。

JavaScriptを拡張した言語で、大人数のプログラマが開発に携わる大規模プロジェクトにおいてもエラーの発生を防げるように設計されているのが大きな特徴。

JavaScriptとの互換性も高く、TypeScriptで書かれたコードはコンパイルによってJavaScriptのコードに変換されます。それ以外にも、JavaScriptの実行環境があればすぐに使える、JavaScriptのライブラリが使えるなどのメリットもあります。

こういった高い利便性から、TypeScriptは2017年からGoogleの社内標準開発言語として採用されており、今後も需要が増える将来性の高い言語と言えるでしょう。

そもそもJavaScriptとは

TypeScriptの特徴について詳しく解説する前に「そもそもJavaScriptとは」についておさらいしましょう。

JavaScriptとは、ブラウザ上でWebページをダイナミック（動的）に動かすためのプログラミング言語です。

例えば、Webサイト上で文字にカーソルを合わせると色やサイズが変わったり、メニューやヘルプなどが表示されたりするのは、JavaScriptによるもの。JavaScriptが使われていないWebページはサイトを紙に印刷したようなもので、JavaScriptのおかげでWebページに動きを出すことができるのです。

JavaScriptについては以下の記事で解説しています。

• 【入門編】JavaScriptとは？コードのサンプルやおすすめの学習サイト・本を紹介
• JavaScriptでできること・できないこととは？初心者におすすめの学習方法も解説

TypeScriptの特徴

将来性がある言語としても注目されているTypeScriptですが、具体的にどのようなプログラミング言語なのでしょうか。

ここからは、TypeScriptの特徴を紹介します。

JavaScriptとの高い互換性

TypeScriptはAltJS（Alternative JavaScript：JavaScriptの代替）と呼ばれており、JavaScriptとの高い互換性が大きな特徴となっています。

他のAltJSと同じく、TypeScriptで記述したコードはコンパイルによってJavaScriptのコードに変換されます。反対にJavaScriptで記述されたプログラムを、TypeScriptのプログラムとして実行することも可能。

TypeScriptでJavaScriptライブラリを利用可能なので、様々なメリットのあるTypeScriptを用いてJavaScriptコードを記述することができるのです。

型定義が可能

TypeScriptのもう1つの特徴が、変数の型定義が可能なこと。

型定義ができることで、コンパイル時に値が定義した型にマッチしているかのエラーチェックが実行され、プログラムのミスを未然に防ぐことができます。

それ以外にも、開発時の利便性を向上させる型推論、ジェネリックも利用可能になります。

• 型推論・・・静的な型付けを持つ言語において、変数や関数シグネチャの型を明示的に宣言しなくても、初期化のための代入式の右辺値や関数呼び出し時の実引数などといった、周辺情報および文脈などから自動的に（暗黙的に）各々の型を決定する機構のこと（Weblioより引用）
• ジェネリック（ジェネリクス）・・・プログラミング言語の機能・仕様の一つで、同じプログラムコードで様々なデータ型のデータを処理できるようにするもの。（IT用語辞典 e-Wordsより引用）

JavaScriptとの違い

JavaScriptを拡張したプログラミング言語であるTypeScriptでは、JavaScriptではできなかったいくつかのことが実現されています。

JavaScriptとの主な違いについて解説しましょう。

静的型付けである

JavaScriptが動的型付けの言語であることに対して、TypeScriptは静的型付け言語です。それぞれの定義については以下の通りです。

• 動的型付け・・・変数や関数のデータ型の宣言が不要で、プログラムによって型が決定される。JavaScript以外には、RubyやPythonも動的型付け言語にあたる
• 静的型付け・・・変数や関数のデータ型を宣言した上でプログラムを記述する。TypeScriptの他にはC#、C++など静的型付け言語にあたる

動的型付けは、プログラムの冒頭で型を宣言する必要がない分、コードの全体の記述量を少なくすることができます。そのため、小規模なプログラムや型が変動する実行環境での開発に適している反面、プログラムの実行時に型の不一致によるエラーが発生する可能性があります。

一方、TypeScriptなどの静的型付け言語では、宣言した型に値が一致しているかのエラーチェックがコンパイル時に行われます。他には、静的型付けはパフォーマンスやメモリ領域の最適化の面でもメリット。変数や関数にどのような値が入るのかを定義していることで、大人数での開発や長期的なメンテナンスでもわかりやすいでしょう。

クラスの作成が可能

TypeScriptではJavaScriptではできないクラスの作成が可能です。クラスとはデータ構造を作る仕組みで、よく「オブジェクトを作る設計書」と解説されます。

クラスを作成することでソースコードを効率的・簡潔に記述することができ、複雑で大規模な開発プロジェクトにおいても、よりわかりやすいコーディングが可能になります。

TypeScriptのメリット

JavaScriptの高い互換性と型の定義が実現されたことで、実際にシステム開発においてどのようなメリットがあるのでしょうか。

TypeScriptの需要が高まっている背景にある、そのメリットについて解説します。

コードが短く・読みやすい

「JavaScriptとの違い」で解説した通り、TypeScriptではクラスの作成が可能となっています。これにより、よりコードを簡略化して記述することができるのです。

自分で書いたコードはともかく、他のプログラマの書いたコードは案外読みづらいもの。しかしクラスによって読みやすいプログラムにすることで、大人数での大規模プロジェクトでもスムーズに開発を進めることができます。

動作が早い

「TypeScriptの特徴」と「JavaScriptの違い」でも解説した通り、TypeScriptは静的型付け言語です。

静的型付けは、プログラムの実行時に型を決定する動的型付けよりも動作が早いと言われています。また、TypeScript自体も定期的なアップデートによって速度改善が行われていることから、パフォーマンスの向上にも効果があります。

最新のJavaScriptにも対応できる

TypeScriptでは最新のJavaScriptにも対応できる点もメリット。JavaScriptは頻繁にアップデートが実施される言語であるため、一部のマイナーなブラウザでは最新のJavaScriptに対応していないことがあります。

TypeScriptでは、コンパイルによって旧バージョンのJavaScriptへ変換されるため、プログラマ自身でブラウザ対応をする必要がないのです。

TypeScriptのデメリット

様々なメリットがあるTypeScriptですが、プログラミング初心者がTypeScriptの学習を始める際には注意すべきこともあります。

TypeScriptのデメリットや注意点についてもしっかりと理解した上で、どのような技術を使うべきかを判断しましょう。

学習コストが高い

TypeScriptはJavaScriptを元に開発された言語ではあるものの、単体で立派なプログラミング言語。JavaScriptを使えるプログラマであれば習得が容易である、とは限りません。

JavaScriptに慣れている開発者にとっては、静的型付けであるTypeScriptはコードを書く際の制約が多く、不便に感じることもあります。また、フレームワークやライブラリをTypeScriptに対応させる際の方法についても学ぶ必要があります。

TypeScriptは確かに習得することで多くのメリットがありますが、使いこなすまでには労力と時間がかかることを理解しておきましょう。

日本語の情報が少ない

TypeScriptの需要・人気は近年高まりつつありますが、JavaScriptや他の言語に比べると開発者がまだ少ないのも事実です。日本人開発者のコミュニティや日本語で読める情報が少ないため、疑問や質問があった場合には英語などで検索する必要があるでしょう。

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

フレームワークとは、アプリやソフトウェアの開発時に必要となる一般的な機能や定型コードをライブラリとしてまとめたもの。

フレームワークを活用することで、プログラム開発の効率が向上する、複雑な機能の実装が容易になる、といったメリットがあります。

TypeScriptと関係の深いJavaScriptフレームワークについて解説します。

AngularJS

AngularJS（アンギュラージェイエス）とは、Googleなどの企業や個人のコミュニティによって提供しているオープンソースのフレームワーク。2012年にリリースされた比較的古いフレームワークですが、その扱いやすさと機能性により今でも多くの企業やエンジニアに活用されています。

本来はJavaScript用のフレームワークでしたが、バージョン2.0以降ではTypeScriptでの開発が推奨されています。

React

React（リアクト）とは、Facebookを中心としたコミュニティによって提供されているUI（ユーザーインターフェース）構築のためのJavaScriptライブラリ。Facebook、Instagram、Netflix、Slackなどの世界中の企業で採用されています。

Reactの推奨環境はJavaScriptですが、拡張機能を利用すればTypeScriptでも使えます。

Vue.js

Vue.js（ヴュー・ジェイエス）とは、UI構築のためのJavaScriptフレームワークの1つ。シンプルな設計で他のフレームワークよりも学習コストが小さいのが特徴。動作が軽く、さらに拡張性が高いなどのメリットにより、ZOZOTOWNやLINEを始めとする多くの企業で使われています。

TypeScriptでは拡張機能なしでVue.jsを利用可能です。

初心者におすすめのTypeScript入門書

TypeScriptの学習コストが大きいと言われる言語であるため、初心者はレベルに合わせて少しずつ扱いに慣れていく必要があります。

初心者におすすめの入門書を3冊紹介するので、TypeScriptに興味がある人はまず読んでみると良いでしょう。

プログラミングTypeScript

タイトルの通り、TypeScriptを使ったプログラム開発について解説している一冊です。基礎的な内容からエラー処理の方法、フレームワークの使い方などの実践的な内容まで、幅広く学ぶことができます。

「JavaScript中級者がTypeScriptを導入したくなった時に読む本」というレビューもあるため、プログラミング初心者はJavaScriptについて学んでからの方が良いでしょう。

実践TypeScript

TypeScriptの「型システム」について、基礎知識からフレームワークと連携した活用方法までを深く体系的に学べる本書。「導入編」と「実践編」に分かれており、基礎を理解した上で実践に進める構成になっています。

型定義のスキルを上げたい、という人におすすめ。

速習 TypeScript 第2版 速習シリーズ

「速習」というタイトルの通り、TypeScriptについてコンパクトにまとめた解説書です。基礎部分を9つのパートに分け、それぞれサンプルコードを用いて解説されています。

まずはTypeScriptについて全体像を掴みたい、という人にはぴったりの1冊。なお、基本的な用語については解説が簡略な部分もあるため、JavaScriptやNode.jsについての基礎知識があると良いでしょう。

TypeScript入門まとめ

利便性などのメリットだけでなく、Googleの標準開発言語としての将来性の高さからも注目されているTypeScript。大人数が携わる大規模プロジェクトに特に向いているため、今後も企業を中心に普及が進むでしょう。

JavaScriptの拡張言語と言えど立派なプログラミング言語であるため、習得には相応の時間と労力がかかります。学習本なども参考にしながら、学びを深めていきましょう。

↑目次へ戻る