kinoblog

TypeScriptのunion型とは？「AかBか」の型の書き方を初心者向けに解説

kino — Sun, 16 Aug 2026 05:03:29 +0000

TypeScriptのunion型とは

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

少年A

“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の違いは？使い分けを初心者向けに解説

🕒️2026年7月18日

interfaceとtypeって、どっちもオブジェクトの型を書けるけど、何が違うの？実は、普通のオブジェクトならほぼ同じなんだ。違いが出る場面だけ押さえれば迷わなくなるよじゃあ、どんなときに違いが出るの？大きくは2つ。ユニオン型と、同じ名前での定義の追加。順番に見ていこうTypeScriptのinterfaceとtypeの違いとは？結論は2つだけTypeScript の interface と type の違いは、主にユニオン型などを書けるのが type、同じ名前で定義を追加できるのが interface という2点です。オブジェクトの形を表すだけなら、どちらを使ってもほと...

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日

fetchでデータを取ってきたのに、プロパティ名を間違えてて、画面に出すまで気づかなかったよ…あるあるだね。じゃあ聞くけど、API通信の関数に Promise って書くと、何が変わると思う？うーん、User型のデータが返ってくるって分かる、とか？でも、fetchは「あとで」結果が返ってくるんだよね。そんな値にも型を付けられるの？いいところに気づいたね。「あとで返ってくる値」にも型を付けられるし、付けると、さっきのタイプミスも書いている時点で気づけるようになるよえっ、本当に？じゃあ、型を付けないと、どうなっち...

union型とenumの違い

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

項目	union型（リテラル型）	enum
書き方	シンプル（1行で書ける）	やや冗長
コンパイル後	余分なコードが残らない	実体のあるコードが生成される

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

少年A

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

キノ

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

The post TypeScriptのunion型とは？「AかBか」の型の書き方を初心者向けに解説 first appeared on kinoblog.

TypeScriptの型アサーション（as）とは？使い方と注意点を初心者向けに解説

kino — Sat, 15 Aug 2026 03:46:30 +0000

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

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

少年A

コードでよく見る「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にチェックさせる
型アサーション（as 型名）	「この型として扱って」とチェックを上書きする

型注釈は「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日

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

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

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

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

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

kinoblog

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

少年A

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

キノ

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

The post TypeScriptの型アサーション（as）とは？使い方と注意点を初心者向けに解説 first appeared on kinoblog.

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

kino — Tue, 11 Aug 2026 02:06:36 +0000

TypeScriptのtsxファイルとは

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

少年A

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 Hello, {name}!;
}

export default Greeting;

このように、関数の中に

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

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

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

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

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

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

拡張子の使い分けルール

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

ファイルの内容	拡張子
Reactコンポーネント（JSXあり）	.tsx
API通信の処理、ユーティリティ関数	.ts
型定義だけをまとめたファイル	.ts

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

kinoblog

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

🕒️2026年8月1日

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

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

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

よくあるエラー

// utils.ts の中で
export const Loading = () => Loading...;
// 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

少年A

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

キノ

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

The post tsxファイルとは？.tsとの違いと使い分けを初心者向けに解説 first appeared on kinoblog.

tsconfig.jsonとは？初期設定の作り方を初心者向けに解説

kino — Sun, 09 Aug 2026 05:20:30 +0000

少年A

tsc index.ts でコンパイルはできたけど、tsconfig.json ってファイルもよく見かけるよね。あれは何なの？

キノ

プロジェクトのコンパイル設定をまとめておくファイルだよ。なくても動くけど、あると毎回の手間がなくなるんだ

少年A

設定ってたくさんありそうで、どれを触ればいいか分からない…

キノ

最初に押さえるのは4つだけ。順番に見ていこう

tsconfig.jsonとは？コンパイル設定をまとめるファイル

tsconfig.jsonとは、TypeScriptのコンパイル方法を、プロジェクト単位でまとめて設定するファイルです。どのファイルをコンパイルするか、どのJavaScriptに変換するか、型チェックをどれだけ厳しくするかを、1か所に書いておけます。

	tsconfig.jsonなし	tsconfig.jsonあり
コンパイルのコマンド	`tsc index.ts`（ファイルを毎回指定）	`tsc`（これだけで全体を変換）
設定	毎回オプションを書く	ファイルに1回書けば済む
向いている場面	1ファイルの動作確認	複数ファイルのプロジェクト

なぜtsconfig.jsonが必要なのか

ファイルが増えると、tsc index.ts を1つずつ実行するのは現実的ではありません。tsconfig.jsonを置いておけば、プロジェクトのルートで tsc と打つだけで、対象のファイルをまとめて変換できます。

ひとつ注意点があります。ファイル名を指定して tsc src/index.ts のように実行すると、tsconfig.jsonは読み込まれません。実際に試すと、outDir を dist にしていても、src/index.js がソースの隣に出力されます。

# tsconfig.json があるプロジェクトで
tsc src/index.ts   # 設定は無視される。src/index.js が src の中にできる
tsc                # tsconfig.json の設定どおりに変換される（outDir が dist なら dist/index.js）

TypeScriptの環境構築から確認したい方は、こちらもあわせてどうぞ。

kinoblog

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

