[phina.js] JavaScript でユーザー端末のファイル入出力をするには

2023.06.052023.06.06

JavaScriptでは、ウェブ上のデータと違ってユーザー端末内のファイルには、直接アクセスできない仕組みになっています。
これは、自分で作ったプログラムを検証する場合でもそうです。

そのため、ローカル環境のファイルにアクセスするには、自前のウェブサーバでアクセス可能にするか、ブラウザから読み込み・保存する必要があります。

今回は、ブラウザからのファイル入出力を見てみます。

1. Blobオブジェクトのダウンロード

文字列をテキストファイルとして保存するなら、仮想的なリンクを作って、リンクのクリックイベントでダウンロードさせる方法があります。

const blob = new Blob(['あいうえお'],{type:"text/plain"});

const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'ファイル名.txt';
link.click();

（参考）

JavaScriptで文字列をファイル出力する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

ダウンロード場所は、既定のダウンロードフォルダになります。

このコードは、phina.jsのシーン内でも動作しました。

目次に戻る

2. window.showOpenFilePicker でファイル選択

ファイルの入力（つまり、ユーザーのファイルからのアップロード）では、ブラウザはファイル選択画面を表示して、ユーザーにファイルを選択させます。
逆にいうと、ユーザーが毎回手動で選択したファイルしか読み込むことができません。

ファイルの入出力では、window.showOpenFilePicker を使います。
windowは、ブラウザのグローバル変数をまとめたオブジェクトです¹。

Window.showOpenFilePicker() メソッドでファイル選択ダイアログを表示します。戻り値の型は FileSystemFileHandle の Arrayです。配列になっているのは一度に複数のファイルを読み込む可能性があるためです。
【そのまま使えるサンプルコードあり】JavaScriptでローカルファイルの読み込み、書き出しを行う – Bon appetit! artworks

見本のコードはこちら。

keycode 32（スペースキー）でファイル選択画面を表示して、コンソールに読み込んだテキストを出力します。

      var fileSelect = async function(event) {
        const pickerOpts = {
          types: [{ description: 'Texts(.txt)', accept: {'text/*': ['.txt']} }],
          multiple: false,
        }
        if (event.keyCode==32) {
          let fileHandle;
          [fileHandle] = await window.showOpenFilePicker(pickerOpts);
          
          const file = await fileHandle.getFile();
          const fileContents = await file.text();

          console.log(fileContents);
          window.removeEventListener('keydown', fileSelect); 
        }
      };
      window.addEventListener('keydown', fileSelect);