はじめに｜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のセキュリティ設定でスクリプト実行が制限されているためです。
対処手順（安全な方法）
- PowerShellを「管理者として」実行
スタートメニューで「PowerShell」と検索し、右クリック → 「管理者として実行」 - 以下のコマンドを実行
Set-ExecutionPolicy RemoteSigned
- 実行後、「変更しますか？」と聞かれるので
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を学ぶ最高のタイミングです。
コメントを残す