TypeScriptとは？初心者にもわかりやすく解説します

TypeScriptとは

TypeScriptは、JavaScriptを拡張して作られたプログラミング言語です。Microsoftが開発しています。JavaScriptに「型静的型付け」などを追加したスーパーセットで、JavaScriptの進化系とも言える言語となっています。

TypeScriptのコードは、コンパイルすることでJavaScriptのコードに変換されます。このように、コンパイルすることで最終的にJavaScriptのコードを得られる言語のことを「代替JavaScript言語（altJS）」と言います。altJSには、他に「CoffeeScript」や「Haxe （ヘックス）」などがあります。

JavaScriptはとても優秀である一方、様々な問題点を抱えています。動的型付けであるがゆえにバグが発生しやすかったり、元が小規模のスクリプト言語として開発されたもののため大規模開発に不向きであったり、といった点です。いまやほとんどのWebサイトに使われていて、最もポピュラーな言語のひとつでもあるJavaScriptを「嫌い」というエンジニアが多いのは、この問題点に起因しています。

そこで開発されたのがaltJSです。TypeScriptをはじめとるすaltJSは、JavaScriptの抱える問題点を解決するために開発されました。TypeScriptは、JavaScriptが苦手とする大規模開発で使用されることを目的に開発された言語となっています。

TypeScriptはJavascriptとは違うの？

TypeScriptはaltJSですから、コンパイルさえしてしまえば通常のJavaScriptです。JavaScriptにできることは、TypeScriptもできるようになっています。このaltJSの特徴からTypeScript＝ JavaScriptと考えることもできますが、TypeScriptはJavaScriptの欠点を補うため、JavaScriptにはない機能も持っています。厳密にいえば、このふたつは別の言語です。

TypeScriptとJavaScriptの違いのひとつが、「静的型付け言語」であることです。静的型付け言語では、関数や変数にあらかじめ「型」を設定しておき、設定された型とは異なるデータを扱うことはできません。たとえば「数値型」とした変数に対して「文字列型」のデータは扱えない、ということです。

対してJavaScriptは「動的型付け言語」です。動的型付け言語では、関数や変数に型を設定しておくことはありません。実際にプログラムを動かした時に型が決定します。このため「実際にプログラムを動かしたら予期しない動きをした」ということが起こり得るのです。

2つの入力値の足し算結果を得るためのプログラムをJavaScriptで書いたとします。たとえば入力値がどちらも「1」なら、「1+1=2」という結果を得られると思い込んでいるのですが、実際にプログラムを動かしたら「1+1=11」という結果が得られました。なぜかというと、入力された「1」が「数値型」ではなく「文字列型」であったためです。静的型付け言語であれば、数値型と決めた変数で文字列型のデータは扱えないためエラーになりますが、動的型付け言語であるJavaScriptは、さも問題ないように動作してしまいます。

また、コンパイルが必要な点もJavaScriptにはないTypeScriptならではの特徴です。JavaScriptはインタプリタ言語であり、コンパイルを必要としません。コードを実行する時に機械語に翻訳していく言語です。

対して、TypeScriptは書いたコードをJavaScriptに変換するためにコンパイルが必要です。ある言語から別の言語に変換するため、機械語に翻訳する「コンパイル」とは厳密に言うと意味が違ってくるため「トランスパイル」と表現することもあります。

TypeScriptはどういう時に使う？

Javascriptは元々小規模のスクリプト言語として作られ、中～大規模開発には不向きな言語でした。そのJavaScriptを大規模開発向けに扱いやすくするために作られた言語がTypeScriptです。そのためJavaScriptのコードを大量に扱うような大規模開発や、複数のプログラマーが参加する開発プロジェクトでは、JavaScriptではなくTypeScriptの方が向いています。TypeScript最大の特徴である静的型付けにより、JavaScriptよりもバグが発生しにくいです。あらかじめエラーを防ぐことができるため、それに伴い開発スピードも上がります。また、変数や関数の定義が明確となることで、第三者が見ても分かりやすいコードに仕上がります。保守性がグッとあがり、後の苦労を減らすこともできるでしょう。

このようにJavaScriptにはない魅力を備えたTypeScript。こんなに強力な機能を備えているならJavaScriptはやめてTypeScriptに全面的に乗り換えようと思うかもしれません。しかし「JavaScriptではなくTypeScriptを採用する」と決める際には、一旦立ち止まってコンパイルにかかる時間についても注目してみてください。TypeScriptの利用にはコンパイルが必要です。JavaScriptはインタプリタ言語ですから、エラーを見つけた時でも修正したらブラウザをリロードするだけでテストができました。TypeScriptを採用すると、こうはいきません。一度JavaScriptに変換するという工程が入り、コンパイル時に型チェックなどを行うため、時間がかかります。

JavaScriptやTypeScriptの本来の目的通り、小規模なものであればそのままJavaScriptを、中～大規模なものはTypeScriptを採用すると、規模感により使い分けをするのが良いでしょう。

