スライドショー

【入門】TypeScriptとは?Webアプリ開発で注目の言語を徹底解説


TypeScriptって言語があるみたいだけど、いまいちよく分からない…
結局のところJavascriptとTypeScriptどちらを勉強したらいいの?
TypeScriptの勉強の仕方で迷っている…

こんにちは、文系出身プログラマの佐藤です。早現役8年目、現在はライターとしても活動しています。

皆さんは「TypeScript」というプログラミング言語をご存知でしょうか? Webアプリケーション開発のフレームワークでTypeScriptを推奨しているものが出てきたため、ご存知の方も多くなってきたのかもしれませんね。

しかし、いざ勉強しようと思うと、まだまだ初心者向けの情報は少なく「どんな言語なのかよく分からない……」とお悩みをお持ちの方も多い印象を受けます。

この記事では、TypeScriptがよく分からない方へTypeScriptとは何か?を基本の情報からわかりやすく解説していきます。後半ではTypeScriptに興味がある、学習方法に悩んでいるという方に向けて、お勧めの学習方法についても紹介していきますので是非ご覧ください。

TypeScriptも、今注目されている新しい言語の一つです。さっそく、どのような言語なのか見ていきましょう!

TypeScriptとは?

この章ではTypeScriptがどんな言語なのかを解説していきます。JavaScriptとの違いも併せて解説していくので、一緒に確認していきましょう。

JavaScriptを進化させた言語

TypeScript(タイプスクリプト)は2014年ごろにMicrosoftによって開発・発表されたプログラミング言語です。JavaScriptを拡張して作られたものですが、JavaScriptとは違い静的型付けのクラスベースオブジェクト指向言語になっています。

TypeScriptをコンパイルすると、JavaScriptのコードに変換されるためJavaScriptが動く環境であればすぐに使うことができます。JavaScriptのライブラリなども使用でき、互換性はばつぐんです。

2017年にGoogle社内の標準開発言語としてTypeScriptが承認され、世界的に注目を浴びるようになりました。Googleが開発しているJavaScriptフレームワークのAngularもTypeScriptでの開発を推奨しています。

少し専門用語が並んでしまいましたね。次の項目で「超」簡単に一言で特徴をまとめていきます!

特徴を超簡単に言うと

TypeScriptの特徴を難しい言葉を使わず一言でまとめていきます。

JavaScript超進化版=TypeScript!

TypeScriptはJavaScriptの良いところを残しつつ、使いにくかったところを修正したJavaScriptの進化版なんです。もちろん、JavaScriptの機能をTypeScriptからも使うことが出来ちゃいます。

どんなところを修正したのか、どんな違いがあるのかは次の項目で詳しく解説していきます。JavaScriptがよく分からない! という方は、ぜひこちらの記事をご覧ください。

Googleが使っているので、かなり将来性がある!

Googleが開発している人気のフレームワークにも導入され、現在では他のフレームワークでもTypeScriptが使用できるようサポートされつつあります。今後、JavaScriptに代わり需要が増えていく可能性がある急成長中の言語です。

特徴を簡単につかむことは出来たでしょうか? 次はJavaScriptがどんな風に進化してTypeScriptになったのか、わかりやすくまとめていきます。

Javascriptとの違い

JavaScriptの進化版がTypeScriptという紹介をしましたが、いったいどんな違いがあるのでしょうか? 代表的なものを見ていきましょう。

動的型付けから静的型付けになった!

JavaScriptは動的型付けの言語です。動的型付けを簡単に説明すると、プログラムが勝手に型を決定してくれるということです。

型を宣言しなくて良いので、作るのは簡単ですが実行するまでエラーが起きるかどうか分からない……という面があります。RubyやPythonが代表的な動的型付け言語です。TypeScriptは逆に静的型付け言語になっています。型を宣言して開発を行うので、事前にエラーが分かったりパフォーマンスが良くなるという面があります。

大人数が開発に携わる場合、静的型付けのほうがエラーが未然に防げるという点で有利になることが多いです。静的型付けで代表的な言語はC#などがあります。実は、TypeScriptの作者はC#の製作者でもあるんです。

クラスが作れるようになった!

TypeScriptではJavaScriptでできなかった「クラス」の作成を実現しています。複雑で大規模な開発を行おうとするとき、JavaScriptではコードが冗長になっていましたがTypeScriptではそれを解消することが出来ます。

