- テーマの整理：「配列ユーティリティ × JSON 変換」とは何か
- 基本コンセプト：配列を「文字列として外の世界に出す」
- 基本ユーティリティ 1：配列 → JSON 文字列（安全版）
- 例題 1：ユーザー一覧を JSON にしてログに出す
- 基本ユーティリティ 2：JSON 文字列 → 配列（安全版）
- 例題 2：JSON 文字列から配列に戻す
- 例題 3：API 通信で「配列 → JSON → 配列」を往復する
- もう一歩進んだ形：部分的な JSON 変換（特定フィールドだけ）
- JSON 変換ユーティリティで意識してほしい重要ポイント
- 手を動かして「配列 ↔ JSON」の感覚をつかむ
- まとめ：JSON 変換ユーティリティで「配列を外の世界と安全につなぐ」
テーマの整理：「配列ユーティリティ × JSON 変換」とは何か
ここで扱うのは、「JavaScript の配列を JSON 文字列に変換する」「JSON 文字列から配列に戻す」ための、業務でそのまま使えるユーティリティです。 JSON は、API 通信・設定ファイル・ログ・他システム連携など、現代の業務システムの“共通言語”みたいな存在です。
だからこそ、
配列 → JSON JSON → 配列
この往復を、安全に・分かりやすく・毎回同じルールでできるようにしておくと、仕事がかなり楽になります。
基本コンセプト：配列を「文字列として外の世界に出す」
なぜ「JSON 変換」が必要なのか
JavaScript の配列は、そのままだと「メモリの中の構造」です。 でも、API に送ったり、ファイルに保存したり、DB に入れたりするときは、 「文字列」として表現する必要があります。
そのときに使うのが JSON です。
配列を JSON にすると、例えばこうなります。
const rows = [
{ id: 1, name: "Alice", active: true },
{ id: 2, name: "Bob", active: false },
];
const json = JSON.stringify(rows);
console.log(json);
出力イメージはこんな感じです。
[{"id":1,"name":"Alice","active":true},{"id":2,"name":"Bob","active":false}]
この「文字列」が、API のボディになったり、ファイルの中身になったりします。
基本ユーティリティ 1：配列 → JSON 文字列（安全版）
シンプルな JSON.stringify だけでは足りないところ
もちろん、配列を JSON にするだけなら JSON.stringify で十分です。 でも、業務で使うなら次のようなことを考えたくなります。
配列でないものが渡されたらどうするか。 インデント付きで「人間が読みやすい JSON」にしたい場面もある。 循環参照（自分自身を参照しているオブジェクト）があると JSON.stringify が落ちる。
そこで、「配列用の JSON 変換ユーティリティ」として、少しだけ安全にしたものを用意します。
実装：toJsonArray
function toJsonArray(array, pretty = false) {
if (!Array.isArray(array)) {
console.warn("toJsonArray: value is not an array", array);
return "[]";
}
const space = pretty ? 2 : 0;
try {
return JSON.stringify(array, null, space);
} catch (e) {
console.error("toJsonArray: stringify failed", e);
return "[]";
}
}
ここでの重要ポイントをかみ砕いて説明します。
まず「配列かどうか」をチェックしています。 配列でなければ警告を出しつつ、空配列 "[]" を返します。 pretty が true のときは、インデント幅 2 で「読みやすい JSON」を出します。 JSON.stringify が例外を投げた場合（循環参照など）は、エラーをログに出して "[]" を返します。
これだけで、「とりあえず落ちない」「ログに情報が残る」ユーティリティになります。
例題 1：ユーザー一覧を JSON にしてログに出す
コード
const users = [
{ id: 1, name: "Alice", active: true },
{ id: 2, name: "Bob", active: false },
];
const jsonCompact = toJsonArray(users);
const jsonPretty = toJsonArray(users, true);
console.log("=== compact ===");
console.log(jsonCompact);
console.log("=== pretty ===");
console.log(jsonPretty);
compact は 1 行の JSON、pretty はインデント付きの読みやすい JSON になります。
pretty のイメージはこんな感じです。
[
{
"id": 1,
"name": "Alice",
"active": true
},
{
"id": 2,
"name": "Bob",
"active": false
}
]
業務で「ログに残して人間が読む」場面では、pretty な JSON がかなり役に立ちます。
基本ユーティリティ 2：JSON 文字列 → 配列（安全版）
JSON.parse の“怖さ”をちゃんと扱う
JSON 文字列から配列に戻すときは、JSON.parse を使います。 ただし、次のようなリスクがあります。
文字列が壊れている（途中で切れている、余計な文字がある）。 配列ではなくオブジェクトや数値が入っている。 null や空文字が渡される。
そのまま JSON.parse すると例外が飛んで、処理が落ちます。 業務コードでは、ここをちゃんと守ってあげる必要があります。
実装：fromJsonArray
function fromJsonArray(json) {
if (typeof json !== "string") {
console.warn("fromJsonArray: value is not a string", json);
return [];
}
if (json.trim() === "") {
return [];
}
try {
const parsed = JSON.parse(json);
if (!Array.isArray(parsed)) {
console.warn("fromJsonArray: parsed value is not an array", parsed);
return [];
}
return parsed;
} catch (e) {
console.error("fromJsonArray: parse failed", e);
return [];
}
}
ここでの重要ポイントをかみ砕きます。
まず「文字列かどうか」をチェックしています。 空文字や空白だけなら「空配列」とみなして返します。 JSON.parse に成功したら、「本当に配列かどうか」をチェックします。 配列でなければ警告を出して空配列を返します。 JSON.parse が失敗した場合は、エラーをログに出して空配列を返します。
これで、「壊れた JSON や想定外の JSON が来ても、処理全体が落ちない」ようになります。
例題 2：JSON 文字列から配列に戻す
コード
const json = `
[
{ "id": 1, "name": "Alice", "active": true },
{ "id": 2, "name": "Bob", "active": false }
]
`;
const users = fromJsonArray(json);
console.log(users);
出力イメージは、元の配列と同じ形になります。
[
{ id: 1, name: "Alice", active: true },
{ id: 2, name: "Bob", active: false },
]
ここでのポイントは、
JSON 文字列が多少インデントされていても、JSON.parse は問題なく読める。 fromJsonArray が「配列であること」を確認してくれているので、安心して配列として扱える。
というところです。
例題 3：API 通信で「配列 → JSON → 配列」を往復する
シナリオ
フロントエンドで配列を作り、 JSON にして API に送る。 サーバーから返ってきた JSON を配列に戻す。
この流れをユーティリティで支えるイメージを持ってみます。
コード（概念的な例）
async function sendUsers(users) {
const body = toJsonArray(users);
const response = await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body,
});
const text = await response.text();
const resultArray = fromJsonArray(text);
return resultArray;
}
async function main() {
const users = [
{ id: 1, name: "Alice", active: true },
{ id: 2, name: "Bob", active: false },
];
const result = await sendUsers(users);
console.log("result from server:", result);
}
main();
ここでの重要ポイントは、
送信側では「配列 → JSON」を toJsonArray で行っている。 受信側では「JSON → 配列」を fromJsonArray で行っている。 どちらも「壊れたデータに対して落ちない」ように守られている。
というところです。
もう一歩進んだ形：部分的な JSON 変換（特定フィールドだけ）
シナリオ
配列の中に「オブジェクトを文字列として保存したいフィールド」がある。 例えば、設定やオプションを JSON 文字列として DB に入れたい。
実装例：フィールドを JSON 文字列にする
function stringifyField(array, field) {
if (!Array.isArray(array)) {
return [];
}
return array.map((item) => {
const copy = { ...item };
copy[field] = toJsonArray(copy[field]);
return copy;
});
}
例題
const rows = [
{ id: 1, name: "A", options: [{ key: "x", value: 1 }] },
{ id: 2, name: "B", options: [{ key: "y", value: 2 }] },
];
const withJsonOptions = stringifyField(rows, "options");
console.log(withJsonOptions);
出力イメージはこうなります。
[
{ id: 1, name: "A", options: '[{"key":"x","value":1}]' },
{ id: 2, name: "B", options: '[{"key":"y","value":2}]' },
]
ここでのポイントは、
配列の中の「さらに配列やオブジェクトになっているフィールド」を、 JSON 文字列として“平らにする”ことができる。
というところです。
JSON 変換ユーティリティで意識してほしい重要ポイント
「落ちない」ことを最優先にする
JSON 変換は、失敗すると例外が飛びます。 業務コードでは、ここで落ちると「画面が真っ白」「バッチが途中で止まる」など、かなり痛いことになります。
だからこそ、
toJsonArray では stringify の失敗を catch してログを出す。 fromJsonArray では parse の失敗を catch してログを出す。 配列でないものや空文字に対しても、必ず「何かしらの安全な値」を返す。
このあたりを「ユーティリティ側で」ちゃんとやっておくと、 呼び出し側のコードがシンプルになります。
「型の期待」をはっきりさせる
fromJsonArray は「配列を期待している」関数です。 もし JSON がオブジェクトだった場合は、警告を出して空配列を返しています。
このように、
このユーティリティは何を期待していて、何を返すのか。 期待と違うものが来たときはどう振る舞うのか。
をはっきりさせておくと、 チームで使うときに「なんとなく動いているけど、何が起きているか分からない」という状態を避けられます。
手を動かして「配列 ↔ JSON」の感覚をつかむ
次のコードを実行して、 「配列 → JSON」「JSON → 配列」「壊れた JSON の扱い」を体感してみてください。
function toJsonArray(array, pretty = false) {
if (!Array.isArray(array)) {
console.warn("toJsonArray: value is not an array", array);
return "[]";
}
const space = pretty ? 2 : 0;
try {
return JSON.stringify(array, null, space);
} catch (e) {
console.error("toJsonArray: stringify failed", e);
return "[]";
}
}
function fromJsonArray(json) {
if (typeof json !== "string") {
console.warn("fromJsonArray: value is not a string", json);
return [];
}
if (json.trim() === "") {
return [];
}
try {
const parsed = JSON.parse(json);
if (!Array.isArray(parsed)) {
console.warn("fromJsonArray: parsed value is not an array", parsed);
return [];
}
return parsed;
} catch (e) {
console.error("fromJsonArray: parse failed", e);
return [];
}
}
function demo() {
const users = [
{ id: 1, name: "Alice", active: true },
{ id: 2, name: "Bob", active: false },
];
console.log("=== toJsonArray compact ===");
console.log(toJsonArray(users));
console.log("=== toJsonArray pretty ===");
console.log(toJsonArray(users, true));
const json = `
[
{ "id": 1, "name": "Alice", "active": true },
{ "id": 2, "name": "Bob", "active": false }
]
`;
console.log("=== fromJsonArray ===");
console.log(fromJsonArray(json));
console.log("=== fromJsonArray broken ===");
console.log(fromJsonArray("not json"));
}
demo();
まとめ：JSON 変換ユーティリティで「配列を外の世界と安全につなぐ」
配列 ↔ JSON は、 「JavaScript の世界の配列を、API・ファイル・他システムとつなぐための基本の橋渡し」です。
プロジェクトに例えば次のような形で置いておくイメージです。
export function toJsonArray(array, pretty) { ... }
export function fromJsonArray(json) { ... }
そして、
API 通信、設定保存、ログ出力、ファイル入出力など、 「配列を文字列として外に出す／外から受け取る」ところでは、必ずこのユーティリティを通す。
こう決めておくと、 「JSON まわりで落ちる」「壊れたデータで事故る」といったトラブルが減り、 配列データが安心して“外の世界”と行き来できるようになっていきます。
JSON は、ただのフォーマットじゃなくて「約束事」です。 その約束を守るユーティリティを持っていると、業務コードの信頼性が一段上がります。