コピペでOK！CSV⇔JSON変換WebツールをHTML＋JSで簡単に作る方法

「CSVデータをJSONに変換したいけど、ツールを使うだけでは物足りない…」「自分で変換ツールを作ってみたい！」そんな方に向けて、この記事ではHTMLとJavaScriptだけで作れる「CSV⇔JSON変換ツール」の作り方をわかりやすく解説します。

専門的なフレームワークやサーバーの知識は不要。ブラウザで動くシンプルなツールを自作しながら、CSV形式やJSON構造への理解も深められます。学習目的でも、ポートフォリオ作成でも、「実践的なWebツール制作」に一歩踏み出せる内容です。

プログラミング初心者の方も、コピペから始められるように、ステップごとの解説付きで紹介していますので、ぜひ最後までご覧ください。

CSV⇔JSON変換ツールってどんなもの？

CSV⇔JSON変換ツールとは、その名の通り「CSV（カンマ区切りの表形式データ）」と「JSON（JavaScript Object Notation）」という2つの形式のデータを相互に変換できるツールです。

CSVとは？

CSV（Comma-Separated Values）は、表計算ソフト（例：Excel、Googleスプレッドシート）などでも扱えるシンプルなテキストデータ形式です。
各行が1つのレコードで、カンマで項目を区切るのが特徴です。

CSV例：
名前,年齢,職業
田中,30,エンジニア
佐藤,25,デザイナー

JSONとは？

一方、JSONはJavaScriptで扱いやすいデータ形式で、主にWeb開発でよく使われます。オブジェクトや配列の形でデータを表現することができます。

JSON例：
[
{ "名前": "田中", "年齢": 30, "職業": "エンジニア" },
{ "名前": "佐藤", "年齢": 25, "職業": "デザイナー" }
]

変換ツールの目的

このツールを使うことで、スプレッドシートで作ったデータをそのままWeb開発に活かしたり、API用のデータに整形したりといったことが簡単になります。

「CSV⇔JSON変換ツール」は、日常業務から開発現場まで幅広く役立つ、とても便利なツールなのです。

こんな人におすすめ！ツール作成で得られるメリット

「CSV⇔JSON変換ツール」は、さまざまな立場の方にとって便利なツールです。特に次のような方におすすめです。

Web開発初心者

JavaScriptやフロントエンドの学習を始めたばかりの方にとって、JSON形式に慣れることは必須です。
このツールを使えば、表形式のデータを簡単にJSONに変換できるので、コードに組み込む練習にぴったりです。

データの扱いに不慣れな方

「CSVとJSONって何が違うの？」という方でも安心。GUIベースのツールなので、専門的な操作やコマンドは不要です。コピペだけで変換できるので、非エンジニアの方にもおすすめです。

現場でデータを扱う人

マーケティング担当やデータ分析の担当者など、CSVで出力されたデータを他システムと連携する必要がある方にとって、JSON変換は欠かせません。
このツールがあれば、余計なエクセル操作や手作業を減らすことができます。

実際に作ってみよう｜シンプルなCSV→JSON変換ツール

ここでは、初心者でも実装できるCSV→JSON変換ツールの作り方を、ステップごとに丁寧に解説します。HTMLとJavaScriptだけで、ブラウザ上で動作するシンプルなツールを作成していきましょう。

ステップ0：HTMLファイルを作成する

