JavaScriptとTypeScriptの違いは名前だけじゃなかった? 根本的な違いはこれだJavaScriptとTypeScriptの違い【第1回】

Webアプリケーション開発で活躍する「JavaScript」と「TypeScript」は、よく似た名称を持つものの、さまざまな違いがある。その中でも特に重要な違いとは何か。実例を用いて解説する。

2023年08月19日 10時00分 公開
[Cameron McKenzieTechTarget]

 「JavaScript」と「TypeScript」は、どちらもWebアプリケーションのフロントエンド(エンドユーザーの目に見える部分)とバックエンド(エンドユーザーの目に見えない部分)の開発を支えるコンピュータ言語だ。両者は名称だけではなく機能的にも似ている点があるものの、明確な違いもある。JavaScriptとTypeScriptの共通点と相違点とは。

JavaScriptとTypeScriptの“根本的な違い”とは?

会員登録(無料)が必要です

 スクリプト(簡易プログラム)言語のJavaScriptと、Microsoftが開発を主導するオープンソースのプログラミング言語TypeScriptには、重要な違いがある。それは変数に対して「型」(数値や文字列といったデータの種類)を指定する仕組みである「型システム」の有無だ。

 JavaScriptには型システムがないため、変数の型を自由に変えることができる。型システムのあるTypeScriptでは、「コンパイル」(TypeScriptソースコードからJavaScriptソースコードへの変換)時に「strict」というオプションを設定することで、変数の型が適切かどうかを厳密にチェックすることが可能だ。このため特に複雑なWebアプリケーションの開発では、TypeScriptの方がソースコードを管理、保守しやすい。

JavaScriptとTypeScriptを実例で比較する

 型システムの有無は、ソースコードの保守性や一貫性に大きな影響を及ぼす。型システムのないJavaScriptと、型システムのあるTypeScriptのソースコードを見比べると、その影響を把握しやすい。

 JavaScriptで、数値と文字列を扱う変数を宣言する方法は次の通りだ。3行目は文字列をJavaScriptではエラーにならない。

let foo = 1 // 変数「foo」を宣言し、数値「1」を代入
let bar = "text" // 変数「bar」を宣言し、文字列「text」を代入
bar = 123 // 文字列を代入したbarに数値「123」を代入

 TypeScriptで、上記と同様の内容を記述した例を以下に示す。3行目はTypeScriptではエラーになる。

let foo: number = 1 // 数値を扱う型(number)の変数「foo」を宣言して、数値「1」を代入
let bar: string = "text" // 文字列を扱う型(string)の変数「bar」を宣言して、文字列「text」を代入
bar = 123 // 文字列を扱う型の変数barに数値を代入(エラーが発生)

 型システムのないJavaScriptは、変数に対して宣言時に代入したデータと、宣言後に代入したデータの型が違うことを許可する。型システムのあるTypeScriptでは、変数に対して型を指定すると、その変数には指定した型とは異なるデータを代入できない。

 Webアプリケーションの開発に、型システムは大きな影響を与え得る。型システムのないJavaScriptでは、変数がある時点で格納しているデータが、どの型なのかを厳密にチェックしにくい。そのためJavaScriptでのWebアプリケーション開発では、拡張や更新、トラブルシューティングの際にエラーが発生しやすくなる。

 型システムは、変数の型と、それが扱うデータの型が一致しているかどうかを確かめる「型チェック」を可能にする。そのため型システムのあるTypeScriptでは、統合開発環境(IDE)にソースコードの検証やリファクタリング(動作を変えずに内部構造を書き換えること)機能を搭載できるようになる。

 JavaScriptなど型システムのないプログラミング言語では、IDEでの型チェックの実装は難しい。そのためJavaScript用IDEと比べると、TypeScript用IDEはソースコードの生成やトラブルシューティング、リファクタリングを支援する機能を、より多く搭載する傾向にある。


 次回は、JavaScriptの歴史を振り返る。

TechTarget発 エンジニア虎の巻

米国TechTargetの豊富な記事の中から、開発のノウハウや技術知識など、ITエンジニアの問題解決に役立つ情報を厳選してお届けします。

Copyright © ITmedia, Inc. All Rights Reserved.

新着ホワイトペーパー

製品資料 ServiceNow Japan合同会社

生成AIで「ローコード開発」を強化するための4つの方法

ビジネスに生成AIを利用するのが当たり前になりつつある中、ローコード開発への活用を模索している組織も少なくない。開発者不足の解消や開発コストの削減など、さまざまな問題を解消するために、生成AIをどう活用すればよいのか。

製品レビュー 発注ナビ株式会社

システム開発の4つの手法とは? システム開発の流れや専門用語を基礎から解説

システム開発を任されても、「何から始めたらよいのか分からない」という担当者は多いだろう。そこで本資料では、システム開発の流れや専門用語といった基礎知識を分かりやすく解説するとともに、システム開発の4つの手法を紹介する。

製品資料 株式会社AGEST

短納期化が進むシステム開発、なぜテストのアウトソーシングが増えているのか

システムの不具合によるさまざまなリスクを回避するには網羅的なテストを行う必要があるが、自社で行うのは難しい。そこで活用したいのが外部のテスト専門会社だ。本資料ではテスト専門会社を活用するメリットや具体的な流れを解説する。

製品資料 サイボウズ株式会社

レガシーシステムからどう脱却する? 今の時代の基幹システムの在り方

レガシーシステムからの脱却が叫ばれる中、「ERP×ノーコードツール」のアプローチで基幹システムの刷新に取り組む企業が増加している。その推進に当たっては、「Fit to Company Standard」の概念を頭に入れておくことが必要になる。

製品資料 株式会社ビルドシステム

「ローコード開発×内製化」失敗の理由とは? 3つの事例から得た2つの教訓

迅速なサービスの提供を実現する手段として、「ローコード開発×内製化」が注目されている。エンジニア不足の中でも、非IT部門が開発を担える点がその理由の1つだが、全てが順調に進むわけではない。失敗事例から得た2つの教訓を紹介する。

アイティメディアからのお知らせ

From Informa TechTarget

「テレワークでネットが遅い」の帯域幅じゃない“真犯人”はこれだ

「テレワークでネットが遅い」の帯域幅じゃない“真犯人”はこれだ
ネットワークの問題は「帯域幅を増やせば解決する」と考えてはいないだろうか。こうした誤解をしているIT担当者は珍しくない。ネットワークを快適に利用するために、持つべき視点とは。

ITmedia マーケティング新着記事

news017.png

「サイト内検索」&「ライブチャット」売れ筋TOP5(2025年5月)
今週は、サイト内検索ツールとライブチャットの国内売れ筋TOP5をそれぞれ紹介します。

news027.png

「ECプラットフォーム」売れ筋TOP10(2025年5月)
今週は、ECプラットフォーム製品(ECサイト構築ツール)の国内売れ筋TOP10を紹介します。

news023.png

「パーソナライゼーション」&「A/Bテスト」ツール売れ筋TOP5(2025年5月)
今週は、パーソナライゼーション製品と「A/Bテスト」ツールの国内売れ筋各TOP5を紹介し...