🕒️2026年8月4日

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

`tsc --init`でtsconfig.jsonを作る方法

tsconfig.jsonは、プロジェクトのルートで次のコマンドを実行すると生成できます。

tsc --init

Created a new tsconfig.json と表示されれば成功です。生成される中身はTypeScriptのバージョンによって違います。TypeScript 5.9.3で生成したときは、コメントを除くと次の設定が入っていました。

{
  "compilerOptions": {
    "module": "nodenext",
    "target": "esnext",
    "types": [],
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true
  }
}

古いバージョンではコメントアウトされた項目が大量に並んでいましたが、最近のバージョンは必要最低限の設定になっています。生成された設定は、そのまま使うより、自分のプロジェクトに合わせて見直すのがおすすめです。

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

初心者が最初に理解しておきたい設定は、次の4つ（＋対象ファイルの指定）です。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  },
  "include": ["src"]
}

設定	意味
`target`	変換後のJavaScriptのバージョン
`module`	変換後のモジュール形式（`commonjs` や `nodenext` など）
`outDir`	変換後のファイルの出力先
`rootDir`	ソースファイルのルートディレクトリ
`strict`	型チェックを厳しくする設定のまとめ
`include`	コンパイル対象のファイル・ディレクトリ

module は実行環境（Node.jsのバージョンや使うバンドラ）によって最適な値が変わるため、まずは公式ドキュメントの説明を確認してください。

www.typescriptlang.org

TSConfig Reference - Docs on every TSConfig option

https://www.typescriptlang.org/tsconfig

From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project.

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

target は、TypeScriptをどのバージョンのJavaScriptに変換するかを決める設定です。同じコードでも、target によって出力が変わります。たとえば、テンプレートリテラルを使ったコードを変換すると次のようになります。

// 元のTypeScript
const f = (x: number) => `v=${x}`;

// target: ES2020 のときの出力
const f = (x) => `v=${x}`;

// target: ES5 のときの出力
var f = function (x) { return "v=".concat(x); };

target を古くすると、新しい構文が古い書き方に置き換わります。また、古すぎる target では使えない構文もあります。たとえばクラスのプライベートフィールド（#p）を ES5 で使うと、次のエラーになります。

error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.

target の選び方は、コードを動かす環境が対応している最新のバージョンが基本です。迷う場合は、最近のNode.jsやブラウザなら ES2020 以上を指定しておけば問題になることはほとんどありません。

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

outDir は出力先、rootDir はソースのルートです。次のように設定すると、src の中のファイルが dist に変換されます。

プロジェクト/
├─ src/
│   └─ index.ts      ← 書くのはここ
├─ dist/
│   └─ index.js      ← tsc が出力する
└─ tsconfig.json

この構成にしておくと、ソース（.ts）と変換後のファイル（.js）が混ざらず、dist をまるごと .gitignore に入れられます。

include・excludeでコンパイル対象を決める

include には、コンパイルしたいディレクトリやファイルを書きます。exclude を使うと、その中から除外するものを指定できます。

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

include を書かない場合は、tsconfig.jsonがあるディレクトリ以下のTypeScriptファイルがすべて対象になります。意図しないファイルを変換しないよう、include は書いておくのがおすすめです。

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

strict: true にすると、型チェックに関する厳しい設定がまとめて有効になります。たとえば、次のコードは strict が false だとエラーになりませんが、true にすると2か所でエラーになります。

function greet(name) {
  return "Hello " + name;
}
let user: string = null;

a.ts(1,16): error TS7006: Parameter 'name' implicitly has an 'any' type.
a.ts(4,5): error TS2322: Type 'null' is not assignable to type 'string'.

引数の型を書き忘れる（暗黙の any）ミスや、null を入れてしまうミスを、コンパイル時に見つけられます。新しく始めるプロジェクトでは、最初から strict: true にしておくのがおすすめです。

kinoblog

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

🕒️2026年7月19日

kinoblog

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

🕒️2026年8月3日

tsconfig.jsonでよくあるエラーと対処

1. error TS18003: No inputs were found in config file

include に指定した場所に .ts ファイルがないときのエラーです。include のパスが正しいか、ファイルが src の中にあるかを確認してください。

error TS18003: No inputs were found in config file '.../tsconfig.json'. Specified 'include' paths were '["src"]' and 'exclude' paths were '[]'.

2. error TS6059: File … is not under ‘rootDir’

rootDir の外にあるファイルが、コンパイル対象に含まれているときのエラーです。include と rootDir の範囲をそろえてください。

error TS6059: File '.../lib/b.ts' is not under 'rootDir' '.../src'. 'rootDir' is expected to contain all source files.

3. error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.

target が古すぎるのが原因です。ES2015 以上に変更してください。

4. .tsxを使うのにエラーが出る

JSXを書くには、jsx の設定が必要です。詳しくはこちらで解説しています。

kinoblog

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

🕒️2026年8月11日

よくある質問

Q. tsconfig.jsonは必ず作らないといけませんか？
A. 1ファイルを試すだけなら不要です。複数のファイルを扱う、設定を固定したい、といった場合は作っておくと楽になります。

