【初心者用】typescriptとはなにか

最近Reactの勉強をしていく中でTypeScriptでの開発というのを耳にしていたので、TypeScriptで開発するときのために勉強のしようと思い今回まとめました。

事前知識が一切ないので初心者用として再度確認しても分かるように書いていきたいと思います。

1. そもそもTypeScriptって何?


TypeScriptとはJavaScriptを拡張して開発した新しいプログラミング言語になります。

2012年ごろにMicrosoftが開発を行い、その後2017年にリリースされました。


TypeScriptが開発された理由としては、JavaScriptを使用した大規模なアプリケーション開発をする際に複雑なJavaScriptを使用するため、コンポーネント群の開発を容易にする為の独自のツールが必要になったことが理由として挙げられます。

また、TypeScriptで記述されたプログラムコードをコンパイルするとJavaScriptのコードに変換されます。

そのため、JavaScriptファイルが動作できる環境ならすぐに使用が可能となり、JavaScriptライブラリなどもTypeScriptから使用することができます。


TypeScriptは大人数のプログラマーが開発をする場合でもエラーを防ぎやすいように設計されています。

また、TypeScriptでは変数のデータ方を事前に決定することができ、1つの関数定義で異なるデータ型の引数を処理ができるなどの特徴があります。


上記の大規模開発に耐えられる使用のため、TypeScriptは需要が拡大していき今後も広く普及していく将来性のある言語です。

2. JavaScriptとTypeScriptの違い


JavaScriptとTypeScriptの違いはどのようなものがあるのか以下にまとめます。

TypeScriptはJavaScriptが進化した特徴を持ち、JavaScriptがと同じ構文やライブラリを使用することができます。


データ型とはプログラムで使用するデータの種類を表す用語となっており、JavaScriptコードでは実行時にデータ型が自動で決まります。

上記に関して動的型付けと呼ばれており、他の言語の採用例としてはRubyやPythonなどで動的型付けが使用されています。

また、静的型付けに関しては変数のデータ方をあらかじめ決めておくことができる言語となっています。

こちらに関しては静的型付けと呼ばれており、他の言語ではC#などで使用されています。


JavaScriptは実行時にデータ型を決定する動的型付けなので、実行時にデータ型が自動で決まってしまうため実行するまでエラーに気づきにくく、バクが多くなってしまうという問題があります。

TypeScriptでは静的型付けとなっているので、コンパイル時にエラーやバグの存在に気づきやすくなっています。


上記の様にTypeScriptはエラーを防止しやすく、グループでの大規模な開発の際に利用されることが多くなっています。

JavaScriptを完全に無視することができるわけではないのですが、今後の普及していくことや利便性・コードが簡潔で可読性が高いのでTypeScriptを選ぶことが良いのかなと思います。

3. TypeScriptのメリット・デメリット


TypeScriptを導入して開発するメリットとしては以下に詳しくまとめます。

■エラーを防止できる

違いの説明の際にも書きましたが、TypeScriptは静的型付けの変数のデータ型を宣言して記述できる言語となります。

動的型付けと違い型と代入する値が異なる場合には、コンパイルエラーが事前に発生するためバグやエラーなどを防止することができます。

■JavaScriptとの互換性がある

TypeScriptはJavaScriptのフレームワークやライブラリをそのまま使用することができるため、JavaScriptの使用環境から別途で構築などをする必要がなくそのまま使用することができます。

また、JavaScriptで作成したファイルをTypeScriptはから呼び出すことができます。

上記に記載したようにTypeScriptはJavaScriptの完全な上位互換となります。

■JavaScriptの知識があれば学習コストが低くできる

前述しているようにTypeScriptはJavaScriptをベースとして機能を追加しています。

ですので、JavaScriptと記述方法が変化しておらず、JavaScriptをすでに理解できているのであればTypeScriptはすぐに覚えることができます。

通常は新しい言語の学習は数か月程度かかりますが、JavaScriptを理化していればその学習コストを削減することができます。


また、TypeScriptのフレームワーク・ライブラリを使用する際には、JavaScriptの知識が必要な場合もあります。

そのため、JavaScriptを学習していない場合はTypeScriptを学びながら、JavaScriptも簡単でよいので同時に学んでおくと簡単にスキルアップがしやすいと思います。

4. TypeScriptとJavaScriptのフレームワーク・ライブラリについて


TypeScriptとではJavaScript用のフレームワーク・ライブラリを使用することができます。

フレームワークを使用することにより、効率よく開発をすることができます。

JavaScriptのフレームワークには複数の種類があり、主なフレームワーク・ライブラリの特徴については以下にまとめます。

■ライブラリ

・React

ReactはFaceBook社により開発されたライブラリです。

Reactは特徴はコンポーネント管理による更新や改良のしやすさと動作が高速であることです。

ReactはJavaScriptでの開発を想定したライブラリで、UIやSPAなどの開発に向いています

■フレームワーク

・AngularJS

AngularJSはSPAの開発が可能なフレームワークで、1つのフレームワーク内で全ての機能が完結しているフルスタックフレームワークなのが特徴です。

元々はJavaScriptのフレームワークとして開発されましたが、最近ではTypeScriptでの開発が推奨されています。


・VueJS

VueJSはAngularJSの開発に関わっていたEvan You氏が開発したフレームワークになります。

VueJSに関してもVue3.0からは拡張機能を使用せずにTypeScriptを使用できるようになっています。


ファイルサイズが非常に軽量で動作も高速・自由度が高い開発ができるのが特徴となっています。

VueJsは初心者でもシンプルで学習しやすいフレームワークとなっています。

5. まとめ


TypeScriptは比較的新しいプログラミング言語となっているので、JavaScriptのよりも解決策が検索して出てこないことで学習が遅くなる可能性はあります。

ですが、そのデメリットを超えるメリットがあるので、将来性も含め初めて勉強する際にはTypeScriptをから勉強するとよさそうかなと思いました。