TypeScriptのunion型とは

TypeScriptのunion型（ユニオン型）とは、「AかBのどちらか」というように、複数の型のいずれかを表す型です。縦棒|で型をつなげて書きます。

“success” | “error” みたいな縦棒でつなぐやつ、あれ何なの？

それがunion型。実務だと状態管理とかで毎日のように使うから、押さえておくと強いよ

なぜunion型が必要なのか

1つの値が「複数の型のどれか」になる場面は、実務でよくあります。例えば、入力欄に入れるIDが「数値のときも文字列のときもある」といったケースです。

// numberでもstringでも受け取りたい
function printId(id: number | string) {
  console.log(`IDは${id}です`);
}

printId(123);      // OK
printId("abc123"); // OK

number | stringと書くことで、「numberかstringのどちらか」を受け取れる関数になります。union型がないと、型ごとに関数を分けて書く必要が出てしまいます。

リテラル型とは

union型と一緒によく使われるのが「リテラル型」です。リテラル型とは、stringやnumberのような広い型ではなく、「特定の値そのもの」を型にしたものです。

let status: "success"; // "success"という文字列しか入れられない型
status = "success"; // OK
status = "error";   // Error: Type '"error"' is not assignable to type '"success"'.

単体だとあまり使い道がなさそうですが、union型と組み合わせると一気に実用的になります。

union型×リテラル型が実務で最強な理由

リテラル型をunion型でつなぐと、「決められた選択肢のどれか」を表現できます。

type Status = "loading" | "success" | "error";

function showMessage(status: Status) {
  // statusには この3つ以外は渡せない
}

showMessage("success"); // OK
showMessage("finish");  // Error: 決められた値以外は渡せない

API通信の状態（読み込み中・成功・失敗）や、ボタンの種類（primary・secondaryなど）のように、「あらかじめ決まった値のどれか」を扱う場面で大活躍します。文字列を直接比較するより、タイプミスをコンパイル時に防げるのが大きなメリットです。この書き方はtypeでしか書けないので、interfaceとの使い分けも押さえておくとよいです。

kinoblog

TypeScriptのinterfaceとtypeの違いを、JavaScript経験者が理解するまで

🕒️2026年7月18日

 前回、TypeScriptを学び始めて最初につまずいたポイントをいくつか紹介しました。その中でも特に地味に時間を取られたのが、interfaceとtypeの使い分けです。JavaScriptは元々そこそこ書けていたので、「型を書く」という発想自体には早く慣れました。ただ、その分「なぜ同じようなことができる書き方が2種類あるのか」がかえって気になり、調べるのに時間がかかりました。この記事では、実際のコード例をもとに違いを整理します。JavaScript経験者ほど「どっちでもよくない？」と感じる理由JavaScriptにはそもそも型という概念...

union型の値を安全に使う（型の絞り込み）

union型の値をそのまま使おうとすると、エラーになることがあります。

function printId(id: number | string) {
  console.log(id.toUpperCase());
  // Error: Property 'toUpperCase' does not exist on type 'number'.
}

toUpperCaseは文字列のメソッドなので、numberの可能性があるidには使えません。こういうときは、typeofで型を確認してから使います（型の絞り込み）。

function printId(id: number | string) {
  if (typeof id === "string") {
    console.log(id.toUpperCase()); // ここではstringとして扱える
  } else {
    console.log(id); // ここではnumber
  }
}

この「使う前に型を確認する」考え方は、any・unknownの記事でも解説しています。union型でも同じ型ガードの考え方が使えます。

kinoblog

TypeScriptのanyとunknownの違い｜どっちも避けるべき？初心者向け整理

🕒️2026年7月19日

 「anyは使うな」って言われたから、じゃあ型がわからない時どうすんの？それ、まさに自分がハマった疑問。答えは「unknown」って型だったんだ「anyは使うな」で終わっていた理解前々回、TypeScriptでanyを使うと型チェックが効かなくなる、という話をしました。ただ、そのときの自分は「anyを使わなければとりあえず安全」くらいの理解で止まっていました。実際にコードを書き進めていくと、「型が何になるか分からないけど、anyは使いたくない」という場面に何度も遭遇しました。そこで出てくるのがunknownという型です。anyとu...

Reactでの使用例

ReactでAPI通信の状態を管理するとき、union型のリテラル型が定番の書き方になります。

type Status = "loading" | "success" | "error";

const [status, setStatus] = useState("loading");

// statusには決められた3つの値しか入らないので、
// タイプミスや想定外の値を防げる

API通信の型については、こちらの記事も参考になります。

kinoblog

TypeScriptのPromiseとは？API通信の型定義を初心者向けに解説

🕒️2026年8月1日

 TypeScriptのPromise<T>とはTypeScriptのPromise<T>とは、非同期処理が最終的に返す値の型を指定する書き方です。API通信の結果に型を付けることで、レスポンスの中身をエディタの補完付きで安全に扱えるようになります。fetchでAPI叩くとき、TypeScriptだと何が変わるの？一番変わるのは「返ってきたデータの中身をちゃんと型で管理できる」ところだよこの記事では、TypeScriptでAPI通信を扱うときに必ず出てくるPromise<T>について、fetchを使った実例をもとに解説します。ジェネリクスの基本がまだ不安な場...

union型とenumの違い

「決められた値のどれか」を表す方法として、enumという書き方もあります。ざっくり言うと、union型のリテラル型の方がシンプルで、近年のReact開発ではこちらが好まれる傾向があります。

enum自体については、別の記事で改めて詳しく解説する予定です。まずはunion型のリテラル型を使いこなせるようにしておけば十分です。

よくあるエラー

type Status = "success" | "error";
const s: Status = "Success";
// Type '"Success"' is not assignable to type 'Status'.

これは、大文字・小文字の違いで、決められたリテラル型に一致していないために起きるエラーです。union型のリテラル型は「値そのもの」を型にしているため、"success"と"Success"は別物として扱われます。定義した値と完全に一致しているか確認してみてください。

よくある質問

Q. union型はいくつまで型をつなげられますか？
A. 個数に実用上の制限はありません。"a" | "b" | "c" | "d"のように必要なだけつなげられます。

Q. リテラル型とunion型は違うものですか？
A. 別の概念です。リテラル型は「特定の値そのものの型」、union型は「複数の型のどれか」を表す型で、この2つを組み合わせて使うことが多いです。

Q. union型とenum、どちらを使えばいいですか？
A. 近年のReact開発では、シンプルに書けるunion型のリテラル型が好まれる傾向があります。まずはこちらに慣れておけば困りません。

まとめ

• union型は|で複数の型をつなぎ、「AかBのどちらか」を表す型
• リテラル型（特定の値の型）と組み合わせると、「決まった選択肢のどれか」を表現できる
• union型の値を使うときは、typeofなどで型を絞り込んでから使う
• ReactのAPI状態管理などで頻繁に使う、実務必須の書き方

公式ドキュメントにも、union型についての詳しい解説があります。

▶ TypeScript公式ドキュメント：Union Types

“loading” | “success” | “error”、これは確かによく見るわ

うん。この形を自分で書けるようになると、一気に「TypeScriptっぽいコード」が書けるようになるよ

TypeScriptの型アサーション（as）とは

TypeScriptの型アサーションとは、asを使って「この値はこの型だ」と開発者側から指定する書き方です。TypeScriptの自動判定より、開発者が型を分かっている場面で使います。

コードでよく見る「as」って何なの？型を書いてるようには見えるけど

便利なんだけど、使いすぎると危ない子でもあるんだ。今日は使いどころと注意点をセットで覚えよう

なぜ型アサーションが必要なのか

TypeScriptは多くの場合、値の型を自動で判定してくれます。しかし、TypeScriptより開発者の方が「この値の型」を正確に分かっている場面もあります。代表的なのが、HTMLの要素を取得する場面です。

const input = document.getElementById("email");
input.value; // Error: Property 'value' does not exist on type 'HTMLElement'.

TypeScriptはgetElementByIdの戻り値を「一般的なHTML要素（HTMLElement）」としか判断できず、それが入力欄（input）であることまでは分かりません。そのため.valueにアクセスしようとするとエラーになります。こういうときに型アサーションを使います。