Q. tsc --initで生成された設定はそのまま使ってよいですか？
A. 動作はしますが、include や outDir などを自分のプロジェクトに合わせて見直すのがおすすめです。生成される内容は、TypeScriptのバージョンによっても違います。

Q. targetは何を選べばよいですか？
A. コードを動かす環境が対応している最新のバージョンが基本です。迷ったら ES2020 以上にしておけば、まず問題になりません。

Q. tsc src/index.tsと実行すると、tsconfig.jsonの設定は効きますか？
A. 効きません。ファイル名を指定すると、tsconfig.jsonは読み込まれないため、設定を使いたいときは tsc だけで実行してください。

まとめ：tsconfig.jsonとは何かのおさらい

tsconfig.jsonは、コンパイル設定をプロジェクト単位でまとめるファイル
tsc --init で作れる。中身はバージョンによって違うので、自分のプロジェクトに合わせて見直す
最初に覚えるのは target・outDir・rootDir・strict（＋ include）
ファイル名を指定した tsc index.ts では、tsconfig.jsonは使われない
新しいプロジェクトは、最初から strict: true がおすすめ

型の書き方を整理したい方は、こちらもあわせてどうぞ。

kinoblog

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

🕒️2026年7月30日

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

kinoblog

TypeScriptのinterfaceとtypeの違いは？使い分けを初心者向けに解説

🕒️2026年7月18日

少年A

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

キノ

最初に整えておくと、あとがずっと楽になるところだから、早めに慣れておくといいよ

The post tsconfig.jsonとは？初期設定の作り方を初心者向けに解説 first appeared on kinoblog.

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

kino — Tue, 04 Aug 2026 11:50:41 +0000

TypeScriptの始め方とは

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

少年A

型の書き方は分かってきたけど、そもそも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日

コンパイルとは何か

ブラウザや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

少年A

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

キノ

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

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

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

kino — Mon, 03 Aug 2026 11:46:21 +0000

TypeScriptの型注釈とは

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

少年A

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

キノ

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

なぜ型注釈が必要なのか

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

少年A

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

キノ

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

The post TypeScriptの変数・関数の型注釈とは？書き方を初心者向けに解説 first appeared on kinoblog.

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

kino — Sun, 02 Aug 2026 02:46:43 +0000

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

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

少年A

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

キノ

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

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

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

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

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

配列の型定義の書き方

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

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

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

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

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

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

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

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

kinoblog

TypeScriptのinterfaceとtypeの違いは？使い分けを初心者向けに解説

🕒️2026年7月18日

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

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

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日

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

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

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

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

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

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

まとめ

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

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

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

少年A

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

キノ

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

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

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

kino — Sat, 01 Aug 2026 11:53:42 +0000

少年A

fetchでデータを取ってきたのに、プロパティ名を間違えてて、画面に出すまで気づかなかったよ…

キノ

あるあるだね。じゃあ聞くけど、API通信の関数に Promise って書くと、何が変わると思う？

少年A

うーん、User型のデータが返ってくるって分かる、とか？でも、fetchは「あとで」結果が返ってくるんだよね。そんな値にも型を付けられるの？

キノ

いいところに気づいたね。「あとで返ってくる値」にも型を付けられるし、付けると、さっきのタイプミスも書いている時点で気づけるようになるよ

少年A

えっ、本当に？じゃあ、型を付けないと、どうなっちゃうの？

キノ

それが今日のテーマだよ。fetchの実例で、Promiseの書き方から、付けないときの落とし穴まで、順番に見ていこう

TypeScriptのPromiseとは

TypeScriptのPromiseとは、非同期処理が最終的に返す値の型を指定する書き方です。TypeScript Promiseでは、たとえば Promise と書くと、「あとで User 型の値が返ってくる処理」という意味になります。

API通信の結果に型を付けると、レスポンスの中身をエディタの補完付きで安全に扱えるようになります。この記事では、fetchを使った実例で、Promiseの書き方からエラー処理、Reactでの使い方までを整理します。

Promiseは、非同期処理の「結果の入れ物」のようなオブジェクトです。次の3つの状態があります。

状態	意味
待機中（pending）	処理がまだ終わっていない状態
成功（fulfilled）	処理が成功し、値を取り出せる状態。`Promise` の `T` は、この値の型です
失敗（rejected）	処理が失敗した状態。`catch` で受け取ります

の部分はジェネリクスです。ジェネリクスの基本がまだ不安な方は、こちらを先にご覧ください。

kinoblog

TypeScriptのジェネリクスとは？Tの意味と使い方を初心者向けに解説

🕒️2026年8月1日

TypeScriptのって何？ジェネリクスって難しそうで避けてたんだけど…実は「型を引数みたいに受け取る仕組み」ってだけなんだ。まずはなぜ必要なのかから見てみようany じゃだめなの？それがだめな理由が、ジェネリクスの出番そのものなんだ。順番にいくよTypeScriptのジェネリクスとは？型を引数として受け取る仕組みTypeScript ジェネリクスとは、関数や型の定義時には型を決めず、使うときに型を渡せるようにする仕組みです。型を「引数」のように受け取るため、同じ処理を型ごとに書き直さずに、型安全に使い回せます。関...

API通信にPromiseの型定義が必要な理由

