JavaScriptとTypeScriptの違い【第1回】
JavaScriptとTypeScriptの違いは名前だけじゃなかった? 根本的な違いはこれだ
Webアプリケーション開発で活躍する「JavaScript」と「TypeScript」は、よく似た名称を持つものの、さまざまな違いがある。その中でも特に重要な違いとは何か。実例を用いて解説する。
「JavaScript」と「TypeScript」は、どちらもWebアプリケーションのフロントエンド(エンドユーザーの目に見える部分)とバックエンド(エンドユーザーの目に見えない部分)の開発を支えるコンピュータ言語だ。両者は名称だけではなく機能的にも似ている点があるものの、明確な違いもある。JavaScriptとTypeScriptの共通点と相違点とは。
JavaScriptとTypeScriptの“根本的な違い”とは?
併せて読みたいお薦め記事
JavaScriptを知る
スクリプト(簡易プログラム)言語の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.
TechTarget発 エンジニア虎の巻
米国TechTargetの豊富な記事の中から、開発のノウハウや技術知識など、ITエンジニアの問題解決に役立つ情報を厳選してお届けします。
この記事の著者
関連記事
新着ホワイトペーパー PR
-
製品資料
[株式会社MatrixFlow] 「物流リソース最適化」ガイド:人員・配車・傭車を出庫依頼の確定前に決めきる -
製品資料
[株式会社キーエンス] なぜRPA導入は頓挫する? シナリオ作成の壁を乗り越える解決策とは -
製品資料
[株式会社セールスフォース・ジャパン] 「CRMは設計と無関係」は本当か? PLMとの融合で実現する高速開発 -
事例
[日本ヒューレット・パッカード合同会社] AIエージェントの時代にどう備える? 「新たな働き手」を支える3要素とは -
製品資料
[日本ヒューレット・パッカード合同会社] “横並びの自動化”から脱却、AI活用で生産性と競争力を高める秘訣
こんなメディアも見られています
TechTargetジャパンに関連する情報をお探しであれば、こちらのメディアもお役に立てるかもしれません。
ベンダーコンテンツ PR
From Informa TechTarget
SpecialPR
アクセスランキング
-
1
ChatGPTは“検索しまくり”でGeminiは“淡泊”? データが明かすAIの裏側
-
2
なぜ「全社配布Copilot」は使われないのか? 失敗に学ぶAI定着
-
3
法務と開発者で「言葉が通じない」問題 トヨタやソニーが語るOSS管理の真実
-
4
「IBM iはDXのボトルネック」は誤解 意外と知らない今風モダナイズの効果
-
5
「朝8時にバッチが終わらない」データ爆発の危機をJPX総研はどう乗り越えたか
-
6
損保ジャパンはなぜ「COBOL」を捨てなかったのか? 脱メインフレームの真相
-
7
AI導入後に発覚する「社内文書を読めない」問題 情シスは何を直せばいい?
-
8
なぜ「Gemini 4 Argon」は出遅れたのか? Googleが狙う“逆転のシナリオ”
-
9
「中堅・中小企業のネットワーク・セキュリティ運用実態」に関するアンケート
-
10
AIの導入効果はどう測る? DMM.comのエンジニア組織に学ぶ効果検証のノウハウ
ホワイトペーパーランキング PR
-
1
不審メールの経路や見せ方に変化? 2026年夏の3事例から見えた動向と対処方法
-
2
家庭用Wi-Fiルーターの業務利用は危険? 避けるべき理由と具体的な対策
-
3
Microsoft 365を安全に運用 うっかりミスやサイバー攻撃に備えるデータ保護術
-
4
プログラミング不要で誰でも実現できる、ネットワーク運用管理の自動化とは
-
5
財務部門がAIを最大限に活用する方法 無駄のない戦略的リーダーシップへの道
-
6
LLMが兵器化? 元FBI高官が鳴らす警鐘とセキュリティツール統合のポイント
-
7
なぜRPA導入は頓挫する? シナリオ作成の壁を乗り越える解決策とは
-
8
HDDを使わない「SSDオンリー」が無謀なのはなぜ?
-
9
「オンプレミス回帰」せざるを得ない“合理的な理由”
-
10
“あのファイル転送”で暗躍するノーウェアランサム
TechTargetジャパン SNS
インフォメーション
注目情報をチェック
TechTargetジャパンをフォロー