1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

子供の想像力を伸ばしアイデアを形にする小学生向けプログラミング教室「プロスタキッズ」

規模の大きいJavaScriptプロジェクトにはTypeScriptがオススメ!

Pocket

はじめに

JavaScriptに不満を感じていませんか?

JavaScriptは悪い言語ではないものの、歴史的な経緯からいろいろと弱点を抱えています。
もちろん、JavaScriptも年々アップデートされてきており、かなり改善されてきています。

しかし、ブラウザの互換性の問題で最新の機能を使えないこともしばしばあります。
そんなときは、AltJS(JavaScript代替)言語を試してみるとよいでしょう。

この記事では、JavaScriptプログラマーの方のために、AltJS言語のひとつである「TypeScript」についてお伝えしていきます。

その前にAltJS言語ってなに?

AltJS言語とは、JavaScriptを代替する言語のことで、最終的にJavaScriptにコンパイルして通常通り実行されます。

つまり、JavaScriptの弱点を克服するための別の言語です。

AltJS言語はCoffeeScriptやDartなどいくつかありますが、この記事では一番人気のある「TypeScript」に焦点を当ててお伝えしていきます。

TypeScriptはどんな言語なのか?

TypeScriptは、マイクロソフトがオープンソースで開発しているAltJS言語です。
言語仕様は、JavaScriptのスーパーセットになっており、JavaScriptの構文に加えてTypeScriptの追加構文を覚えるだけで使えます。
最終的に任意のバージョンのJavaScriptにコンパイルして実行します。

このため、JavaScriptの互換性を損なうことなく、利便性の高い言語でプログラミングできるわけです。
JavaScriptと相互運用できるため、既存のJavaScriptライブラリを再利用できます。

TypeScriptの特徴的な要素

静的型付けをサポートしている

JavaScriptは動的型付け言語なので、実行時まで型が決まらず、それが原因で実行時型エラーを引き起こすこともしばしばあります。

一方、TypeScriptは静的型付けをサポートしており、変数宣言などで明確に型を記述することが可能です。型エラーがある場合にはコンパイルエラーになるため、実行前に気づくことができます。
静的型付けにせずに、動的型付けのままにしておくことも可能です。

また、既存のJavaScriptライブラリには型情報がありませんが、型定義ファイルという型情報を記述したファイルを用意してやることで、TypeScript側から型付けされたJavaScriptとして使用できます。
型定義ファイルは自分で用意することもできますが、すでに作成済みのものを使ったほうが手っ取り早いでしょう。

多くのライブラリの型定義ファイルは「DefinitelyTyped」で公開されています。

DefinitelyTyped:http://definitelytyped.org/

独自の言語拡張が使える

TypeScriptでは、JavaScript規格から取り込んだ機能に加え、独自の言語拡張機能を備えています。
インターフェイスやジェネリック、名前空間など、他のオブジェクト指向言語では一般的な機能が使えるため、大規模開発でも見通しのよいコードを書けます。

これらの独自の言語拡張機能はコンパイル時に一般的なJavaScriptに変換されるため、互換性の心配をする必要がありません。
対応ブラウザの普及を待たずとも新しい機能が使えるのはうれしいですね。

JavaScriptコードがエラーにならない

TypeScriptはすべてのJavaScriptを許容するため、JavaScriptコードがエラーになりません。
もちろん、静的型付けなどの恩恵が受けられないため、できるだけTypeScriptの構文を使ってプログラミングするべきですが、既存の資産を手軽に再利用できるのは便利ですね。

TypeScriptを始める

TypeScriptはマイクロソフトが開発しているため、同じくマイクロソフトが開発している統合開発環境Visual Studioに統合されている他、コンパイラのみの提供も行われています。

また、ツールを導入する前に手軽に試したいという方のために、「Playground」というオンライン実行環境も用意されています。

シンタックスハイライトや入力補完機能もサポートしており、なかなかプログラミングしやすい環境です。

Playground:https://www.typescriptlang.org/play/

まとめ

TypeScriptはJavaScriptのスーパーセットになっているため、JavaScriptの構文がそのまま使え、追加でTypeScriptの構文を覚えればよいので、JavaScriptプログラマーの方がスムーズに移行できるようになっています。

最終的にJavaScriptにコンパイルされるため、どのようなコードが実行されているかも一目瞭然です。

手軽に試したい方は、Playgroundで触ってみましょう。
コンパイル結果が並んで表示されますので、学習の際も役立ちます。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る