JavaScriptでのファイルの読み込みと書き込み

JavaScriptでファイルを読み書きすることは、多くのアプリケーションで必要となる基本的な操作です。この記事では、JavaScriptを使用してファイルの読み込みと書き込みを行う方法について説明します。

読み込み方法

JavaScriptでファイルを読み込むには、FileReaderオブジェクトを使用します。このオブジェクトは、ユーザーが選択したファイルの内容を読み取るためのメソッドを提供します。


  const fileInput = document.querySelector('input[type="file"]');
  const reader = new FileReader();

  fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    reader.readAsText(file);
  });

  reader.onload = () => {
    console.log(reader.result);
  };

注意: ファイル読み込みはユーザーの許可が必要です。

書き込み方法

JavaScriptでファイルを書き込むには、Blob(外部リンク) オブジェクトを使用してデータを格納し、それをFileSaver.js(外部リンク) ライブラリを使って保存する方法が一般的です。


  const blob = new Blob(["Hello, world!"], { type: "text/plain" });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'hello.txt';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);

まとめ

JavaScriptでのファイルの読み込みと書き込みは、FileReaderとBlobを使うことで簡単に実装できます。さらにユーザーインターフェースとの統合により、これらの操作は非常にユーザーフレンドリーなものになります。次に、これらの基本操作を応用して複雑なファイル操作を行うことができます。

JavaScriptで始めるプログラミングの一環として、これらの技術をマスターすることで、よりインタラクティブなウェブアプリケーションを開発することができるでしょう。

JavaScriptでのファイルの読み込みと書き込み – JavaScriptで始めるプログラミング