JavaScriptでは、APIから返ってきたデータに何が入っているのかを、コードから読み取れません。プロパティ名のタイプミス（user.nmae など）も、実行して undefined が出るまで気づけません。

Promiseで型を付けると、次のような違いが出ます。

書いている時点でタイプミスに気づける：存在しないプロパティに赤線が出ます
入力補完が効く：user. と打つだけで、使えるプロパティが候補に出ます
APIの変更に気づきやすい：型定義を直すと、影響するコードがエラーとして一覧で分かります

基本の書き方：async関数にPromiseを付ける

API通信の関数は、async 関数の戻り値に Promise のように型を付けて書きます。

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

async function fetchUser(id: number): Promise {
  const res = await fetch(`https://api.example.com/users/${id}`);
  if (!res.ok) {
    throw new Error(`HTTP ${res.status}`);
  }
  const data: User = await res.json();
  return data;
}

ポイントは3つです。

戻り値は Promise と書く：async 関数は、値を Promise に包んで返します。そのため : User ではなく : Promise と書きます
res.ok を確認する：fetch は、404や500のようなエラーのレスポンスでは reject されません（MDN）。res.ok が false のときは、自分で例外を投げます
await res.json() の結果に型を付ける：data に User と書くことで、以降は User として扱われます

型の書き方そのものは、こちらの記事で解説しています。

kinoblog

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

🕒️2026年8月3日

ここでは type で定義していますが、interface でも同じように使えます。違いが気になる方はこちらをどうぞ。

kinoblog

TypeScriptのinterfaceとtypeの違いは？使い分けを初心者向けに解説

🕒️2026年7月18日

戻り値の型注釈を省略するとどうなるか

戻り値の型注釈を書かないと、どうなるでしょうか。次のコードを見てください。

// 戻り値の型注釈がない
async function fetchUserLoose(id: number) {
  const res = await fetch(`https://api.example.com/users/${id}`);
  return res.json(); // 戻り値は Promise になる
}

async function demo() {
  const user = await fetchUserLoose(1);
  console.log(user.nmae); // タイプミスでもエラーにならない
}

res.json() の戻り値は Promise です。そのため、注釈を省略した関数の戻り値も Promise と推論され、user.nmae のようなタイプミスでもエラーになりません。

戻り値に Promise を付けた関数なら、同じタイプミスを書いた時点で赤線が出ます。

async function demo() {
  const user = await fetchUser(1); // Promise を返す関数
  console.log(user.nmae);
  // Property 'nmae' does not exist on type 'User'.
}

型注釈は「宣言」であって「検証」ではない

注意したいのは、const data: User = await res.json() と書いても、実行時にレスポンスの中身が本当に User かどうかは確認されない点です。型は「こういう形で返ってくるはず」という宣言にすぎません。

APIが仕様と違う値を返した場合は、型が合っていても実行時にエラーになることがあります。外部のAPIなど、中身を信頼しきれない場合は、実行時にデータを検証するライブラリ（zodなど）を使うと安全です。any と unknown の違いや、as で型を付ける書き方は、次の記事で解説しています。

kinoblog

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

🕒️2026年7月19日

kinoblog

TypeScriptの型アサーション（as）とは？使い方と注意点を初心者向けに解説

🕒️2026年8月15日

TypeScriptの型アサーション（as）とはTypeScriptの型アサーションとは、asを使って「この値はこの型だ」と開発者側から指定する書き方です。TypeScriptの自動判定より、開発者が型を分かっている場面で使います。コードでよく見る「as」って何なの？型を書いてるようには見えるけど便利なんだけど、使いすぎると危ない子でもあるんだ。今日は使いどころと注意点をセットで覚えようなぜ型アサーションが必要なのかTypeScriptは多くの場合、値の型を自動で判定してくれます。しかし、TypeScriptより開発者の方が「この値の型」を...

PromiseとPromiseの違い

ここまでの違いを、表にまとめます。

比較項目	Promise	Promise
型チェック	効かない	効く
入力補完	出ない	出る
タイプミスの検出	実行して初めて気づく	書いている時点で気づく
呼び出し側への影響	any が引き継がれ、型チェックが効かない範囲が広がる	`User` として安全に扱える
向いている場面	型が決まっていない試作コード	本番で動かすコード

Promise・Promise.allなど、よく使う書き方

API通信では、次のような書き方がよく出てきます。

書き方	意味
`Promise`	値を返さない非同期処理（保存、削除など）
`Promise`	配列を返す非同期処理
`Promise`	見つからないときは `null` を返す非同期処理
`Promise.all`	複数の通信を同時に実行し、結果をまとめて受け取る

User | null のようなユニオン型については、こちらで解説しています。

kinoblog

TypeScriptのunion型とは？「AかBか」の型の書き方を初心者向けに解説

🕒️2026年8月16日

TypeScriptのunion型とはTypeScriptのunion型（ユニオン型）とは、「AかBのどちらか」というように、複数の型のいずれかを表す型です。縦棒|で型をつなげて書きます。"success" | "error" みたいな縦棒でつなぐやつ、あれ何なの？それがunion型。実務だと状態管理とかで毎日のように使うから、押さえておくと強いよなぜunion型が必要なのか1つの値が「複数の型のどれか」になる場面は、実務でよくあります。例えば、入力欄に入れるIDが「数値のときも文字列のときもある」といったケースです。// numberでも...