実は、この2つを改良したのは「JavaScriptで大規模アプリケーション開発をする上での欠点を補うため」という理由からでした。もし、将来は大規模な開発に携わりたい! と考えているなら、TypeScriptを使えるようになっていたほうが今後のためになるでしょう。

もちろん、JavaScriptを先に勉強してしまったからといって、無駄になることはありません。次の、フレームワークとの関係も確認して自分が勉強をする言語を決定していきましょう!

JavaScriptフレームワークとの関係

この章では、JavaScriptフレームワークとTypeScriptの相性などを紹介していきます。

JavaScriptフレームワークってなんだろう……? と思った方は、次の記事を是非ご覧ください。分かりやすく比較解説されています。

AngularとTypeScript

AngularはGoogleが開発しているJavaScriptフレームワークです。Webアプリ開発を進める際に非常によく使用されます。Angularについて、詳しく学習してみたいと思った方は次の記事をお勧めします。

こちらは、先ほども紹介したようにTypeScriptでの開発が推奨されているフレームワークです。公式から推奨されていることもあり、AngularでWebアプリ開発をするなら今後はTypeScriptを使って行くことになると思われます。

Angularを使ってWebアプリ開発をしたい、Angularを使った案件に携わりたいと考えている方は、JavaScriptを学習して動的型付けに慣れてしまう前にTypeScriptを学習してみるのも良いですね。

React・Vue.jsとTypeScript

ReactVue.jsも非常に有名なJavaScriptフレームワークです。同じくWebアプリを開発する際に使用されます。ReactはFacebookが開発したフレームワークで、Vue.jsはAngularJSの開発に携わっていた人たちが作ったフレームワークです。

この2つのフレームワークについてもっと知りたいと思った方は、解説記事がありますのでぜひご覧ください。


Vue.jsとは?人気急上昇のJavaScriptフレームワークを解説
更新日 : 2019年5月20日

こちらのフレームワークはJavaScriptでの開発が推奨されています。拡張機能によりTypeScriptも使用することができるようですが、基本的にはJavaScriptでの開発を想定しています。

この2つのフレームワークはJavaScriptでシンプルな開発をするために作られたものになっています。React・Vue.jsフレームワークを使って開発したい、または他のJavaScriptフレームワークも使えるようになりたいと考えている方はJavaScriptから学習していくことをお勧めします。

フレームワークとの関係性がなんとなくでも理解できたでしょうか? 次は、TypeScriptが実際に使われているモノを紹介していきます。

TypeScriptで作られたもの

何度も紹介していますが、TypeScriptはGoogleの標準開発言語になっているためGoogle関連の物にはよく使われています。海外企業ではすでに導入している例が多く確認できます。有名な企業では

  • Microsoft
  • Google
  • BMW
  • VMWare

などのページで使われています。日本企業では、転職サービスなどを提供しているBizReachのページでも使用されています。


引用元:BizReach https://www.bizreach.co.jp/

そのほか、日本企業では次のようなページでもTypeScriptが使用されています。

>>>ベネッセiキャリア

>>>SEROKUフリーランス

>>>Postfor

このように、まだ日本企業での導入は少ないですが、海外の有名企業で導入されるケースが増えています。今後は日本の有名企業の案件でも採用されることが多くなってくるでしょう。

そんな将来性のあるTypeScriptの具体的なメリットやデメリットにも着目していきましょう。

TypeScriptのメリット、デメリット

ここまでで多くのTypeScriptの良い部分を紹介してきましたので、先にメリットについてまとめます。

TypeScriptのメリット

  • JavaScriptより短く読みやすいコードが書ける
  • JavaScriptとの互換性がある
  • 型を宣言するのでエラーを未然に防げる


採用している企業も増えていてGoogleで標準開発言語に採用されている、将来性のある言語ですね。とはいえ、TypeScriptの言語自体にもデメリットあります。まだまだ日本語で読める情報が少ないという点や、構造が難しい言語なので学習コストが高いという点です。

頼れる情報がまだ少ないので、分からないことや困ったことがあった場合に調べる手間がかかる可能性もあります。

このようにTypeScriptはメリットだけではなく、デメリットもある言語です。他の言語の知識を少しでも付けてから学習を始めるほうが理解は早いでしょう。しかしあなたがTypeScriptで作りたいものがはっきりしているなら、高いモチベーションで学習に臨めるので有りだと思います。

