JavaScript：文字列とJSON（実務のデータ処理の入口）

投稿日：2026-01-13

音声

※ AI音声で読み上げます

使い分けの基準：まずは「読みやすい最短の意図」で選びます。単純な存在チェックはincludes、1箇所の置換はreplace、複数回の置換や条件付きの置換は正規表現のreplaceを検討し、複雑になりそうなら“文字列を分割→配列処理→結合”の方が保守しやすいことがあります。

JSON.stringify / JSON.parse

JSONは「データを文字列にして渡す」ための共通形式です。JavaScriptではJSON.stringifyでオブジェクトをJSON文字列にし、JSON.parseでJSON文字列をオブジェクトに戻します。

JSON.stringify(value)は、通信や保存向けに文字列化します。
JSON.parse(text)は、受け取ったJSON文字列をデータに復元します。

要チェックな点として、undefinedや関数はJSONにできず、Dateは文字列として出力されます。復元時に日付型へ戻す場合は、別途変換が必要です。

最小コード：

const data = { name: "田中", tags: ["js", "json"] };
const json = JSON.stringify(data);
const parsed = JSON.parse(json);
console.log(`ユーザー: ${parsed.name}、タグ数: ${parsed.tags.length}`);

よくあるJSONエラー（ダブルクォート等）

JSONは「JavaScriptのオブジェクト表記に似ていますが別物」です。特に次が典型的な落とし穴です。

キーと文字列はダブルクォート（"）が必須で、シングルクォートは使えません。
末尾カンマは使えません。
undefinedや関数は表現できず、循環参照（自分自身を参照する構造）はJSON.stringifyでエラーになり得ます。

よくあるミスは、JSON.parse("{'name':'田中'}")のように、JSONではなく「JavaScriptっぽい文字列」を渡してSyntaxErrorになるケースです。対策は「JSONは必ずダブルクォートの厳密な形式で作る」ことで、可能なら手書きせずJSON.stringifyで生成した文字列を使うのが安全です。

画面表示とデータの分離

実務では「データ（状態）」と「画面表示（DOM）」を分けるほど変更に強くなります。データはオブジェクトで持ち、画面は描画関数がそのデータから作る形にすると、責務が整理されます。

貼り付け場所は、CodePenの「HTML」欄にHTML、「JS」欄にJavaScriptを貼り付けます。ローカルなら同等のHTMLファイルでも問題ありません。

// HTML欄
  <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
  <input id="input" placeholder="名前を入力（例：佐藤）" />
  <button id="btn">更新</button>
</div>

<p id="out" style="margin-top:12px;"></p>

// JS欄
// データ（状態）
const state = {
  user: { name: "田中" },
  tags: ["js", "json"]
};

// 表示だけを担当する関数（データ→画面）
function render() {
  const out = document.getElementById("out");
  const message = `ユーザー: ${state.user.name} / タグ: ${state.tags.join(", ")}`;
  out.textContent = message;
}

document.getElementById("btn").addEventListener("click", () => {
  const input = document.getElementById("input").value.trim();

  // 例：簡単な整形（空なら更新しない）
  if (input.includes(" ")) {
    state.user.name = input.replace(/\s+/g, " ");
  } else if (input !== "") {
    state.user.name = input;
  }

  render();
});

// 初期描画
render();

実行方法は、ブラウザでページを開き、入力欄に文字を入れてボタンを押します。CodePenならRunでも実行できます。

確認方法は、画面の表示が更新されることを見ます。必要ならConsoleで例外が出ていないことも確認します。

注意（ここだけ）

JSONは「キーも値も基本ダブルクォート」です。シングルクォートや末尾カンマはエラーになります。
JSON.parse は壊れた入力で例外を投げるので、外部データや保存データは try/catch で守ります。
ユーザー入力を innerHTML に入れるのは避けます。基本は textContent を使います（XSS対策）。

要約

テンプレートリテラル（${}）で、変数や式を読みやすく文字列に埋め込めます。
includesやreplaceなどの文字列メソッドで、判定・置換・整形を手早く実装できます。
JSON.stringifyで文字列化し、JSON.parseで復元するのがJSON入出力の基本です。
JSONはダブルクォート必須・末尾カンマ不可などの“厳密な形式”があり、そこがエラー原因になりやすいです。
データ（state）と画面表示（render/DOM）を分離すると、変更に強い実装になります。

JavaScript：文字列とJSON（実務のデータ処理の入口）

音声

目次

テンプレートリテラル（${}）

よく使う文字列メソッド（includes/replaceなど）

JSON.stringify / JSON.parse

よくあるJSONエラー（ダブルクォート等）

画面表示とデータの分離

注意（ここだけ）

要約