【入門編】TypeScriptとは？特徴・JavaScriptとの違いなどを解説

※追記：2022/6/6
当記事内の記述に一部誤りがございましたので、訂正させて頂きました。
読者の皆様に深くお詫びいたします。

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の需要が高まっている背景にある、そのメリットについて解説します。

プログラムの実行前に、プログラムに潜むバグを見つけられる

静的型付け言語を利用することで、本番環境が止まってしまうといった重大なトラブルを「仕組み」で防ぐことができます。

例として、以下の足し算を行うプログラムをを見てください。「整数を受け取って、返り値として整数を返す」関数に、誤って文字列を渡してしまうケースです。

【例】TypeScriptでの足し算プログラムの書き方

1  2  3  4  5  6  7  8  9 10 11 12

//変数への代入。「number」は変数に代入できる値の種類を指定している const num1: number = 1 const num2: number = 2 //関数定義。この関数の引数として取れる値と戻り値にできる値を指定している function add(x: number, y: number): number{   return x + y } //関数呼び出し add(‘step’, ‘up’); #=> エラーになる

このような場合、静的型付け言語を利用しているとプログラムをコンピューター向けに翻訳するタイミングでエラーが発生し、問題に気づくことができます。

しかし、動的型付け言語だった場合は、プログラムを実際にコンピューターが実行して初めてエラーが起こり問題が発覚するということになります。

「整数を渡す想定の関数に文字列を渡すなんてそんなことをするわけがない」と思う人もいるでしょう。前提として、これは最も単純な例です。現実では、複雑なプログラムを書いていく中でこのような予期せぬ挙動を引き起こしてしまうことは十分起こり得ます。

10名以上のチームで、メンバー同士お互いが書いたコードを読みながら開発を行う場面を想像してみてください。関数を定義した本人以外が関数を使う時や、別の仕組みによって意図しないタイミングで関数が呼び出される時など、危険なタイミングをあげればキリがありません。

さらに言えば、実は静的型付け言語ならばプログラムを書いた瞬間に「予期せぬタイミングで呼ばれてエラーになる関数」を見つけることができます。型情報があることで、テキストエディターで関数が利用される全てのケースを自動的に検出し、エラーになる場合は警告してくれるのです。当然、その警告がある状態ではプログラムを翻訳する時にエラーになります。

プログラムの可読性が上がる

JavaScriptと違い、型の情報があることでプログラムの可読性が上がります。

チームでの開発では、自分以外の人が書いたプログラムを読み、意図を汲み取ってコードを書くことが求められます。この時、型の情報は意図を汲み取る上で有用な情報になります。

Rubyで独自のクラスの定義ができるように、TypeScriptなどの静的型付け言語では独自の型の定義ができます。これにより、プログラマーは自らの意図をコードに込めやすくなり、結果的にコードの可読性が上がります。

静的型付け言語の入門としてうってつけである

紹介してきた通り、静的型付け言語には動的型付け言語にはない良さがあります。実際に書いてみることで、プログラマーとしてのレベルアップが望めます。しかし、Rubyなどの動的型付け言語からプログラミングを始めた場合、静的型付け言語は中々ハードルが高く挑戦したくても機会がない、できない、というパターンも多いです。

その点、TypeScriptには大きなアドバンテージがあります。それは、JavaScriptで書いたものはすべてTypeScriptとしてみなせる、ということです。

TypeScriptを使う場合、いきなりコード全てをTypeScriptの文法で書く必要はありません。

例えば、一部のファイルが全てJavaScriptで書かれており、また一部のファイルはTypeScriptで書かれている、といったコードがあったとしても、問題なくJavaScriptに変換できます。そのため、JavaScriptのコードに少しずつTypeScriptを導入することが可能です。

昨今のフロントエンド開発ではTypeScriptを利用することが主流になりつつあります。つまり、職業プログラマーとして学習する合理性もあります。

TypeScriptのデメリット

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

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

学習コストが高い

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

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

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

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入門まとめ

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

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

↑目次へ戻る