そんなちょっと複雑な言語「TypeScript」ですが、覚えてしまえば活躍できる場所は広がります! 実際にはどのようなお仕事があるのでしょうか?

TypeScriptエンジニアの需要

次にTypeScriptが使えるとどのような仕事につけるのか、年収はいくらなのかという点について紹介していきます。

TypeScriptエンジニアの実際の求人は?

TypeScriptを使ったお仕事をにはどんなものがあるのか気になりますよね。実際に求人サイト「レバテックフリーランス」でTypeScriptと検索してみました。

URL:https://freelance.levtech.jp

現時点(2019/4)では31件の求人があるようです。ちなみにJavaScriptだと336件の求人があるので、まだまだ求人数には開きがあるようですね。

具体的に求人内容を見てみましょう。

位置情報を使った、マーケティングサービスの開発の求人では、最高で月90万円の案件もあるようです。自分でも使うかもしれない、身近なサービスに携わることが出来るようです。

https://freelance.levtech.jp/project/detail/31018/

また、ゲーム関連の求人もありました。

https://freelance.levtech.jp/project/detail/31735/

このように、かなり案件の幅は広いようです。今後も求人が増える見込みなので、いろいろなジャンルで活躍していけそうですね。

そんなTypeScriptエンジニアの年収はどれくらいといわれているのでしょうか? 次の項目で紹介していきます。

TypeScriptエンジニアはどのくらいの年収?

TypeScriptエンジニアの年収はGoやScalaと比べると順位が下ですが、それでも中央値が575万円で5位とかなり高額になっています。

JavaScriptは2017年のランキングで9位でしたが、2018年では圏外になりました。実は、2017年のランキングではTypeScriptが圏外だったので、年収の面では逆転が始まっているんです。

また、Javaエンジニアの年収中央値は500万円で14位ということなので、結構な差があるのが分かりますよね。

【求人検索エンジン「スタンバイ」調べ】
https://www.bizreach.co.jp/pressroom/pressrelease/2018/0807.html

現時点は求人数も上位の言語に比べ少なめではありますが、今後JavaScriptに代わる開発言語となればかなり求人数が増える可能性があります。実際に、2017年の圏外から5位まで一年で上昇してきました。

JavaScriptが扱える人にとっては、いますぐ学習しておいて損はない言語といえますよね。

さて、ここまで読んでTypeScriptに興味が湧いた! という方もいらっしゃるかと思います。次の章からはTypeScriptの開発環境を構築したり、おすすめの学習方法について紹介していきます。

TypeScriptを勉強しようと思ったら

TypeScriptを勉強するには、大きく3つの方法があります。

  • 書籍などを使って独学で勉強する
  • 勉強会に行って教えてもらう
  • スクールで教えてもらう


この章では、この3つについて順に紹介していきます。まずは、独学で勉強する方法についてご紹介します。

独学で学ぶ

この章では、独学でTypeScriptを勉強するのにお薦めの書籍などを紹介していきます。まずは、開発できるよう環境を構築していきましょう。

開発環境を構築・ちょっと動かしてみよう

今回はNode.jsとTypeScriptを使って簡単に動かすまでを行ってみます。準備するものが少し多くなりますが、こちらの記事に従ってまずはNode.jsを設定していきましょう。

Node.jsをセットアップできたら、TypeScriptを導入します。npmから次のようなコマンドを実行するだけで、完了です。

npm install --save-dev typescript

npmが何か良く分からない…という方は、こちらの記事を参考に実践してみてくださいね。

TypeScriptが導入出来たら、さっそくいつもの実践をしてみます!

実践!簡単に動かしてみよう

今回も、いつもの「Hello world」を画面に表示するところまでやってみます。

サンプルコード(helloworld.js)

class test
{
    constructor(public Text : string) {}

    helloShow()
    {
        return this.Text;    
    }
}

var msgStr = new test("Hello World!");
document.body.innerHTML = msgStr.helloShow();

TypeScriptでこのように書いたものを、コンパイルするとjsファイルが出来ます。自動でJavaScriptへ変換してくれるということですね。コンパイルの方法はnpmで次のコマンドを実行します。

tsc helloworld.ts

