JSON値の型
完全で型安全なJSON値型を定義します。
「JSON値の型」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
JSON値とは
JSONで使用できる値の形は、文字列、数値、真偽値、null、配列、オブジェクトに限られます。再帰型を使うと、この集合を正確に記述できます。
type Json =
| string
| number
| boolean
| null
| Json[]
| { [k: string]: Json };
// arrays and objects nest Json again.再帰的なJSON型
重要な点は、配列がJsonを含み、オブジェクトの値もJsonであることです。そのため、この型はネストしたデータを表現するために自分自身を参照します。
type Json =
| string | number | boolean | null
| Json[]
| { [k: string]: Json };
const x: Json = { name: "Ada", tags: ["a", "b"], active: true };
console.log(x);JSONのプリミティブ値
最も単純なJSON値はプリミティブです。それぞれをJsonに直接代入できます。
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const a: Json = "hello";
const b: Json = 42;
const c: Json = true;
const d: Json = null;
console.log(a, b, c, d);JSON配列
JSON配列はJson[]なので、ネストした配列やオブジェクトを含む、あらゆるJSON値を混在させて格納できます。
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const arr: Json = [1, "two", true, null, [3, 4]];
console.log(Array.isArray(arr));JSONオブジェクト
JSONオブジェクトは、インデックスシグネチャを使って文字列キーとJson値を対応付けるため、任意の深さにネストできます。
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const obj: Json = {
user: { name: "Ada", age: 36 },
scores: [10, 20, 30]
};
console.log(obj);深くネストしたJSON
型が再帰的であるため、追加の宣言をしなくても、深くネストした構造を完全に型付けできます。
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const deep: Json = {
a: { b: { c: [1, { d: true }] } }
};
console.log(deep);JSONに含まれないもの
Json型は、undefined、関数、Dateオブジェクトなど、JSONで表現できない値を正しく拒否します。
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
// const bad: Json = undefined; // Error
// const fn: Json = () => 1; // Error
const good: Json = { ok: true };
console.log(good);実行時にJSONの形を検証する
型によって有効なJSONを記述できても、信頼できない入力は実行時に検証する必要があります。再帰的なガードで各レベルを確認します。
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function isJson(v: unknown): v is Json {
if (v === null) return true;
const t = typeof v;
if (t === "string" || t === "number" || t === "boolean") return true;
if (Array.isArray(v)) return v.every(isJson);
if (t === "object") return Object.values(v as object).every(isJson);
return false;
}
console.log(isJson({ a: [1, 2], b: "x" }));Json型にパースする
JSON.parseはanyを返すため、パース結果を検証してからJsonにキャストするか、変数に型を付けて検証します。
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const raw = "{ \"id\": 1, \"tags\": [\"a\"] }";
const parsed = JSON.parse(raw) as Json;
console.log(parsed);Json値を走査する
再帰的なウォーカーを使うと、実行時の形状を確認しながら、プリミティブ、配列、オブジェクトを処理して、あらゆるJSON値を走査できます。
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function countLeaves(v: Json): number {
if (Array.isArray(v)) return v.reduce((a, x) => a + countLeaves(x), 0);
if (v !== null && typeof v === "object") return Object.values(v).reduce((a, x) => a + countLeaves(x), 0);
return 1;
}
console.log(countLeaves({ a: [1, 2], b: "x" }));Json型が役立つ理由
正確なJson型によって、APIの境界を越えられる値を正確に記述できます。そのため、JSON以外の値をシリアライズしようとする試みをコンパイル時に検出できます。
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function send(payload: Json): string {
return JSON.stringify(payload);
}
console.log(send({ ok: true, items: [1, 2, 3] }));クイックチェック：JSON値の型
JSON値の型について理解度を確認します。
まとめ：JSON値の型
プリミティブ、配列、オブジェクトをカバーする再帰的なJson型を定義し、その型に含まれないものを学び、再帰的な型ガードで信頼できない入力を検証しました。
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const data: Json = { id: 1, tags: ["a", "b"] };
console.log(JSON.stringify(data));よくある質問
「JSON値の型」レッスンは無料ですか？
はい。「JSON値の型」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「JSON値の型」で何を学びますか？
完全で型安全なJSON値型を定義します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「JSON値の型」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。