TypeScriptは、2012年にマイクロソフト社によって開発された、JavaScriptをベースに型安全性を高めたプログラミング言語です。
構文がJavaScriptと似ているため習得が比較的容易で、静的型付けとオブジェクト指向プログラミングの機能により、大規模開発にも適しています。
本記事では、TypeScriptの特徴や環境構築方法、学習方法を解説し、フリーランスとしての将来性にも言及します。
Contents
TypeScriptとは
TypeScriptは、Microsoftによって開発されたオープンソースのプログラミング言語です。JavaScriptをベースに、静的型付けとオブジェクト指向プログラミングの機能を追加した言語となっています。
TypeScriptの開発は2012年に始まり、2014年に初めて正式リリースされました。リリース以降、TypeScriptは着実に人気を集め、現在では多くの大企業や開発者に採用されています。Google社内の標準言語に指定されたほか、MicrosoftのVisual Studio CodeやAngularなどでも使用されています。
海外ではMicrosoft Office 365やSlack、Skypeなどの大規模なWEBアプリケーションの開発に利用されているほか、BMW社やVMWare社でも採用されています。国内でもリクルート社やビズリーチ社などのWEBページの開発に活用されるなど、TypeScriptは幅広い分野で注目を集めている言語です。
TypeScriptの主な特徴
TypeScriptには以下のような特徴があります。
- ・構文がJavaScriptと似ている
- ・静的型付け言語
- ・オブジェクト指向プログラミング
JavaScriptに似た構文を持つTypeScriptは、JavaScriptの知識があれば比較的容易に学習できます。また、静的型付けにより、コンパイル時にエラーを検出できるため、バグの少ないコードを書くことができます。
さらに、クラスやインターフェースなどのオブジェクト指向プログラミングの機能を備えているため、大規模な開発にも適しており、保守性や拡張性に優れたコードを書くことができます。
関連記事：オブジェクト指向とは？原則やメリット・デメリットを徹底解説
TypeScriptとJavaScriptの関係性
TypeScriptは、JavaScriptを拡張して作られたプログラミング言語です。JavaScriptとの互換性が高く、基本的な構文はほとんど同じです。
TypeScriptで書かれたコードは、最終的にJavaScriptにコンパイルされます。つまり、TypeScriptで開発したアプリケーションは、JavaScriptが動作する環境であれば、どこでも動作させることができます。
JavaScriptとの違い
JavaScriptが動的型付け言語なのに対し、TypeScriptは静的型付け言語です。
静的型付け言語とは、変数やメソッドの戻り値に型を指定する言語のことをいいます。型を指定すると、コンパイル時に型のエラーを検出でき、コードの質を高められます。また、動的型付け言語と比べて処理速度が速いメリットもあります。
さらに、TypeScriptには型推論の機能があります。型推論とは、型が明確に記述されていない場合でも、言語自体が変数の型を予測し補完してくれる機能です。型推論により、コーディングの手間を省けます。
TypeScriptとJavaScriptどちらから学ぶべきか
TypeScriptはJavaScriptの完全上位互換であり、JavaScriptを拡張した言語です。そのため、初学者にとってはまずJavaScriptを学ぶことをおすすめします。JavaScriptは案件数も多く、習得が比較的容易です。
JavaScriptを習得したのち、案件をこなしながらTypeScriptの学習にチャレンジするのがよいでしょう。すでにJavaScriptを習得済みの人であれば、TypeScriptの習得は比較的容易です。JavaScriptの知識を活かしつつ、型の恩恵を受けられるTypeScriptにもぜひチャレンジしてみてください。
TypeScriptのメリット
TypeScriptならではのグッドポイントを3点ご紹介します。
JavaScriptの知識を活かせる
TypeScriptはJavaScriptに型付けを追加した言語です。そのため、JavaScriptの知識があれば比較的スムーズにTypeScriptを学習できます。
構文はほとんどJavaScriptと同じなので、JavaScriptですでに使っていた配列やオブジェクト、関数などをTypeScriptでも同じように使えます。JavaScriptライブラリもそのまま利用可能です。
TypeScriptで書いたコードは、最終的にJavaScriptにコンパイルされます。つまり、TypeScriptを学ぶことはJavaScriptのより深い理解にもつながります。
エラーを防げる
JavaScriptは動的型付け言語のため、変数の型が実行時まで確定しません。そのため、思わぬ型のデータが入ってきてエラーが発生するリスクもあります。
一方、TypeScriptは静的型付けにより、コンパイル時に型のチェックがおこなわれます。例えば、数値型の変数に文字列を代入しようとするとエラーになります。
実行前にバグの多くを発見できるため、JavaScriptと比べてエラーが起きにくいコードを書けます。特に大規模なコードを書く際には、型があることでバグを未然に防げるメリットは大きいでしょう。
作業効率が上がる
TypeScriptは、型定義ファイル（.d.ts）によって、外部ライブラリの型情報を管理できます。型定義ファイルにより、ライブラリの使い方を調べたり、複雑なAPIを使う際に型のヒントを得られたりと、開発の生産性が上がります。
また、TypeScriptはオブジェクト指向プログラミングをサポートしています。クラスや継承、インターフェースなどの機能を使って、モジュール化された保守性の高いコードを書くことができます。
オブジェクト指向のメリットを活かせば、コードの再利用が進み、機能追加や変更の際も影響箇所を少なく抑えられます。チーム開発でも設計思想を共有しやすく、各担当者の作業がスムーズになるため、開発効率がアップします。
TypeScriptのデメリット
TypeScriptを使用する際のデメリットを説明します。
日本語で読める情報が少ない
TypeScriptは2012年にマイクロソフトが開発したプログラミング言語です。一方、JavaScriptは1995年に登場し、TypeScriptよりも普及率が高く、さまざまなノウハウがインターネット上に蓄積されています。
そのため、エラーが発生した際に、日本語で解決方法を見つけられる可能性は、JavaScriptのほうが高くなっています。TypeScriptの情報は、日本語で読める記事などがまだ少ない状況です。
学習コストが高い
TypeScriptは静的型付け言語であり、変数ごとに型を書く必要があります。型の仕組みや記述法を理解するには、一定の学習コストがかかります。
JavaScriptは動的型付け言語であり、変数に型を書く必要がありません。そのため、JavaScriptと比べると、TypeScriptのほうが学習コストは高くなっています。
TypeScriptを活用する開発
TypeScriptはどのような開発プロジェクトに適しているのでしょうか。代表的なものをご説明します。
動的なWEBサイト
TypeScriptは、動的なWEBサイトの開発に適しています。動的なWEBサイトでは、ユーザーの操作に応じて表示内容が変化するため、コードの安定性と予測可能性が重要になります。
例えば、Slackのビジネスチャットアプリは、TypeScriptを使ってフロントエンドのUIを実装しています。複雑なUIの開発がスムーズになり、型定義によってバグの発生を防いでいます。
Slackのように、動的なWEBサイト開発にTypeScriptを活用すれば、品質の高いWEBサイトを効率的に構築できます。
アプリケーション
TypeScriptは、大規模なアプリケーション開発に適しています。特に、エンタープライズ向けのWEBアプリケーションでは、コードの安全性と保守性が重要視されます。TypeScriptの型システムと静的解析ツールにより、コードの品質を向上させ、長期的なプロジェクトの運用がしやすくなります。
Microsoft Office 365やAsanaなどの大規模アプリケーションでは、TypeScriptが広く採用されています。型定義によるコードの可読性向上や、開発者間のコミュニケーション円滑化など、TypeScriptがもたらすメリットを活かし、企業は高品質なアプリケーションを開発しています。
ゲーム
TypeScriptは、ゲーム開発にも活用されています。ゲームのコード量は膨大になりがちで、JavaScriptだけでは品質管理が難しくなります。そこで、TypeScriptを導入し、ゲームのロジックを型定義すると、想定外のバグを減らすことができます。
古典的なマッチパズルマイクロソフト麻雀 はTypeScriptを採用しています。ゲームのコードで型定義を通じて、品質の向上を実現しています。
TypeScriptのフレームワーク
TypeScriptを使った開発では、フレームワークを活用すると、効率的に開発をおこなえます。TypeScriptに対応した主要なフレームワークとしては、AngularJS、React、Vue.jsの3つが挙げられます。
AngularJS
AngularJSは、Googleが中心となって開発しているオープンソースのWEBアプリケーション開発フレームワークです。2016年9月のバージョン2からは、TypeScriptでの使用が推奨されるようになりました。
React
Reactは、Metaが開発しているオープンソースのJavaScriptライブラリです。シングルページアプリケーション（SPA）の開発に特化しているのが特徴で、TypeScriptとの親和性が高いことでも知られています。
Vue.js
Vue.jsは、UIの開発に特化したJavaScriptフレームワークで、シンプルで軽量なのが特徴です。2018年8月にリリースされたVue CLI 3からは、TypeScriptを正式にサポートしています。
TypeScriptの環境の整え方
TypeScriptの環境構築（Windows向け）の仕方を解説します。
エディタを選びダウンロードする
エディタは使い慣れたものをご使用いただいて構いませんが、今回はVScodeを使用します。
Visual Studio Codeの公式サイトから「Visual Studio Codeをダウンロードする」をクリックします。
次に「Download Visual Studio Code」のページにて、一番左の「Windows」をクリックし、ダウンロードします。
たった今、ダウンロードした「VSCodeUserSetup-x64-1.xx.x.exe」をダブルクリックします。
「使用許諾契約書の同意」が出てくるので、「同意する」を選び、「次へ」を押します。
「追加タスクの選択」では、チェックボックスからいくつかの項目を自由に選択できます。
今回は図のとおり選択し、「次へ」を押します。
「インストール準備完了」にて「インストール」を押すとインストールが開始します。
「Visual Studio Codeセットアップウィザードの完了」が出れば、インストール終了です。
VSCodeの日本語化
「Visual Studio Code」を起動し、図のアイコンを押します。
検索ボックスに「Japanese Language Pack」と入力し、ヒットした「Japanese Language Pack for Visual Studio Code」をクリックします。
「Install」を押し、インストールします。
インストール完了後に、画面右下に表示される「Change Language and Restart」ボタンを押すとエディタは再起動し、日本語に切り替わります。
Node.jsをダウンロードする
TypeScriptの環境構築にはNode.jsが必要です。
Node.jsの公式サイトにアクセスし、左側の「推奨版」をダウンロードします。
インストーラーを実行すると、「Welcome to the Node.js Setup Wozard」と表示されたら、「Next」を押下します。
「End-User Licensed Agreement」で「I accept the terms in the License Agreament」にチェックをいれると、「Next」を押下できるようになるので、押下します。
次の「Destination Folder」も「Next」を押下し、「Custom Setup」も「Next」を押下します。すると、下画像の「Tools for Native Modules」に移ります。
チェックボックス「Automatically install the necessary tools～」はチェックをせずにそのまま「Next」を押します。
次の「Ready to install Node.js」にて「Install」を押せばNode.jsはインストールされ、「Finish」を押すとインストール完了です。
コマンドプロンプトを開き、「node -v」「npm -v」と打ち込み、下記の画像のように（バージョン番号は異なる場合があります）Node.jsとnpmのバージョンが表示されればインストールは終了です。
コマンドプロントを開いたままで、続けます。
関連記事：JavaScript言語のフレームワークはこの5つを押さえよう
TypeScriptコンパイラをインストールする
コマンドプロンプトに「npm i -g typescript」と打ち込みます。
「tsc -v」と打ち込み、バージョンが表示されれば、インストール成功です。
TypeScriptを実装する
まず「ファイル」から「フォルダを開く」を選び、今回プロジェクトで使用するフォルダ（TypeScriptprojectという名前のフォルダを作成しました）を選択します。
「新しいフォルダー」から、上記のフォルダ内に再度新規フォルダ（testという名前のフォルダを作成しました）を作成します。
「表示」から「ターミナル」を選択します。
すると、右下に下画像のようにターミナルが表示されます。
以下では、サンプルとしてコマンドラインで動作する簡単なTypeScriptを作成します。
ファイルgreeting.tsをプロジェクトフォルダ直下に新規作成し、下記のコードを記入、保存します。
// greeting.ts
// 名前の定数
const your_name: string = “TechReach”;
// 挨拶を出力する関数
function greet(your_name: string): void {
console.log(`Hello, ${your_name}!`);
}
// 挨拶を出力
greet(your_name);
ターミナルで「tsc greeting.ts」と打ち込みます。コードに誤りが無ければ、同じフォルダにgreeting.jsが作成されます。
実行してみましょう。ターミナルで「node greeting.js」と打ち込みます。
Hello, TechReach!
上記のように表示されましたら、TypeScriptの新規作成、コンパイル、実行の一連の作業を終えたことになります。
TypeScriptの学習方法
TypeScriptの学習方法をご紹介します。
インターネット
インターネット上で無料公開されているドキュメントとして、TypeScript Deep Diveをご紹介します。TypeScriptの入門的な内容になりますが、内容は充実しています。
本
本からは、2022年4月に発売されたばかりの「プロを目指す人のためのTypeScript入門安全なコードの書き方から高度な型の使い方まで」をご紹介します。
以下、概要より引用になります。
TypeScriptらしいコードの書き方を学べます
TypeScriptは、JavaScriptに静的型付けの機能を加えたオープンソースのプログラミング言語です。本書では、根幹となるJavaScriptの仕様・機能とともに、TypeScript独自の仕様・機能を解説します。TypeScriptの基礎知識はこれ一冊だけで学べます。
参考：プロを目指す人のためのTypeScript入門安全なコードの書き方から高度な型の使い方まで
動画
Udemyから「【世界で7万人が受講】Understanding TypeScript日本語版」をご紹介します。TypeScriptのコースのなかでも多く購入されている動画で、TypeScriptの基本から応用まで学べます。
TypeScriptを使ってフリーランスとして仕事をする
フリーランスとして見た場合のTypeScriptの現状をTechReachのデータをもとに紹介します。
TypeScriptの将来性
TypeScriptはマイクロソフト社によって開発され、Google社も社内開発言語として採用している比較的新しい言語のため、高い期待感があります。
世界的に人気のJavaScriptの上位互換でもあり、移行のしやすさ、習得のしやすさも加わり、需要は高まりつつあります。
TechReachの案件検索でもJavaScriptの案件数1050件に対し、TypeScriptも550件と半数を占めるまでになっています。
参考：TechReach（TypeScriptの案件・求人情報一覧）
TypeScriptの年収、報酬単価相場
TechReachのTypeScript案件のうち、最大月額が80万円を超える案件数が250件とTypeScript案件全体の45%を超えています。また、最大月額が70万円を超える案件数は430件となり、全体の75%を超えています。
| 平均年収 | 最低年収 | 最高年収 |
| 875万円 | 420万円 | 1800万円 |
※TechReach調べ（2024年4月時点）
案件データの分析によると、フリーランスで年収を上げるには、クライアントのニーズを理解し、上流工程で提案できる能力が重要です。
また、TypeScriptは頻繁にアップデートされるため、最新情報を追い続け、TypeScriptに精通している立場を築くことが求められます。
まとめ
本記事では、TypeScriptの概要からメリット・デメリット、環境構築の手順までを解説しました。型指定によるコード品質の向上や、JavaScriptとの親和性の高さがTypeScriptの大きな特徴です。
今後の需要の高まりが予想される中で、TypeScriptの可能性を理解し、実際の開発の場で活用してみてはいかがでしょうか。
フリーランスの案件をお探しの方はTechReachにご相談ください。
TechReachを運営する株式会社アールストーンはIT・Web業界特化で15年以上の実績がございます。
そのため、高単価・高品質な数多くの案件紹介が可能です。
また一人のコンサルタントが企業と求職者様の担当を行う「両面型エージェント」を採用しているため、あなたの希望に合う案件がきっと見つかるはずです。
TechReachを活用して、理想の案件を見つけましょう！
