本記事では、次世代JavaScript「AltJS」として注目を集めているプログラミング言語「TypeScript」について解説していきます。
TypeScriptとは？
TypeScriptは、JavaScript を拡張して開発されたスーパーセット（上位互換）、言ってしまえばJavaScriptを進化させたプログラミング言語です。
Microsoft社が2012年に開発、2017年にリリースし、Google社の社内標準言語として採用された2.2以降は、2ヶ月に1回のペースでバージョンアップされています。
JavaScriptと大きく違うのは、JavaScriptが動的型付けであるのに対し、TypeScriptは静的型付けであるということです。
TypeScriptはなぜ生まれた？
JavaScript はクライアント側の Webブラウザ上で Webページの表示制御を行うクライアントサイドスクリプトのプログラミング言語として開発されましたが、徐々にサーバーサイドの開発にも用いられるようになり、想定していなかった用途が必要になりました。しかし、市場の要求に応じて拡張はするものの、コードの冗長化や複雑化といった問題が引き起ってしまいました。
こういった問題を解決しようとオブジェクト指向の概念を取り入れ、コンポーネント群の開発を容易にするツールとして TypeScript が開発されました。
「AltJS」の最有力候補
TypeScriptは次世代JavaScript「AltJS」のなかでも特に有力な言語です。AltJS (=Alternative JavaScript)とは、「JavaScriptに取って代わるもの」という意味の造語でコンパイル（プログラミング言語で書かれたプログラムをコンピュータが理解し、動けるような言葉に変換すること）するとJavaScriptが生成されるプログラミング言語を指します。
TypeScript のコードは、コンパイルすると JavaScript のコードに変換されるため、JavaScript の実行環境さえあればすぐに使えます。また、JavaScriptライブラリも使えるなど、互換性が高いといった特徴もあります。TypeScript の構文は JavaScript と非常に似ているので、JavaScript を習得している人は比較的容易に習得できるでしょう。
将来性◎
日本国内ではまだ JavaScript が主流ですが、JavaScriptと高い互換性を保ちつつ、JavaScript の持つ問題を解消するなど、開発効率や DX（開発者体験）に優れており、多くの開発現場で採用されています。
また、TypeScript は大規模な開発でも対応できるよう設計されているため、徐々に TypeScript への移行が進んでいくと考えられます。また、Googleの社内標準言語になり、AngularJSやReactといった人気のフレームワークでも推奨されるなど、知名度も上がっていることからTypeScriptの将来性は高いといえるでしょう。
JavaScriptとの違い
大規模な開発におけるJavaScriptの欠点を補うために開発されたJavaScriptの進化版「TypeScript」ですが、それらの違いとして、具体的には以下のようなものがあります。
静的型付け
JavaScript が動的型付けの言語であるのに対し、TypeScript は静的型付け言語です。
動的型付けは、プログラムの冒頭で変数や関数のデータ型の宣言する必要がなく、プログラムによって型が決まります。これにより、コードの記述量を少なくできるため、小規模なプログラムや型の変動がある実行環境での開発に適している反面、プログラム実行時に型の不一致によってエラーが発生することもあります。
JavaScript のほかにも Ruby や Python がこれに当たります。
対して、静的型付けは、あらかじめ変数や関数のデータ型を宣言してからプログラムを記述するため、コンパイルする際に変数に定義した型と割り当てた値の型が異なる場合にエラーが出ることで、エラーを未然に防ぐことができます。ほかにも、型を指定することで、コードが読みやすくなる、メモリを効率よく使えるなど、開発効率も上がり、大人数での開発や長期的なメンテナンスにも向いています。
TypeScript のほかにも C#、C++などがこれに当たります。
クラスの作成
TypeScript ではクラス（データ構造を作成する仕組み）を作れます。JavaScript だとコードが冗長化してしまいますが、TypeScript では、クラスを作ることで、ソースコードを効率的且つ簡潔に記述できます。これにより、複雑で大規模な開発においても、可読性が上がります。
特徴
JavaScriptとの互換性が高い
前述のとおり、TypeScriptはJavaScriptのスーパーセット（上位互換）です。TypeScriptはコンパイル後にJavaScriptのソースコードに変換されるため、JavaScriptを使って開発していたアプリでも開発できます。JavaScriptの実行環境さえあれば簡単に移行できるのが魅力ですね。また、JavaScript 向けのライブラリやフレームワークも TypeScript から使うことができます。このように、互換性の高さが特徴です。
型定義が可能
こちらも先述しましたが、変数の型を定義できるため、JavaScript を静的型付けの言語にでき、データ型にまつわるトラブルを軽減できます。
それ以外にも、変数を宣言しなくても、自動的に各々の型を決定する型推論や同じソースコードでさまざまな型のデータを処理できるジェネリックも利用できるようになります。
TypeScriptのメリット・デメリット
メリット
型を宣言するためエラーを未然に防げる
TypeScriptは型（どんなものを扱うか、はじめに定めるルール）の宣言を強制しています。
あらかじめ変数の型をプログラムコード内で宣言できる静的型付け言語であり、コンパイル実行時に宣言した型と割り当てた値の型が異なる場合はコンパイルエラーとなるため、エラーを未然に防ぐことができます。
JavaScriptより短く読みやすいコードが書ける
TypeScript ではクラス（処理を理解しやすく、使いやすくする仕組み）を作れるため、どこにどんな処理があるかわかりやすくなります。これにより、JavaScript では冗長化しがちなコードを大幅に短縮でき、可読性が上がることで開発時だけでなくリリース後のメンテナンスもしやすくなります。
また、生成したクラスごとに function を管理できるので、複数人でコーディングする場合もコーディングの効率化や統一化が容易になり、大規模な開発でもスムーズに開発を進められます。
モダンなJavaScriptの機能を使える
TypeScriptには、最新の JavaScript の機能が組み込まれており、アロー関数や async/await などといったモダンな機能を使えば、短く、シンプルなコードを記述できるため、開発効率も上がります。
動作が速い
TypeScriptはコード内で型を宣言できる静的型付けの言語なので、コンパイル実行時に型を決める動的型付けのJavaScriptよりも処理速度が速くなります。また、定期的なバージョンアップによって処理速度も改善されています。特にTypeScript 3.9では、特定のパッケージでの編集・コンパイルなどに対する処理の遅さを改善するといったアップデートが行われました。
デメリット
学習コストがかかる
TypeScript は型の強制以外にも便利機能が多いかわりに、JavaScript よりもコーディングにおける制約が多く、クラスの作り方やデータ型の設定方法、機能の拡張方法など、新たな知識が必要になります。使い方がわからないと使いこなすのが難しいため、どうしても知識を身につけるまでの「学習コスト」は高くなります。
JavaScriptを習得した人でもTypeScript を使いこなすにはある程度の時間や労力を要すことを理解しておきましょう。
日本語の情報が少ない
TypeScriptの利用者は増えつつありますが、比較的新しい言語ということもありJavaScriptと比べるとまだまだ少ないのが現状です。日本語で書かれた情報が少ないため、わからないことがあった際は手間がかかってしまう可能性があります。
そのため、JavaScriptの知識をある程度身につけてからTypeScriptの学習を始めるほうが理解しやすいでしょう。
ただ、Google社の社内標準言語になったことやAngularJSやReactといった人気のフレームワークで推奨されていることもあり、人気の高まりに伴って技術情報も今後増えていくと思われます。
TypeScriptとJavaScript、どちらから学習するべき？
ここまで、TypeScript について解説してきましたが、結局どちらから学ぶべきか迷う人もいるでしょう。
結論から言うと、両者には互換性があるため、どちらからでも問題ありません。
ただ、JavaScript に慣れた人が型の指定がある TypeScript を使う際、違和感を覚えてしまう可能性があります。
そのため、はじめから TypeScript を学ぶつもりがある人は最初から TypeScript を学ぶのがおすすめです。
JavaScriptフレームワークとの関係性
JavaScript のフレームワークを用いれば、TypeScript でもアプリを効率的に開発できます。
そのため、TypeScript でアプリを作成するのであれば、JavaScriptフレームワークとの関係性について知っておくと良いでしょう。
JavaScript 向けのフレームワークにもいくつかありますが、そのなかでも代表的なフレームワークの特徴と TypeScript との関係性について紹介します。
AngularJS
AngularJS は Google社が開発したJavaScript用のフレームワークですが、バージョン2.0以降では TypeScript での開発が公式で推奨されています。
2012年にリリースされた比較的古いフレームワークではありますが、フレームワーク内に多くの機能が備わっていることや扱いやすさから、現在でも多くの企業で使われています。
React
React は Facebook によって開発された UI を構築するための JavaScript ライブラリです。動作が早いのが特徴で開発元のFacebookをはじめ、Instagram、Slackといった世界中の多くの企業で採用されています。
Reactは JavaScript 向けのライブラリですが、拡張機能を使えば TypeScript でも利用できます。
Vue.js
Vue.js は、UI構築のための JavaScriptフレームワークです。
シンプルな設計で動作が軽いのが特徴です。ほかのライブラリと組み合わせることで小規模なものから大規模なものまで、幅広いアプリ開発ができます。
Vue3.0 は TypeScript で記述されているため、拡張機能を使わずとも TypeScript を使えます。
TypeScriptを使っている企業やサービス
TypeScriptを開発したMicrosoft社だけでなく、海外の企業を中心に多くの企業で導入されています。有名な企業では、以下のようなものがあります。
-
Google
-
Microsoft
-
BMW
-
VMWare
JavaScript の後継として将来性の高い言語であるため、海外に続いて、日本においても導入する企業が増えていくでしょう。
Slackの導入事例
最後に、ビジネスビジネスチャットツール「Slack」が TypeScript を導入した事例について紹介します。
Slackは、大規模な JavaScript のコードベースを管理しやすくするため、2017年に JavaScript から TypeScript へと移行しました。
TypeScript が採用された理由の一つは、JavaScript のスーパーセットであり、コードを1行も変更せずに使用できるからです。
Slack のエンジニアである Felix Rieseberg氏は「TypeScript のコンパイラオプションを徐々に有効にしていく方針を取り、移行作業自体は困難であったが、コンパイラによって多くのバグが見つかり、自動でコードを検証するエディタ機能を使うことで開発がスピードアップするなど、劇的な改善が見られた」と語っています。
