この記事の要点
- TypeScriptはJavaScriptの上位互換言語なのでよく似ている
- 大きな違いは「型定義と型付けの違い」「大規模開発に対応できるかの違い」
- 先にJavaScript、次にTypeScriptを学ぶとスムーズだが、TypeScriptを先に学びながら並行してJavaScriptを学ぶのもアリ
世界的に人気が高まっているTypeScriptは、もともとJavaScriptがベースに開発された言語のため、よく似た性質を持っています。
以前、TypeScriptとはどんな言語なのか、その特徴や学習方法について解説していました。
TypeScriptとJavaScriptはよく似ている一方で、型に関する特徴や開発手法などに大きな違いもあります。
この記事では、TypeScriptとJavaScriptの違いと、どちらを先に学習すべきかを解説します。
目次
TypescriptとJavaScriptの違い
TypeScriptは、Microsoftにより開発されたオープンソースのプログラミング言語です。
JavaScriptの機能が拡張された上位互換言語であり、Googleが開発標準言語に指定するなど近年注目が高まっています。
では実際、TypeScriptはJavaScriptとどこが違うのでしょうか。
大きな2つの違いを見ていきます。
JavaScriptについて、基礎を知りたい方はこちらを参考にしてください。
型定義と型付けの違い
プログラミングにおいて、文字列、数値、日付などのデータの種類を「型」（Type）と呼びます。
TypeScriptは、この型付けを明確に定義するのが特徴です。
一方のJavaScriptには型がありません。
また、TypeScriptとJavaScriptでは、この型を決定する「型付け」のタイミングが異なります。
型付けは、「動的型付け」「静的型付け」の2種類に分類されます。
動的型付けとは、プログラムが実行されるタイミングで型が決まるものを指します。
JavaScriptのほかに、PHPやPythonなどがこれに当たります。
一方の静的型付けは、プログラムの実行前に行うコンパイルのタイミングで型が決定します。
プログラム実行時には型に関する文法的なエラーが取り除かれた状態になるため、不具合が起きるのを事前に防ぐことができるのです。
TypeScriptとJavaScript、実際のソースコードを見て比較してみましょう。
「数値型の引数を受け取って1加算する」処理を行う関数を作ります。
JavaScriptの例：
test.js
function add(num) {
return num + 1;
}
console.log(add(5));
console.log(add("a"));
console.log(add());
実行結果：
6 a1 NaN
TypeScriptの例：
test2.ts
function add(num: number) {
return num + 1;
}
console.log(add(5));
console.log(add("a"));
console.log(add());
コンパイル結果：
test2.ts:6:17 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
6 console.log(add("a"));
~~~
test2.ts:7:13 - error TS2554: Expected 1 arguments, but got 0.
7 console.log(add());
~~~~~
test2.ts:1:14
1 function add(num: number) {
~~~~~~~~~~~
An argument for 'num' was not provided.
Found 2 errors in the same file, starting at: test2.ts:6
JavaScriptは型定義がないため、関数add()に数値以外の引数を渡しても、引数を指定しなくてもエラーにならず、結果として期待していない結果が得られます。
一方TypeScriptでは、コンパイルのタイミングでエラーが出ているのが分かります。
このように、TypeScriptは型を明確にすることによって実行前にエラーを洗い出せるため、開発の工程をよりスムーズに進められるという違いがあるのです。
大規模開発に対応できるかどうかの違い
JavaScriptはクライアントサイドで動くプログラムとして1995年に誕生し、長くHTMLの補助的な役割を担ってきました。そのため、そもそも大規模開発を想定して設計されたものではありません。
IT技術が進化し、比較的規模の大きい開発が増える中、JavaScriptでは足りない機能や性質を補う目的で誕生したのがTypeScriptです。
そのため、TypeScriptは大規模開発にも対応できる仕様となっています。
近年頻繁にアップデートが行われているJavaScriptですが、大規模開発という点に関しては今なお難しく、TypeScriptの必要性は今後も一層高まっていくことでしょう。
TypescriptとJavascriptの同じ点とは？
TypeScriptとJavaScriptの違いについてご紹介しましたが、逆に同じ（似ている）点も数多くあります。
そのため、JavaScriptをある程度使えればTypeScriptも使いこなせるというのは大きなメリットです。
TypeScriptとJavaScriptの同じ点についてご紹介しましょう。
JavaScriptの構文をそのまま使える
既にご紹介した通り、TypeScriptはJavaScriptの上位互換言語です。
JavaScriptの機能を補完する形で設計されているため、JavaScriptで使える構文はTypeScriptでも使えるという特徴があります。
逆に言えば、TypeScriptを習得するためにはJavaScriptの知識も並行して習得する必要があることを意味します。
JavaScriptのライブラリやフレームワークを使える
TypeScriptは優れたエコシステムを有しており、さまざまな開発環境やツール、フレームワークなどに対応しています。
代表的なものはReactやVue.js、AngularなどのUIライブラリ、Next.jsやNuxtといったフレームワークであり、これらを使いこなすためにJavaScriptの知識が欠かせません。
クラスを作成できる
近年のプログラミング言語の多くはオブジェクト指向を取り入れていますが、JavaScriptには長らくその概念がありませんでした。
しかし2015年にアップデートによってクラス構文が追加され、JavaScriptでもオブジェクト指向が取り入れられました。
一方TypeScriptは、もともとオブジェクト指向言語のため、クラスを使用することができます。
なお、オブジェクト指向におけるクラスとは、オブジェクト（モノ）を概念化した設計図のことです。
同じ「クラス」でもHTMLのclass属性とは全く異なるものなので、混同しないよう注意しておきましょう。
TypescriptとJavaScriptどちらを先に学ぶべき？
TypeScriptを学ぶためには、JavaScriptの知識が不可欠です。
JavaScriptをそれなりに使えるようになってからTypeScriptを始めると、よりスムーズに習得することができます。
学習時間に余裕がある人は、まずJavaScriptから始めるとよいでしょう。
TypeScriptとJavaScriptは互換性が高いため、TypeScriptを先に学びつつ、並行してJavaScriptを習得する形も可能です。
その場合は、JavaScriptとTypeScriptのコードを比較しながら学習を進めるとよいでしょう。
なお、JavaScriptライブラリのうち、ReactやVue.jsと呼ばれるものを使いたい場合は初めにJavaScriptを習得するのがおすすめ。
一方でAngularは、TypeScriptで動的型付けに慣れておく方が効率的に学ぶことができます。
どのライブラリやフレームワーク、ツールを使いたいかによって、TypeScriptとJavaScriptどちらを先に学ぶべきか変わってくるのです。
まとめ
TypeScriptとJavaScriptの違いと学習優先度についてご紹介しました。
TypeScriptは世界的にも人気が高く、TypeScriptエンジニアの需要は今後さらに高まっていくことが予想されます。
型定義や型付け、クラスなどTypeScriptの概念をしっかり理解し、JavaScriptと並行して学習を進めていきましょう。
まずはJavaScriptを学習したいという方には、動画を見ながら初心者でも作れるゲームやツールを作成するのがおすすめです。
学習と共に、実際にゲームやツールを作ってみると習得が早くなりますので、参考にしてください。
