CSVテンプレート置換

CSV Template Replacement

CSVデータを読み取り、自動的にパターンを検出し、自由なテンプレートに当てはめて一括変換できるツールです。例えば、データの差し込みやテンプレート出力が必要な業務や開発の現場で、「表形式のデータを手動でコピペして整える」ような手間を劇的に省いてくれます。 CSVを貼り付けてテンプレートを記述するだけで、各行のデータに合わせたアウトプットが生成されるので、メール本文の自動生成、バッチ登録の準備、帳票出力の下書きなど、さまざまな用途に活用できます。 CSVを元に何かを一括で作りたいと思ったことがあるなら、このツールで効率よく解決できます。

コラム・豆知識
ツールの仕組み解説

CSVデータを入力してください

構造を解析

コラム・豆知識

CSV形式とは何か

CSV（Comma-Separated Values）形式は、データをシンプルなテキストとして表現するための汎用フォーマットです。
各行が1つのレコードに対応し、値同士はカンマ（,）で区切られます。
特別なソフトウェアを必要とせず、.csvファイルはスプレッドシートアプリケーションやエディタでも閲覧・編集できるため、業務現場でも広く活用されています。

Web制作におけるCSVの活用シーン

Web制作の現場では、CSV形式は以下のような用途で頻繁に使用されます。
例えば、商品一覧のデータ入力、問い合わせデータのエクスポート、ユーザーリストのインポートなどです。
HTMLテンプレートにCSVを流し込む形で静的コンテンツを大量に自動生成するという活用も、効率化の一環として非常に有用です。

CSVの構造と注意点

CSVは単純なフォーマットに見えて、細かな仕様を無視するとデータ破損の原因になります。
値の中にカンマや改行、引用符（"）が含まれる場合、それらのフィールドは必ず"..."で囲う必要があります。
また、"をフィールド内で使う場合は""と二重にすることでエスケープします。
こうした仕様を理解していないと、正確にデータを読み込めない原因になります。

エンコーディングの罠

CSVファイルのエンコーディングにも注意が必要です。
特に日本語を含むデータでは、Shift_JISとUTF-8の混在がトラブルを引き起こすことがあります。
WebアプリでCSVを扱う場合、ブラウザでの互換性やサーバー側の文字コード処理も考慮し、UTF-8（BOMなし）を標準とするのが無難です。

CSVの限界と代替手段

CSVはシンプルで扱いやすい一方、ネスト構造やデータ型の明示ができないという制限があります。
複雑な構造のデータを扱う場合、JSONやXMLなど、より表現力のあるフォーマットが適していることもあります。
しかし「人間がすぐに編集・共有できる」点において、CSVは今後もWeb制作における重要なデータ形式の一つであり続けるでしょう。

ツールの仕組み解説

ユーザーが貼り付けたCSV文字列を、配列に変換する役割です。

const csvInput = document.getElementById('csvInput').value;

csvInputはテキストエリアの入力値。これを行ごと、カラムごとに分割していきます。

csvText = csvText.replace(/\r\n/g, '\n').replace(/\r/g, '\n');

環境によって異なる改行コードを統一しておくのは、CSVパースでは基本のテクニックです。

if (csvText[i] === '"') { ... }

セル内にカンマや改行が含まれている場合のために、CSVでは値を"で囲むことがあります。これに正しく対応するためのロジックです。

CSVをパースしたあと、テンプレートで使える変数を自動で作ります。

pattern.push(`[item_${i + 1}]`);

たとえば列が3つあれば、[item_1], [item_2], [item_3]のように自動でパターンを構成します。

テンプレートを1行ずつ展開し、[item_1]などのプレースホルダーをCSVの値に置き換えます。

output = output.replace(new RegExp(escapeRegExp(placeholder), 'g'), value);

テンプレート内に複数回同じプレースホルダーが出てきても全て置き換わるよう、正規表現で全体を対象にしています。

列が足りなくて置き換えられなかった[item_◯]は、あとでまとめて空文字にします。

output = output.replace(/\[item_\d+\]/g, '');