型アサーション（as）の基本の書き方

値の後ろにas 型名と書きます。

const input = document.getElementById("email") as HTMLInputElement;
input.value; // OK。inputはHTMLInputElementとして扱われる

「この要素は入力欄（HTMLInputElement）だと、私は分かっている」とTypeScriptに伝えているイメージです。これでエラーが解消され、.valueにアクセスできるようになります。

型注釈との違い

初心者が混乱しやすいのが、型注釈（: 型名）との違いです。この2つは似ているようで、役割が逆です。

型注釈は「TypeScriptに守らせるルール」、型アサーションは「開発者がTypeScriptの判断を上書きする指示」という違いです。型注釈の基本については、こちらの記事で解説しています。

kinoblog

TypeScriptの変数・関数の型注釈とは？書き方を初心者向けに解説

🕒️2026年8月3日

 TypeScriptの型注釈とはTypeScriptの型注釈とは、変数や関数に対して「どんな型の値を扱うか」を明示する書き方です。変数の後ろや関数の引数・戻り値に: 型名という形で記述します。コロンの後ろに型を書くってやつ、なんとなく真似して書いてるけど、ちゃんと理解できてないかも実はここ、応用が少なくて一番「型に慣れる」のに向いてる場所だから、今日はここだけ丁寧にやろうなぜ型注釈が必要なのかJavaScriptでは、変数にどんな値でも自由に代入できます。// JavaScriptlet price = 1000;price = "1000円"; // 数...

型アサーションを多用してはいけない理由

asは便利ですが、多用は危険です。なぜなら、asは実際の値をチェックせず、TypeScriptの判断を強制的に上書きしてしまうからです。

const value = "kino" as unknown as number;
console.log(value.toFixed()); // 型エラーは出ないが、実行時にクラッシュする

本当は文字列なのに「number型だ」と無理やり指定すると、TypeScriptはエラーを出しませんが、実行時にはエラーになります。asを使うと、TypeScriptがせっかく守ってくれていた型の安全性を、自分から手放してしまうことになります。「エラーが消えるから」という理由だけでasを使うのは避けるべきです。

asの代わりに型ガードを使う

「値が本当にその型か分からない」場合は、asで無理やり指定するのではなく、型を確認してから使う「型ガード」がおすすめです。

function printLength(value: unknown) {
  if (typeof value === "string") {
    console.log(value.length); // ここではstringとして安全に扱える
  }
}

この「使う前に型を確認する」考え方は、any・unknownの記事でも詳しく解説しています。asと型ガードの使い分けを意識すると、より安全なコードが書けます。

kinoblog

TypeScriptのanyとunknownの違い｜どっちも避けるべき？初心者向け整理

🕒️2026年7月19日

 「anyは使うな」って言われたから、じゃあ型がわからない時どうすんの？それ、まさに自分がハマった疑問。答えは「unknown」って型だったんだ「anyは使うな」で終わっていた理解前々回、TypeScriptでanyを使うと型チェックが効かなくなる、という話をしました。ただ、そのときの自分は「anyを使わなければとりあえず安全」くらいの理解で止まっていました。実際にコードを書き進めていくと、「型が何になるか分からないけど、anyは使いたくない」という場面に何度も遭遇しました。そこで出てくるのがunknownという型です。anyとu...

.tsxファイルでのasの書き方の注意

前回の記事で少し触れましたが、.tsxファイルでは、もう一つの型アサーションの書き方である<型名>値という記法が使えません。

// .tsファイルでは書けるが、.tsxファイルではJSXと衝突してエラーになる
const input = <HTMLInputElement>document.getElementById("email");

// .tsxファイルではこちら（as）を使う
const input2 = document.getElementById("email") as HTMLInputElement;

Reactを書く.tsxファイルでは、<型名>がJSXのタグと見分けがつかなくなるためです。実務ではどちらのファイルでも使えるasの方に統一しておくのが無難です。tsxとtsの違いについては、こちらの記事も参考にしてください。

kinoblog

TypeScriptのtsxファイルとは？.tsとの違いを初心者向けに解説

🕒️2026年8月11日

 TypeScriptのtsxファイルとはTypeScriptのtsxファイルとは、TypeScriptの中でReactのJSX構文（HTMLのようなタグを含む書き方）を使うための拡張子です。「TypeScript tsx とは何か」を一言で言えば、「TypeScript × JSX」を組み合わせたファイルという意味で、Reactの開発では欠かせない存在です。Reactのファイルって.tsのものと.tsxのものがあるけど、何が違うの？実はそこ、ルールを知らないと地味に詰まりやすいところだから、今日ははっきりさせておこうなぜ.tsと.tsxが分かれているのかTypeScriptのファイルには、大きく分...

よくあるエラー

const value = "kino" as number;
// Conversion of type 'string' to type 'number' may be a mistake...

これは、まったく関係のない型（stringからnumber）へ直接asで変換しようとしたときに出る警告です。TypeScriptが「それ、間違いじゃない？」と教えてくれています。そもそも別の型に変換したい場合は、asではなくNumber()などの変換関数を使うのが正しい対処です。

よくある質問

Q. 型アサーション（as）と型注釈（: 型名）はどう違いますか？
A. 型注釈は「この型でチェックして」という指示、型アサーションは「この型として扱って」とチェックを上書きする指示です。役割が逆です。

Q. asはいつ使えばいいですか？
A. DOM要素の取得など、TypeScriptより開発者の方が型を確実に分かっている場面に限定して使うのがおすすめです。

Q. エラーを消すためにasを使ってもいいですか？
A. おすすめしません。asはチェックを無効化するだけで、実行時のエラーは防げません。まずは型ガードなど、安全な方法を検討してください。

まとめ

• 型アサーション（as）は、値の型を開発者側から指定する書き方
• DOM要素の取得など、TypeScriptより開発者が型を分かっている場面で使う
• 実際の値はチェックされないため、多用すると型の安全性を失う
• 型が不確かなときは、asではなく型ガードで確認してから使うのが安全

公式ドキュメントにも、型アサーションについての解説があります。

▶ TypeScript公式ドキュメント：Type Assertions

便利だけど、エラー消しに使っちゃダメってことね

そう。asは「最後の手段」くらいの気持ちで使うのがちょうどいいよ

TypeScriptのtsxファイルとは

TypeScriptのtsxファイルとは、TypeScriptの中でReactのJSX構文（HTMLのようなタグを含む書き方）を使うための拡張子です。「TypeScript tsx とは何か」を一言で言えば、「TypeScript × JSX」を組み合わせたファイルという意味で、Reactの開発では欠かせない存在です。

Reactのファイルって.tsのものと.tsxのものがあるけど、何が違うの？

実はそこ、ルールを知らないと地味に詰まりやすいところだから、今日ははっきりさせておこう

なぜ.tsと.tsxが分かれているのか

TypeScriptのファイルには、大きく分けて.tsと.tsxの2種類があります。この2つが分かれている理由は、JSXを書けるかどうかです。

• .ts：純粋なTypeScriptのコード（ロジック、関数、型定義など）を書くファイル
• .tsx：TypeScriptのコードに加えて、JSX（Reactコンポーネントの見た目部分）も書けるファイル

「.tsxのxはXML（JSXのX）を表す」と覚えておくと、役割がイメージしやすくなります。

.tsxを使う場面：JSXを書くとき

Reactのコンポーネントを作るとき、関数の中に見た目（HTMLのようなタグ）を書きます。この部分がJSXです。

// Greeting.tsx
type Props = {
  name: string;
};

function Greeting({ name }: Props) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

このように、関数の中に<h1>のようなタグを直接書くファイルは、拡張子を.tsxにする必要があります。propsの型定義については、こちらの記事も参考にしてください。

kinoblog

TypeScriptの配列・オブジェクトの型定義とは？書き方を初心者向けに解説

🕒️2026年8月2日

 配列・オブジェクトの型定義とはTypeScriptの配列・オブジェクトの型定義とは、変数の中身がどんなデータ構造になっているかをあらかじめ決めておく書き方です。実務でもっとも書く機会が多い型の一つなので、基本を押さえておくと学習効率が上がります。文字列とか数値の型は分かったけど、配列とかオブジェクトはどう書けばいいの？実はここが一番実務で使う頻度が高いところだから、今日はここだけに絞って整理してみようなぜ配列・オブジェクトにも型定義が必要なのかJavaScriptでは、配列やオブジェクトに何を入れても自由...