まずは、メモ帳などで以下の内容をコピーして、ファイル名を csv_to_json.html として保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSV to JSON</title>
</head>
<body>
  <h1>CSV→JSON変換ツール</h1>
  <textarea id="csvInput" rows="10" cols="50" placeholder="CSVデータを入力してください"></textarea><br>
  <button onclick="convertCSVtoJSON()">変換する</button>
  <pre id="jsonOutput"></pre>

  <script>
    function convertCSVtoJSON() {
      const csv = document.getElementById("csvInput").value;
      const lines = csv.split("\n");
      const headers = lines[0].split(",");
      const result = [];

      for (let i = 1; i < lines.length; i++) {
        const obj = {};
        const currentLine = lines[i].split(",");
        if (currentLine.length !== headers.length) continue;

        headers.forEach((header, index) => {
          obj[header.trim()] = currentLine[index].trim();
        });

        result.push(obj);
      }

      document.getElementById("jsonOutput").textContent = JSON.stringify(result, null, 2);
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>CSV→JSON変換ツール</h1>

function convertCSVtoJSON() {

const csv = document.getElementById("csvInput").value;

const lines = csv.split("\n");

const headers = lines[0].split(",");

const result = [];

for (let i = 1; i < lines.length; i++) {

const obj = {};

const currentLine = lines[i].split(",");

if (currentLine.length !== headers.length) continue;

headers.forEach((header, index) => {

obj[header.trim()] = currentLine[index].trim();

});

result.push(obj);

}

document.getElementById("jsonOutput").textContent = JSON.stringify(result, null, 2);

}

</script>

</body>

</html>

ステップ1：ブラウザで動かす

保存した csv_to_json.html をダブルクリックすると、ブラウザで開きます。
上部の入力欄に以下のようなCSVを入力してみましょう。

CSVサンプル：
名前,年齢,職業
田中,30,エンジニア
佐藤,28,デザイナー
「変換する」ボタンを押すと、下にJSON形式のデータが表示されます。

補足：このツールのポイント（ソース解説つき）

このツールは、JavaScriptの基本的な文法だけで動作するシンプルな設計です。以下のポイントを押さえると理解が深まります。

`split("\n")` で行ごとに分割

CSVは改行で区切られているため、まず csv.split("\n") で行単位の配列に変換しています。

const lines = csv.split("\n");

1	const lines = csv.split("\n");

1行目はヘッダーとして抽出

CSVの1行目はカラム名（例：名前, 年齢）なので、lines[0] を使って項目名のリストを作成します。

const headers = lines[0].split(",");

1	const headers = lines[0].split(",");

2行目以降をループでオブジェクト化

残りの行はデータ行として、1行ずつループしてJavaScriptオブジェクト形式に変換しています。

for (let i = 1; i < lines.length; i++) {
  const obj = {};
  const currentLine = lines[i].split(",");
  headers.forEach((header, index) => {
    obj[header.trim()] = currentLine[index].trim();
  });
  result.push(obj);
}

for (let i = 1; i < lines.length; i++) {

const obj = {};

const currentLine = lines[i].split(",");

headers.forEach((header, index) => {

obj[header.trim()] = currentLine[index].trim();

});

result.push(obj);

}

`JSON.stringify(..., null, 2)` で見やすい整形

最終的に、オブジェクト配列を JSON 文字列に変換し、インデント（2スペース）で整形表示しています。

JSON.stringify(result, null, 2);

1	JSON.stringify(result, null, 2);

このように、CSV→JSON変換の基本処理がシンプルなコードで完結しているため、初心者でも理解しやすく、応用もしやすい構造になっています。

さらに実用的に！コピー機能やJSON→CSV変換を追加

この章では、基本のCSV→JSON変換に加えて、使いやすさを高めるための追加機能について解説します。

コピー機能で結果の再利用がスムーズに

変換結果のJSONデータをワンクリックでコピーできるようにすることで、以下のような活用が簡単になります：

他のアプリやエディターに貼り付けて再利用
JSON検証ツールやAPIテストツールへの入力
コードの一部として流用

コピー機能の実装には navigator.clipboard.writeText() を使用します：

function copyToClipboard() {
  const text = document.getElementById("jsonOutput").textContent;
  navigator.clipboard.writeText(text).then(() => {
    alert("コピーしました！");
  });
}

function copyToClipboard() {

const text = document.getElementById("jsonOutput").textContent;

navigator.clipboard.writeText(text).then(() => {

alert("コピーしました！");

});

}

JSON→CSV変換にも対応すると、より多用途に！

多くのユーザーは、JSONからCSVに戻したいシーンもあります。たとえば：

JSON形式で受け取ったAPIレスポンスを表形式で閲覧したい
スプレッドシートで編集できる形にしたい

この変換は、以下の手順で実現できます：

JSON文字列をJSON.parse()でオブジェクトに変換
キーを抽出してCSVの1行目（ヘッダー）を生成
各オブジェクトの値を1行ずつ追加してCSVを完成

function jsonToCSV(json) {
  const arr = JSON.parse(json);
  const headers = Object.keys(arr[0]);
  const csvRows = [
    headers.join(","),
    ...arr.map(obj => headers.map(h => obj[h]).join(","))
  ];
  return csvRows.join("\n");
}

function jsonToCSV(json) {

const arr = JSON.parse(json);

const headers = Object.keys(arr[0]);

const csvRows = [

headers.join(","),

...arr.map(obj => headers.map(h => obj[h]).join(","))

];

return csvRows.join("\n");

}

すべての機能を盛り込んだソースコード（HTML＋JavaScript）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSV⇔JSON変換ツール</title>
  <style>
    textarea {
      width: 100%;
      height: 180px;
      margin-bottom: 10px;
      font-family: monospace;
    }
    button {
      margin-right: 10px;
      padding: 5px 10px;
    }
    pre {
      background: #f4f4f4;
      padding: 10px;
      overflow-x: auto;
    }
  </style>
</head>
<body>

  <h2>CSV入力</h2>
  <textarea id="csvInput" placeholder="名前,年齢&#10;田中,30&#10;鈴木,25"></textarea>
  <button onclick="convertCSVtoJSON()">CSV→JSON変換</button>

  <h2>JSON出力</h2>
  <pre id="jsonOutput"></pre>
  <button onclick="copyJSON()">JSONをコピー</button>

  <hr>

  <h2>JSON入力</h2>
  <textarea id="jsonInput" placeholder='[{"名前":"田中","年齢":"30"},{"名前":"鈴木","年齢":"25"}]'></textarea>
  <button onclick="convertJSONtoCSV()">JSON→CSV変換</button>

  <h2>CSV出力</h2>
  <pre id="csvOutput"></pre>
  <button onclick="copyCSV()">CSVをコピー</button>

  <script>
    function convertCSVtoJSON() {
      const csv = document.getElementById("csvInput").value.trim();
      const [headerLine, ...lines] = csv.split("\n");
      const headers = headerLine.split(",");

      const result = lines.map(line => {
        const values = line.split(",");
        let obj = {};
        headers.forEach((key, i) => obj[key] = values[i]);
        return obj;
      });

      document.getElementById("jsonOutput").textContent = JSON.stringify(result, null, 2);
    }

    function copyJSON() {
      const text = document.getElementById("jsonOutput").textContent;
      navigator.clipboard.writeText(text).then(() => alert("JSONをコピーしました！"));
    }

    function convertJSONtoCSV() {
      try {
        const jsonStr = document.getElementById("jsonInput").value.trim();
        const data = JSON.parse(jsonStr);

        if (!Array.isArray(data) || data.length === 0) throw new Error("配列形式のJSONを入力してください");

        const headers = Object.keys(data[0]);
        const csv = [
          headers.join(","),
          ...data.map(obj => headers.map(h => obj[h] ?? "").join(","))
        ].join("\n");

        document.getElementById("csvOutput").textContent = csv;
      } catch (e) {
        document.getElementById("csvOutput").textContent = "エラー: " + e.message;
      }
    }

    function copyCSV() {
      const text = document.getElementById("csvOutput").textContent;
      navigator.clipboard.writeText(text).then(() => alert("CSVをコピーしました！"));
    }
  </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>CSV⇔JSON変換ツール</title>

<style>

textarea {

width: 100%;

height: 180px;

margin-bottom: 10px;

font-family: monospace;

}

button {

margin-right: 10px;

padding: 5px 10px;

}

pre {

background: #f4f4f4;

padding: 10px;

overflow-x: auto;

}

</style>

</head>

<body>

<h2>CSV入力</h2>

<button onclick="convertCSVtoJSON()">CSV→JSON変換</button>

<h2>JSON出力</h2>

<button onclick="copyJSON()">JSONをコピー</button>

<hr>

<h2>JSON入力</h2>

<button onclick="convertJSONtoCSV()">JSON→CSV変換</button>

<h2>CSV出力</h2>

<button onclick="copyCSV()">CSVをコピー</button>

function convertCSVtoJSON() {

const csv = document.getElementById("csvInput").value.trim();

const [headerLine, ...lines] = csv.split("\n");

const headers = headerLine.split(",");

const result = lines.map(line => {

const values = line.split(",");

let obj = {};

headers.forEach((key, i) => obj[key] = values[i]);

return obj;

});

document.getElementById("jsonOutput").textContent = JSON.stringify(result, null, 2);

}

function copyJSON() {

const text = document.getElementById("jsonOutput").textContent;

navigator.clipboard.writeText(text).then(() => alert("JSONをコピーしました！"));

}

function convertJSONtoCSV() {

try {

const jsonStr = document.getElementById("jsonInput").value.trim();

const data = JSON.parse(jsonStr);

if (!Array.isArray(data) || data.length === 0) throw new Error("配列形式のJSONを入力してください");

const headers = Object.keys(data[0]);

const csv = [

headers.join(","),

...data.map(obj => headers.map(h => obj[h] ?? "").join(","))

].join("\n");

document.getElementById("csvOutput").textContent = csv;

} catch (e) {

document.getElementById("csvOutput").textContent = "エラー: " + e.message;

}

function copyCSV() {

const text = document.getElementById("csvOutput").textContent;

navigator.clipboard.writeText(text).then(() => alert("CSVをコピーしました！"));

}

</script>

</body>

</html>

主な特徴

CSV→JSON変換
JSON→CSV変換（配列＋単純オブジェクトのみ対応）
それぞれの出力内容をワンクリックでコピー可能
エラー処理あり（JSON側）
日本語キー・値対応済み

データ形式の違い（CSVとJSON）を実感できる
配列や文字列操作の理解が深まる

といったスキルアップ効果も大きいのがポイントです。

さらに学びを深めたい方は、おすすめの書籍や講座もあわせてご覧ください。
自作ツールを通して、着実にプログラミング力を育てていきましょう！

動くものを作るのが、いちばんの学びになるよ！少しずつ機能を増やして、レベルアップしよう！

ほーく

【CSV⇔JSON変換ツールはこちらから今すぐ使えます】▼

: CSV⇔JSON変換ツール｜無料＆ブラウザ完結！初心者でも簡単に使える！
「CSVをJSONに変換したいけど、うまくいかない…」そんなお悩みをお持ちの方へ。本記事では、インストール不要・完全無料で使える『CSV⇔JSON変換ツール』をご紹介します。CSVファイルをJSON形 ...

【CSV⇔JSON変換ツールの活用アイデアはこちらの記事で紹介しています】▼

: CSV⇔JSON変換ツール活用術5選｜データ整形やAPI連携がラクになる！
CSVとJSON――どちらもデータのやり取りや保存によく使われる形式ですが、いざ変換しようとすると「どうすればいいの？」と戸惑う方も多いのではないでしょうか。特に初心者にとっては、構文の違いやエラー対 ...

コピペでOK！CSV⇔JSON変換WebツールをHTML＋JSで簡単に作る方法

CSV⇔JSON変換ツールってどんなもの？

CSVとは？

JSONとは？

変換ツールの目的

こんな人におすすめ！ツール作成で得られるメリット

Web開発初心者

データの扱いに不慣れな方

現場でデータを扱う人

実際に作ってみよう｜シンプルなCSV→JSON変換ツール

ステップ0：HTMLファイルを作成する

ステップ1：ブラウザで動かす

補足：このツールのポイント（ソース解説つき）

`split("\n")` で行ごとに分割

1行目はヘッダーとして抽出

2行目以降をループでオブジェクト化

`JSON.stringify(..., null, 2)` で見やすい整形

さらに実用的に！コピー機能やJSON→CSV変換を追加

コピー機能で結果の再利用がスムーズに

JSON→CSV変換にも対応すると、より多用途に！

すべての機能を盛り込んだソースコード（HTML＋JavaScript）

主な特徴

おすすめの学習リソース｜HTMLやJavaScriptをもっと学びたい方へ

書籍でじっくり学びたい方におすすめ

『いちばんやさしいデータベースの本』 (技評SE選書)

『確かな力が身につくJavaScript超入門』 (SBクリエイティブ)

おすすめのオンライン講座

Udemy｜世界最大級のオンライン学習プラットフォーム

まとめ｜CSV⇔JSON変換ツールを自作して、スキルと理解を深めよう！

関連記事

VSCode JavaScript拡張機能｜初心者はまずこれだけ入れればOK【厳選3つ】

Visual Studio Code（VSCode）インストール方法｜初心者でも5分でできる日本語化ガイド【Windows/Mac 両対応】

HTMLとCSS 実践編｜初心者でもコピペで作れる！モダンUIデザイン入門

HTMLとCSS 基礎入門｜初心者でも今日から作れる！わかりやすい超入門ガイド

JavaScript初心者でもできる！文字数カウンターを作りながら基礎文法を学ぼう

コピペでOK！CSV⇔JSON変換WebツールをHTML＋JSで簡単に作る方法

CSV⇔JSON変換ツールってどんなもの？

CSVとは？

JSONとは？

変換ツールの目的

こんな人におすすめ！ツール作成で得られるメリット

Web開発初心者

データの扱いに不慣れな方

現場でデータを扱う人

実際に作ってみよう｜シンプルなCSV→JSON変換ツール

ステップ0：HTMLファイルを作成する

ステップ1：ブラウザで動かす

補足：このツールのポイント（ソース解説つき）

split("\n") で行ごとに分割

1行目はヘッダーとして抽出

2行目以降をループでオブジェクト化

JSON.stringify(..., null, 2) で見やすい整形

さらに実用的に！コピー機能やJSON→CSV変換を追加

コピー機能で結果の再利用がスムーズに

JSON→CSV変換にも対応すると、より多用途に！

すべての機能を盛り込んだソースコード（HTML＋JavaScript）

主な特徴

おすすめの学習リソース｜HTMLやJavaScriptをもっと学びたい方へ

書籍でじっくり学びたい方におすすめ

『いちばんやさしいデータベースの本』 (技評SE選書)

『確かな力が身につくJavaScript超入門』 (SBクリエイティブ)

おすすめのオンライン講座

Udemy｜世界最大級のオンライン学習プラットフォーム

まとめ｜CSV⇔JSON変換ツールを自作して、スキルと理解を深めよう！

関連記事

`split("\n")` で行ごとに分割

`JSON.stringify(..., null, 2)` で見やすい整形