TypeScript入門 - JavaScriptとの違いからPlaygroundで実行までを解説

使いやすさや書き味から人気が上がってきているTypeScriptは、JavaScriptを拡張して開発されたプログラミング言語です。大規模開発にも対応できる設計になっており、Google社の開発でも採用され、一躍世界的な注目を集めました。今後、普及が見込まれることから、将来性の高い言語として期待されています。

ここでは初めてTypeScriptを触る方に向けて、JavaScriptとの違いやオンラインの実行環境の紹介、サンプルスクリプトの実行まで解説していきます。

なお、JavaScriptについてはこちらを参照ください。
JavaScriptとは?基本的な書き方や勉強方法〜入門〜

入門TypeScriptとは?

TypeScriptはオープンソースのプログラミング言語で、2014年頃にMicrosoft社によって開発・発表されました。TypeScriptは、大規模開発で大人数のエンジニアが携わってもエラーを防ぎ問題が起きにくい用設計されているため、2017年にはGoogle社の標準開発言語としても採用されています。こうしたことから、TypeScriptは世界的に注目されるとともに、メジャーな開発言語として急速に需要が拡大しています。

TypeScriptで記述したコードをコンパイルするとJavaScriptのコードに変換されます。そのため、JavaScriptの実行環境でそのまま使用できます。また、JavaScriptのライブラリがそのまま使用できるなど、JavaScriptとの高い互換性を持ちます。TypeScriptはJavaScriptとは上位集合の関係にあり、JavaScriptで可能な処理はTypeScriptでも同じ処理が可能であり、さらにJavaScriptよりも短く簡潔なコードで実装できます。

現在Webプログラミングの分野で幅広く活躍しているJavaScriptを拡張し、互換性を維持しながら機能性を向上したTypeScriptは、高い将来性を持っているといえます。

TypeScriptとJavaScriptの違い

オブジェクト指向スクリプト言語であるJavaScriptに対し、TypeScriptはクラスベースオブジェクト指向であり、省略可能な静的型付けの機能を持っています。

もともとウェブブラウザ上で実行されることを前提に設計され、後にサーバサイドでのアプリケーション開発の機能が盛り込まれたJavaScriptと違い、TypeScriptは最初から大規模なアプリケーション設計のために設計されました。

スクリプト言語であるJavaScriptと異なり、TypeScriptはトランスコンパイラ(ある言語のソースコード を別の言語のソースコード に変換するもの)を用いてコンパイルし、JavaScriptのコードに変換して実行します。

そのため、テキストエディタとウェブブラウザがあれば特に開発環境をインストールする必要がないJavaScriptと違い、TypeScriptは実行環境をインストールして開発のための環境構築が必要になります。

なぜTypeScriptを使うのか

TypeScriptは大規模開発においてJavaScriptの欠点を補うために開発されました。型が必須であるため、大規模開発において起きやすいコードの属人化や型チェック機能がない問題や、動的型付けのためバグが発生しやすい問題などを解決しています。
また、TypeScriptはJavaScriptよりもコードの可読性が高く、短いコードで同様の機能を実装できるなど、完結で記述しやすいのもTypeScriptが選ばれている理由のひとつです。

これ以外に、JavaScriptのライブラリがそのまま使用できる点もTypeScriptが使われる理由になります。TypeScriptはJavaScriptと互換性があるため、現在公開されている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は、Web開発のフロントエンドからサーバサイド、さらにはスマートフォン向けのアプリケーション開発まで幅広く活用されているJavaScriptを、より安定性が高く大規模開発に向けて拡張された言語です。Microsoft社はもちろん、Google社でも標準開発言語として採用されたことで、今後ますます需要が高まり、将来的により多くの分野での採用が期待されています。

JavaScriptと高い互換性があるため、すでにJavaScriptの開発経験がある人にとっては習得が容易であり、また、初めて触れるという人にも可読性の高さから学びやすい言語といえます。また、今後Web開発に関係するエンジニアを目指す人にとっては、JavaScriptに変わる重要な言語となる可能性を秘めています。

Modisでは、今回ご紹介したTypeScriptのスキルを持つエンジニア向けの求人を多数取り揃えています。TypeScriptを使ってWebエンジニアとして活躍してみてはいかがでしょうか。

(2020年9月現在)

エンジニア転職なら、Modis

IT・エンジニア派遣に特化したModisは、専任の担当者が的確なアドバイスと丁寧なサポートであなたの転職を支援します。