.tsファイルでJSXを書くとどうなるか

試しに、拡張子が.tsのファイルにJSXを書いてみるとどうなるか見てみます。

// Greeting.ts
function Greeting() {
  return <h1>Hello!</h1>;
  // Error: This expression is not callable.
  // 'JSX' refers to a UMD global, but the current file is a module.
}

.tsファイルの中ではJSXが正しく解釈されず、コンパイルエラーになります。「JSXを含むファイルかどうか」で拡張子を分ける、というルールがここで効いてきます。

拡張子の使い分けルール

実務では、次のようなシンプルな基準で使い分けるのが一般的です。

「見た目（JSX）を含むかどうか」で判断すると迷いません。API通信の関数については、こちらの記事も参考になります。

kinoblog

TypeScriptのPromiseとは？API通信の型定義を初心者向けに解説

🕒️2026年8月1日

 TypeScriptのPromise<T>とはTypeScriptのPromise<T>とは、非同期処理が最終的に返す値の型を指定する書き方です。API通信の結果に型を付けることで、レスポンスの中身をエディタの補完付きで安全に扱えるようになります。fetchでAPI叩くとき、TypeScriptだと何が変わるの？一番変わるのは「返ってきたデータの中身をちゃんと型で管理できる」ところだよこの記事では、TypeScriptでAPI通信を扱うときに必ず出てくるPromise<T>について、fetchを使った実例をもとに解説します。ジェネリクスの基本がまだ不安な場...

よくある勘違い：全部.tsxにすればいいわけではない

「迷ったら.tsxにしておけば安全」と考えてしまいがちですが、これはあまり良い習慣ではありません。実は、.tsxファイルの中では、型アサーション（値の型を強制的に指定する書き方）の一部の書き方が使えなくなるという制約があります。JSXのタグと記法が衝突してしまうためです。

ロジックだけのファイルまで.tsxにしてしまうと、こうした制約を無駄に受けてしまいます。JSXを書かないファイルは、素直に.tsのままにしておくのが安全です。

よくあるエラー

// utils.ts の中で
export const Loading = () => <p>Loading...</p>;
// Error: This expression is not callable.

これは、.tsファイルの中でJSXを返す関数を書いてしまったために起きるエラーです。ファイル名の拡張子を.tsxに変更すれば解決します。逆に、JSXを含まないのにエラーが出る場合は、tsconfig.jsonのjsxオプションが正しく設定されているかを確認してみてください。

よくある質問

Q. .tsxと.jsxの違いは何ですか？
A. どちらもJSXを書けるファイルですが、.tsxはTypeScriptの型チェックが効き、.jsxは通常のJavaScriptとして扱われます。

Q. すべてのファイルを.tsxにしても問題ないですか？
A. 動作はしますが、JSXを含まないファイルを.tsxにすると、型アサーションの一部の書き方が使えなくなるなどの制約を受けます。JSXを書かないファイルは.tsのままにしておくのがおすすめです。

Q. .ts→.tsxへの変更で他に注意点はありますか？
A. 拡張子を変更するだけで基本的には動作します。import文でファイルを参照している箇所も、拡張子を省略していれば通常は修正不要です。

まとめ：TypeScript tsx とは何かのおさらい

• .tsxはTypeScriptの中でJSXを書くための拡張子
• Reactコンポーネント（見た目を含む部分）は.tsx、ロジックだけのファイルは.tsに分ける
• JSXを含まないファイルまで.tsxにすると、型アサーションなどで余計な制約を受けることがある

公式ドキュメントにも、JSXの扱いについての詳しい解説があります。

▶ TypeScript公式ドキュメント：JSX
▶ React公式ドキュメント：Writing Markup with JSX

JSXがあるかないかで決めればいいだけなんだね、意外とシンプル

うん。ちなみに.tsxファイルだと使えない型アサーションの書き方もあって、それはまた次回にまとめるね

tsconfig.jsonとは

tsconfig.jsonとは、TypeScriptのコンパイル方法をプロジェクト単位でまとめて設定するファイルです。このファイルを用意しておくことで、ファイルごとにコマンドのオプションを指定する手間がなくなります。

前回tscコマンドでコンパイルできたけど、tsconfig.jsonってファイルもよく見かけるんだけど何なの？

それ、プロジェクトの設定をまとめておくファイルなんだ。前回の続きとして、今日はこれを整理してみよう

まだTypeScriptの環境構築が済んでいない場合は、先にこちらの記事を読んでおくとスムーズです。

kinoblog

TypeScriptの始め方とは？インストールからコンパイルまで初心者向けに解説

🕒️2026年8月4日

 TypeScriptの始め方とはTypeScriptの始め方とは、Node.jsを準備し、TypeScript本体をインストールして、書いたコード（.tsファイル）をブラウザやNode.jsで動かせる形（.jsファイル）に変換する一連の流れです。この記事では、その手順を一つずつ確認していきます。型の書き方は分かってきたけど、そもそもTypeScriptってどうやって動かすの？たしかに、そこ意外と説明されないよね。今日は環境構築から一緒に見ていこうTypeScriptを使うために必要なものTypeScriptを使うには、まず「Node.js」というソフトが必要です。TypeScri...

なぜtsconfig.jsonが必要なのか

前回、1つのファイルをコンパイルする方法を紹介しました。

tsc index.ts

しかし実際の開発では、ファイルが1つだけということはほとんどありません。複数のファイルをまとめてコンパイルしたい場合や、細かい設定（型チェックの厳しさ、出力先フォルダなど）を毎回コマンドに書くのは現実的ではありません。tsconfig.jsonに設定をまとめておけば、tscとだけ打つだけで、その設定に沿ってコンパイルしてくれるようになります。

tsc –initで作成する方法

tsconfig.jsonは手書きで作ることもできますが、コマンドで自動生成するのが簡単です。プロジェクトのフォルダで以下を実行します。

tsc --init

実行すると、コメント付きのtsconfig.jsonが生成されます。設定項目が大量に並んでいて最初は圧倒されますが、初心者のうちに触る項目はごく一部です。

最低限おさえておきたい設定項目

数ある設定の中でも、まずは次の4つを押さえておけば十分です。

{
  "compilerOptions": {
    "target": "ES2020",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  }
}

targetとは：変換後のJavaScriptのバージョン

targetは、コンパイル後にどのバージョンのJavaScriptとして出力するかを指定します。古いブラウザにも対応させたい場合は古めのバージョンを、モダンな環境だけを想定するなら新しめのバージョンを指定します。迷ったら、まずはある程度新しいバージョン（ES2020前後）を指定しておけば問題ありません。

outDir・rootDirでファイルを整理する

この2つは、ファイルの置き場所を整理するための設定です。

• rootDir：自分が書く.tsファイルを置くフォルダ（例：src）
• outDir：コンパイル後の.jsファイルが出力されるフォルダ（例：dist）

これを設定しておくと、書いたコードと変換後のコードが別フォルダに分かれるため、プロジェクトの中身が整理しやすくなります。設定後は、tscとだけ打てば、srcフォルダの中身がまとめてコンパイルされ、distフォルダに出力されます。

tsc

strictとは：型チェックの厳しさ

strictは、型チェックをどれだけ厳しくするかを一括で決める設定です。詳しくはこちらの記事でも紹介していますが、実務のプロジェクトはオンが前提になっていることが多いため、学習中からオンにしておくのがおすすめです。

kinoblog

TypeScript初心者がここだけ押さえておけばいい6つのポイント【公式ドキュメント付...

🕒️2026年7月30日

 TypeScriptって覚えること多すぎない？結局何が分かってればいいの？正直、最初は全部理解しなくていいと思う。ここ数回で自分がつまずいたポイントを整理してみた全部を完璧に理解しようとしなくていいこれまで何回かに分けて、TypeScriptを学び始めて実際につまずいたポイントを書いてきました。振り返ってみると、公式ドキュメントを最初から全部読もうとして挫折しかけたのですが、実務で最低限困らないレベルまでは、意外と少ない知識でたどり着けると感じています。まずは前提として、JavaScriptとの違いをまだ整理できて...