配列の型（Post[]）の書き方は、こちらの記事が参考になります。

kinoblog

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

🕒️2026年8月2日

type Post = {
  id: number;
  title: string;
};

// 値を返さない処理は Promise
async function saveUser(user: User): Promise {
  const res = await fetch("https://api.example.com/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(user),
  });
  if (!res.ok) {
    throw new Error(`HTTP ${res.status}`);
  }
}

// 配列を返す処理は Promise
async function fetchPosts(userId: number): Promise {
  const res = await fetch(`https://api.example.com/users/${userId}/posts`);
  if (!res.ok) {
    throw new Error(`HTTP ${res.status}`);
  }
  return res.json();
}

async function loadAll() {
  // 2つの通信を同時に実行。結果は [User, Post[]] として扱える
  const [user, posts] = await Promise.all([fetchUser(1), fetchPosts(1)]);
  console.log(user.name, posts.length);
}

Promise.all に関数の配列を渡すと、結果は [User, Post[]] のように、順番ごとに型が付いて返ってきます。どちらの通信も終わってから次に進むため、順番に await するより待ち時間が短くなります。

関数の戻り値から、Promiseの中身の型を取り出したいときは Awaited を使います。（TypeScript 4.5以降）

// 関数の戻り値から、Promise の中身の型（User）を取り出す
type Resolved = Awaited>;

この例では、Resolved は User になります。

エラー処理：try/catchとres.okの確認

非同期処理が失敗した（rejectedになった）ときは、try/catch で受け取ります。fetch は、通信そのものが失敗したときだけ reject されます。404や500のようなレスポンスは、res.ok を確認して、自分で例外を投げる必要があります。

async function showEmail() {
  try {
    const user = await fetchUser(2);
    console.log(user.email);
  } catch (error) {
    // strict では error は unknown 型。そのままでは error.message を読めない
    if (error instanceof Error) {
      console.error(error.message);
    }
  }
}

strict を有効にしていると、catch の error は unknown 型になります。そのため、instanceof Error で絞り込んでから message を読みます。strict の設定は、tsconfig.json で行います。

kinoblog

tsconfig.jsonとは？初期設定の作り方を初心者向けに解説

🕒️2026年8月9日

tsc index.ts でコンパイルはできたけど、tsconfig.json ってファイルもよく見かけるよね。あれは何なの？プロジェクトのコンパイル設定をまとめておくファイルだよ。なくても動くけど、あると毎回の手間がなくなるんだ設定ってたくさんありそうで、どれを触ればいいか分からない…最初に押さえるのは4つだけ。順番に見ていこうtsconfig.jsonとは？コンパイル設定をまとめるファイルtsconfig.jsonとは、TypeScriptのコンパイル方法を、プロジェクト単位でまとめて設定するファイルです。どのファイルをコンパイルするか、どのJavaScript...

Reactでの使用例

Reactでは、useEffect の中でAPI通信の関数を呼び、結果を useState に保存する形がよく使われます。このコードは .tsx ファイルに書きます。

import { useEffect, useState } from "react";

function UserCard({ id }: { id: number }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    let ignore = false; // 古いレスポンスで state を上書きしないための目印

    fetchUser(id)
      .then((data) => {
        if (!ignore) setUser(data);
      })
      .catch((e: unknown) => {
        if (!ignore) setError(e instanceof Error ? e.message : "unknown error");
      });

    return () => {
      ignore = true;
    };
  }, [id]);

  if (error) return エラー: {error};
  if (!user) return 読み込み中...;
  return {user.name};
}

useState(null) のように、取得前は null を許す型にします
useEffect に渡す関数は、直接 async にできません。そのため .then() でつなぐか、中で async 関数を定義して呼びます
ignore の目印は、id が切り替わったときに、古いレスポンスで state を上書きしないためのものです。レスポンスは、送った順番どおりに届くとは限りません（React公式ドキュメントでも紹介されています）

なお、React公式ドキュメントでは、フレームワークやデータ取得用のライブラリが提供する機能を使うほうが効率的だと説明されています。まずは仕組みを理解するために、この形を押さえておくと役立ちます。

.tsと.tsxの使い分けは、こちらの記事で解説しています。

kinoblog

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

🕒️2026年8月11日

よくあるエラーと対処

1. Type ‘Promise’ is missing the following properties from type ‘User’

await を付け忘れたときのエラーです。Promiseのまま、User 型の変数に入れようとしています。

// NG：await を付け忘れた
const user: User = fetchUser(1);
// Type 'Promise' is missing the following properties from type 'User': id, name, email

// OK
const user2: User = await fetchUser(1);

2. Property ‘name’ does not exist on type ‘Promise’

これも await の付け忘れです。Promiseそのものには name がありません。

// NG：Promise のまま .name を読もうとした
const name = fetchUser(1).name;
// Property 'name' does not exist on type 'Promise'.

// OK
const name2 = (await fetchUser(1)).name;

3. ‘await’ expressions are only allowed within async functions

async が付いていない関数の中で await を使ったときのエラーです。関数に async を付けます。

