2019.03.22
2021.08.12
Fabeee社員ブログ
こんにちは、フロントエンドエンジニアのTYです。
皆さんはTypeScriptについてどの程度ご存知でしょうか？ここ数年でReactやVueを使ったシングルページアプリケーション（SPA）開発が盛んになり、中規模以上開発ではTypeScriptを採用する事例が増えてきました。私も環境構築をする際にはほぼ必ず導入していて、人にも勧めているのですが今回はその理由についてお話します。
目次
TypeScriptとは
まずJavaScript（以下jsとします）は規模の大きい開発に不向きな言語です。そこでマイクロソフトは大規模開発向けプログラミング言語を開発しました、TypeScript（以下tsとします）です。tsとjsの違いは、実際にブラウザで実行される際にはありません。tsはjsに変換することで動くからです。最終的に同じになるなら何故変換という作業を挟んでまでtsを使うのでしょうか、この話をするために少しjsの実情に触れます。
jsは言語の仕様が柔軟すぎる且つ複雑な上に、実行されるブラウザの実装に依存するためchromeで動作するjsはIEで動くとは限りません。特にIEは自動アップデートの仕組みがなく、バージョンによってjsの仕様は固定されているため、いくら新しい仕様が追加され、より簡潔により保守性の高いコードが書けるようになっても導入することは不可能でした。そこで、新しい構文で書かれたコードを一度変換することで、サポートされている昔の構文に戻す手法が採用されるようになりました。このことをトランスパイルと呼び、有名なツールだとbabelが該当します。
jsのトランスパイルの仕組みは昔のブラウザをサポートしつつjsの最新仕様を利用することです。tsの目的も殆ど同じで、上記に加えてより保守性の高いコードを表現し易くなる静的型付け機能を利用するためなのです。
導入のし易さ
tsはjsの標準機能を拡張したものです、これはjsファイルをそのままtsファイルとして扱っても動作するということです。そのため設定とファイルの拡張子だけ変更すれば、既存のコードには触れずにtsの導入が可能です。tsは一見学習コストの高い言語だと思われがちですが、tsによる追加機能の利用は任意です。これはチームの実力に応じて利用範囲を選べるということです。例えば重要なロジックだけtsの機能を活用して保守性を高めて、そうでない箇所では一切使わないのも1つの選択肢です。tsの魅力の1つは、制約の緩さによる導入デメリットの少なさと言っても良いでしょう。
静的型付け機能とは
最後にtsの追加機能、静的型付け機能について解説します。まず「型」とはデータの分類のことです。例えばhogeといった文字列を扱うのがStringという型、10といった数値を扱うのがNumberという型。他にも種類はありますが、ここでは文字と数値は区別されるということだけ分かれば十分です。
静的型付けとは、ざっくり言うと変数などが扱う型を事前に定義できることを指します。
この例で起きていることは自明であり、人によっては冗長に感じるかと思われます。一体これの何が嬉しいのでしょうか。
今度は、jsの仕様について少しだけ説明させていただきます。10+10の結果が20であることは疑いの余地がなく、数学でもプログラミングでも同じ結果になります。しかし、前述した通りプログラミングには型という概念があります。もし”10″という文字列と10という数値を足したらどうなるでしょうか、答えは”1010″という文字列です。あるいは”10″という文字列に10という数値を掛けたらどうなるでしょうか、答えは数値の100となります。
これらはjsを扱う人に取ってはある意味慣れたものなのですが、時に重大なバグの原因にさえなります。例えばもし、とある計算ロジックに数値を渡した時に返ってくる値が文字列になっていたらどうなるでしょうか。テストのタイミングで気づくことが出来れば、すぐに修正される些細な問題です。しかしjsは表面上は問題なく動作するため、見落とされるケースもあります。単体では無害かもしれません、しかし開発の規模が大きくなるに連れてこの些細な見落としは複雑で難解な問題に変貌する可能性があります。静的型付け機能は、この問題を実行前に察知し易くすることができます。件のとある計算ロジックの返す値が数値だと定義するとどうでしょうか、文字列を返してしまった時点でエラーになるためミスにすぐ気付けるのです。
以上で静的型付けの利点は分かりましたでしょうか？バグは起きるときは起きますので静的型付けは必ずしも品質を保証するものではないのですが、
jsは凡ミスを起こしやすい言語ですので出来たほうが嬉しいことは私が保証します。
終わりに
今回はts単体に話を絞りましたが、Reactとの相性の良さや、同じくマイクロソフトが開発しているVisual Studio Codeの恩恵を受けやすいなど、享受できる恩恵は思いの外多いです。使いこなそうとするとかなり骨が折れるのですが、まずは緩く使うところから始めて見るのはいかがでしょうか。
それでは失礼します。
SES/受託開発のご依頼についてはこちら
