はじめに
こんにちは！
ガク@Necono_Engineerと申します！
プログラミングスクールRUNTEQで現在Ruby on Railsを中心に学んでいます。普段の学習から一転、今回はモダンな技術である TypeScript に挑戦してみました!
概要
ポートフォリオ作成がきっかけでReactに触れる機会がありました。
そこで出会ったのがTypeScriptです。
TypeScript。
「なんか、JavaScriptっぽい名前だな」
最初はそんな単純な疑問からスタートしました。
名前のイメージだけでなく、実際触れてみて学んだこと、気づいたことを皆さんにシェアできればと思います!
プログラミング初学者のため、内容に誤りがある可能性がございます。
もし間違いがあればご指摘いただけると幸いです。
初めてのTypeScript【ECMAScript】
TypeScriptを学んでいるとまず初めにECMAScriptという言葉に出会いました。
ECMAScriptはJavaScriptのレシピのようなものです。
ECMAScriptという基本のレシピを基に、JavaScriptを使ってブラウザで動作する"料理"、つまりWebページやWebアプリケーションを作成します。
!
↑ エンジニア ↑ Webアプリ(美味しそう)
ECMAScriptにはバージョンがあります。
ES2015という言葉。
これはECMAScriptの、2015年に改定されたバージョンのことを指します。
モダンJavaScript(React、Vueなどの仮想DOMを用いるライブラリ・フレームワーク)は主にES2015以降の記法が使われています。
ECMAScriptとブラウザ問題
ECMAScriptに新しいバージョンがリリースされることでJavaScriptがアップデートされ新機能が追加されます。
しかし、このバージョンはJavaScriptの実行環境によってシンタックスのサポートの差が出てきてしまいます。
ES2021で書かれたスクリプトはGoogle Chrome,Firefox,Safari,Microsoft Edgeで使用可能です。
しかし、Internet Explorerでは構文エラーとなってしまいます。
レシピが変わると今まで作っていた人が困ってしまいます。
そこで登場するのが"トランスコンパイラ"です。
トランスコンパイラって？
トランスコンパイラは料理のレシピを翻訳するようなツールです。
有名なものに"Babel"があります。Babelは最新のJavaScriptという「難しい料理」のレシピを、誰でも使える古いJavaScriptという「簡単な料理」のレシピに変換してくれます。
つまり、ES2020などの新しいバージョンのJavaScriptのコードを、ES5などの古いバージョンのブラウザでもサポートされているコードに変換できるということです。
JavaScript(新)をJavaScript(古)に変換します。
そして
TypeScriptをJavaScriptに変換するトランスコンパイラもあります。
それが"tscコマンド"です。
tsc(TypeScript Compiler)って？
npm install -g typescript@4.3.5
上記コマンドでTypeScriptをインストールするとtscコマンドを使用できるようになります。
tscはTypeScriptで書かれたコード(TSファイル)の型チェックを行い型のエラーがなければ型情報を抜いたコード(JSファイル)に変換して出力してくれます。
これは料理で例えるなら「味見」です。
お客様の目の前(ブラウザ)に下手な料理は出せません。
TypeScriptで書かれた料理の材料(コード)が、料理のレシピ(型定義)と合っているか確認（味見）して、材料に問題があると指摘してくれるので、おいしく安全な料理(アプリケーション)が提供できるようになります。
(安心安全な料理)
フレームワークを用いず、JavaScriptを使用することを「バニラJavaScript」といいます。バニラJavaScriptは名前の通りバニラのように柔軟で、コードの組み立てにおいても何の制限もなく、自由です。このことを動的型付けと呼びます。
しかし、その自由度のデメリットとして型チェックがプログラミングを実行しながらでしか行われないため、実行中にエラーが起こりやすいです。
これに対して、TypeScriptは静的型付けを行うことで、実行前にエラーを検出できます。
1️⃣ Babelは最新のJavaScriptを古いJavaScriptに翻訳します。
2️⃣ tscコマンドはTypeScriptをJavaScriptに翻訳し、型定義と合っているかチェックします。
こうすることで、最新のJavaScriptを使い、しっかりとチェックもできるので、誰でも安心してJavaScriptの開発ができるようになります。
つまり、TypeScriptは静的型付けによって実行時のエラーを減らしたJavaScriptの上位互換なんです！
まとめ
TypeScriptには数種類の型定義の方法など、まだまだ覚えることはたくさんあります。道のりは長いですがこれからも新しい技術のキャッチアップを楽しんでいきたいと思います！