// NG：async のない関数の中で await を使った
function getName() {
  const user = await fetchUser(1);
  // 'await' expressions are only allowed within async functions and at the top levels of modules.
  return user.name;
}

// OK：async を付けて、戻り値を Promise にする
async function getNameFixed(): Promise {
  const user = await fetchUser(1);
  return user.name;
}

よくある質問

Q. PromiseのTには何を入れますか？
A. 処理が成功したときに取り出せる値の型を入れます。ユーザー情報を返すなら Promise、値を返さないなら Promise です。

Q. async関数の戻り値に「: User」と書いてもいいですか？
A. 書けません。async 関数の戻り値の型は、Promise のように Promise に包んで書きます。

Q. res.json() の結果は、型チェックされますか？
A. されません。res.json() は Promise を返すため、型を付けても実行時の検証にはなりません。信頼できないAPIの場合は、zodなどで実行時に検証します。

Q. fetchは、404エラーのときにrejectされますか？
A. されません。通信そのものが失敗したときだけ reject されます。404や500のときは、res.ok を確認して、自分で例外を投げます。

Q. thenとasync/awaitは、どちらを使えばいいですか？
A. どちらも同じPromiseを扱う書き方です。普段は読みやすい async/await がおすすめです。Reactの useEffect の中では、直接 async にできないため、.then() を使うか、中に async 関数を定義します。

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

Promiseは、非同期処理が最終的に返す値の型を指定する書き方
async 関数の戻り値は Promise のように書く
戻り値の型注釈を省略すると、res.json() の any が引き継がれ、タイプミスに気づけない
型注釈は実行時の検証ではない。信頼できないAPIは、実行時にも検証する
fetch は404でもrejectされないので、res.ok を確認する

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

MDN Web Docs

Promise - JavaScript | MDN

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise オブジェクトは、非同期処理の完了（もしくは失敗）の結果およびその結果の値を表します。

MDN Web Docs

フェッチ API の使用 - Web API | MDN

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

フェッチ API は、HTTP リクエストを行い、レスポンスを処理するための JavaScript インターフェイスを提供します。

www.typescriptlang.org

Documentation - Utility Types

https://www.typescriptlang.org/docs/handbook/utility-types.html#awaitedtype

Types which are globally included in TypeScript

react.dev

useEffect – React

https://react.dev/reference/react/useEffect

The library for web and native user interfaces

少年A

型を付けておくだけで、タイプミスにも気づけるんだね

キノ

うん。まずは、fetchする関数の戻り値に Promise を付けるところから試してみてね

The post TypeScriptのPromiseとは？API通信の型定義を初心者向けに解説 first appeared on kinoblog.

TypeScriptのジェネリクスとは？Tの意味と使い方を初心者向けに解説

kino — Sat, 01 Aug 2026 06:23:26 +0000

少年A

TypeScriptのって何？ジェネリクスって難しそうで避けてたんだけど…

キノ

実は「型を引数みたいに受け取る仕組み」ってだけなんだ。まずはなぜ必要なのかから見てみよう

少年A

any じゃだめなの？

キノ

それがだめな理由が、ジェネリクスの出番そのものなんだ。順番にいくよ

TypeScriptのジェネリクスとは？型を引数として受け取る仕組み

TypeScript ジェネリクスとは、関数や型の定義時には型を決めず、使うときに型を渡せるようにする仕組みです。型を「引数」のように受け取るため、同じ処理を型ごとに書き直さずに、型安全に使い回せます。

）とは：identityにstring・number・booleanの型を渡して使い回す図" width="1200" height="630" />

関数の引数が「呼び出すときに値を渡す」ものなら、ジェネリクスは「呼び出すときに型を渡す」もの、とイメージすると分かりやすいです。

	普通の引数	型引数（ジェネリクス）
渡すもの	値（`42` など）	型（`number` など）
書く場所	`( )` の中	`< >` の中
例	`add(1, 2)`	`identity("a")`

ジェネリクスが必要な理由：型ごとに関数を書くと重複する

受け取った値をそのまま返すだけの関数を、型ごとに書くとこうなります。

function identityString(value: string): string {
  return value;
}
function identityNumber(value: number): number {
  return value;
}

処理は同じなのに、string用・number用と増えていきます。boolean や配列にも対応するたびに関数が増え、修正も全部に必要になります。

では引数と戻り値を any にすればよいかというと、それも問題があります。詳しくは後の「anyとの違い」で見ます。

基本の書き方：関数名の後ろにを付ける

ジェネリクスは、関数名の後ろにを付けて型引数を宣言します。

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

const a = identity("hello"); // string
const b = identity(42);      // number

：型引数の宣言（Tは「Type」の頭文字で、慣習的によく使われる名前）
value: T：引数の型にTを使う
): T：戻り値の型にもTを使う
identity(...)：呼び出し時に T = string を渡す

Tという名前に決まりはなく、やのように意味のある名前にしても動きます。慣習として1文字（T, U, K, V）がよく使われます。

kinoblog

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

🕒️2026年8月3日

型推論でを省略できる

引数から型が決まる場合、呼び出し時のは省略できます。TypeScriptが引数の値を見て、Tを自動で推論してくれるためです。

