TypeScript入門 - JavaScriptとの違いからPlaygroundで実行までを解説
公開日：2020.09.28 最終更新日：2021.05.21
スキルアップ
使いやすさや書き味から人気が上がってきているTypeScriptは、JavaScriptを拡張して開発されたプログラミング言語です。大規模開発にも対応できる設計になっており、Google社の開発でも採用され、一躍世界的な注目を集めました。今後、普及が見込まれることから、将来性の高い言語として期待されています。
ここでは初めてTypeScriptを触る方に向けて、JavaScriptとの違いやオンラインの実行環境の紹介、サンプルスクリプトの実行まで解説していきます。
なお、JavaScriptについてはこちらを参照ください。
【入門】TypeScriptとは？
TypeScriptはオープンソースのプログラミング言語で、2014年頃にMicrosoft社によって開発・発表されました。TypeScriptは、大規模開発で大人数のエンジニアが携わってもエラーを防ぎ問題が起きにくい用設計されているため、2017年にはGoogle社の標準開発言語としても採用されています。こうしたことから、TypeScriptは世界的に注目されるとともに、メジャーな開発言語として急速に需要が拡大しています。
TypeScriptで記述したコードをコンパイルするとJavaScriptのコードに変換されます。そのため、JavaScriptの実行環境でそのまま使用できます。また、JavaScriptのライブラリがそのまま使用できるなど、JavaScriptとの高い互換性を持ちます。TypeScriptはJavaScriptとは上位集合の関係にあり、JavaScriptで可能な処理はTypeScriptでも同じ処理が可能であり、さらにJavaScriptよりも短く簡潔なコードで実装できます。
現在Webプログラミングの分野で幅広く活躍しているJavaScriptを拡張し、互換性を維持しながら機能性を向上したTypeScriptは、高い将来性を持っているといえます。
TypeScriptを使う3つの理由
TypeScriptを使う理由は大きく3つあります。
1.型が必須である
TypeScriptは大規模開発においてJavaScriptの欠点を補うために開発されました。そのため、型（後述）が必須となっていて、大規模開発において起きやすいコードの属人化や型チェック機能がない問題、動的型付けのためバグが発生しやすい問題などを解決しています。
2.コードの可読性が高い
TypeScriptはJavaScriptよりもコードの可読性が高いという特徴があります。JavaScriptよりも短いコードで同じ機能を実装できるため、わかりやすく完結に記述しやすいのもTypeScriptが選ばれている理由のひとつです。
3.JavaScriptのライブラリが使用できる
これ以外に、JavaScriptのライブラリがそのまま使用できる点もTypeScriptが使われる理由になります。TypeScriptはJavaScriptと互換性があるため、現在公開されているJavaScriptのライブラリやフレームワークをそのまま利用して開発することができ、JavaScriptをすでに使っているユーザはもちろん、既存のソースコードをTypeScriptにすることも簡単にできます。
JavaScriptフレームワークとTypeScript
上述の通り、TypeScriptにはJavaScriptのフレームワークをそのまま利用できるという特徴があります。そのため、JavaScriptの主要フレームワークである、React、Vue.js、Angularも、すべてTypeScriptの使用が可能です。
例えばReactの場合、TypeScriptをネイティブサポートしています。新規のプロジェクトでは、例えばコマンドライン引数で「npx create-react-app myapp --typescript」として、TypeScriptを使用することを明示するだけで使用可能です。
また、Vue.jsも同じく公式にTypeScriptをサポートしています。こちらも、プロジェクト作成の際に設定することで使用可能です。
Angularについては、そもそもバージョン2.0からTypeScriptをベースに開発が進められています。そのため主要開発言語がTypeScriptとなっています。
このように、主要のフレームワークではすでにTypeScriptはすでに採用されており、今後フロントエンド開発の主要言語となることが見込まれています。
TypeScriptとJavaScriptの違い
では、TypeScriptはJavaScriptとどのような違いがあるのでしょうか。
静的型付け言語である
まずは型についてです。JavaScriptが動的型付け言語であるのに対して、TypeScriptは、省略可能な静的型付け言語になっています。変数の型が指定できるため、エラーやバグの発生率を抑えることが可能です。
なお、TypeScriptで使用できる型としては、次のようなものが挙げられます。
- Boolean
- String
- Number
- Void
- Any
コンパイルが必要である
また、スクリプト言語であるJavaScriptと異なり、TypeScriptはトランスコンパイラ（ある言語のソースコードを別の言語のソースコードに変換するもの）を用いてコンパイルし、JavaScriptのコードに変換して実行します。
そのため、テキストエディタとウェブブラウザがあれば特に開発環境をインストールする必要がないJavaScriptと違い、TypeScriptは実行環境をインストールして開発のための環境構築が必要になります。
TypeScript Playground
TypeScriptはインストールして開発を行うため、本格的な開発には環境の構築が必要になります。IDE（統合開発環境）を利用する場合、JavaScriptの開発環境としても愛用者が多いVisualStudioが適しています。
しかし、開発環境の構築には手間がかかります。まずはTypeScriptのサンプルを見て実際に動かしてみたいという人には、オンラインで簡単に使える TypeScript Playgroundなどの利用がおすすめです。
TypeScript Playgroundはブラウザ上でTypeScriptのスクリプトを記述し、実行して試すことができるサイトで、TypeScriptの公式Webサイトが提供しています。使用するには、まず公式サイトのメニューバーから「プレイグラウンド」をクリックします。
2つのウィンドウに分割された実行環境が表示されました。
入力されている「Hello World」のサンプルスクリプトを実行してみましょう。
実行するには入力窓の上部にある「実行」をクリックします。
スクリプトが実行され、結果が右の窓に表示されました。エクスポート機能を使用することで、Playground上で記述したスクリプトを出力することが可能です。
ExamplesにはHello Worldを始めとして、TypeScriptの代表的な処理を行うサンプルコードが複数収録されています。まずはExamplesからいくつかのコードを表示し、TypeScriptの記述の仕方を見てみましょう。
TypeScriptのサンプルを実行してみよう！
それではさっそく、Playground上でサンプルを実行しながら、TypeScriptの使用感に触れてみましょう。
今回はTypeScriptの特徴である型をしっかりと定義した関数の実行と、JavaScriptと同じ動的型付けの挙動をするany型、そして配列の定義とループの命令を解説していきます。TypeScriptの引数や関数、配列などには必ず型が定義されている点に注目し、JavaScriptでの記述との違いを確認しながら進めましょう。
サンプル1：関数の定義と実行
TypeScriptはJavaScriptと違い、引数、関数に型が必要です。例えば、次のサンプルコードでは、関数の引数を a:number と記述し、引数 aがnumber型であることを定義しています。また、関数も同様に型を定義していきます。今回はaPlusB():number と記述し、aPlusB関数もnumber型のデータを返すと定義します。
このようにTypeScriptはJavaScriptでは定義しない型を頻繁に記述することになります。
ではサンプルコードを見ていきましょう。
次のサンプルコードでは、aとbに入力されている数字を合算した結果を表示します。
console.log(aPlusB(1,2));
function aPlusB(a:number,b:number):number {
return a + b;
}
なお、このコードをJavaScriptで書くと、次のようになります。
console.log(aPlusB(1,2));
function aPlusB(a,b) {
return a + b;
}サンプル2：any型（JavaScriptと同じ挙動）
any型は、どのようなデータでも入れることができる型です。次のサンプルコードのように記述すると、引数に1,2を入れると3、"a","b"を入れると ab となります。
しかし、型の定義によって高い安定性を持つTypeScriptの良さが失われてしまうため、どうしてもJavaScriptと同じ挙動をさせる必要がある場合を除き、any型は非推奨とされています。
次のサンプルコードでは、any型を使って引数を定義し、入力された数字の合算もしくは、入力された文字を合成した新しい文字列が、それぞれ出力されます。
console.log(aPlusB(1,2));
console.log(aPlusB("a","b"));
function aPlusB(a:any,b:any):any {
return a + b;
}
なお、このコードをJavaScriptで書くと、次のようになります。
console.log(aPlusB(1,2));
console.log(aPlusB("a","b"));
function aPlusB(a,b) {
return a + b;
}サンプル3：配列の定義とループ
number[] は number型のデータが複数ある配列を指します。配列を定義することによって、数列をまとめて処理することができます。ループ処理を指示するforの処理は、JavaScriptと同様にiが indexとなり、ループ内で myList[i]とすることでデータが取得可能になります。
次のサンプルコードでは、配列に入力された1から5までの5つの数字をひとつずつ抜き出し、配列が空になるまで5回に分けてループ処理を行い、結果を表示しています。
const myList:number[] = [1,2,3,4,5];
for (var i in myList) {
console.log(myList[i]);
}
なお、このコードをJavaScriptで書くと、次のようになります。
const myList = [1,2,3,4,5];
for (var i in myList) {
console.log(myList[i]);
}TypeScriptをインストールしてみよう！
最後に、TypeScriptのインストール方法について解説します。TypeScriptをインストールする場合、まずNode.jsのインストールが必要です。
Node.jsのインストール
Node.jsは次のURLにてダウンロードが可能です。
2021年現在では、推奨版としてバージョン14.16.0 LTSと、15.13.0の安定版の2つがあります。必要な方を選択してください。
ダウンロード後はインストーラの指示に従うだけで簡単にインストールが可能です。
なお、apt-getやyumによるインストールも可能なので、お使いの環境に合わせて選択してください。
# apt-getでのインストールsudo apt-get install nodejs
# yumでのインストールsudo yum install nodejs
TypeScriptのコンパイラのインストール
Node.jsのインストールが終わるとnpmも併せてインストールされます。npmが使えるようになったら、次のコマンドでTypeScriptのインストールが可能です。
# TypeScript のインストールsudo npm install -g typescript
インストールが完了したら、最後に次のコマンドを打ち込んでバージョンを確認しましょう。インストールしたバージョンが表示されれば、正常に終了しています。
# TypeScript のバージョン確認node -v
将来が期待されるTypeScriptをはじめてみては？
TypeScriptは、Web開発のフロントエンドからサーバサイド、さらにはスマートフォン向けのアプリケーション開発まで幅広く活用されているJavaScriptを、より安定性が高く大規模開発に向けて拡張された言語です。Microsoft社はもちろん、Google社でも標準開発言語として採用されたことで、今後ますます需要が高まり、将来的により多くの分野での採用が期待されています。
JavaScriptと高い互換性があるため、すでにJavaScriptの開発経験がある人にとっては習得が容易であり、また、初めて触れるという人にも可読性の高さから学びやすい言語といえます。また、今後Web開発に関係するエンジニアを目指す人にとっては、JavaScriptに変わる重要な言語となる可能性を秘めています。
AKKODiSでは、今回ご紹介したTypeScriptのスキルを持つエンジニア向けの求人を多数取り揃えています。TypeScriptを使ってWebエンジニアとして活躍してみてはいかがでしょうか。
（2021年5月現在）
