JavaScriptで配列をJSONに変換する方法｜JSON.stringify()の使い方を解説
JavaScriptで配列をJSON形式の文字列に変換するには、JSON.stringify()メソッドを使います。このメソッドは、配列やオブジェクトを引数として渡すだけで、JSON形式の文字列を簡単に生成できる非常に便利な機能です。
サンプルコード
以下は、ボタンをクリックすると配列がJSONに変換されて画面に表示されるシンプルなデモです。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>配列をJSONに変換する</h1>
<button class="Btn">CLICK HERE</button>
<p class="sample"></p>
<h3>上のボタンをクリックすると、配列がJSONに変換されます</h3>
<script>
let sampleEle = document.querySelector(".sample");
let arr = [22, "A", 1, "HELLO", "J", 9, 22];
sampleEle.innerHTML = arr + "<br>";
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.innerHTML += JSON.stringify(arr);
});
</script>
</body>
</html>
コードのポイント
- JSON.stringify(arr)：配列全体をJSON形式の文字列に変換します。数値や文字列が混在していても、そのまま正しく変換されます。
- addEventListener("click", ...)：ボタンがクリックされたタイミングで変換処理を実行します。
- innerHTML：変換前の配列と、変換後のJSON文字列を順に画面へ表示しています。
実行結果
ページを読み込むと、まず元の配列の内容が表示されます。
「CLICK HERE」ボタンをクリックすると、配列がJSON形式の文字列に変換され、下段に追記表示されます。
補足：見やすく整形して出力するには
JSON.stringify()の第3引数にインデント幅（スペース数）を指定すると、改行やインデント付きの読みやすいJSON文字列を出力できます。
JSON.stringify(arr, null, 2);
APIへのデータ送信やローカルストレージへの保存など、配列を文字列として扱いたい場面で、この変換方法は頻繁に活用されます。
-
JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説
JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。 配列をセットに変換するサンプルコード 以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co
-
JavaScriptのObject.keys().map()とArray.map()の違いを徹底解説
JavaScriptにおいて、Array.map()は配列の各要素に関数を適用し、その結果を新しい配列として返すメソッドです。一方、オブジェクトには直接map()メソッドが用意されていないため、Object.keys().map()という形で、まずObject.keys()を使ってオブジェクトのキーを配列として取得し、そこにmap()を適用するのが一般的なテクニックとなります。 この記事では、両者の使い方の違いを、実際に動作するサンプルコードと実行結果をもとにわかりやすく解説します。 サンプルコード 以下は、Object.keys().map()とArray.map()の動作を比較できるJa