TypeScriptってなに？JavaScriptやReactとの違いは

「TypeScriptって名前は聞いたことあるけど、結局どういうものなの？」
JavaScript・TypeScript・Reactなどの言葉が飛び交う中で、
「結局どれが何なのか？」と混乱してしまうこともあるかもしれません。

それぞれの概念の違いを押さえておくことで、学習の効率が大きく向上します。
この記事では、TypeScriptの基本やJavaScript・Reactとの違いをやさしく紹介していきます。

TypeScriptとは？

TypeScriptは、JavaScriptをより安全に、より扱いやすくするための言語です。

JavaScriptに“型（タイプ）”の仕組みを追加したもので、最終的には普通のJavaScriptに変換して使います。

基本的な書き方

型を指定する

JavaScriptでは、変数にどんな型の値を入れてもエラーにはなりません。
しかし、それが原因で思わぬバグが発生することもあります。

// JavaScriptだと型がない
let name = "Taro"; // 文字列
name = 123;        // 数値も代入できてしまう（エラーなし）

TypeScriptでは、最初に「この変数は文字列！」と宣言できます。

let userName: string = "Taro";
userName = 123;  // ❌ エラーになる（numberはstringに代入できない）

配列の型指定

配列にも「この配列は数値だけ！」と型を指定できます。

const scores: number[] = [90, 85, 100];
scores.push("high"); // ❌ エラー：文字列は追加できない

なぜTypeScriptを使うのか？

• エラーを事前に見つけやすい
  型を指定することで、間違ったデータの扱いをコンパイル時にチェックできるため、実行時のエラーを減らすことができます。
• 大規模なアプリケーション開発に向いている
  コードが増えるほど、型情報が役立ちます。大規模なプロジェクトでは、TypeScriptがあることで安心して保守・拡張ができるようになります。

TypeScriptは、「JavaScriptのままでも書けるけれど、もっと安全に書けるツール」というイメージです。

JavaScriptやReactとの違いは？

JavaScriptとの違い

TypeScriptはJavaScriptに型の仕組みを追加した言語です。
つまり、TypeScriptで書かれたコードは最終的にJavaScriptに変換（コンパイル）され、ブラウザやNode.jsで実行されます。

Reactとの違い

Reactは、UI（ユーザーインターフェース）を作るためのライブラリです。

JavaScriptやTypeScriptと組み合わせて使うもので、それ単体では動きません。
Reactを使うことで、コンポーネントと呼ばれる小さな部品を組み合わせながら、効率的にWebアプリケーションのUIを構築できます。

ちなみに：ライブラリとフレームワークの違い

ライブラリとは？

• 特徴
  • 必要なときに必要な機能だけ取り出して使う
• 例
  • React
  • jQuery

イメージでいうと
ライブラリ＝工具箱
あなたが大工さんで、必要なときに「ドライバー」「ハンマー」などを選んで使う感じです。

フレームワークとは？

• 特徴
  • ルールが決められていて、その中で開発者は決められた場所にコードを書いていく
• 例
  • Vue.js

イメージでいうと
フレームワーク＝注文住宅のセットプラン
すでに設計図が用意されていて、決められた場所に壁紙や家具を配置する感覚です。

まとめ

最後まで読んでいただきありがとうございます！
今回の内容をまとめると、

• TypeScriptはJavaScriptを拡張した言語で、型の指定ができるためコードの安全性が高まる。
• JavaScriptはTypeScriptのベースとなる言語で、すべてのWebの基本。
• ReactはUIを構築するためのライブラリで、JSやTSと一緒に使う。

まずはJavaScriptから始め、TypeScriptやReactへと段階的に学習を進めると理解が深まります。TypeScriptを習得して、より安全でメンテナンスしやすいコードを書いていきたいですね！

この記事が少しでも参考になれば嬉しいです！