そのコンパイルしたものを、次のようにhtmlで表示してみましょう!

サンプルコード(test.html)

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="helloworld.js"></script>
</body>
</html>

実行結果

hello worldが表示できました。ちなみに開発中のフォルダ構成はこのようになっています。

また、開発にはVSCodeを使用するのをお勧めします。Microsoftのテキストエディタで、TypeScriptももちろんサポートしてくれ非常に便利です。

ここまで出来た方は、さっそく書籍やサイトで学習を始めましょう。まだ上手くできないな……という方も参考になるサイトを最後に紹介しますので、そちらも参考にして再挑戦してください!

おすすめ入門書籍を紹介

TypeScriptの日本語書籍はまだまだ少ないですが、次の二冊は入門におすすめです。どちらも全くプログラミングに触れたことのない方には難しいかもしれませんが、少しでもJavaScriptに触れたことがある方にはお勧めです。

JavaScriptエンジニアがTypeScriptの特徴を「超」手っ取り早く大まかに把握するための本| Amazon

JavaScriptの知識からTypeScriptをまずはざっくり理解しようという書籍です。

速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ| Amazon

こちらもサクッと読める一冊になっています、入門書としておすすめです。

JavaScriptを全く知らない……という方は、一度JavaScriptの一番簡単な書籍から始めてみるのも良いかもしれません。おすすめの書籍をまとめた記事がありますので、ぜひご覧ください。

おすすめのチュートリアルサイト

次に、学習の参考になるサイトを紹介します。

[初心者が学ぶ TypeScript 入門 Ver.0.2 【準備編】]
Node.jsのことから順を追って解説されており、まず動かすまでの参考になります。

[TypeScript チュートリアル]
先程の実践がうまくいかない…という方はぜひこちらを参考に再挑戦してみてください。

[TypeScriptの型入門]
TypeScriptの型が良く分からない…となった時には、こちらを参考に学習するのをお勧めします。

[TypeScript入門講座]
文法やサンプルコードなどを掲載しています。学習中にわからないことがあれば、こちらも確認していきましょう。

[TypeScriptハンドブック(日本語)]
公式のハンドブックを有志が日本語訳したものです。出来れば英語で確認したいですが難しいという方は日本語版を必ず確認しましょう。

[TypeScriptチュートリアル(英語)]
公式のチュートリアルです。英語に抵抗のない方はこちらでチュートリアルを一通り実践してみましょう。

 

以上が独学で勉強する際にお勧めの情報です。つぎは、勉強会に行って学んでみる方法を紹介します。

勉強会で学ぶ

TypeScriptの勉強会は年に数回行われています。IT勉強会や、イベントを検索できる「connpass」などでTypeScriptと検索して、勉強会情報を検索するのがお勧めです。

URL:https://connpass.com/

勉強会に行くのは勇気がいるかもしれませんが、同じ言語を学習している同士と情報交換することは有意義な時間になることまちがいなしです。時間と場所の都合がつくなら参加をおすすめします!

スクールで学ぶ

さて、ここまで紹介した方法は、すべて自力で学習する方法でした。


実は一度、独学で勉強して挫折した経験がある。
一人だと、何からやっていいかわからなくて困っている…

という方もいらっしゃるかもしれません。そんな方は、スクールを検討してみることをお勧めします。

スクールでの学習なら、一人での学習は不安という方もサポートを受けながら、自分に合った学習が出来るという点でお勧めです。挫折しそうなとき、頼れる人がいるというだけで安心ですよね。

とはいえ、スクールに通うと決心するにはかなり勇気が必要です。

侍エンジニア塾では、「無料体験レッスン」を行っています。プロのコンサルタントがあなたの悩みや不安をしっかり解決へ導いてくれますので、お悩みの方は一度無料体験レッスンを受けてみることをお勧めします。

まとめ

今JavaScriptに代わって注目の言語「TypeScript」について紹介しました。興味が湧いた方はぜひ、書籍やサイト、スクールを検討してみてくださいね。

それでは、また次の解説で!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

佐藤

佐藤

文系大学出身、なんとか自力で頑張りプログラマー歴今年で8年目。
自力で頑張って勉強した経験を生かし、読者の皆様に分かりやすく親しみやすい記事を書けるよう日々邁進中です。
出来る言語はC#,VB,Java,Delphiなどなど、幅広く触っています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説