TypeScriptはJavaScriptを拡張して開発されたプログラミング言語です。JavaScriptで大規模開発を可能にする目的を持って開発されました。現在ではJavaScriptの後継言語として注目を浴びています。本記事ではTypeScriptとはどういう言語なのかや特徴、TypeScriptでできること、環境構築について解説します。
目次
1.TypeScriptとは？
TypeScriptは、JavaScriptを拡張して2012年10月に開発されたプログラミング言語です。JavaScriptでも大規模開発がしやすくなるように誕生した言語で、JavaScriptの後継言語として注目を浴びています。
StackOverflowのプログラミング言語の人気調査でも2021年の7位から2023年には5位にランクインし、TypeScriptの人気が高くなっていることがわかります。
JavaScriptとの互換性や機能を維持しつつ、静的型付けやインターフェースの機能追加により可読性の向上と大規模開発への適性を高めた特徴を持ちます。
もともと、JavaScriptは静的型付けの欠如によりコードの保守性が低く、バグが発生しやすい課題があるため、大規模開発に適していないという問題を抱えていました。この問題を解決するために誕生したのがTypeScriptです。
TypeScriptが生まれた背景
TypeScriptは、JavaScriptで大規模なアプリケーションを開発しやすくするために設計されたプログラミング言語です。JavaScriptはWebサイトに動きをつけられたり、ライブラリやフレームワークが豊富でさまざまな開発で使用されたりとメリットが多い言語ですが、大規模開発を想定した設計ではありませんでした。
そのため、JavaScriptでも大規模開発ができるように試行錯誤が繰り返されましたが、うまくはいきませんでした。JavaScriptでは型定義ができず、コードに変更を加えると影響範囲が広いため検証に時間がかかるためです。このような問題を解決するためにTypeScriptは誕生しました。
TypeScriptでは静的型付けによってエディタなどでエラーを検知できるようになり、プログラムを動かさなくてもバグが検知しやすくなっています。このような仕様によって大規模な開発でも影響範囲が分かりやすくなりました。
JavaScriptの後継言語として注目を浴びている
TypeScriptはJavaScriptの上位互換として開発した言語で、JavaScriptの後継言語として注目を浴びています。JavaScriptの機能を維持しながら、より優れた機能を備えています。
TypeScriptの基本的な構文はJavaScriptとほぼ変わりがないため、JavaScriptを習得している人であれば短期間で身につけられるでしょう。そして、JavaScriptで実現可能なことはTypeScriptでも実現可能なため、TypeScriptに深い知見がない開発者でもリファレンスを見ながら開発できます。
TypeScriptはJavaScriptの代わりになるものという意味を持つ造語の「AltJS」の1つです。AltJSには、TypeScriptの他にCoffeeScriptなどがあります。
JavaScriptとの違い
JavaScriptとTypeScriptの大きな違いは、型付けの違いです。JavaScriptは動的型付けを採用しており、TypeScriptは静的型付けを採用しています。
動的型付け言語は、型を明示的に宣言しなくてもコンパイラが自動的に推測して実行できます。一方で、静的型付け言語は、変数の型を明示的に宣言する必要がある言語です。
静的型付けのTypeScriptではデータ型エラーがコンパイル時に検知されるため、バグの発生を未然に防ぐことができ、JavaScriptよりも堅牢で保守がしやすいコードを記述できます。特に大規模開発の場合、誰が見ても読みやすいコードにすることは大切です。
そのため、型を明示的に宣言する必要がある静的型付け言語の方が大規模開発では好ましいでしょう。
2.TypeScriptの特徴
TypeScriptの特徴は下記の3つです。
静的型付け
再利用性と保守性が高い
基本構文はJavaScriptとほとんど変わらない
特に大きな特徴は、静的型付けです。それぞれ詳しく解説します。
静的型付け
TypeScriptの最大の特徴が、静的型付け言語であることです。静的型付け言語は、変数や関数の引数にデータ型を明示的に宣言する必要がある言語です。データ型を明示的に宣言しなくてもいい言語は動的型付け言語と呼びます。
一見すると、明示的に型指定しなくてもよい動的型付け言語の方が利便性がいいように見えますがコードの可読性が高まるのは静的型付け言語です。型が明示されていることによってその関数に何のデータを渡していいのかわかりやすくなります。これは、コードのバグを早期に発見しコードの可読性と保守性を向上させる効果があります。
再利用性と保守性が高い
TypeScriptでは、インターフェースがあるためオブジェクト指向プログラミングを容易に実現可能です。これらによってコードの再利用性と保守性を高められます。
インターフェースとは、クラスが実装すべきフィールドやメソッドを定義した型のことです。クラスは、インターフェースを実装することでインターフェースが求めるメソッド名や型に則っているかをチェックできます。これはJavaScriptにはない機能です。
基本構文はJavaScriptとほとんど変わらない
TypeScriptはJavaScriptの拡張言語であるため、基本的な構文はJavaScriptとほぼ変わりません。if文やfor文のような制御文はそのまま流用できます。
JavaScriptを習得している人であればそのスキルを活かしてTypeScriptの基本的なコーディングが可能なため、学習コストはかなり抑えられるでしょう。
3.TypeScriptでできること
静的型付けが最大の特徴であるTypeScriptでできることは下記の4つです。
大規模なシステムやアプリケーション開発
Webアプリケーション開発
ゲーム開発
モバイルアプリ開発
それぞれ詳しく見ていきましょう。
大規模なシステムやアプリケーション開発
TypeScriptは大規模なシステムやアプリケーション開発に向いている言語です。その理由は、静的型付け言語であり、バグを防ぎやすいためです。
例えば、下記のような大規模アプリケーション開発に利用されています。
Windowsアプリ
AWSの各種サービス
Windowsアプリでは、Windowsにプリインストールされているメモ帳やパワーポイントなどのアプリケーション開発にTypeScriptが使用されています。大規模なアプリケーションをチームで開発する上で、TypeScriptの型定義が開発者同士の円滑なコミュニケーションを支えています。
AWSの各種サービス開発にもTypeScriptが使用されています。AWS ConsoleやAWS CLIなどです。TypeScriptによってコードの品質と開発速度を向上させており、開発者がAWSを扱う際の効率性向上にも貢献しています。
Webアプリケーション開発
TypeScriptはWebアプリケーション開発が可能です。TypeScriptはWebアプリケーションを開発する上で、ReactやAngularなどのフレームワークと相性がいいためです。例えば、下記のようなWebアプリケーションにTypeScriptが使用されています。
Slack
Netflix
Slackはビジネスチャットアプリです。フロントエンドのコードのほとんどをTypeScriptで記述することで、複雑なUIの実装をしやすくしています。
Netfilxは動画配信アプリです。こちらもフロントエンド開発でTypeScriptが使用されています。Netflixではいくつものコンポーネントが連携して動作しています。TypeScriptを導入することにより、複雑になりがちなコードの可読性と保守性を向上させバグ修正を容易にしています。
ゲーム開発
TypeScriptはゲーム開発にも利用されています。TypeScriptは各種ゲームエンジンとの相性がいいためです。株式会社サイバーエージェントが運用するアバターゲーム「ピグパーティ」では、100万行の大規模なJavaScriptシステムをTypeScriptに移行したという事例があります。
ゲーム開発ではコードの記述量が膨大になりがちで、JavaScriptでは品質管理が難しいところがあります。そこでTypeScriptを導入することで、ゲームロジックを型定義するように変更することで、想定外のバグが大きく減少する効果があります。
モバイルアプリ開発
TypeScriptは、React Nativeと組み合わせることで安定したモバイルアプリ開発が可能です。例えば、ビジネスチャットアプリのSlackやLINE NEWSの開発ではTypeScriptが採用されています。
UI部分はReact Nativeで実装し、コードベース部分はTypeScriptに使い分けて実装されているのが特徴です。また、React NativeによってAndroid OSとiOSのネイティブ実装が可能となっており、開発コストの大幅な削減も実現しています。
4.TypeScriptの将来性は高い
下記の理由からTypeScriptの将来性は高いと考えられます。
求人数が豊富
JavaScriptからの移行が考えられる
世界的な大手企業が標準開発言語として採用している
求人数が豊富
2024年11月時点でフリーランスボードに掲載されているTypeScriptの求人数は14,243件で、求人数が豊富であるため将来性が高いと考えられます。
Web開発のフロントエンドで使用されるプログラミング言語はHTML・CSS・JavaScriptなどが主流ですが、今後はJavaScriptに代わる形または並行してTypeScriptが使用されるでしょう。
JavaScriptからの移行が考えられる
既存システムがJavaScriptで開発されている場合、TypeScriptへの移行が考えられるため、将来性が高い要素として捉えられます。
TypeScriptはJavaScriptをベースに開発されているため、JavaScriptとの高い互換性があります。加えて、多くの既存システムのフロントエンド開発で使用されている言語は、JavaScriptです。そのため、今後の改修や機能追加において、TypeScriptが採用される場面が増えることが予想できます。
世界的な大手企業が標準開発言語として採用している
2017年に開催された「ng-conf 2017」にて、Google社がTypeScriptを社内の標準開発言語として採用することを発表しました。TypeScriptの他に、Google社の標準開発言語には下記の5つがあります。
C/C++
Java
JavaScript
Python
Go言語
Google社は社内で使用するプログラミング言語を絞ることによって大規模に開発ツールなどを開発・展開し、生産性を高めています。
このような動きの結果、さまざまな国内外の企業がTypeScriptを積極的に採用し始めています。JavaScriptのフレームワークであるAngularは、そもそもTypeScriptで使用することを念頭に開発されました。続いて、Vue.jsやReactなどのフレームワークがTypeScriptのサポートを開始したのもこのような動きがきっかけです。
5.TypeScript入門用の学習ポイント
TypeScriptに入門したい人に向けて、学習ポイントを解説します。
JavaScriptの基礎を学習しておく
公式サイトで公開されている学習コンテンツを活用する
実際にコードを書いて実行する
TypeScriptのコミュニティを活用する
プログラミング言語の学習方法としては学習オンラインサイトや書籍、プログラミングスクールの利用が挙げられますが、TypeScriptは比較的新しい言語であるため取り扱われていない場合があります。そのため、効率的に学習するためには上記のようなポイントが重要です。
JavaScriptの基礎を学習しておく
TypeScriptはJavaScriptの拡張版であるため、JavaScriptの基礎をおさえていれば学習コストを削減できます。特におさえておくべきなのは下記の4つです。
制御文：変数定義・関数定義・if文・for文など
データ型・オブジェクト：JavaScriptのプリミティブ型やオブジェクト
スコープ・関数：関数定義方法とスコープ
非同期処理：非同期処理の基本的な理解
上記4つのJavaScriptの基本を理解していれば、TypeScriptの習得は比較的容易です。
公式サイトで公開されている学習コンテンツを活用する
TypeScriptの公式サイトには、学習コンテンツが公開されています。これらを利用することは、TypeScritの基礎や記述方法の学習に最適な手段です。
学習コンテンツには、言語習得のためのハンドブックやプレイグラウンドなどがあります。未経験者向けの学習や環境構築方法、サンプルコードがあるため、学習に取り掛かるまでのハードルは低いでしょう。
実際にコードを書いて実行する
TypeScriptを使用して実際にコードを書いて実行することで、習得の近道になります。コードを書く際には、公式サイトで公開されているサンプルコードやWebで公開されているオンラインリソースを利用しましょう。
まずは小規模のWebアプリを作成することからはじめ、徐々に機能を追加するという流れでステップアップしていくのがおすすめです。
TypeScriptのコミュニティを活用する
TypeScriptのコミュニティを活用することで、不明点を解決するのに役立ちます。TypeScriptは、注目を浴びている言語ですが、まだまだ使用している開発者の数は少ないです。そのため、日本語で書かれた情報が少ないため不明点を解決するのに時間がかかるというデメリットがあります。
そのようなデメリットを解決するために、TypeScriptのコミュニティを活用するのがおすすめです。
関連記事
6.TypeScriptの環境構築手順
TypeScriptの環境構築手順について解説します。TypeScriptはJavaScriptにコンパイルします。ここではNode.jsを利用したTypeScriptコンパイラをインストールする手順と動作確認までを紹介します。
(1)Node.jsをインストール
まずはNode.jsのインストールが必要です。公式サイトからインストーラーをダウンロードしてください。
(2)TypeScriptとts-nodeをインストール
TypeScriptコンパイラをインストールします。コマンドプロンプトまたはターミナルを開き、下記コマンド2つを実行してください。
npm install -g ts-node npm install -g typescript |
インストールが完了したことを確認するために下記コマンドを実行してください。
tsc -v |
バージョンが表示されればTypeScriptコンパイラのインストールは完了しています。
(3)TypeScriptで動作確認する
次に、TypeScriptを使用してHello, Worldを表示してみましょう。helloworld.tsというファイルを作成し、下記コードを記述して保存します。
const message:string = ‘Hello, World!’; console.log(message); |
作成した.tsファイルをJavaScriptファイルにコンパイルしましょう。コマンドプロンプトやターミナルで以下のコマンドを実行します。
tsc helloworld.ts |
同じディレクトリにhelloworld.jsというJavaScriptファイルが作成されていれば、コンパイルは完了です。動作確認するには、下記コマンドを実行してください。
node helloworld.js |
Hello, World!が表示されれば動作確認は成功です。
関連記事
React.jsとは？特徴やできること、基本的な使い方を解説
JavaScriptとは？初心者にもわかりやすく何ができるかや歴史、基本的な文法を解説
7.まとめ
今回は、JavaScriptから次のステップに進みたいと考えているフロントエンドエンジニアやWebアプリ開発の効率化や品質向上を目指すプロジェクトリーダーやマネージャーへ向けて、TypeScriptについて解説しました。
TypeScriptはJavaScriptの後継言語として今後の活用が期待できる将来性の高い言語です。JavaScriptの課題であった大規模開発を解決するために誕生しました。
学習のハードルはJavaScriptを習得している人であればそれほど高くありません。この記事を参考にしてTypeScriptを使った開発をしてみてください。
本記事が皆様にとって少しでもお役に立てますと幸いです。