「TypeScript」というプログラミング言語をご存知ですか？
Googleの開発で採用されるなど注目されている新しい言語の一つです。
JavaScriptを拡張して開発されていたり、大規模開発が可能なように設計されているとのことで、世界的にも注目となっています。
JavaScriptではバグが発生しやすいというリスクも抱えていましたが、その問題を解説するために開発されたのがTypeScriptなのです。
この記事では、TypeScriptをわかりやすく解説し、JavaScriptとの違いや、JavaScriptフレームワークとの関係性、将来性などをお伝えします。
■□■□プログラマーなどITエンジニアを目指しているならIT業界専門転職サイト「Javaキャリ」が最適！完全無料の会員登録はこちらから■□■□
Contents
TypeScriptとは？
TypeScriptとは、2012年にマイクロソフトに開発された言語です。JavaScriptを拡張して作られたオープンソースのプログラミング言語です。JavaScriptが持つ機能を維持しつつ、追加の機能を搭載しています。
JavaScriptは、Netscape Navigatorで動作するスクリプト言語として開発されました。当時はHTMLの補助的に使用することしか考えられていませんでしたが、2000年代に入り、JavaScriptでもWebアプリケーションが作れることが判明しました。
しかし、JavaScriptでは型定義ができないため、コードに変更を加えた際の影響があるかどうかを検証するのに時間がかかりました。
この、開発のスケール性を解決するために、TypeScriptが登場しました。
TypeScriptでは、型定義ができることによって、開発者は安心してコード変更を加えることができるようになり、プログラムを動作させずに不具合がないかを未然に検知できるようになりました。
TypeScriptの特徴・強み
型定義ができる
TypeScriptの最大の特徴は、静的型付け言語であることです。静的型付け言語とは、変数やメソッドの戻り値に型を指定できる言語のことです。JavaScriptは、動的型付け言語です。
静的型付け言語は、変数や戻り値に指定外のデータが入るようなコーディングをした場合、コンパイル時にエラーが発生します。これは、実際にプログラムを稼働させる前にバグの存在を知ることができます。
JavaScriptとの互換性がある
TypeScriptは、AltJSの1つです。AltJSとは、Alternative JavaScriptの略称で、「JSの代わりになるもの」という意味を込められた造語です。AltJSをコンパイルすると、JavaScriptが生成されます。
JavaScriptは、フロントエンジニアからWebデザイナーまで幅広いIT業界の開発者が利用します。近年では、ライブラリの1つとしてreact、Reactを活用したReact Nativeなどさまざまなライブラリやフレームワークが登場しています。
TypeScriptはAltJSの１つであるため、JavaScriptのライブラリ群を含めて100%の互換性を持ちます。そして、TypeScriptの基本的な構文はJavaScriptを踏襲しているため、JavaScriptを習得している人であれば比較的短期間で習得できるでしょう。
TypeScriptとJavaScriptとの違い
型付けの違い
最大の違いは、型付けの違いです。TypeScriptは静的型付けでJavaScriptは動的型付けの言語です。
動的型付けとは、型の宣言が不要で、プログラム側が自動的に型を決定します。そのため、プログラムを実行するまでエラーの存在に気が付きにくく、不具合が起こりやすい問題があります。JavaScriptの他に、PythonやRubyなどが代表的です。
この問題を解決するために、TypeScriptはあらかじめ変数の型を定義する静的型付けを採用しました。
静的型付け言語は、コンパイルする時点でエラーがわかることや、可読性の高さ、大人数での開発に向いている特徴を持ちます。TypeScriptの他に、C#、Javaなどが静的型付け言語です。
インターフェースの有無
TypeScriptにインターフェースはありますが、JavaScriptにはありません。
インターフェースとは、処理は持ちませんが、プログラムに対して独自のルールを付与できる機能です。インターフェースを利用することで、型やクラスだけでは再現できない処理を実装できます。例えば、ユーザーを管理するクラスを作成する際に、「ユーザー名」と「年齢」だけを必ずプロパティで持っておきたいとします。そのような場合は、以下のようなインターフェースを作成します。
interface Member {
name:string;
age:number;
}このように作成したインターフェースは、クラス作成時に「implements」に続けて設定することで使用できます。
Class User implements Member {
name:string;
age:number;
area:string;
tell:string;
}このようにインターフェースで定義しておけば、このインターフェースを使用するクラスはそのメソッドを必ず実装しなければいけないという具合に、クラスの振る舞いを指定できます。
TypeScriptのメリット
保守性の向上
TypeScriptの特徴である静的型付けの影響で、エラーやバグを未然に防ぐことができ、保守性を向上させます。
TypeScriptは、関数の引数に何を代入すべきか、オブジェクトはどのようなプロパティで構成されているのかが明確です。
データ型と値が一致しない場合には、コンパイル時にエラーが発生するため、リリース前にエラーやバグを未然に防止できます。
JavaScriptでは、「undefined」が発生しやすく、プログラム実行の際のエラーの要因によくなります。これは、定義されていないという意味を持ちます。一方TypeScriptは、コンパイラオプションを使用することでnullやundefinedの可能性がある変数を確認し、問題を発見しやすくなっています。
パフォーマンスの向上
TypeScriptは、パフォーマンスを向上させます。
例えば、二つの数字を掛け算する関数を作成する場合、JavaScriptでは引数の型を確定していないので、例外処理を記述する必要があります。
const multinm = (number1, number2) => {
if(typeof number1 !=='number' || typeof number2 !=='number'){
return 0;
}
Return number1 * number2;
}一方で、TypeScriptでは、引数と戻り値の型をあらかじめ指定できるため、例外処理の記述が不要です。
const multinm = (number1: number, number2: number): number => (
number1 * number2
);これによってコードの可読性を高め、パフォーマンスの向上につながります。
TypeScriptのデメリット
TypeScriptは、インターネット上の情報が多くありません。それは、TypeScriptが比較的新しい言語だからです。また、他の言語と比較すると日本語のドキュメントも少ないです。Amazonで「JavaScript 入門」で検索すると1,000件以上ヒットするのに対して、TypeScriptは、188件のみです。
また、TypeScriptを使用して開発を進めていくうちに、エラーが発生することがあります。その際に、エラー解決法を調べても情報が少ないと問題解決に時間がかかる可能性があります。そのため、プログラミング初心者の方は、まずはJavaScriptから勉強するとスムーズかもしれません。
TypeScriptとJavaScriptフレームワークの関係性
TypeScriptはJavaScriptとの互換性があるため、JavaScript向けのフレームワークを使用できます。
AngularJS
Angular JSは、フロントエンドWebアプリケーションフレームワークです。
JavaScriptで使用されているフレームワークの中では最も有名といっても過言ではありません。Angular JSではMVWと呼ばれる考え方に基づいて設定がされているフレームワークです。
JavaScript用のフレームワークとして開発されましたが、バージョン2.0以降ではTypeScriptでの開発が推奨されています。
Vue.js
Vue.jsは、シンプルで自由度が高く、軽量で動作が速いのが特徴です。WebのUI開発において、必要な部分だけを採用して他のライブラリと自由に組み合わせることができます。
バージョン3.0はTypeScriptで記述されており、拡張機能を使用せずにTypeScriptでの開発が可能です。
また、Vue.jsについて、更に詳しく知りたい場合は「Vue.jsとは？ReactやAngularとの違いまで徹底解説！」をご覧ください。
React
Reactは、UI構築に適したフレームワークです。
ルーティングやAPIとの対話には追加ライブラリを使用します。JavaScript向けのフレームワークで、JavaScriptでの使用が推奨されていますが、拡張機能を使用することでTypeScriptでも使用できます。
また、Reactについて、更に詳しく知りたい場合は「人気のReactとは？初心者にもわかり易く解説！」をご覧ください。
TypeScriptの将来性とは
TypeScriptは、現在多くの企業の新規サービスのフロントエンドで採用されているため、TypeScriptの案件数も一定数以上はあります。そして、Googleが、2017年頃にTypeScriptを開発標準言語として主導しています。
この影響を受けて、JavaScriptで作られているライブラリも次々とTypeScriptに書き直されています。この動きを見ると、TypeScriptの将来性は高いでしょう。
まとめ
これまでの記事で、TypeScriptがJavaScriptの上位互換というポジションである言語だということはご理解いただけたかと思います。
現状では、JavaScriptの方が人気も高く、求人数も圧倒的にJavaScriptの方が多いのですが、TypeScriptを習得しておいて損はありません。
フロンエンドエンジニアの求人は急増しており、人手不足で困っている企業も増えています。
技術的な選択肢を増やすこは、あなたの将来性を広げてくれるでしょう。
