ブラウザ上でJavaScript単独でファイル書き込みは可能？代替手段とサンプルコード

2024-05-19

JavaScriptとHTMLだけでファイル書き込みは可能か？

理由は、セキュリティ上の制約です。悪意のあるJavaScriptコードが、ユーザーの許可なくファイルに書き込み、個人情報などを窃取したり、システムを破壊したりするのを防ぐためです。

しかし、いくつかの代替手段で疑似的なファイル書き込みを実現することは可能です。以下、代表的な方法をご紹介します。

Blob APIとダウンロード

この方法は、JavaScriptでデータをBLOB形式に変換し、仮想ファイルを作成し、ユーザーにダウンロードさせるというものです。

具体的には、以下のような手順で実行します。

データをBLOB形式に変換
仮想ファイルを作成
ダウンロード用のリンクを作成
ユーザーにダウンロードを促す

この方法の利点は、比較的シンプルなコードで実現できることです。一方、ユーザーがファイルをダウンロードする必要があるため、必ずしもシームレスな操作とは言えません。

IndexedDBは、ブラウザ内に保存できるデータベースです。JavaScriptを使ってデータを読み書きでき、比較的永続的な保存が可能です。

IndexedDBを開く
データをストアに保存
必要に応じてデータを読み出す

IndexedDBは、比較的多くのデータを保存したい場合や、オフラインでの利用を想定する場合に有効です。一方、ブラウザごとに仕様が異なる場合があるため、注意が必要です。

Web Storageは、ブラウザ内に少量のデータを保存できる仕組みです。localStorageとsessionStorageの2種類があり、それぞれ異なる特性を持っています。

localStorage: ブラウザを閉じてもデータを保持

Web Storageを開く
データを保存

Web Storageは、少量のデータを一時的に保存したい場合に有効です。一方、保存できるデータ量が少ないという制約があります。

Node.jsは、JavaScriptを使ってサーバーサイドのプログラムを実行できる環境です。Node.jsを使用すれば、ファイルシステムへのアクセスが可能になり、JavaScript単独でファイル書き込みを実行できます。

Node.jsでファイルを開く
データを書き込む
ファイルを閉じる

Node.jsは、サーバサイドでの処理が必要な場合に有効です。一方、ブラウザ上で動作させるためには、Node.jsのランタイム環境が必要となります。

ブラウザ上でJavaScript単独でファイル書き込みを行うには、いくつかの制約があります。それぞれの方法のメリットとデメリットを理解した上で、目的に合った方法を選択することが重要です。

なお、サーバーサイドでのファイル書き込みであれば、Node.jsなどの環境を使用することで実現可能です。

補足

上記以外にも、特定のブラウザや拡張機能を利用することで、ファイル書き込みが可能になる場合があります。
ファイル書き込みを行う際には、常にセキュリティ上のリスクを意識し、適切な対策を講じる必要があります。

JavaScript で疑似的にファイル書き込みを行うサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ファイル書き込み</title>
</head>
<body>
  <button id="saveButton">ファイルを保存</button>

  <script>
    const saveButton = document.getElementById('saveButton');
    const fileName = 'sample.txt';
    const textContent = 'これは書き込みテストです。';

    saveButton.addEventListener('click', () => {
      const blob = new Blob([textContent], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);

      const link = document.createElement('a');
      link.href = url;
      link.download = fileName;

      link.click();

      // URL解放処理
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>