tsconfig.jsonがあると何が変わるか

tsconfig.jsonを作る前と後で、コンパイルの手間が大きく変わります。

よくあるエラー

tsc --init
// error TS5055: Cannot write file '...' because it would overwrite input file.

これは、outDirとrootDirの設定が正しくなく、出力先と入力元が重なってしまっているときに起きるエラーです。rootDirとoutDirに、それぞれ別のフォルダ名を指定できているか確認してみてください。

よくある質問

Q. tsconfig.jsonは必ず作らないといけませんか？
A. 1ファイルだけの学習用コードなら無くても動きますが、複数ファイルを扱うプロジェクトでは基本的に作成します。

Q. tsc –initで生成された設定は、そのまま使ってもいいですか？
A. 動作はしますが、outDir・rootDir・strictあたりは、プロジェクトに合わせて自分で見直すのがおすすめです。

Q. targetは何を選べばいいですか？
A. 特別な事情がなければ、比較的新しいバージョン（ES2020前後）を選んでおけば、学習段階では困りません。

まとめ

• tsconfig.jsonは、コンパイルの設定をプロジェクト単位でまとめるファイル
• tsc --initで自動生成できる
• 最初はtarget・outDir・rootDir・strictの4つを押さえれば十分
• 設定しておけば、tscと打つだけでプロジェクト全体をコンパイルできる

公式ドキュメントにも、設定項目の一覧がまとまっています。

▶ TypeScript公式ドキュメント：tsconfig Reference

毎回tsc index.tsって打たなくてよくなるの、地味に嬉しい

うん。最初に整えておくと、後がずっと楽になるところだから、早めに慣れておいて損はないよ

TypeScriptの始め方とは

TypeScriptの始め方とは、Node.jsを準備し、TypeScript本体をインストールして、書いたコード（.tsファイル）をブラウザやNode.jsで動かせる形（.jsファイル）に変換する一連の流れです。この記事では、その手順を一つずつ確認していきます。

型の書き方は分かってきたけど、そもそもTypeScriptってどうやって動かすの？

たしかに、そこ意外と説明されないよね。今日は環境構築から一緒に見ていこう

TypeScriptを使うために必要なもの

TypeScriptを使うには、まず「Node.js」というソフトが必要です。TypeScriptのインストールや実行に使う「npm」というツールが、Node.jsに含まれているためです。

▶ Node.js公式サイト

公式サイトからインストーラーをダウンロードし、案内に沿って進めればインストールできます。ターミナル（Macはターミナル、Windowsはコマンドプロンプトなど）で以下のコマンドを打ち、バージョンが表示されればインストール完了です。

node -v
npm -v

TypeScriptのインストール方法

Node.jsの準備ができたら、npmを使ってTypeScript本体をインストールします。

npm install -g typescript

-gは「グローバルにインストールする」という意味で、パソコン上のどのフォルダからでもTypeScriptのコマンドを使えるようにする設定です。インストールできたか確認するには、以下を実行します。

tsc -v

バージョンが表示されれば成功です。tscは「TypeScript Compiler」の略で、これから何度も使うコマンドになります。

.tsファイルの作り方

適当な作業用フォルダを作り、その中に拡張子が.tsのファイルを作成します。試しに、以下の内容でindex.tsというファイルを作ってみましょう。

const message: string = "Hello, TypeScript!";
console.log(message);

これまで紹介してきた型注釈の書き方は、こちらの記事も参考にしてください。

kinoblog

TypeScriptの変数・関数の型注釈とは？書き方を初心者向けに解説

🕒️2026年8月3日

 TypeScriptの型注釈とはTypeScriptの型注釈とは、変数や関数に対して「どんな型の値を扱うか」を明示する書き方です。変数の後ろや関数の引数・戻り値に: 型名という形で記述します。コロンの後ろに型を書くってやつ、なんとなく真似して書いてるけど、ちゃんと理解できてないかも実はここ、応用が少なくて一番「型に慣れる」のに向いてる場所だから、今日はここだけ丁寧にやろうなぜ型注釈が必要なのかJavaScriptでは、変数にどんな値でも自由に代入できます。// JavaScriptlet price = 1000;price = "1000円"; // 数...

コンパイルとは何か

ブラウザやNode.jsは、実は.tsファイルをそのまま実行できません。.tsファイルを、実行可能な.jsファイルに変換する作業を「コンパイル」と呼びます。ターミナルで、先ほど作ったファイルに対して次のコマンドを実行します。

tsc index.ts

同じフォルダの中にindex.jsという新しいファイルが生成されていれば成功です。中身を開いてみると、型注釈が取り除かれた、普通のJavaScriptのコードになっているのが分かります。

コンパイルした.jsファイルを実行する

生成された.jsファイルは、Node.jsで実行できます。

node index.js
// Hello, TypeScript!

「.tsファイルを書く → コンパイルする → .jsファイルを実行する」という3ステップが、TypeScriptを動かす基本の流れです。

毎回コンパイルするのが面倒なときの対処法

コードを直すたびに手動でtscコマンドを打つのは手間です。--watchオプションを付けると、ファイルを保存するたびに自動でコンパイルしてくれます。

tsc index.ts --watch

実務ではさらに、コンパイルと実行を1コマンドでまとめて行うts-nodeというツールもよく使われます。学習初期は、まずtscコマンドの流れを理解しておくのが優先です。

よくあるエラー

tsc index.ts
// 'tsc' is not recognized as an internal or external command
// または
// command not found: tsc

これは、TypeScriptがインストールされていない、もしくは正しくインストールされていないときに出るエラーです。npm install -g typescriptを再度実行し、インストールされているか確認してみてください。

よくある質問

Q. TypeScriptを使うのにNode.jsは必須ですか？
A. TypeScript本体のインストールや、tscコマンドの実行にnpm（Node.jsに含まれるツール）が必要なため、事実上必須です。

Q. .tsファイルはブラウザでそのまま動きますか？
A. 動きません。コンパイルして.jsファイルに変換してから、ブラウザやNode.jsで実行します。

Q. tscコマンドを毎回打つのは面倒です。何か方法はありますか？
A. --watchオプションを使うと、保存するたびに自動でコンパイルされます。

まとめ

• TypeScriptを使うには、まずNode.jsが必要
• npm install -g typescriptでTypeScript本体をインストールする
• .tsファイルは、tscコマンドでコンパイルしてから実行する
• --watchオプションを使うと、保存のたびに自動でコンパイルできる

公式ドキュメントにも、環境構築の手順がまとまっています。

▶ TypeScript公式ドキュメント：Download / Installation

書く・変換する・実行する、この3つの流れがやっと繋がった気がする

うん。ここが分かると、これまで書いてきた型注釈の意味もイメージしやすくなるはずだよ

TypeScriptの型注釈とは

TypeScriptの型注釈とは、変数や関数に対して「どんな型の値を扱うか」を明示する書き方です。変数の後ろや関数の引数・戻り値に: 型名という形で記述します。

コロンの後ろに型を書くってやつ、なんとなく真似して書いてるけど、ちゃんと理解できてないかも

実はここ、応用が少なくて一番「型に慣れる」のに向いてる場所だから、今日はここだけ丁寧にやろう

なぜ型注釈が必要なのか

JavaScriptでは、変数にどんな値でも自由に代入できます。

// JavaScript
let price = 1000;
price = "1000円"; // 数値のつもりが文字列に変わっても、実行するまで気づけない

型注釈を付けておけば、こうした意図しない変化をコードを書いている段階で検知できます。特に関数は複数の場所から呼び出されることが多いため、引数や戻り値の型を明示しておくメリットが大きくなります。

変数の型注釈の書き方

変数名の後ろに: 型名を書きます。

let name: string = "kino";
let age: number = 30;
let isStudent: boolean = false;

基本の型はstring（文字列）、number（数値）、boolean（真偽値）の3つを押さえておけば、日常的なコードの大半はカバーできます。

関数の引数の型注釈

