Tech

【2025年版】TypeScript入門ガイド｜導入手順と実例でわかる基礎とメリット

はじめに｜TypeScript、実は僕も最初は「よく分からなかった」

TypeScriptって、「覚えた方がいい」ってよく言われますよね。でも、初心者の頃の僕は正直こう思ってました。

  • 「型？なんかめんどくさそう…」
  • 「JavaScriptで十分じゃない？」
  • 「anyって書けば通るし問題ないでしょ」

…で、実際にそのままJavaScriptで書き続けてたら、後から地獄を見ました。

この記事では、そんな僕の経験も交えながら、「なぜ今TypeScriptが必要なのか」をわかりやすく解説します。
そして、Viteでの環境構築から、初心者でもできる最初のコード体験まで一緒にやっていきましょう！

TypeScriptってなに？JavaScriptと何が違うの？

ざっくり一言で言うと…

JavaScriptに“型”の概念を追加したものです。

TypeScript（以下TS）を使うことで、変数や関数の「中身の型」を明示できるようになります。これにより、エラーが事前に分かる・コードの意図が伝わる・保守しやすくなるというメリットが得られます。

具体例：同じ関数をJSとTSで比較すると…

Javascript（型なし）

function greet(name) {
  return "Hello, " + name;
}

このコードは、引数 name にどんな値でも受け取れてしまうため、あとからエラーになる可能性があります。

Typescript（型あり）

function greet(name: string): string {
 return "Hello, " + name;
}

こちらのTypeScriptのコードでは…

  • name: string → 引数は文字列であることを明示
  • : string → 返り値も文字列であることを明示

となっており、間違った型を使おうとした場合は事前にエラーを出してくれます。

型とは「この変数は何の種類か？」を指定するものです。

  • string: 文字列（例：”こんにちは”）
  • number: 数値（例：42）
  • boolean: true/false など

JavaScriptでは「nameって文字列なの？数字なの？」がわかりませんが、
TypeScriptでは「これは文字列を受け取って、文字列を返す関数だ」と明示されているため、意図しない使い方にすぐ気付けます。

なぜ“今”TypeScriptが求められているのか【3つの理由】

① 転職市場での需要が急上昇

2024年以降、エンジニア求人で「React＋TypeScript」はもはや定番になりつつあります。

  • TS対応案件 → 高単価、チーム開発
  • JSのみ → レガシー、単発系の傾向

企業は、「後からでもメンテしやすいコード」を求める傾向にあります。

② Reactとの相性がとにかく良い

ReactやVueなどのフロントエンドライブラリでは、部品（コンポーネント）ごとに明確な「型」があると、保守しやすくなります。

たとえば以下のように、「名前」というデータを受け取るコンポーネントを書くとき

type Props = {
  name: string;
};

const Hello = ({ name }: Props) => {
  return <p>Hello, {name}</p>;
};

type Props = { name: string } で「このコンポーネントは name という文字列を受け取ります」と定義
({ name }: Props) でその型を受け取る形に

Reactを知らない人向けに言うと、これは名前を表示する部品のようなもので、
このコードにより「数字やオブジェクトを間違って渡してしまう」ような初歩的なミスを防ぐことができます。

③ バグが減る → レビューや開発がスムーズに

TypeScriptを導入すると、コードレビューが楽になります。

たとえば APIレスポンスの型を定義しておけば、「この値がある前提で進めちゃってた」みたいな事故がなくなるんですよね。

type User = {
  id: number;
  name: string;
  email: string;
};

このレベルの型定義を最初からしておけば、チームも自分も安心できます。

TypeScriptの始め方【Viteで超カンタン】

詳しい手順はこちらの記事で解説しています。

① Viteの初期プロジェクトを作成します

npm create vite@latest

② プロジェクト名を聞かれるので入力（例：my-ts-app）

③ フレームワークを選択
➡ React を選びます

④ バリアント（TypeScript or JavaScript）を選択
➡ TypeScript を選びます

⑤ 作成されたディレクトリに移動

cd my-ts-app

⑥ 必要な依存をインストール

npm install

⑦ 開発サーバーを起動

npm run dev

🎉 これで、TypeScriptでReactを動かす環境が完成です！

PowerShellで「スクリプトの実行が無効」のエラーが出たときの対処法

Windowsで npm コマンドを実行したときに以下のようなエラーが出ることがあります：

このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.ps1 を読み込むことができません。

これはPowerShellのセキュリティ設定でスクリプト実行が制限されているためです。

対処手順（安全な方法）

  1. PowerShellを「管理者として」実行
    スタートメニューで「PowerShell」と検索し、右クリック → 「管理者として実行」
  2. 以下のコマンドを実行
Set-ExecutionPolicy RemoteSigned
  1. 実行後、「変更しますか？」と聞かれるので Y を入力してEnter

これで、ローカルで作成されたスクリプト（npm含む）は実行できるようになります。

「RemoteSigned」はローカルのファイルは実行できるが、インターネットから取得したスクリプトは署名が必要という設定です。セキュリティと利便性のバランスが取れた一般的な設定です。

最小のTSXコンポーネントを作ってみよう

ディレクトリ構成（おすすめ）

my-ts-app/
├─ src/
│  ├─ components/
│  │   └─ Hello.tsx ←ここに作る！
│  └─ App.tsx

1. src/components/Hello.tsx を作成

Hello.tsx

type Props = {
  name: string;
};

const Hello = ({ name }: Props) => {
  return <p>Hello, {name}</p>;
};

export default Hello;

Propsという型を自分で定義して、それを引数の型として使っています。

2. App.tsx に読み込んで表示

App.tsx

import Hello from './components/Hello';

function App() {
  return (
    <div>
      <h1>TypeScriptでコンポーネント！</h1>
      <Hello name="Taro" />
    </div>
  );
}

export default App;

3. 開発環境のURLをブラウザで開く

以下のような表示が出れば成功です！

ここでのポイントは、Propsという型を自分で定義して、それを受け取るというところです。

  • 明示的で読みやすい
  • 間違えたらすぐ怒ってくれる

初心者のうちは面倒に感じますが、将来の自分をめちゃくちゃ助けてくれます。

初心者がまず覚えるべき「3つの型」

① プリミティブ型

基本の型

let name: string = "Taro";
let age: number = 28;
let isActive: boolean = true;

② オブジェクト型

複数のプロパティをまとめて管理したいときに便利です。

let user: { name: string; age: number } = {
  name: "Yuka",
  age: 30,
};

用途：APIレスポンスの定義、ユーザーデータの構造化など

③ 関数型

関数に引数や戻り値の型を指定することで、より安全になります。

function greet(name: string): string {
  return "Hello, " + name;
}

用途：UIの動作制御、イベント処理、API呼び出しなどに活用できます。

よくある初心者のつまずき（僕も通った道）

  • anyで逃げまくる → 逆に危険
  • 型定義が冗長で読みにくくなる

でもこれ全員通る道です。
そして、きっと通り抜けた人から「TypeScript書く方がむしろラク」と言い始めるんです。

まとめ｜TypeScriptは「最初だけちょっと難しい、でも未来がラクになる技術」

  • 転職市場でも求められている
  • Reactやモダン開発と相性抜群
  • バグが減って、チーム開発がラクになる

「Reactちょっと書けるようになったな」と感じたタイミングが、TSを学ぶ最高のタイミングです。

🔗 次に読みたい記事（内部リンク）

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

Categories