TypeScriptが使われているサービス

それではここで、TypeScriptが使われている実際のサービスをご紹介します。

LINE NEWS

「LINE NEWS」は普及率が高いコミュニケーションアプリ「LINE」に搭載されているプロダクトです。月間120億PVを誇る巨大サービスで、家族や友人とメッセージを交換する傍らで読んでいるという人も多いのではないでしょうか。

LINEというネイティブアプリに搭載されているLINE NEWS。ネイティブのように見えて、実はWebViewが使われています。 非常に大きなサービスであるLINE NEWSは、開発側も大規模な構成となっているそうです。行動量はもちろん、開発人数も多いLINE NEWSは、ReactとTypeScriptで作られていています。

以前はTypeScriptではなくJavaScriptで開発が行われていたそうですが、実際の開発現場では「静的型付け言語のTypeScriptだったらこんなバグは起こらなかったのに」ということが起こっていたそうです。そうした経緯から、LINE NEWSはTypeScriptでの開発に移行していったのだとか。TypeScriptの得意とする大規模開発に利用され、成功している例です。

Abema TV

インターネット上のテレビサービス「Abema TV」にもTypeScriptが使われています。元々、Abema TVでは品質維持のために「FlowType（Flow）」を利用してJavaScriptのボトムアップを行っていたようです。

FlowTypeとは、JavaScriptで静的型付けができるようにする「静的チェッカー」です。TypeScriptと同様にJavaScriptが動的型付けであるために生じる問題への対抗策として用いられますが、Googleトレンドによれば人気はTypeScriptが優位。対応するパッケージもTypeScriptより少なく、将来性にかげりもあります。こういった面からでしょうか。Abema TVはTypeScriptに完全移行し、FlowTypeはなくしていく方針だということです。

Slack

ビジネス向けチャットツールとして有名な「Slack」にもTypeScriptが活用されています。Slackも元々はJavaScriptを使って開発していたそうですが、大規模開発に対応するためにTypeScriptへの移行を行っています。

SlackがJavaScriptをやめてTypeScriptを選んだ理由のひとつは、「TypeScriptがJavaScriptのスーパーセットだったから」というもの。TypeScriptはJavaScriptの構文をそのまま扱うことができるため、これまで積み重ねてきたコードをすべてダメにしてしまうことがありません。JavaScriptからTypeScriptへ移行していく作業も、一括してではなく段階的に行っていくことができます。TypeScriptを導入後はコンパイルにより多くのバグを発見することが可能となり、開発がスピードアップしたそうです。

TypeScriptだけ勉強しておけばOK？

TypeScriptは非常に魅力的な言語であることがお伝えできたかと思います。JavaScriptと比べてこれだけ多くの利点があると知ると、TypeScriptさえできれば良いのかと言う気持ちになってしまうかもしれません。

しかし当然そんなわけはなく、「JavaScriptだけ」のコードの書き方を知っておく必要はあります。TypeScriptは大規模開発向けの言語ですから、小規模開発の場合は採用せず、JavaScriptを使っていくという選択がされるはずです。

また、JavaScriptの拡張言語はTypeScriptだけではありません。案件によってはCoffeeScriptやHaxeを利用することになることもあります。昨今ではReactやAngular、Vue.jsなどの新しいフロントエンドフレームワークも、盛んに開発現場で取り入れられるようになってきています。TypeScriptは、こういったJavaScript製フレームワークと一緒に使う場面もあるため、 TypeScriptと並行して、これらの学習を始めるのもよいでしょう。

JavaScript製のフレームワークも大変豊富で、Web業界は技術の流行り廃りも激しいため、いろいろな言語やフレームワークにアンテナを張っておくことは大切です。

まとめ

今回はJavaScriptのスーパーセットであるTypeScriptについてご紹介致しました。

JavaScriptとは異なり、静的型付け・コンパイラ言語であるTypeScriptは、型を有することでエラーが発生しにくかったり、コンパイル時にバグを発見することができたりといった、JavaScriptにはない魅力があります。小規模なスクリプト言語としてつくられたJavaScriptでは対応が難しい、中～大規模な開発に適しているため、JavaScriptを利用した大規模開発を企画している場合には、ぜひJavaScriptではなくTypeScriptの採用を検討してみてください。

ただしJavaScriptのコードが小規模で済む場合は、TypeScriptの採用は見送るのが良いでしょう。TypeScriptは強力な機能を兼ね備えていますが、コンパイルに時間がかかるという欠点があります。こういった場合はTypeScriptではなく、そのままJavaScriptを採用するとスムーズです。

また、既存のJavaScript制のサービスをTypeScriptに置き換えていくことも可能です。TypeScriptでは、JavaScriptのコードがそのまま利用できるため、一部をTypeScriptに置き換え、残りはまた後日…といった運用も可能となっています。TypeScriptの利点と開発の規模感を照らし合せ、TypeScriptを採用するか、JavaScriptのままいくかを検討していくと良いでしょう。