JavaScriptでローカルファイルを扱う7つの方法

はじめに

この記事を読めば、JavaScriptでローカルファイルを読み込み、編集する方法がマスターできるようになります。

初心者向けに詳しく徹底解説しているので、安心して学べます。

●JavaScriptでローカルファイルを読み込む方法

JavaScriptでローカルファイルを読み込む方法はいくつかありますが、ここでは主に3つの方法を紹介します。

○方法1: FileReader

API FileReader APIを使うと、ローカルファイルを読み込むことができます。

// ファイルを読み込む関数
function readFile(file) {
  const reader = new FileReader();

  // 読み込みが完了したら、結果を表示
  reader.onload = function (event) {
    console.log(event.target.result);
  };

  // ファイルをテキストとして読み込む
  reader.readAsText(file);
}

○方法2: inputタグ

inputタグのtype属性に”file”を指定することで、ファイル選択ダイアログを表示し、ローカルファイルを読み込むことができます。

<!-- inputタグでファイルを選択 -->
<input type="file" id="fileInput" />

<script>
  // inputタグの要素を取得
  const fileInput = document.getElementById("fileInput");

  // ファイルが選択されたら、読み込む
  fileInput.addEventListener("change", function (event) {
    const file = event.target.files[0];
    readFile(file);
  });

  // FileReader APIを使ってファイルを読み込む関数
  function readFile(file) {
    const reader = new FileReader();

    // 読み込みが完了したら、結果を表示
    reader.onload = function (event) {
      console.log(event.target.result);
    };

    // ファイルをテキストとして読み込む
    reader.readAsText(file);
  }
</script>

○方法3: ドラッグ＆ドロップ

ドラッグ＆ドロップを使って、ローカルファイルを読み込む方法もあります。

<!-- ドラッグ＆ドロップエリア -->
<div id="dropArea">ここにファイルをドロップ</div>

<script>
  // ドラッグ＆ドロップエリアの要素を取得
  const dropArea = document.getElementById("dropArea");

  // ドラッグ中の要素がエリアに入ったときのイベント
  dropArea.addEventListener("dragover", function (event) {
    event.preventDefault();
  });

  // ドロップされたファイルを読み込む
  dropArea.addEventListener("drop", function (event) {
    event.preventDefault();
    const file = event.dataTransfer.files[0];
    readFile(file);
  });

  // FileReader APIを使ってファイルを読み込む関数（前述のものと同じ）
  function readFile(file) {
    const reader = new FileReader();

    // 読み込みが完了したら、結果を表示
    reader.onload = function (event) {
      console.log(event.target.result);
    };

    // ファイルをテキストとして読み込む
    reader.readAsText(file);
  }
</script>

●ローカルファイルの編集

ローカルファイルを編集する方法もいくつかありますが、ここではBlobオブジェクトとFile APIを紹介します。

○方法4: Blobオブジェクト

Blobオブジェクトは、バイナリデータを表現するオブジェクトで、ファイルの読み書きやデータの変換に利用できます。

// 文字列をBlobオブジェクトに変換
const text = "こんにちは、世界！";
const blob = new Blob([text], { type: "text/plain" });

// Blobオブジェクトをファイルに保存
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "hello_world.txt";
a.click();

○方法5: File API

File APIを使って、ローカルファイルの読み込みや書き込みを行うことができます。

<!-- inputタグでファイルを選択 -->
<input type="file" id="fileInput" />

<script>
  // inputタグの要素を取得
  const fileInput = document.getElementById("fileInput");

  // ファイルが選択されたら、読み込む
  fileInput.addEventListener("change", function (event) {
    const file = event.target.files[0];
    readFile(file);
  });

  // FileReader APIを使ってファイルを読み込む関数
  function readFile(file) {
    const reader = new FileReader();

    // 読み込みが完了したら、結果を表示
    reader.onload = function (event) {
      console.log(event.target.result);
    };

    // ファイルをテキストとして読み込む
    reader.readAsText(file);
  }
</script>

●応用例とサンプルコード

○応用例1：CSVファイルの読み込み

CSVファイルを読み込んで、データを扱う方法を紹介します。

<!-- inputタグでCSVファイルを選択 -->
<input type="file" id="fileInput" accept=".csv" />

<script>
  // inputタグの要素を取得
  const fileInput = document.getElementById("fileInput");

  // ファイルが選択されたら、読み込む
  fileInput.addEventListener("change", function (event) {
    const file = event.target.files[0];
    readFile(file);
  });

  // FileReader APIを使ってファイルを読み込む関数
  function readFile(file) {
    const reader = new FileReader();

    // 読み込みが完了したら、CSVデータを処理
    reader.onload = function (event) {
      const csvData = event.target.result;
      processData(csvData);
    };

    // ファイルをテキストとして読み込む
    reader.readAsText(file);
  }

  // CSVデータを処理する関数
  function processData(csvData) {
    // CSVデータを行に分割
    const rows = csvData.split("\n");

    // 各行をカンマで分割し、2次元配列に変換
    const data = rows.map(row => row.split(","));

    // データを表示
    console.log(data);
  }
</script>

○応用例2：画像ファイルのプレビュー

画像ファイルを読み込んでプレビュー表示する方法を紹介します。

<!-- inputタグで画像ファイルを選択 -->
<input type="file" id="fileInput" accept="image/*" />

<!-- 画像のプレビュー表示エリア -->
<img id="preview" width="200" />

<script>
  // inputタグの要素を取得
  const fileInput = document.getElementById("fileInput");

  // プレビューエリアの要素を取得
  const preview = document.getElementById("preview");

  // ファイルが選択されたら、プレビュー表示
  fileInput.addEventListener("change", function (event) {
    const file = event.target.files[0];
    showPreview(file);
  });

  // FileReader APIを使って画像ファイルのプレビューを表示する関数
  function showPreview(file) {
    const reader = new FileReader();

    // 読み込みが完了したら、プレビューエリアに表示
    reader.onload = function (event) {
      preview.src = event.target.result;
    };

    // ファイルをDataURLとして読み込む
    reader.readAsDataURL(file);
  }
</script>