仕事ですぐに使えるTypeScript その１
目的
学習の記録と学びになった部分をアウトプットするため。
期限
対象書籍の読了・内容理解が8月中に完了していること。
対象
今回の対象は「前書き」。
著作権者：フューチャー株式会社（Future Corporation）様
前書き
三行サマリ
- ユーザーがプライベートで使用するアプリケーションのフロントエンドがリッチ化し、エンプラアプリケーションにもそれが求められるようになってきた。
- 現代のブラウザは多様化し、ブラウザによってサポートしているJavaScriptのバージョンが異なるため、場合によってはBabelやTypeScriptを使用してトラディショナルなJavaScriptに変換することが必要。
- TypeScriptを使用すると、JavaScriptに型情報をつけることができ、tsconfig.jsonで指定したECMAScriptのバージョンに変換することができ、変換後のJavaScriptのコードはBabelよりも実行効率の良いコードになる。
本ドキュメントの位置付け
- 以前のエンプラアプリケーションはサーバーサイドレンダリングでCRUDを量産することが多かった。
- しかし、現在ユーザーがプライベートで触れるアプリケーションがリッチになっていき、フロントエンドのフレームワークも複雑化した。
- フロントエンドがリッチなアプリケーションに慣れたユーザーが１日の大半を過ごす仕事で使用するアプリケーションが時代遅れというのは大きくストレスを与える。
- 近年、ReactやVue.js等のフレームサークの導入はエンプラでも積極的に取り入れられるようになってきた。
- しかし、BootstrapやjQuery時代と比べると記載する分量も多く、しっかりとした設計が求められる。
- そうした背景から社内コンテンツとして本教材を作成している。
TypeScriptのウェブ開発における位置づけ
- JavaScriptはブラウザで動く言語である以上、ユーザーが使用しているブラウザによって最新のECMAScriptの文法が使用できるかがわからないという課題がある。
- そのため、高度なJavaScriptでコーディングし、それをトラディショナルなJavaScriptに変換する、という流れが加速した。
- 大規模になると（小規模でも）、型情報があるとエラーチェックが実装中に行われるので開発がしやすくなる
- そこで使用されたのがBabelとTypeScript
- Babel
- ECMAScriptの最新の文法を解釈し、古いJavaScript環境でも動くようコンパイルする。オープンソースで開発されている。
- Babelでもプラグインを使用して型情報をつけることができるFacebook作成のflowtypeがあるが、型情報を手作業で整備しなければならないため、あまりシェアが高くない。
- TypeScript
- MicroSoftが開発。JavaScriptに型情報を付与できるようにしたもの。
- 以前の静的型付け言語とは違い、型推論ができるのがいいところ。
TypeScriptを選んで開発する理由
- 理由は大きく3点。
- 型情報を付けて開発できること。
- 前述したように、現代ではブラウザによるECMAScriptのサポートがバラバラな中、TypeScriptを使用せずとも必ずBabel等で互換性の高いJavaScriptへの変換が必須。結局何かしらの変換ツールは入れなければならない。TypeScriptでは変換するJavaScriptのバージョンも指定できる。
- 型情報がわかった上で変換を行うので、Babelよりも実行効率の良いJavaScriptのコードを生成することができる。