function identity(value: T): T {
  return value;
}
const c = identity("hello"); // string と推論される
const d = identity(42);      // number と推論される

実務では、型推論に任せて省略するのが一般的です。推論がうまくいかないとき（引数がなく戻り値の型でしか決まらない場合など）だけ、<型> を明示します。

複数の型引数：のようにカンマで並べる

型引数は複数宣言できます。ペアを作る関数なら、キーと値で別々の型を受け取れます。

function pair(key: K, value: V): [K, V] {
  return [key, value];
}
const p = pair("age", 30); // [string, number]

配列から先頭の要素を取り出す関数も、ジェネリクスで書くと要素の型がそのまま戻り値に引き継がれます。

function firstItem(items: T[]): T | undefined {
  return items[0];
}
const n = firstItem([10, 20, 30]);   // number | undefined
const s = firstItem(["a", "b"]);     // string | undefined

extendsで型引数に制約をつける

型引数Tは「何でも入る」ため、そのままでは中身のプロパティにアクセスできません。たとえば length を使おうとするとエラーになります。

function getLength(value: T): number {
  return value.length;
}

このエラーは、extends で「Tは少なくとも length を持つ型」という条件を付けると解消できます。これをジェネリクスの制約（generic constraints）と呼びます。

function getLength(value: T): number {
  return value.length;
}
getLength("hello");   // 5
getLength([1, 2, 3]); // 3
getLength(123);

制約を満たさない型（number など）を渡すと、コンパイル時にエラーになります。

// Argument of type 'number' is not assignable to parameter of type '{ length: number; }'.

制約の公式な解説は、TypeScript公式ドキュメントの「Generic Constraints」にあります。

www.typescriptlang.org

Documentation - Generics

https://www.typescriptlang.org/docs/handbook/2/generics.html

Types which take parameters

ジェネリックな型：type や interface にも使える

ジェネリクスは関数だけでなく、type や interface にも使えます。API レスポンスのように「形は同じで中身の型だけ違う」データを表すのに便利です。

type ApiResponse = {
  data: T;
  status: number;
};
type User = { id: number; name: string };

const res: ApiResponse = {
  data: { id: 1, name: "キノ" },
  status: 200,
};
const bad: ApiResponse = { data: 1, status: 200 };

ApiResponse のように型引数を渡すと、data の型が User に決まります。型引数を渡さずに使うと、最後の行のようにエラーになります。

// Generic type 'ApiResponse' requires 1 type argument(s).

kinoblog

TypeScriptのinterfaceとtypeの違いは？使い分けを初心者向けに解説

🕒️2026年7月18日

anyとジェネリクスの違い：型情報が残るかどうか

any は「型チェックをやめる」型で、ジェネリクスは「型を保ったまま使い回す」仕組みです。まず any で書いた場合を見ます。

function identityAny(value: any): any {
  return value;
}
const r = identityAny("hello");
r.toFixed(2); // コンパイルは通るが、実行時にエラーになる

戻り値が any になるため、string を渡したのに toFixed（数値用のメソッド）を呼んでもエディタは何も警告しません。ジェネリクスで書くとこうなります。

function identity(value: T): T {
  return value;
}
const s = identity("hello");
s.toFixed(2);

// Property 'toFixed' does not exist on type '"hello"'.

ジェネリクスなら、渡した型が戻り値まで引き継がれるため、間違った使い方をコンパイル時に検出できます。

	any	ジェネリクス（）
型チェック	実質なし	あり
戻り値の型	any（情報が消える）	渡した型がそのまま残る
エディタの補完	効かない	効く
間違いの検出	実行時	コンパイル時
向いている場面	型が本当に不明なとき（原則避ける）	型が違うだけで処理が同じとき

型が分からない値を扱いたい場合は any ではなく unknown を使う方法もあります。違いはこちらで解説しています。

kinoblog

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

🕒️2026年7月19日

実務で見かけるジェネリクス：Array・Promise・useState

自分でジェネリクスを書く機会が少なくても、標準の型やライブラリでは日常的に使われています。代表例を見ておくと、の意味がつかみやすくなります。

Array と Promise

const nums: Array = [1, 2, 3];
const names: string[] = ["a", "b"];

async function fetchNumber(): Promise {
  return 1;
}

number[] は Array の短い書き方です。Promise は「あとで number が返ってくる」という意味で、API通信の戻り値の型として頻出です。

kinoblog

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

🕒️2026年8月1日

ReactのuseState

Reactの useState も、ジェネリクスで状態の型を指定できます。初期値が null で後からデータが入る場合に使います。

import { useState } from "react";

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

export function Profile() {
  const [user, setUser] = useState(null);
  const [count, setCount] = useState(0); // number と推論される
  return (
    
  );
}

初期値が 0 のように型が決まる場合は、useState(0) と書けば number と推論されるため、型引数は不要です。

React側の型の付け方は、React公式ドキュメントにもまとまっています。

react.dev

Using TypeScript – React

https://react.dev/learn/typescript

The library for web and native user interfaces

よくあるエラーと対処

1. Property ‘length’ does not exist on type ‘T’

Tに何も制約がないのに、プロパティにアクセスしたときのエラーです。extends で必要なプロパティを持つ型に制約すると解消します（前述）。

