MD-Blog_Web System

皆様初めまして、昨年12月にフロントエンドエンジニアとして入社しました、RYOです。
この度初めてブログを担当させていただきます、よろしくお願いします。

今回はエンジニアリングに関わる話題となりますが、altJS言語の一つであるTypeScriptを用いて型安全にフロントエンドを実装してみようと思います。

型安全性とは？

プログラミング言語は扱うデータによって文字列型や数値型などデータタイプが決められています。

通常、それぞれ違う型をパース（適した形式に変換）せずに組み合わせたりなどすると、型チェック時にエラーが発生してプログラムが動作しません。この型チェックを行うタイミングや記述時に「型」を明示できるかどうかで「静的型付け言語」と「動的型付け言語」の2種類に分けることができます。

ブラウザ上で動作するプログラム言語であるJavaScriptは動的型付け言語に分類され、プログラム実行時に型が決定されるのでコード記述時に型を宣言する必要がありません。

これは一見すると記述するコードが短くなり、見通しも良くなるというメリットがあるように見えますが、実はそれ以上に危険なデメリットが存在します。
プログラム実行時に型が決定されるということは予期しないデータ型で実行される可能性に気づきにくい（バグを生みやすい）ということです。

分かりやすい例が以下です。

JavaScript

var number_1 = 1;
var number_2 = "1";

function foo (a, b) {
    return  a  +  b;
};

foo(number_1, number_2);

この例では数値型の「2」を出力する想定なのですが、実際に出力される値は文字列型の「11」です。

変数 number_1 には数値型のデータが格納されているのに変数 number_2 には文字列型のデータが格納されているため、適切な結果が得られません。
おまけにJavaScriptの性質として数値型と文字列型を結合しようとすると暗黙的に数値型は文字列型に変換されるため、エラーにさえなりません。

このようにデータ型の違いに起因するエラーはよくあることなのですが、これを防ぐために各言語によって型に関する独自のセーフティシステムが存在します。
そのセーフティシステムが堅牢であればあるほど「型安全性」が高いということになります。

TypeScriptを使おう

フロントエンドで型安全に実装するために現段階で最も有力な候補は『TypeScript』を使うことです。
The State of JavaScript - 2020の結果ではTypeScriptが圧倒的にシェアを広げており、主流の各種JSフレームワークもこぞってTypeScriptに対応しています。

• The State of JavaScript - 2020
  https://2020.stateofjs.com/ja-JP/technologies/javascript-flavors/

TypeScriptは米Microsoft社が開発しているOSSの静的型付け言語であり、JavaScriptのスーパーセット言語なのでコンパイルすることでJavaScriptコードに変換することができます。

TypeScriptで書き直してみる

こちらを使って先ほどのコードを書き直してみましょう。

TypeScript

const number_1： number = 1;
const number_2： number = "1"; // コンパイルエラー！

const foo = (a: number, b: number)： number => {
    return  a  +  b;
};

foo(number_1, number_2);

この例では各変数に数値型を宣言しているため、数値型以外を代入するとコンパイルエラーが起きます。
また、コードエディタによっては間違った記述をした時点で赤い波線を引いて警告してくれるため、すぐにミスに気づくことができます。

関数の引数や返り値にも型を適用することができるため、堅牢で確実なコードを記述することが容易になります。

独自の型も作れる

さらに型を開発者自身で定義し、使用することもできます。
以下コードをご覧ください。

TypeScript

// 型を定義
type fooObjType = {
    number_1: number,
    number_2: number
}

// 型：fooObjTypeに存在しないプロパティを含むため、エラーが起きる
const fooObj: fooObjType = {
    number_1: 1,
    number_2: 1,
    number_3: 1 // コンパイルエラー！
}

上記例では型：fooObjTypeを適用したオブジェクトを生成していますが、このままではコンパイルエラーが起きます。型：fooObjTypeに存在しないプロパティを含むためです。

このように開発者自身で型を定義し、柔軟な運用ができるのもTypeScriptの魅力です。
その他にも様々な機能がありますがここでは割愛させていただきます。

TSコンパイラはカスタマイズできる

TypeScriptはコンパイル時に型チェックを行うコンパイラを内蔵していますが、こちらは案件や好みに合わせてカスタマイズすることができます。

tsconfig.jsonファイルを作成してルートディレクトリに配置することでファイル内の記述に応じた設定でコンパイラを動作させられます。

主な機能としては

• コンパイル対象を指定
• 出力するディレクトリを指定
• コンパイル後のJS形式を指定（ES5やES6以降など）
• 型チェックを無効（恩恵が無くなるのであまりしないほうがいい...）
• etc...

などでしょうか。
状況に応じて使用可能な技術が限られることはよくあるのでカスタマイズ可能なのはいいことですね。

まとめ

今回はTypeScriptを使用したフロントエンド開発について解説しました。

近年どんどん複雑化していくWebアプリケーションですが、確実性・安全性を重視した開発がより重要になっていると感じます。altJSを使用するだけでなく、テスティングフレームワーク導入や開発手法の確立など開発のためにできることはまだまだあります。今後も技術のキャッチアップを心がけていきたいと思います。

MONSTER DIVEではTypeScriptや各種JSフレームワークを使用した環境でも開発を行っています。小規模なWebサイトからWebアプリケーション制作まで対応可能ですので是非お声がけくださいませ。