関数の引数にも、変数と同じ書き方で型を指定します。

function greet(name: string) {
  console.log(`こんにちは、${name}さん`);
}

greet("kino");   // OK
greet(123);      // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

引数の型注釈は省略できないルールになっています。TypeScriptが引数の型まで推論してくれることはないため、関数を書くときは必ず引数に型を書く癖をつけておくと安全です。

関数の戻り値の型注釈

戻り値の型は、引数リストの後ろに書きます。

function add(a: number, b: number): number {
  return a + b;
}

戻り値の型は、実は多くの場合で省略可能です（TypeScriptがreturnの中身から自動で推論してくれます）。ただし、意図しない型が返ってしまうミスに気づきやすくするため、あえて明示しておくのがおすすめです。何も値を返さない関数には、voidという型を使います。

function logMessage(message: string): void {
  console.log(message);
  // 何も return しない
}

デフォルト引数・オプション引数の書き方

「値を渡さなかったときの初期値」を決めておきたい場合は、デフォルト引数を使います。

function greet(name: string, honorific: string = "さん") {
  console.log(`${name}${honorific}、こんにちは`);
}

greet("kino");         // "kinoさん、こんにちは"
greet("kino", "先生"); // "kino先生、こんにちは"

「渡しても渡さなくてもいい引数」にしたいだけであれば、オブジェクトの型定義でも紹介した?を引数にも使えます。

function greet(name: string, honorific?: string) {
  console.log(`${name}${honorific ?? ""}、こんにちは`);
}

配列やオブジェクトの型定義における?の使い方は、こちらの記事でも紹介しています。

kinoblog

TypeScriptの配列・オブジェクトの型定義とは？書き方を初心者向けに解説

🕒️2026年8月2日

 配列・オブジェクトの型定義とはTypeScriptの配列・オブジェクトの型定義とは、変数の中身がどんなデータ構造になっているかをあらかじめ決めておく書き方です。実務でもっとも書く機会が多い型の一つなので、基本を押さえておくと学習効率が上がります。文字列とか数値の型は分かったけど、配列とかオブジェクトはどう書けばいいの？実はここが一番実務で使う頻度が高いところだから、今日はここだけに絞って整理してみようなぜ配列・オブジェクトにも型定義が必要なのかJavaScriptでは、配列やオブジェクトに何を入れても自由...

アロー関数の型注釈

Reactのコードなどでよく使うアロー関数も、書き方はほぼ同じです。

const add = (a: number, b: number): number => {
  return a + b;
};

const multiply = (a: number, b: number): number => a * b;

通常の関数と違い、アロー関数は変数に代入する形になるため、変数側に型注釈を付けたくなるかもしれませんが、上記のように引数・戻り値それぞれに書くのが基本の形です。

型注釈を省略していい場面

ここまで「型注釈を書く」ことを中心に説明してきましたが、実はすべての場所に書く必要はありません。

let count = 0; // number型として自動推論されるので、型注釈は省略してOK

初期値から型が明らかな変数や、多くの関数の戻り値は、TypeScriptの型推論に任せて省略しても問題ありません。逆に、関数の引数のように推論できない場所には必ず書く、というメリハリを意識すると、コードもすっきりします。型推論の詳しい仕組みはこちらの記事で解説しています。

kinoblog

PHP脳のままTypeScriptを書いたら怒られた話｜初心者がつまずいた型の壁

🕒️2026年7月5日

こんにちは、キノです。今の会社ではJavaScriptとPHP・WordPress中心の運用寄りの仕事をしていますが、React系のフロントエンドエンジニアを目指しています。その一環で避けて通れなかったのがTypeScriptです。正直なところ、最初の数週間はかなり苦戦しました。この記事では、実務ではJavaScriptとPHPしか書いてこなかった人がTypeScriptで最初にぶつかる壁を、実際につまずいたポイントごとに振り返ります。同じ立場でTypeScriptを勉強し始めた人の参考になればと思います。そもそもJavaScriptとTypeScriptは何が違うのかTypeScript...

よくあるエラー

function add(a: number, b: number): number {
  return a + b;
}

add(1); // Error: Expected 2 arguments, but got 1.

これは、関数が必要としている引数の数と、実際に渡した数が合っていないために起きるエラーです。デフォルト引数やオプション引数（?）を使っていない引数は、必ず渡す必要があります。

よくある質問

Q. 型注釈は必ず書かないといけませんか？
A. いいえ。関数の引数以外は、型推論に任せて省略できる場面が多いです。ただし、意図を明確にするためにあえて書くこともよくあります。

Q. voidとは何ですか？
A. 何も値を返さない関数の戻り値に使う型です。returnを書かない関数によく使われます。

Q. デフォルト引数とオプション引数はどう使い分けますか？
A. 「値を渡さなかったときの初期値」を決めたいならデフォルト引数、「渡さなくてもエラーにしたくない」だけならオプション引数（?）を使います。

まとめ

• 型注釈は変数・関数の後ろに: 型名という形で書く
• 関数の引数の型注釈は省略できないが、戻り値や初期値のある変数は省略できることが多い
• デフォルト引数・オプション引数を使い分けると、柔軟な関数が書ける
• アロー関数も、通常の関数と同じ考え方で型注釈を付けられる

公式ドキュメントにも、関数の型についてのより詳しい解説があります。

▶ TypeScript公式ドキュメント：More on Functions

引数は必ず書く、戻り値は省略していい場合もある、って考えるとシンプルだね

うん。ここが体に馴染むと、他の記事で書いたinterfaceやジェネリクスもぐっと読みやすくなるよ

配列・オブジェクトの型定義とは

TypeScriptの配列・オブジェクトの型定義とは、変数の中身がどんなデータ構造になっているかをあらかじめ決めておく書き方です。実務でもっとも書く機会が多い型の一つなので、基本を押さえておくと学習効率が上がります。

文字列とか数値の型は分かったけど、配列とかオブジェクトはどう書けばいいの？

実はここが一番実務で使う頻度が高いところだから、今日はここだけに絞って整理してみよう

なぜ配列・オブジェクトにも型定義が必要なのか

JavaScriptでは、配列やオブジェクトに何を入れても自由でした。

// JavaScript
const numbers = [1, 2, 3];
numbers.push("kino"); // 数値の配列のはずが、文字列も入ってしまう

この自由さは便利な反面、意図しないデータが紛れ込んでもエラーにならないという弱点があります。TypeScriptで型を決めておけば、こうした混入をコードを書いている段階で防げます。

配列の型定義の書き方

配列の型は、主に2通りの書き方があります。

let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["kino", "syounen"];

number[]とArray<number>は、どちらも「number型の値だけが入る配列」という同じ意味です。どちらを使っても動作は変わらないので、社内やチームで書き方を統一しておくと読みやすくなります。個人的には、シンプルな型[]の方をよく使っています。

オブジェクトの型定義の書き方

オブジェクトの型は、プロパティ名とその型を1つずつ列挙する形で定義します。

type User = {
  name: string;
  age: number;
};

const user: User = {
  name: "kino",
  age: 30,
};

この書き方については、interfaceとの使い分けも含めて別記事で詳しく解説しています。

kinoblog

TypeScriptのinterfaceとtypeの違いを、JavaScript経験者が理解するまで

🕒️2026年7月18日

 前回、TypeScriptを学び始めて最初につまずいたポイントをいくつか紹介しました。その中でも特に地味に時間を取られたのが、interfaceとtypeの使い分けです。JavaScriptは元々そこそこ書けていたので、「型を書く」という発想自体には早く慣れました。ただ、その分「なぜ同じようなことができる書き方が2種類あるのか」がかえって気になり、調べるのに時間がかかりました。この記事では、実際のコード例をもとに違いを整理します。JavaScript経験者ほど「どっちでもよくない？」と感じる理由JavaScriptにはそもそも型という概念...

オプショナルプロパティ（?）の使い方

プロパティによっては、「あってもなくてもいい」という場合があります。そのときは、プロパティ名の後ろに?を付けます。

type User = {
  name: string;
  age: number;
  nickname?: string; // なくてもOK
};

const user1: User = { name: "kino", age: 30 }; // nicknameを省略してもエラーにならない
const user2: User = { name: "kino", age: 30, nickname: "きの" }; // これもOK