2. Generic type ‘ApiResponse’ requires 1 type argument(s)

ジェネリックな型を、型引数なしで使ったときのエラーです。ApiResponse のように型引数を渡してください。

3. Argument of type ‘number’ is not assignable to parameter of type ‘{ length: number; }’

制約（extends）を満たさない型を渡したときのエラーです。渡している値の型が制約に合っているかを確認します。

4. .tsxファイルでを使うとエラーになる

アロー関数のジェネリクスは、.tsxではJSXのタグと見分けがつきません。のようにカンマを付けるか、と書くか、関数宣言で書きます。

const identity1 = (x: T) => x;
const identity2 = (x: T) => x;

kinoblog

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

🕒️2026年8月11日

よくある質問

Q. ジェネリクスのTは何の略ですか？
A. 一般にはTypeの頭文字です。名前に決まりはなく、のように好きな名前にできます。複数あるときはT, U, V や K, V（Key, Value）がよく使われます。

Q. ジェネリクスとanyはどう使い分けますか？
A. 渡した型を戻り値などに引き継ぎたいならジェネリクスを使います。anyは型チェックが外れるため、原則避けるのがおすすめです。

Q. 初心者はジェネリクスをいつ覚えるべきですか？
A. 最初は Array、Promise、useState を「読める」ことを目標にすると十分です。自作するのは、同じ処理を型違いで何度も書きそうになったときで構いません。

Q. 型引数は省略できますか？
A. 引数から型が推論できる場合は省略できます。推論できない場合や、意図した型を明示したい場合に <型> を書きます。

まとめ：TypeScript ジェネリクスとは何かのおさらい

ジェネリクスは、型を引数のように受け取り、使うときに決める仕組み
を関数名や型名の後ろに付けて宣言する。多くの場合は型推論で省略できる
extends で型引数に制約をつけると、プロパティにアクセスできる
anyと違い、渡した型が戻り値まで引き継がれ、間違いをコンパイル時に検出できる
Array・Promise・useState を読めるようになるのが最初の目標

次のステップとして、型の基本や設定を固めておくと、ジェネリクスの理解も早まります。

kinoblog

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

🕒️2026年7月30日

kinoblog

tsconfig.jsonとは？初期設定の作り方を初心者向けに解説

🕒️2026年8月9日

少年A

は「型を渡す引数」って考えればいいんだね。思ったよりシンプルかも

キノ

そう。まずは Array や Promise が読めれば十分。自分で書くのはその後で大丈夫だよ

The post TypeScriptのジェネリクスとは？Tの意味と使い方を初心者向けに解説 first appeared on kinoblog.

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

kino — Thu, 30 Jul 2026 12:15:01 +0000

少年A

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

キノ

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

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

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

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

kinoblog

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

🕒️2026年7月5日

この記事では、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日

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

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

kinoblog

TypeScriptのinterfaceとtypeの違いは？使い分けを初心者向けに解説

🕒️2026年7月18日

公式ドキュメントにも、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

少年A

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

キノ

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

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

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

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

まとめ

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

The post TypeScript初心者がここだけ押さえておけばいい6つのポイント【公式ドキュメント付き】 first appeared on kinoblog.

kinoblog

TypeScriptのunion型とは？「AかBか」の型の書き方を初心者向けに解説

TypeScriptのunion型とは

なぜunion型が必要なのか

リテラル型とは

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

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

Reactでの使用例

union型とenumの違い

よくあるエラー

よくある質問

まとめ

TypeScriptの型アサーション（as）とは？使い方と注意点を初心者向けに解説

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

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

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

型注釈との違い

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

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

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

よくあるエラー

よくある質問

まとめ

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

TypeScriptのtsxファイルとは

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

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

Hello, {name}!

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

Hello!

拡張子の使い分けルール

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

よくあるエラー

よくある質問

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

tsconfig.jsonとは？初期設定の作り方を初心者向けに解説

tsconfig.jsonとは？コンパイル設定をまとめるファイル

なぜtsconfig.jsonが必要なのか

tsc --initでtsconfig.jsonを作る方法

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

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

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

include・excludeでコンパイル対象を決める

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

tsconfig.jsonでよくあるエラーと対処

1. error TS18003: No inputs were found in config file

2. error TS6059: File … is not under ‘rootDir’

3. error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.

4. .tsxを使うのにエラーが出る

よくある質問

まとめ：tsconfig.jsonとは何かのおさらい

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

TypeScriptの始め方とは

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

TypeScriptのインストール方法

.tsファイルの作り方

コンパイルとは何か

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

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

よくあるエラー

よくある質問

まとめ

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

TypeScriptの型注釈とは

なぜ型注釈が必要なのか

変数の型注釈の書き方

関数の引数の型注釈

関数の戻り値の型注釈

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

アロー関数の型注釈

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

よくあるエラー

よくある質問

まとめ

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

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

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

配列の型定義の書き方

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

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

`tsc --init`でtsconfig.jsonを作る方法

基本の書き方：関数名の後ろにを付ける

型推論でを省略できる

複数の型引数：のようにカンマで並べる

4. .tsxファイルでを使うとエラーになる