Skip to content

フロントエンド(TypeScript Webpack React)について

ShinyaKato edited this page May 20, 2018 · 2 revisions

フロントエンドのビルド

クライアントサイドはTypeScriptで書かれていて、Webpackを用いてJavaScriptにトランスパイルしている。
Webpackの設定はwebpack.config.jsを見ること。
主な使用ライブラリはReactなど。

lintツール

以下のコマンドでTypeScriptのlintツールを実行できる。

npm run lint
npm run fix

動作を確認しているブラウザとポリフィル

TypeScriptのトランスパイルは構文レベルでのみES5に変換される。
平たく言えば、ES6で追加されたArray.prototype.findなどはトランスパイル後もそのまま残る。
したがって、ブラウザが対応していなければ、エラーとなる。

こういった問題の対処のためにポリフィルと呼ばれる、仕様で策定されたがブラウザに実装されていない機能を補うライブラリが存在する。
TypeScriptで書かれた部分にはbabel-polyfillを用いている。
ES6とES7の機能の一部が補完される。
よって、ES5までサポートされているブラウザならば動くはず。

Chrome/Firefox/Edgeは最新バージョンで動作を確認。
IEはバージョン11での動作を確認している。