なぜTypeScriptを使うべきか
ウェブアプリケーションのフロントエンドを開発するのに、最低限の必要となる言語はHTMLやCSSを除けばJavaScriptだけです。JavaScriptさえ使えれば、かなり自由にフロントエンドを実装できます。それなのに、なぜJavaScriptではなくTypeScriptを使ったほうがいいのでしょうか？ここでは、TypeScriptを使うべき理由を大きく分けて4つ見ていきます。
TypeScriptは大規模開発に最適な言語
TypeScriptが発明されるに至った歴史的背景を「TypeScript誕生の背景」で見ましたが、JavaScriptではまかないきれなくなった大規模アプリケーション開発を克服するために生まれたのがTypeScriptです。
📄️ TypeScript誕生の背景
TypeScriptは、JavaScriptでも大規模なアプリケーションを開発しやすくすることを目的に開発されたプログラミング言語です。
そのため、大規模なアプリケーション開発の現場が求める三大特徴をTypeScriptは備えています。
- 型による静的チェック
- モジュール性
- 緩やかな学習コスト
このうち特に型による静的チェックは、TypeScriptに「Type」という名が冠されているように、TypeScriptの目玉機能です。型チェックはプログラムを実行せずとも、プログラムの欠陥に気づくことができます。バグは発見が遅れるほど修正コストが高くつきますが、TypeScriptではコーディング中に頻繁にチェックすることができ、バグ早期発見によって修正コストも抑えることができます。Airbnbによると、TypeScriptを使っていたらAirbnbの38%ものバグを未然に防げたと見る分析を発表しています。
また、型があることで、プログラムの可読性や理解しやすさが上がったり、エディターの補完機能を活かすことができ、コーディングの効率も良くなります。
TypeScriptは公式に「大規模なアプリケーション」が具体的にどれほどの規模なのかは明言していませんが、筆者の感覚からいうと、数百行規模のコードでもTypeScriptの恩恵は十分に享受できると考えています。
ただし、静的チェックは品質保証の銀の弾丸ではないことは、公平に申しておかなければなりません。静的チェックは、誰が読んでも絶対におかしいと客観的に判断できるような欠陥をあぶり出すものです。たとえば、未定義の変数へのアクセスや、正しくないデータ型の取り扱いなどです。仕様バグや、実行時エラーを検出することはできません。品質保証においては、テストなど他の手法も組み合わせる必要があります。それでも、静的チェックがあるおかげで、TypeScriptで検出できる類のバグはテスト工程から省略できるのは確かです。
JavaScriptの知識があれば使い始められる
TypeScriptはJavaScriptのスーパーセットです。スーパーセットというのは、JavaScriptの仕様はそのままに、それにTypeScriptならではの新しい機能や利点を追加したものという意味です。つまり、JavaScriptのコードはそのままTypeScriptのコンパイラが理解できるのです。
この特徴により、開発陣が得られるメリットのひとつが、JavaScriptの知識があればTypeScriptを使い始められるということです。これは新しい言語の学習コストをとても緩やかなものにしてくれます。新言語の導入となると、難しい言語だと学習に数ヶ月要し、そこからやっと書きはじめるということもありえますが、TypeScriptの場合はひとまずJavaScriptとして書き始め、少しずつTypeScriptを学んでいき、徐々にTypeScriptの恩恵を最大化するようにコードを手直ししていくといったアプローチが可能です。TypeScriptにはJavaScriptにはない数多くの機能がありますが、どれも選択的に導入していくことができます。
JavaScriptのスーパーセットであるということは、裏を返せばJavaScriptを知らないといけないということでもあります。なので、TypeScriptをJavaやC#のようなものだと期待していたり、JavaScriptを学ぶつもりがまったくないとすると、TypeScriptでの開発はフラストレーションになるかもしれません。JavaScriptでいわゆる「罠」と言われるような注意すべき言語仕様は、TypeScriptでもそのままというものもあります。JavaScriptにまったく触れたくないならTypeScriptは適していませんが、JavaScriptを使うつもりでいたのならTypeScriptは有力な選択肢になるでしょう。
古いJS環境を対象とした開発シーンでも最新の構文が使える
プロジェクトの要件によっては、ES5といった古いJavaScriptしかサポートされていないブラウザでも動作するように実装しないといけない場合があります。TypeScriptは、そのような古いJS環境をターゲットとしたプロジェクトにも導入可能です。
TypeScriptはコンパイル時にどのバージョンのJavaScriptにコンパイルするかを選べます。TypeScriptが対応しているもっとも古いJavaScriptのバージョンはES3で、これはモダンブラウザ以前の古いブラウザにも対応できます。次に古いES5へのコンパイルでは、Internet Explore 9などの2012年当時のモダンブラウザにも対応できます。
TypeScriptの魅力は古いバージョンのJavaScriptにコンパイルできるだけではありません。JavaScriptの仕様であるECMAScriptは毎年1回のペースでメジャーバージョンアップされ、その度に便利な新機能が導入されてきています。TypeScriptはECMAScriptへの準拠を原則としており、ECMAScriptで採択された新機能はいち早く取り入れられます。
さらに、TypeScriptはESNextと言われる次のECMAScriptに導入される言語仕様、別の言い方をすれば、未来のJavaScriptで使用可能になることがほぼ確定している言語仕様も先取りして取り入れています。
ECMAScriptへの追従に加え、ESNextの先取りによりプログラマは最新のJavaScript構文を使いながら、古い環境のコードにも対応できるようになります。
注意が必要なのは、新しいAPIの利用です。たとえば、ECMAScript 2015(ES6)で導入されたMapクラスやSetクラスを使ったコードをTypeScriptで書き、それをES5にコンパイルすると、構文エラーは起きないものの、MapクラスやSetクラスを使う部分は実行時エラーになります。これは、TypeScriptはあくまで新しい構文を古いJSコードに変換する仕事だけを担っているためです。もし、古い環境で新しいAPIを使う必要がある場合は、core-jsなどのポリフィルを併用することで解決することができます。
TypeScriptはもっともポピュラーでもっとも愛されるAltJSである
JavaScriptにコンパイルして使う言語を総じて「AltJS」と呼びます。TypeScriptはAltJSの一種で、AltJSには他にもさまざまな言語があります。その中でもTypeScriptはもっともポピュラーな言語です。
Stack Overflowが約65,000名の開発者をターゲットに行った調査から、ポピュラーなプログラミング言語ランキングを発表しています。このランキングはAltJSだけでなく、JavaScriptやJava、C#などすべてのプログラミング言語を含んでいます。このランキングで、TypeScriptはC言語やRubyを抑えて、9位にランクインしています。
別の調査に、世界中のJavaScriptユーザー約2万人を対象に行ったアンケート調査「The State of JavaScript 2020」があります。これによると、TypeScriptは2017年から2020年の4年間で連続して満足度ナンバーワンに輝いています。そして、93%ものユーザーが「満足し、もう一度使いたい」と回答しています。
利用者人口が多く満足度の高いプログラミング言語を選択することは、さまざまな利点があります。まず、情報が豊富に出回っている点です。新しい言語を学ぶ際にも、トラブルシューティングの際にも情報の絶対量が開発のしやすさを大きく左右することは言うまでもないでしょう。
次に、エコシステムが充実していることです。VSCodeやJetBrains IntelliJ IDEAといったTypeScriptをサポートするIDEがあり、数多くのフレームワークやパッケージもTypeScriptに対応しています。言語単体の仕様がいくら優れていたとしても、開発を取り巻く環境が整っていなければ、他の言語にすでにあるようなツールやパッケージを自ら再発明しないといけなくなってしまいます。TypeScriptはエコシステムが充実しているので、そういった心配は不要です。
最後に、採用や就職の面でもTypeScriptは有利です。使用人口が多いということは企業側にとってプログラマが探しやすいということであり、求職者にとってはプロジェクトを探しやすいということです。TypeScriptは先の調査結果で示されたとおり高い満足度があり、そうした言語を採用しているプロジェクトは、プログラマからも人気が出やすく、モチベーションの高いプログラマが集まりやすいです。