はじめに
先日、下記動画を用いてTypeScriptを勉強したときに、そもそもどうやってTypeScriptで書いたコードを画面で表示させるのか？？といった概念理解が難しいなと感じました。勉強する前に、TypeScriptを用いたソースコードを実務で眺めていたのですが、仕組みをほぼ理解していなかったため、「なぜwebpackやNode.jsを途中で使っているのか？」「bundleって何？」など疑問が多く出ていました。
そのため、TypeScriptで書いたコードの画面表示方法(build手順)を図解形式でまとめました。皆さんの理解の一助になれれば幸いです。
参考動画：https://www.youtube.com/watch?v=qSHlXcSces8
画面表示までの仕組み
TypeScriptファイルを作成して画面を表示させるまでの流れは以下のようになります。
ここでは、画面表示までの流れ(=build手順)を説明します。
全体の流れとして、①コンパイル→②バンドル→③PC表示の3ステップとなります。
①コンパイル
ここでは、typescriptを用いて、TypeScript構文をJavaScript構文へ変換することを行っていきます。この作業をコンパイルと呼びます。実際にコーディングを行っていく場合は、管理ファイルtsconfig.jsonから初期設定を行います。
②バンドル
次に、webpackを用いて、複数のJavaScriptファイルを1つのファイルにまとめていきます(ファイルをまとめる工程をバンドルと呼びます)。webpackとは、依存関係を考慮しながらファイルを1つにまとめるバンドラであることから、バージョン修正を手動で行うことが不要であるため手間が大幅に削減できます。コーディングを行う場合は、webpack.config.jsから初期設定を行います。
③PC表示
最後に、Node.jsを用いて、JavaScriptファイルから画面表示まで行っていきます。通常は、JavaScriptファイルはブラウザ上でのみ動作可能であるため、OSの機能(ファイルの読み書きやネットワーク通信など)が使えません。そこで、Node.jsを導入することで、OSの機能が利用可能となり、JavaScript構文を用いた画面表示が可能となります。Node.jsのより詳しい説明は下記リンクになります。また、コーディングを行う場合は、package.jsonから初期設定を行います。
Node.jsの詳細説明：https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb
最後に
上記の仕組みを経て、TypeScript構文を画面上に表示することが可能となります。
今回の図解を通して、個人的にはかなり整理ができました。次は、TypeScriptの型宣言をまるっと理解できればと思っています。