JavaScriptエコシステム
TypeScriptと同じ課題を解決しようとしている技術#
TypeScriptは、大規模なプログラムの開発における課題を、静的型検査を行うことで解決します。この静的型査での同様な立ち位置の技術としてFlowが挙げられます。
Flowは、JavaScriptの静的型検査を行います。TypeScriptはJavaScriptを拡張した言語として提供され、コードの主たるチェック対象はTypeScriptのコードです。一方、Flowには独自の言語がなく、あくまでJavaScriptにコメントのような型アノテーションを追加しただけになっています。
Flowは、既存のJavaScript資産に静的型検査を素早く導入したい場合に向いています。FlowもTypeScriptもできることはほぼ同じです。TypeScriptの文法はJavaScriptと互換性があるように設計されてはいますが、あくまで別言語なので、ある日唐突にJavaScriptに戻りたくなっても気軽には戻れないでしょう。
コラム: 静的型検査とは？#
通常JavaScriptは実行時に型チェックを行います。つまり、実行してみないと型にエラーがあるか、エラーがないのかわかりません。数値を期待している関数に文字を渡してしまっている、というようなミスでも実行してみるまでわかりません。
FlowやTypeScriptでは、実行する前にこういった型の不整合が検出できます。つまり単純なミスによる不具合は静的型検査で事前にすべて発見できるということです。これは不具合が含まれた製品がリリースされることが少なくなるということを意味します。
これが型指定が多少面倒でもTypeScriptやFlowを導入する理由の一部となっています。
TypeScriptと違う目的の技術#
TypeScriptはJavaScriptにコンパイルする「トランスパイラ」と呼ばれる技術です。トランスパイラはTypeScriptの他に、CoffeeScriptやDartがあります。技術的なTypeScriptもCoffeeScriptも同じジャンルですが、CoffeeScriptやDartがまったく新しい言語をJavaScript環境で動かせるようにするためにトランスパイルを採用しているのに対し、TypeScriptはあくまでJavaScriptプラスアルファなコードをJavaScript環境で動かせるようにするためにトランスパイルをするという点で、やや毛色が異なります。
トランスパイラの一種にBabelというツールがあります。これはJavaScriptの最新の言語仕様を、古いJavaScript環境でも使えるように変換するものです。BabelはTypeScriptと異なり、型のチェックなどは行いません。
TypeScriptと関係のある技術#
TypeScriptは、開発を助けるツールと一緒に使われることがあります。いくつか紹介します。
モジュールバンドラ#
モジュールバンドラとは、複数のJavaScriptをひとつのJavaScriptに結合するためのツールです。JavaScript以外にもCSSなども結合してブラウザに配信しやすい形に整えることがモジュールバンドラの目的です。webpackがよく使われていますが、設定が複雑でよくわからない場合は、設定ファイルがいらないparcelも選択肢のひとつになるでしょう。
タスクランナー#
タスクランナーは、ある決められた処理を実行しやすい形にまとめて、実行の順序などを意識せずに実行できるようにするツールです。gulpやgruntなどが使われています。
パッケージマネージャ#
パッケージマネージャは、JavaScriptのライブラリをインターネット上で公開し、誰でも使えるようにすることと、自分が作っているプログラムがどのライブラリに依存しているか、を記述すると自動的にインストールしてくれる便利なやつです。
npmや、npmを拡張したyarnが使われています。
実行環境#
JavaScriptを実行する環境としてNode.jsとブラウザがあります。多くのブラウザやNode.jsの内部にはv8エンジンというJavaScriptを評価して実行するエンジンが組み込まれています。JavaScriptはコンパイルして機械語にするということはできず、必ずNode.jsやブラウザといった実行環境が必要になります。
コードフォーマッター#
コードフォーマッターは、あるルールにしたがってソースコードのタブやインデントの量や種類、その他細かい書き方の揺れを整形してくれます。コードフォーマッターを使うと誰が書いても同じ見た目のコードに整形することができます。
よく使われるのが、Prettier(プリティア)と、ESLint(イーエスリント)です。Prettierはコード整形を主目的としています。一方ESLintはコードの間違いなども指摘してくれます。TypeScriptとESLintを一緒に使うときは、ESLint TypeScript Pluginを使用するとよいでしょう。