目次

　

1. 概要

これまでこのブログでは、JavaScriptを利用したWeb Appをいくつか作ってきていますが、 動作確認時、型が使えないことに起因する代入バグで困ることが何度もありました。

その解決として、今後はTypeScriptを勉強/導入しようと考えています。 まずは入門教材としてサバイバルTypeScriptで学習し、個人的に重要だと思った箇所を備忘録として記事に記載していこうと思います。

今回の記事では、第2章 TypeScriptのあらましについて勉強した内容を記載します。

　

2. TypeScriptの特徴

  • JavaScriptに型が追加されたもの
    • 型があることでコンパイル時に様々な問題を発見可能
    • エディタの恩恵により、コーディング中の型チェックなども可能
  • TypeScriptで書かれたコードはJavaScriptにコンパイル（トランスパイル）される
  • JavaScriptに互換性があり、JavaScriptが実行できるすべてのブラウザ、コンピュータ、OSで動作可能
    • 拡張部分は主に型に関するものであり、その他の殆どの文法はJavaScriptに由来する
    • TypeScriptを導入したとしても、既存のJavaScript資産はそのまま活用可能
  • オープンソース

　

3. TypeScriptを使う利点

3.1. 大規模開発に適している

大規模アプリケーション開発に求められる以下の三大特徴をTypeScriptは備えている

  1. 型による静的チェック
  2. モジュール性
  3. 緩やかな学習コスト

3.2. JavaScriptの知識があれば使い始められる

TypeScriptはJavaScriptの仕様はそのままに、TypeScriptの機能/利点を追加している。

そのため、通常新しい言語は学習に数ヶ月かかるところを、TypeScriptではひとまずJavaScriptとしてコーディングし、少しづつTypeScriptの恩恵を最大化していくようにコードを手直しするアプローチが可能。

※ 注意点として、JavaScripで罠とされている言語仕様もそのまま引き継いでしまっている。

3.3. 古いJavaScript環境を対象とした開発シーンでも最新の構文が使える

TypeScriptはコンパイル時にJavaScriptバージョンを選択可能。

また、TypeScriptはECMAScript（JavaScriptの仕様、毎年1回メジャーバージョンアップされる）へ準拠しており、そこで採択された新機能はいち早く取り入れられる。

加えて、ESNext（将来JavaScriptで使用可能となることが確定している言語仕様）も先取りして取り入れている。

※ 注意点として、新しいAPIの利用だけは旧バージョンJavaScriptでの実行エラーとなる。（TypeScriptはあくまで構文の変換だけを担っているため）

3.4. 利用者人口の多いAltJS言語である

Stack Overflowなどの複数の調査において利用者人口/満足度で上位を獲得している。

利用者人口が多く、満足度が高い言語を選択することで、以下の利点を享受できる。

  • 情報が豊富に出回っており、学習/トラブルシュートがしやすい
  • エコシステムが充実しており、数多くのIDEサポート/フレームワークの恩恵を得られる
  • 採用しているプロジェクト/企業が多く、就職に有利になる

　

4. 静的型付けと動的型付けの違い

比較項目 静的型付け言語 動的型付け言語
主な言語 C言語, Java, TypeScriptなど Ruby, Python, PHP, JavaScriptなど
型決定タイミング コンパイル時に変数の型が定まる。型にまつわる問題はプログラムを実行しなくても発見できる。 実行時に変数の型が定まる。型にまつわる問題はプログラムを実行してみないと発覚しない。

　

5. TypeScriptを採用できる範囲

採用分野 メモ
フロントエンド ブラウザではJavaScriptが圧倒的な地位を確立しているため、大きな力を発揮することが可能。
バックエンド Node.jsなどのサーバーサイドJavaScript実行環境のエコシステムに乗ることが可能。
デスクトップApp Electronなどのフレームワークを利用することでデスクトップApp開発が可能。
CLI App oclifなどのCLIアプリケーションフレームワークを利用することでCLI App開発が可能。
サーバレス(FaaS) サーバーレスとは、サーバーの構築や保守なしに、サーバーサイドのプログラムを実行できる仕組み。 AWS Lambdaなどを利用することで、TypeScriptでサーバーレスなウェブアプリケーションを提供可能。
インフラ構成管理 (IaC) インフラ構成をコードで定義し、プログラマブルにすることをIaC(Infrastructure as Code)と呼ぶ。 AWSのインフラ構成を自動化するツールAWS CDKはTypeScriptをサポートしている。
Google Apps Script Google Spreadsheetなどには、JavaScriptで機能を拡張する仕組みが備わっており、それをGoogle Apps Scriptと呼ぶ。 TypeScriptで書いたコードはJavaScriptにコンパイルすれば、Google Apps Scriptで利用可能。
ブラウザ拡張 Google ChromeやFirefoxなどのブラウザ拡張はJavaScriptで書くことが可能。コンパイルによりTypeScriptも利用可能。
機械学習 TensorFlow.jsなど、JavaScript用の機械学習ライブラリを利用可能。
組み込み MicrosoftはTypeScriptのサブセット言語として、リソースの少ない組み込みデバイスを対象としたStatic TypeScript(STS)を開発中。
WebAssembly AssemblyScriptなど、TypeScriptでWASMを開発できるようにする試みも出てきている。
　

6. おわりに

今回はサバイバルTypeScriptの第2章 TypeScriptのあらましを題材に、TypeScriptの概要や利点について勉強しました。

次回の記事では、サバイバルTypeScriptの第三章 作って学ぶTypeScriptを題材に、実際にコーディングを行ってみるつもりです。

　

7. 参考