日々の業務でCSVを何度も扱う中で、「とにかくまとめたいだけ」という場面は意外と多いです。
今回は、コピーしたCSVをどんどん足していくだけのシンプルなWebアプリをJavaScriptで作ります。
複雑なライブラリは使わず、ブラウザだけで完結する軽量な構成です。
Contents
シンプルなCSV蓄積アプリとは何か
このアプリは「入力→追加→蓄積→コピー」という4ステップだけで構成されます。
テキストボックスにCSVを貼り付けてボタンを押すと、別の領域に追記されていきます。
データベースも不要で、ブラウザ上の状態だけで完結するのが特徴です。
CSV編集ツールやExcelを立ち上げるほどでもない作業にちょうどハマります。
なぜこの仕組みが便利なのか
CSVの結合作業は、実務ではかなりの頻度で発生します。
たとえばログの結合、複数画面からの出力統合、テストデータの集約などです。
Excelを使うと操作コストが高く、貼り付けミスも起きやすいです。
一方でこのアプリは「追記のみ」に機能を絞っているため、操作が単純でミスが減ります。
体感的には作業時間が30〜50％ほど短縮されるケースもあります。
実装コード（WordPressにもそのまま埋め込み可能）
以下のコードはそのまま「カスタムHTMLブロック」に貼り付けて使えます。
JavaScriptは純粋なDOM操作のみで、外部ライブラリは不要です。
<div style="max-width:800px; margin:auto;">
<h3>CSV入力</h3>
<textarea id="inputCsv" rows="8" style="width:100%;" placeholder="ここにCSVを貼り付け"></textarea>
<br><br>
<button onclick="addCsv()">追加する</button>
<hr>
<h3>蓄積結果</h3>
<textarea id="outputCsv" rows="10" style="width:100%;" placeholder="ここに蓄積されます"></textarea>
<br><br>
<button onclick="copyCsv()">コピー</button>
</div>
<script>
function addCsv() {
const input = document.getElementById("inputCsv");
const output = document.getElementById("outputCsv");
const inputValue = input.value.trim();
if (!inputValue) return;
if (output.value.trim()) {
output.value += "\n" + inputValue;
} else {
output.value = inputValue;
}
input.value = "";
}
function copyCsv() {
const output = document.getElementById("outputCsv");
output.select();
document.execCommand("copy");
alert("コピーしました");
}
</script>
処理のポイント解説
入力と出力の分離
入力用と出力用のtextareaを分けることで、役割が明確になります。
この構造はフォーム設計でもよく使われる基本パターンです。
追記ロジック
output.value += “\n” + inputValue の形で単純に連結しています。
ここを分岐しているのは、最初の1回だけ改行を入れないためです。
trimの重要性
trim()を使うことで、余計な空行やスペース混入を防げます。
実務ではこの一手でデータ品質がかなり安定します。
コピー処理
document.execCommand(“copy”)は古いAPIですが、現在でも多くの環境で動作します。
一方で最新環境ではClipboard APIの利用も増えています。