プロフィール情報のように「必須ではない項目」を扱う場面でよく使う書き方です。

readonlyで書き換えを防ぐ

「一度セットしたら変更されたくない」というプロパティには、readonlyを付けられます。

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

const user: User = { id: 1, name: "kino" };
user.id = 2; // Error: Cannot assign to 'id' because it is a read-only property.

データベースのIDのように、後から書き換わってほしくない値に付けておくと、意図しない上書きをコードの段階で防げます。

配列とオブジェクトを組み合わせた型

実務では、配列とオブジェクトを組み合わせた「オブジェクトの配列」を扱う場面が非常に多いです。

type User = {
  name: string;
  age: number;
};

const users: User[] = [
  { name: "kino", age: 30 },
  { name: "syounen", age: 20 },
];

User[]は「User型のオブジェクトが並んだ配列」という意味です。APIから複数件のデータを受け取るときなど、非常によく登場する形です。API通信で受け取ったデータに型を付ける方法は、こちらの記事も参考にしてください。

kinoblog

TypeScriptのPromiseとは？API通信の型定義を初心者向けに解説

🕒️2026年8月1日

 TypeScriptのPromise<T>とはTypeScriptのPromise<T>とは、非同期処理が最終的に返す値の型を指定する書き方です。API通信の結果に型を付けることで、レスポンスの中身をエディタの補完付きで安全に扱えるようになります。fetchでAPI叩くとき、TypeScriptだと何が変わるの？一番変わるのは「返ってきたデータの中身をちゃんと型で管理できる」ところだよこの記事では、TypeScriptでAPI通信を扱うときに必ず出てくるPromise<T>について、fetchを使った実例をもとに解説します。ジェネリクスの基本がまだ不安な場...

実務での使用例：Reactでの一覧表示

Reactで一覧を表示する場合、User[]のようなオブジェクトの配列をmapで展開するのが定番の書き方です。

function UserList({ users }: { users: User[] }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.name}>{user.name}（{user.age}歳）</li>
      ))}
    </ul>
  );
}

usersの型が決まっているおかげで、user.nameやuser.ageを書くときにエディタの入力補完が効き、タイプミスにもすぐ気づけます。

よくあるエラー

const user: User = { name: "kino" };
// Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

これは、必須のはずのageプロパティが渡されていないために起きるエラーです。もし本当に省略可能なプロパティなら、先ほど紹介した?を付けて解決します。省略できないなら、値を渡し忘れているだけなので、そのまま追加すればOKです。

よくある質問

Q. number[]とArray<number>はどちらを使えばいいですか？
A. 意味は同じなので、どちらでも構いません。チームやプロジェクトで書き方を統一するのがおすすめです。

Q. オプショナルプロパティとreadonlyは併用できますか？
A. できます。readonly nickname?: string;のように組み合わせて書けます。

Q. オブジェクトの配列はどんな場面でよく使いますか？
A. APIから複数件のデータを取得したときや、Reactで一覧表示を行うときに頻繁に登場します。

まとめ

• 配列は型[]、オブジェクトはプロパティを列挙する形で型定義する
• あってもなくてもいいプロパティには?を付ける
• 書き換えを防ぎたいプロパティにはreadonlyを付ける
• オブジェクトの配列（User[]など）は実務で非常によく使う形

公式ドキュメントにも、配列やオブジェクトの型についての解説があります。

▶ TypeScript公式ドキュメント：Everyday Types

配列とオブジェクト、思ったよりシンプルだったかも

うん。ここが分かると、実務のコードの大半は読めるようになるよ

TypeScriptのPromise<T>とは

TypeScriptのPromise<T>とは、非同期処理が最終的に返す値の型を指定する書き方です。API通信の結果に型を付けることで、レスポンスの中身をエディタの補完付きで安全に扱えるようになります。

fetchでAPI叩くとき、TypeScriptだと何が変わるの？

一番変わるのは「返ってきたデータの中身をちゃんと型で管理できる」ところだよ

この記事では、TypeScriptでAPI通信を扱うときに必ず出てくるPromise<T>について、fetchを使った実例をもとに解説します。ジェネリクスの基本がまだ不安な場合は、先にこちらの記事を読んでおくと理解しやすいです。

kinoblog

TypeScriptのジェネリクスとは？初心者向けに<T>の意味や使い方を分かりやす...

🕒️2026年8月1日

 TypeScriptのジェネリクスとはTypeScriptのジェネリクスとは、型を後から指定できる仕組みです。同じ処理を複数の型で使い回せるため、コードの重複を減らしながら型安全性を保てます。前回言ってたジェネリクスってやつ、結局なんなの？最初はピンとこなかったけど、「型の引数」だと思うとしっくりきたよこの記事では、TypeScript(Generics)のジェネリクスについて、基本の書き方からany型との違い、実務での使用例、よくあるエラーまで、JavaScript経験者向けに整理します。まずは基本をまとめた記事も参考にしてください。ジ...

なぜAPI通信で型定義が必要なのか

JavaScriptでfetchを使う場合、レスポンスの中身は基本的に何が返ってくるか分かりません。

// JavaScript
fetch("/api/users/1")
  .then(res => res.json())
  .then(data => {
    console.log(data.nmae); // typoしてもエラーにならず、実行するまで気づけない
  });

プロパティ名を打ち間違えても、実行してブラウザのコンソールを見るまで気づけません。TypeScriptでレスポンスに型を付けておけば、こうしたミスをコードを書いている段階で発見できます。

Promise<T>の基本の書き方

非同期関数の戻り値には、Promise<型>という形で型を指定します。

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

