TypeScriptについて今日は紹介するよ！
- TypeScriptとは？
- TypeScriptができることって？
- TypeScriptの勉強方法は？
- TypeScriptの将来性は？
などの疑問をお持ちの方の悩みを解決できる記事になっています！
この記事では、現役のフリーランスエンジニアがTypeScriptの特徴、できること、将来性、勉強方法について解説します！
記事を読めば、TypeScriptの特徴や効率的な勉強方法について理解できますよ！
それでは、見てみましょう！
- TypeScriptに興味がある人
- TypeScriptで何ができるか知りたい人
- TypeScriptの学び方を知りたい人
目次
TypeScriptとは？
TypeScriptとは、マイクロソフトが開発したオープンソースのプログラミング言語です。TypeScriptは簡潔に言うと、「型を定義できるJavaScript」です。
「型を定義できる」とは、どういうことでしょうか。
プログラミング言語には、「静的型付け言語」と「動的型付け言語」があります。
「静的型付け言語」とはプログラムが実行される前に、プログラムの整合性や合理性を担保する仕組みをもったプログラミング言語です。
TypeScriptは静的型付け言語であり、プログラム上で使われる値の型を定義することで安全性を確保しています。
TypeScript以外の静的型付け言語は次のものがあります。
- Java
- Kotlin
- Go
- Scala
- Swift
一方、「動的型付け言語」とはプログラムが実行されるタイミングでプログラムの整合性をチェックします。そのため、プログラムが実行されるまでバグに気付きづらいです。
JavaScriptは、「動的型付け言語」です。そのため、型を定義する必要はありません。しかし、プログラムを実行するまで正しい値が使われているかは分からず、エンジニア自身が安全性を担保する必要があります。
JavaScript以外の動的型付け言語は次の通りです。
- PHP
- Ruby
- Python
両者ともメリット、デメリットがあるので覚えておきましょう。
| 種類 | メリット | デメリット |
| 動的型付け言語 |
|
|
| 静的型付け言語 |
|
|
プログラミングとは？初心者向けにわかりやすく解説！
近年、フロントエンド開発ではTypeScriptが広く使われるようになりました。
静的型付け言語は学習コストがかかりますが、安全性が高く、開発効率の良いプログラミング言語です。TypeScriptは、JavaScriptにはなかったメリットが多く含まれているためフロントエンドエンジニアの間で主流になりつつあります。
TypeScriptとJavaScriptの違いは？
TypeScriptとJavaScriptの大きな違いは、型を定義できるかできないかです。
TypeScriptはJavaScriptをベースに作られているため、JavaScriptのほとんどの文法を使うことができます。
そのため、JavaScriptを使ったことがあれば、TypeScriptの学習コストは低いでしょう。
型の定義に関しては、TypeScript独自の構文があります。詳細は、公式ドキュメントなどで確認しておきましょう。
TypeScriptとJavaScriptの違いをまとめると、次の通りです。
| 特徴 | JavaScript | TypeScript |
| 種類 | 動的型付け言語 | 静的型付け言語 |
| 型定義できるか | × | ○ |
| 文法の違い | JavaScript (ECMAScript) | JavaScriptの仕様とほぼ同じ + TypeScriptの構文 |
| 学習コスト | 低い | 高い |
TypeScriptの特徴とは？
TypeScriptの特徴は、次の通りです。
- 静的型付け言語
- JavaScriptと併用できる
- オブジェクト指向言語
- NPMでパッケージ管理
- フロントエンドのフレームワークが充実している
- 本・ドキュメントサイトが充実している
静的型付け言語
TypeScriptの最大の特徴は、静的型付け言語であることです。
そのため、プログラムを書く際は、型を定義する必要があります。
簡単な例を見てみましょう。次のコードは、変数に対して「number」という数値型と、「string」という文字列型を定義しています。
//数字や文字の型を定義する
const a: number = 100
const b: string = "こんにちは"
console.log(a)
console.log(b)
変数や関数を定義するときは、明示的にデータの型を定義します。もし、数値しか入らない型に文字などを入れるとエラーを出力します。型を定義するとは、プログラムを実行する前にデータの整合性を確認し、バグを検知できる仕組みが備わっているということです。
型定義をするために、TypeScriptは次のような機能を提供しています。
- インターフェース
- クラス
- 型の推論
- union型
- ジェネリック
これらの概念は他の静的型付け言語でも使われるので、覚えておくといいでしょう。
JavaScriptと併用できる
TypeScriptはJavaScriptの仕様をベースに作られているため、JavaScriptと併用できます。
TypeScriptのコードの中で、既存のJavaScriptファイルをインポートして使うこともできます。そのため、JavaScriptからTypeScriptに移行する際は、一気に全てを変換しなくても部分的に移行することができます。
ライブラリに関しても、JavaScriptのライブラリをTypeScript上で使用できます。
オブジェクト指向言語
TypeScriptはオブジェクト指向を取り入れているプログラミング言語です。
オブジェクト指向とは、あらゆるデータや対象を「もの」として扱い、「もの」を効率的に組み立ててプログラムを作る手法です。オブジェクト指向は、大量のデータや機能を扱うような大規模開発に向いています。
オブジェクト指向自体は、一つの概念なので他のプログラミング言語でも使うことができます。
TypeScript以外で、オブジェクト指向を取り入れてるプログラミングは次の通りです。
- Java
- Ruby
- Python
- C++
NPMでパッケージ管理
引用元: npm
TypeScriptのパッケージ管理は、NPMを使います。NPMは、JavaScriptのパッケージ管理ツールでもありますが、TypeScriptでも使えます。
パッケージ管理とは、アプリケーション開発で必要なパッケージ(ライブラリ)を管理することです。
ライブラリとは、便利な機能がまとまったものです。例えば
- UIを構築するためのフレームワークライブラリ
- メール送信機能ライブラリ
- フォームを操作するための機能ライブラリ
- テスト管理ライブラリ
- ログイン機能ライブラリ
- 検索機能ライブラリ
などがあります。ライブラリは、プログラミング開発をサポートするために作られたひとまとまりの機能です。自分のサービスにメールやログイン機能を入れたければ、「自分で実装する」か「ライブラリを使用する」ことになります。スピーディに開発をしたい場面では、「ライブラリを使用する」機会が圧倒的に多いです。なぜなら、「自分で実装する」場合はゼロから作らなければならず、コストがかかるからですね。その点、ライブラリは既に出来上がっているのですぐに機能を追加ができます。
エンジニアはアプリケーションで必要なライブラリをインストールしますが、ライブラリの数が多くなると管理も大変になります。その管理の複雑性を解決するために、NPMが使われます。
NPMは、package.json というファイルを作成しその中で必要なライブラリを記載します。一つのファイルにアプリケーションで使用しているライブラリを一元的に管理できるようになっています。
インストール可能なTypeScript・JavaScriptライブラリは、NPMの公式サイトで確認できます。
NPM以外にも、「yarn」というパッケージ管理ツールがあります。こちらもよく使われるのでチェックしておきましょう。
フロントエンドのフレームワークが充実している
TypeScript・JavaScriptのコミュニティは活発で、フロントエンドのフレームワークが充実しています。
フロントエンドのフレームワークとは、Webアプリケーションを開発するためのサポート機能がまとまっているツールのことです。
Webのフロントエンド開発には、UIの作成、サーバーサイドへの通信、フォームの操作など多くの機能が必要とされます。これら全ての機能をゼロから作ると大変ですよね。フロントエンドのフレームワークは、そのようなフロントエンド開発に関わる機能が備わっています。そのため、初心者の人でもすぐにアプリケーション開発ができるようになっています。
TypeScriptで使われる主要なフレームワークは次の通りです。
- React
- Vue.js
- Angular
React
引用元: React
Reactは、Facebookで開発されているオープンソースのUIフレームワークです。
UIフレームワークとは、Webサイトの見た目(UI)や動きを効率的に作成できるためのツール群です。
JavaScriptやTypeScriptでUIの動きを管理すると複雑になりがちですが、ReactのようなUIフレームワークを使うと簡単に実装することができます。
以前は、jQueryなどがよく使われていましたが、近年はReact、Vue.js、Angularなどが主流になりつつあります。
Vue.js
引用元: Vue.js
Vue.jsは、Evan You氏を中心としたチームによって作られているUIフレームワークです。オープンソースであり、誰でも開発に参加することができます。
Vue.jsの特徴は、シンプルでわかりやすい点です。HTMLとJavaScriptを知っていれば、すぐに書くことができます。
また、日本語ドキュメントも充実しており、初心者には学習しやすい環境が整っています。
Angular
引用元: Angular
Angularは、Googleが開発しているフロントエンド開発向けのフルスタックフレームワークです。
UI作成以外にも、状態管理やルーディング、フォーム、http通信の機能が全て含まれています。
ReactやVue.jsと比べて機能が豊富なため、Angularの中で全てが完結できます。
その分、学習コストが高く、他のライブラリとの柔軟性に欠ける点もありますが、使いこなせば強力なツールになるでしょう。
どのフレームワークを使えばいいのか
初心者の人は、Vue.jsを使いましょう。
理由は次の通りです。
- 開発の自由度が高い・柔軟性がある
- エコシステムが充実している
- 学習コストが低い
- 初心者に優しい
最近では、シェアも増えてきたのでコミュニティもより活発化されるでしょう。
中級者以上で、TypeScriptの機能を最大限に使いたいならば、Reactをおすすめします。
Vue.jsはTypeScriptの整備が追いついてない部分があり、Reactの方がTypeScriptのメリットを享受できます。
しかし、フレームワークの選定はあつかうビジネスやチームの習熟度によって変わります。そのため、開発プロジェクトによって柔軟に対応していくことが大事です。
書籍・ドキュメントサイトが充実している
TypeScriptの書籍は充実しています。日本語の書籍も多く、最新のバージョンを学ぶことができます。
書籍はたくさんありますが、いくつかおすすめをご紹介しておきます。
まずはTypeScriptの基礎を習得し、次にReactやVue.jsの使い方を学習しましょう。いきなりReact、Vue.jsをやると、文法がわからずに挫折する可能性があるので基礎からやるのをおすすめします。
TypeScriptを使うと何ができるの？
TypeScriptを使うと様々なアプリケーションを開発できます。
よく開発されるアプリケーションは、次の通りです。
- Webアプリケーション
- スマホアプリ開発
Webアプリケーション
Webアプリケーションとは、Webで提供されているサービスのことです。
例えば、ショッピングサイトや求人サービス、ブログなどです。
TypeScriptのWebアプリケーション開発では、UIフレームワークが使われるのが主流です。前述した通り、UIフレームワークはフロントエンド開発に特化した機能が提供されています。エンジニアはゼロから構築しなくても、フレームワークを使えばすぐにWebアプリケーション開発をすることができます。
今では、独自のフレームワークで開発している企業は少ないでしょう。一部、大企業は独自フレームワークを使っているかもしれませんが、ほとんどの企業はオープンソースのUIフレームワークを使っています。
そのため、上述したReact、Vue.js、Angularのどれかの使い方を覚えておくといいでしょう。
スマホ開発
TypeScriptでスマホアプリ開発も可能です。
スマホアプリ開発というと、SwiftやKotlinが使われるのが一般的です。
しかし、TypeScriptも同様にスマホアプリの開発ができます。例えば、「React Native」という技術を使えば、AndroidとiOSのアプリ開発ができます。
クロスプラットフォームで効率的にスマホアプリの開発ができるのが特徴です。
TypeScriptで作られているサービス
TypeScriptは人気があり、需要の高いプログラミング言語です。日本国内でも多くの企業がTypeScriptを使用しています。
TypeScriptが使われている代表的なサービスは次の通りです。
- ビズリーチ
- はてなブログ
- Kibela
- グノシー
- BASE
- AWA
これからフロントエンジニアを目指す人は、JavaScriptとあわせてTypeScriptも勉強しましょう！
なぜなら、TypeScriptの方が開発効率が高いため、多くの企業がJavaScriptからTypeScriptに移行しているからです。
独自の構文や型の定義作法を覚える必要がありますが、使いこなせるようになれば強力な武器になります。
TypeScriptが使えるとなれる職種
TypeScriptが使えると、フロントエンドエンジニアになれます。
フロントエンドエンジニアとは、WebサイトやアプリケーションのUIや、動きを作る人たちのことです。
近年、フロントエンド技術は急激に進化しています。最新の技術を使うために、企業はフロントエンドエンジニアの活躍を期待しています。
フロントエンドエンジニアの詳しい解説は、こちらをご確認ください。
フロントエンドエンジニアとは？仕事内容や年収、今後の将来性について解説！
TypeScriptエンジニアの年収は？
TypeScriptエンジニアの年収は、どのくらいでしょうか。TypeScriptエンジニアを目指す人は気になるところでしょう。
転職支援サービスなどを見ると、TypeScriptエンジニアの年収は400〜600万円程度とされています。
実際に「forkwell」などの求人サービスで検索すると、年収は400万〜1000万で設定されています。
引用元: forkwell
日本の平均年収と比べると、高い傾向ですね。
スキルの高いTypeScriptエンジニアは独立して、もっと稼いでいます。
エンジニアは作ってナンボの世界なので、スキル次第ではもっと高い年収を狙うことも可能です。
TypeScriptの今後の将来性は？
TypeScriptは、今後も発展が期待されるでしょう。
なぜなら、TypeScriptのコミュニティは常に活発で、日々バージョンアップをして進化しているからです。フロントエンドの技術は毎年進化しています。そして、企業があつかう技術も変わっていきます。それにあわせて、TypeScriptなどが使える高度な人材が求められるのです。
さらに現在、日本のIT業界は深刻な人手不足に陥っています。実際に、経済産業省のデータによると、2025年には約40万人、2030年には約45万人が不足すると試算されています。
労働人口が年々減少しているのも関わらず、企業はITへの投資をするため、エンジニアの需要が高くなっているのです。
求人サイトでもTypeScriptの需要が高いのがわかります。実際に、私の周りでもフロントエンドエンジニア、特にTypeScriptを使えるエンジニアを探している企業はたくさんいます。
これからフロントエンドエンジニアを目指す人は、TypeScriptを始めてみましょう。そして、新しい技術を常にキャッチアップしていけばエンジニアの価値を高め続けられます！
TypeScriptを習得するには
TypeScriptを習得するためには、まずは基礎を学習して、次に実践学習をしましょう。
- プログラミング学習サイトでTypeScriptを始める
- プログラミング本でTypeScriptの仕様を理解する
- ポートフォリオを作る
プログラミング学習サイトでTypeScriptを始める
基礎を身につけるには、プログラミング学習サイトがおすすめです。
なぜなら、プログラミング学習サイトは、環境構築が不要ですぐにプログラミングを始められるからです。
例えば、Progateなどのプログラミング学習サイトを活用すれば、簡単にプログラミングを始められます！
Progateは「TypeScript」の講座はありませんが、「JavaScript」を学べます。また、それ以外にも「Git」「コマンドラインツール」を学べるので試してみてください！
Progateでプログラミングを学習する方法を解説【独学で可能】
ドットインストールでは、TypeScript入門コースがあるので基礎を学習しましょう。
プログラミング本でTypeScriptの仕様を理解する
基礎学習では、プログラミング本も有効です。
プログラミング学習サイトでは扱えきれない細かい仕様を学べます。
前述した、おすすめの本を活用してみましょう。
ポートフォリオを作る
次に実践として、ポートフォリオやアプリを作りましょう。
アウトプットすることでプログラミングをより理解できます。
基礎ではプログラミング言語の特徴や使い方を学び、実践ではアウトプットすることで効率的にプログラミングを習得できます。
エンジニア未経験者でもできる！絶対ためになる魅力的なポートフォリオの作り方！
エンジニアへの具体的なステップ
プログラミングを学習しただけでは、エンジニアにはなれません。
エンジニアになるための具体的なステップは次の記事で解説しているので、参考にしてくださいね！
【初心者のための】未経験からWebエンジニアになる3ステップ【完全保存版】
最短でエンジニアになりたい人は
最短でエンジニアを目指すひとは、プログラミングスクールに行きましょう！
独学でも勉強できますが、時間がかかるのは事実です。
実践的なスキルをつけるにはプログラミングスクールの方が効率的です。
なぜなら、プログラミングスクールだと実践的な課題をやったり、プロのエンジニア講師にいつでも質問できるので独学よりも早く習得できるからです。
初心者の頃は、エラーに遭遇すると挫折しやすいです。プロに教わった方が自分で調べるより遥かに効率的です。
例えば、TechAcademyだとフロントエンドの実践的なコースがあります。
その他にも、プログラミングスクールでは実践的なプログラムが用意されています。独学ではできない体系的なプログラミング学習と転職支援を受けられます。
プログラミングスクールは当たり外れがあると言われてます。実際に、無料のプログラミングスクールで失敗したという人もいます。
こちらの記事では、失敗しないために厳選したプログラミングスクールをまとめています。すぐにエンジニアに転職した方は検討してくださいね！
【転職もサポート】おすすめのプログラミングスクール3選！【現役エンジニアが厳選】
まとめ
この記事では、TypeScriptについてまとめました。
今ではたくさんのプログラミング学習サイトや本があります。実際にコードに触れると、プログラミングの雰囲気を掴めますよ！
皆さんがエンジニアになれるのを応援しています！
