JavaScriptとTypeScript

TypeScript JavaScript
2023.04.01
スポンサーリンク

先にザックリ結論

  • JavaScript（JS）：ブラウザやサーバ（Node.js）で動く「実行される言語」。動的で柔軟。今すぐ書いてすぐ動く。
  • TypeScript（TS）：JavaScriptの上に「型（type）」を加えた言語。書いたTSはコンパイル（変換）されて最終的に普通のJSになる。型を使うことでバグが減り、コードの読みやすさ・保守性が上がる。

1. まずは JavaScript の特徴（超かんたん）

  • 実行環境：ブラウザ、Node.js。そのまま実行できる（コンパイル不要）。
  • 動的型付け：変数に型宣言をしない。値に応じて型が決まる（柔軟だがミスもしやすい）。
let x = 10;     // 数字
x = "hello";    // 後で文字列に変えられる（エラーにならない）
JavaScript
  • メリット：学習コストが低く、すぐに結果が見られる。エコシステム（ライブラリ・情報量）が巨大。
  • デメリット：大きなプロジェクトで型や構造が曖昧になるとバグや維持の難しさが出る。

2. TypeScript の特徴（超かんたん）

  • 静的型付け（optional）：変数や関数の引数・戻り値に「型」を書ける。コンパイル時に型チェックしてくれる。
function add(a: number, b: number): number {
  return a + b;
}
// add(1, "2"); // コンパイル時にエラーになる（ミスを早く発見）
TypeScript
  • TSはJSのスーパーセット：すべてのJSコードは有効なTSコード。だから既存のJSをそのまま使える。
  • コンパイル（トランスパイル）：tsc（TypeScriptコンパイラ）で .ts → .js に変換する。ブラウザはTSを直接実行できないので最終的にJSになる。
  • メリット：型のおかげでバグを早期に発見できる、大規模開発での安心感、エディタ（例：VSCode）の補完・リファクタが強力。
  • デメリット：最初は「型」を学ぶ必要がある、ビルド（コンパイル）の手間、型定義が必要な場合がある（@types）。

3. なぜ「型」が役に立つの？（初心者向けの直感）

想像してみて：複数人で作るアプリ。関数Aが「数値」を受け取ると思って使っているけど、別の人が「文字列」を渡してしまったらバグになるよね。TypeScriptはその“想定のズレ”を事前に教えてくれる。実行前（コードを保存したりビルドした時点）に「ここおかしいよ」と警告してくれるんだ。

4. 実際の例で比較（分かりやすく）

例：配列の合計を返す関数

JavaScript

function sum(arr) {
  return arr.reduce((s, x) => s + x, 0);
}
console.log(sum([1,2,3]));     // 6
console.log(sum(["a","b"]));   // "0ab" → 実行してみないと気づかないバグ
JavaScript

TypeScript

function sum(arr: number[]): number {
  return arr.reduce((s, x) => s + x, 0);
}
sum([1,2,3]);    // OK
sum(["a","b"]);  // コンパイルエラー：stringはnumberに割り当てられない
TypeScript

→ TSだと型ミスを静的にキャッチできる。

5. よく出る TypeScript の便利な機能（初心者向けに説明）

  • 型注釈（: number など）：変数や引数の型を書く。
  • 型推論：型を書かなくても、TSが自動で型を推測してくれる。
let n = 3; // 推論で n は number
TypeScript
  • インターフェース / 型エイリアス：オブジェクトの形を定義して名前をつける
interface User {
  id: number;
  name: string;
  isAdmin?: boolean; // ? は optional（あってもなくてもOK）
}
TypeScript
  • ユニオン型：変数が複数の型を取り得る
let v: string | null; // 文字列か null
TypeScript
  • ジェネリクス（Generics）：型をパラメータ化。ライブラリや再利用しやすい関数で便利（少し上級）。
function identity<T>(x: T): T { return x; }
TypeScript
  • enum（列挙）：状態や選択肢を分かりやすく定義できる（JSにはそのままはない）。
  • 非nullアサーション / nullチェック：DOM操作などで null の可能性を扱うときに便利。
const el = document.querySelector('input');
// el.value だとコンパイルエラー（elは Element | null）
// el!.value // 非nullアサーション（※使いすぎ注意）
TypeScript

6) ツール周り（初心者が触るとき）

  • エディタ：VS Code が最も相性よし（自動補完・エラー表示がすごく楽）。
  • コンパイル：npm install -D typescriptして npx tsc で .ts → .js。
  • 設定：tsconfig.json でコンパイラオプションを管理（どのJSに変換するか等）。
  • 型定義：JSライブラリをTSで使うときは @types/ライブラリ名（DefinitelyTyped）を入れることが多い。
  • ビルドツール：Create React App / Vite / Next.js などはTSテンプレートあり。初めはテンプレート使うと楽。

7. よくある初心者の混乱と注意点

  • 「TSはブラウザで動く？」 → いいえ。最終的にJSに変換してから動く。
  • 「TSは難しいか？」 → 最初の型の学習は少しあるけど、小さく始めて徐々に型を増やすのが王道（any を多用しすぎないのがコツ）。
  • 「型が多すぎてうっとおしい」 → 初期は any を使って段階的に型を追加する、型推論に頼る、という戦略で学べる。
  • 「既存のJSを全部TSに変える必要ある？」 → いいえ。プロジェクトに応じて混在（.js と .ts）で始められる。段階的移行が可能。

8. いつ TypeScript を使うべき？

  • 小さな学習・実験プロジェクト：まずはJavaScriptでOK（学習が早い）。
  • 中〜大規模プロジェクト、複数人開発、長く保守するプロジェクト：TypeScriptがおすすめ（バグを減らしやすい）。
  • ライブラリを公開する/他人が使うAPIを提供する：型があると利用者が助かる。

9. 簡単な入門手順（すぐ試せる）

  1. VS Code を用意。
  2. Node.js をインストール（あると便利）。
  3. npm init -y
  4. npm install -D typescript
  5. npx tsc --init（tsconfig.json が作られる）
  6. src/index.ts を作って npx tsc を実行 → dist/index.js が出る（設定による）。
  7. 小さな関数を書いて型をつけてみる。VS Code の補完とエラー表示が学習に役立つ。

10.まとめ

  • JavaScript：すぐ書いて実行、学習しやすい。柔軟だが大きくなると管理が大変。
  • TypeScript：JavaScriptに型を追加。開発中に多くのバグを防ぎ、保守が楽になる。最初は学習コストがあるが、結果的に効率的になることが多い。
  • 初めはJSで慣れてから、必要に応じてTSに移るのがストレスが少ない順序。興味があれば小さいプロジェクトでTSを試してみて！
スポンサーリンク
タイトルとURLをコピーしました