async function fetchUser(id: number): Promise {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

これは「この関数は、最終的にUser型の値を返すPromiseを返す」という意味です。Promise<T>のTの部分に、ジェネリクスと同じ考え方で好きな型を指定できます。interfaceとtypeの使い分けに迷う場合は、こちらの記事も参考にしてください。

kinoblog

TypeScriptのinterfaceとtypeの違いを、JavaScript経験者が理解するまで

🕒️2026年7月18日

 前回、TypeScriptを学び始めて最初につまずいたポイントをいくつか紹介しました。その中でも特に地味に時間を取られたのが、interfaceとtypeの使い分けです。JavaScriptは元々そこそこ書けていたので、「型を書く」という発想自体には早く慣れました。ただ、その分「なぜ同じようなことができる書き方が2種類あるのか」がかえって気になり、調べるのに時間がかかりました。この記事では、実際のコード例をもとに違いを整理します。JavaScript経験者ほど「どっちでもよくない？」と感じる理由JavaScriptにはそもそも型という概念...

async/awaitと型推論

関数にasyncを付けると、戻り値は自動的にPromiseで包まれます。

async function getUser(id: number) {
  const res = await fetch(`/api/users/${id}`);
  return res.json(); // 戻り値の型注釈を省略しても、Promiseとして推論される
}

ただし、この書き方だと戻り値がPromise<any>になってしまい、結局anyのデメリット（型チェックが効かない）を引きずってしまいます。API通信では戻り値の型を省略せず、明示的に書くのが安全です。

Promise<any>とPromise<T>の違い

any全般との違いについては、こちらの記事でさらに詳しく解説しています。

kinoblog

TypeScriptのanyとunknownの違い｜どっちも避けるべき？初心者向け整理

🕒️2026年7月19日

 「anyは使うな」って言われたから、じゃあ型がわからない時どうすんの？それ、まさに自分がハマった疑問。答えは「unknown」って型だったんだ「anyは使うな」で終わっていた理解前々回、TypeScriptでanyを使うと型チェックが効かなくなる、という話をしました。ただ、そのときの自分は「anyを使わなければとりあえず安全」くらいの理解で止まっていました。実際にコードを書き進めていくと、「型が何になるか分からないけど、anyは使いたくない」という場面に何度も遭遇しました。そこで出てくるのがunknownという型です。anyとu...

実務でよくあるエラー

async function fetchUser(id: number): Promise {
  const res = await fetch(`/api/users/${id}`);
  const data = res.json();
  return data;
  // Type 'Promise' is not assignable to type 'User'.
}

これはres.json()の前にawaitを付け忘れているのが原因です。json()自体もPromiseを返すメソッドなので、awaitを忘れると「PromiseのままのPromise」を返そうとしてしまい、型が一致しなくなります。

Reactでの使用例

ReactでAPI通信を行う場合、useEffectの中で先ほどの関数を呼び出し、結果をstateに保存する形がよくあるパターンです。

const [user, setUser] = useState(null);

useEffect(() => {
  fetchUser(1).then(setUser);
}, []);

fetchUserの戻り値がPromise<User>と分かっているので、setUserに渡す値の型もエディタが自動でチェックしてくれます。実際にReactでAPI連携を実装する中で、この型のつながりのおかげでミスに何度も助けられました。

よくある質問

Q. Promise<T>とは何ですか？
A. 非同期処理が最終的に返す値の型を指定する書き方です。TはAPIレスポンスなど、実際に返ってくるデータの型に置き換えます。

Q. なぜasyncを付けるとPromise<any>になるのですか？
A. 戻り値の型注釈を省略した場合、TypeScriptが型を推論しきれず、anyとして扱われることがあるためです。明示的に型を書くことで防げます。

Q. fetchの型定義はどこに書けばいいですか？
A. fetchを呼び出す関数の戻り値にPromise<型>という形で書きます。レスポンスの形はtypeやinterfaceで別途定義しておくのが一般的です。

まとめ

• Promise<T>は、非同期処理の戻り値に型を付ける書き方
• 戻り値の型注釈を省略すると、Promise<any>になりやすいので注意
• API通信の型を明示しておくと、Reactのstateと連携する際もミスに気づきやすくなる

Promiseの基本的な仕組みそのものはJavaScriptの機能なので、公式ドキュメントも参考になります。

▶ MDN Web Docs：Using the Fetch API
▶ TypeScript公式ドキュメント：Generics

awaitの付け忘れ、自分もやりそう…

エラーメッセージに「Promise」って単語が出てきたら、まずawaitの付け忘れを疑うといいよ

TypeScriptのジェネリクスとは

TypeScriptのジェネリクスとは、型を後から指定できる仕組みです。同じ処理を複数の型で使い回せるため、コードの重複を減らしながら型安全性を保てます。

前回言ってたジェネリクスってやつ、結局なんなの？

最初はピンとこなかったけど、「型の引数」だと思うとしっくりきたよ

この記事では、TypeScript(Generics)のジェネリクスについて、基本の書き方からany型との違い、実務での使用例、よくあるエラーまで、JavaScript経験者向けに整理します。まずは基本をまとめた記事も参考にしてください。

kinoblog

TypeScript初心者がここだけ押さえておけばいい6つのポイント【公式ドキュメント付...

🕒️2026年7月30日

 TypeScriptって覚えること多すぎない？結局何が分かってればいいの？正直、最初は全部理解しなくていいと思う。ここ数回で自分がつまずいたポイントを整理してみた全部を完璧に理解しようとしなくていいこれまで何回かに分けて、TypeScriptを学び始めて実際につまずいたポイントを書いてきました。振り返ってみると、公式ドキュメントを最初から全部読もうとして挫折しかけたのですが、実務で最低限困らないレベルまでは、意外と少ない知識でたどり着けると感じています。まずは前提として、JavaScriptとの違いをまだ整理できて...

ジェネリクスが必要な理由

ジェネリクスの必要性を理解するために、あえてジェネリクスを使わない例から見てみます。

function identity(value: string): string {
  return value;
}

// number型を渡したい場合、同じような関数をもう一つ書く必要がある
function identityNumber(value: number): number {
  return value;
}

「値をそのまま返すだけ」の関数なのに、型ごとに同じ処理を何度も書くのは無駄です。JavaScriptなら型を気にせず1つの関数で済んでいたはずの処理が、TypeScriptだと型の数だけ関数が増えてしまう、というのが最初にジェネリクスの必要性を感じた瞬間でした。

<T>とは？基本の書き方

この問題を解決するのがジェネリクスです。関数名の後ろに<T>という型変数（型引数）を追加します。

function identity(value: T): T {
  return value;
}

const a = identity("kino");   // string型として扱われる
const b = identity(123);      // number型として扱われる

Tという文字は「型のための引数」だと考えると理解しやすいです。関数の引数に値を渡すのと同じように、<T>には「型」を渡している、というイメージです。慣習としてTが使われますが、複数の型変数がある場合はT、Uのようにアルファベット順で増やしていくのが一般的です。

型推論とは？<T>を省略できる場面

ジェネリクスは、呼び出す側で毎回型を指定しなくても、TypeScriptが自動で型を推論してくれる場合があります。

const c = identity("kino"); // を省略しても、渡した値からstring型と推論される

型推論についての詳しい仕組みは、別記事で解説しているのでこちらもあわせてどうぞ。

kinoblog

PHP脳のままTypeScriptを書いたら怒られた話｜初心者がつまずいた型の壁

🕒️2026年7月5日

こんにちは、キノです。今の会社ではJavaScriptとPHP・WordPress中心の運用寄りの仕事をしていますが、React系のフロントエンドエンジニアを目指しています。その一環で避けて通れなかったのがTypeScriptです。正直なところ、最初の数週間はかなり苦戦しました。この記事では、実務ではJavaScriptとPHPしか書いてこなかった人がTypeScriptで最初にぶつかる壁を、実際につまずいたポイントごとに振り返ります。同じ立場でTypeScriptを勉強し始めた人の参考になればと思います。そもそもJavaScriptとTypeScriptは何が違うのかTypeScript...

any型との違い

ジェネリクスを学び始めると、「any型を使えば同じことができるのでは？」という疑問が必ず出てきます。実際に比較してみると、違いがはっきりします。

function identityAny(value: any): any {
  return value;
}

const x = identityAny("kino");
x.toFixed(); // stringにtoFixedは無いのに、コンパイルエラーにならない

anyとunknownの違いについては、こちらの記事でさらに詳しく解説しています。

kinoblog

TypeScriptのanyとunknownの違い｜どっちも避けるべき？初心者向け整理

🕒️2026年7月19日

 「anyは使うな」って言われたから、じゃあ型がわからない時どうすんの？それ、まさに自分がハマった疑問。答えは「unknown」って型だったんだ「anyは使うな」で終わっていた理解前々回、TypeScriptでanyを使うと型チェックが効かなくなる、という話をしました。ただ、そのときの自分は「anyを使わなければとりあえず安全」くらいの理解で止まっていました。実際にコードを書き進めていくと、「型が何になるか分からないけど、anyは使いたくない」という場面に何度も遭遇しました。そこで出てくるのがunknownという型です。anyとu...

ジェネリクスのメリット

• 型ごとに同じ関数を何度も書かずに済む（コードの重複を減らせる）
• anyと違い、型情報を保ったまま処理できる
• 呼び出す型に応じてエディタの入力補完が効く

ジェネリクスのデメリット・注意点

便利な一方で、使いすぎには注意が必要だと感じています。

• 型変数が増えるとコードが読みにくくなりやすい
• 無条件にTを受け取ると、意図しない型まで通ってしまうことがある（extendsで制約を付けると防げます）
• 初心者のうちは「とりあえずジェネリクス」にせず、必要になった箇所から使う方が理解しやすい

実務で使う場面：React・Promiseでの例

ジェネリクスというと構えてしまいますが、実はTypeScriptを書いていると意識せずに使っていることが多いです。

// Promise<T>：API通信の戻り値の型を指定する
async function fetchUser(id: string): Promise<{ name: string; age: number }> {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

// React：useStateでも<T>がよく使われる
const [user, setUser] = useState<{ name: string; age: number } | null>(null);

Promise<T>やuseState<T>の<>の部分も、実はジェネリクスの仕組みです。「PromiseやuseStateという入れ物に、どの型を入れるか」を指定していると考えると、身近な存在に感じられました。実際にReactでAPI連携の実装をする中で、ジェネリクスの意味を意識する場面が何度もありました。

よくあるエラー

function getId(param: T): number {
  return param.id;
  // Property 'id' does not exist on type 'T'.
}

これは、Tが「どんな型か分からない」状態のまま.idを使おうとして起きるエラーです。extendsを使って、Tが持つべき形をあらかじめ制約しておくと解決します。

function getId(param: T): number {
  return param.id; // OK
}

よくある質問

Q. ジェネリクスとは何ですか？
A. 型を後から指定できる仕組みで、同じ処理を複数の型で使い回すために使います。

Q. <T>のTって何ですか？
A. 「型のための引数（型変数）」です。慣習的にTという名前が使われますが、自由に名付けられます。

Q. any型との違いは何ですか？
A. anyは型情報が消えてしまいますが、ジェネリクスは型情報を保ったまま処理できるため、入力補完や型チェックが効きます。

Q. ジェネリクスはいつ使えばいいですか？
A. 「同じ処理を複数の型に対して行いたいとき」が目安です。配列操作、API通信のレスポンス型、Reactのstateなどでよく使われます。

まとめ

• ジェネリクスは「型を後から指定できる仕組み」で、同じ処理を型ごとに書き直す無駄を防げる
• <T>は型のための引数、というイメージで理解すると腹落ちしやすい
• anyと違い型情報を保持できるため、実務ではAPI通信やReactのstateなどで頻繁に使われる

公式ドキュメントにも、今回紹介した内容を含むより詳しい解説があります。

▶ TypeScript公式ドキュメント：Generics

もう少し実践的な使い方まで知りたい場合は、こちらの解説記事や動画も参考になります。

▶ 【TypeScript】ジェネリクスも便利だよ #初心者向け（Qiita）
▶ Learn TypeScript With This Crash Course（freeCodeCamp）

思ったより特別なものじゃなかったんだね

うん。「型の使い回し」だと思うと、身構えなくてよくなった

TypeScriptって覚えること多すぎない？結局何が分かってればいいの？

正直、最初は全部理解しなくていいと思う。ここ数回で自分がつまずいたポイントを整理してみた

全部を完璧に理解しようとしなくていい

これまで何回かに分けて、TypeScriptを学び始めて実際につまずいたポイントを書いてきました。振り返ってみると、公式ドキュメントを最初から全部読もうとして挫折しかけたのですが、実務で最低限困らないレベルまでは、意外と少ない知識でたどり着けると感じています。

まずは前提として、JavaScriptとの違いをまだ整理できていない場合はこちらから読むのがおすすめです。

kinoblog

PHP脳のままTypeScriptを書いたら怒られた話｜初心者がつまずいた型の壁

🕒️2026年7月5日

こんにちは、キノです。今の会社ではJavaScriptとPHP・WordPress中心の運用寄りの仕事をしていますが、React系のフロントエンドエンジニアを目指しています。その一環で避けて通れなかったのがTypeScriptです。正直なところ、最初の数週間はかなり苦戦しました。この記事では、実務ではJavaScriptとPHPしか書いてこなかった人がTypeScriptで最初にぶつかる壁を、実際につまずいたポイントごとに振り返ります。同じ立場でTypeScriptを勉強し始めた人の参考になればと思います。そもそもJavaScriptとTypeScriptは何が違うのかTypeScript...

この記事では、JavaScript経験者がTypeScriptを学ぶときに、まず押さえておけば十分という6つのポイントを整理します。

1. 変数・関数の型注釈の書き方

let name: string = "kino";

function add(a: number, b: number): number {
  return a + b;
}

まずはこれだけです。変数の後ろに: 型名を書く、関数は引数と戻り値それぞれに書く、という基本ルールさえ身体に馴染めば、あとの応用はだいぶ楽になります。基本の型一覧は公式ドキュメントにまとまっています。

▶ TypeScript公式ドキュメント：Everyday Types

2. 型推論に頼っていい場面を知る

実はTypeScript、すべての変数に型注釈を書く必要はありません。

let count = 0; // 型注釈なしでもnumber型として推論される

最初は「型を書かないと不安」で全部に注釈を付けていましたが、初期値から型が明らかな場合はTypeScriptが自動で推論してくれます。関数の引数など、型が推論できない場所にだけ書けば十分です。仕組みの詳細は公式ドキュメントの「Type Inference」で解説されています。

▶ TypeScript公式ドキュメント：Type Inference

3. anyを避けてunknownを使う判断基準

外部から来る値（APIレスポンスなど）で型が確定しないときは、anyではなくunknownを使い、使う前に型を確認する、というルールだけ覚えておけば実務でも困りません。実際のコード例を交えた詳しい違いは、こちらの記事で整理しています。

kinoblog

TypeScriptのanyとunknownの違い｜どっちも避けるべき？初心者向け整理

🕒️2026年7月19日

 「anyは使うな」って言われたから、じゃあ型がわからない時どうすんの？それ、まさに自分がハマった疑問。答えは「unknown」って型だったんだ「anyは使うな」で終わっていた理解前々回、TypeScriptでanyを使うと型チェックが効かなくなる、という話をしました。ただ、そのときの自分は「anyを使わなければとりあえず安全」くらいの理解で止まっていました。実際にコードを書き進めていくと、「型が何になるか分からないけど、anyは使いたくない」という場面に何度も遭遇しました。そこで出てくるのがunknownという型です。anyとu...

4. interfaceとtypeは「とりあえずinterface」でいい

両者の違いを理解するのは大事ですが、初心者のうちは「オブジェクトの形を決めるならinterface、それ以外（ユニオン型など）が必要になったらtype」くらいの判断で十分です。細かい違いはこちらの記事にまとめています。

kinoblog

TypeScriptのinterfaceとtypeの違いを、JavaScript経験者が理解するまで

🕒️2026年7月18日

 前回、TypeScriptを学び始めて最初につまずいたポイントをいくつか紹介しました。その中でも特に地味に時間を取られたのが、interfaceとtypeの使い分けです。JavaScriptは元々そこそこ書けていたので、「型を書く」という発想自体には早く慣れました。ただ、その分「なぜ同じようなことができる書き方が2種類あるのか」がかえって気になり、調べるのに時間がかかりました。この記事では、実際のコード例をもとに違いを整理します。JavaScript経験者ほど「どっちでもよくない？」と感じる理由JavaScriptにはそもそも型という概念...

公式ドキュメントにも、interfaceとtype aliasの違いをまとめたセクションがあります。

▶ TypeScript公式ドキュメント：Differences Between Type Aliases and Interfaces

5. エラーメッセージは全部読む

TypeScriptのエラーメッセージは長くて最初は身構えてしまいますが、多くの場合「何型を期待していて、何型が渡されたか」がそのまま書いてあります。

// Type 'number' is not assignable to type 'string'.
// → number型を渡そうとしたけど、string型を期待している

エラーを読まずに雰囲気で直そうとすると余計に時間がかかるので、まずは英文をそのまま読む癖をつけるのが結果的に一番の近道でした。エラーの意味が分からないときは、公式のPlaygroundに同じコードを貼って挙動を確認するのもおすすめです。

▶ TypeScript公式Playground

6. tsconfig.jsonのstrictはオンにしておく

{
  "compilerOptions": {
    "strict": true
  }
}

strictモードをオフにすると、型チェックがかなり緩くなり、JavaScriptに近い書き方でも通ってしまいます。最初は指摘が多くて大変ですが、実務のプロジェクトはstrictが前提になっていることが多いので、学習段階からオンにしておく方が結果的に近道です。

▶ TypeScript公式ドキュメント：tsconfig strict

意外と少なくない？ジャネットジャクソン・・？とかは？

ジェネリクスとかもっと発展的な話は、この6つが身体に馴染んでからで十分だと思ってる。順番が大事

もっと体系的に学びたい場合

この記事はあくまで「つまずきポイントの整理」なので、体系的に学び直したい場合はこちらの解説記事も参考になります。

▶ 【2026年版】TypeScriptとは？なぜ流行ったのかを初心者向けにやさしく解説（Zenn）

まとめ

JavaScriptがある程度書けている状態からTypeScriptを学ぶ場合、新しく覚えることは「型の書き方」と「型を確認してから使う癖」の2つに集約される気がしています。最初から完璧を目指さず、この6つを押さえたうえで、実際に手を動かしながら少しずつ知識を広げていくのが遠回りなようで一番早いと感じています。