syscall/jsでファイル読み込みができるか

環境

・macOS Big Sur ver. 12.6 (21G115)
・MacBook Air M1, 2020　メモリ　8GB
・go1.18.3 darwin/arm64

ファイル構成

├── ast
├── docs
│   ├── build.wasm
│   ├── index.html
│   └── wasm_exec.js
├── evaluator
├── lexer
├── object
├── parser
├── repl
├── server
├── token
├── wasm
│   ├── melody.txt
│   └── webassembly.go
├── go.mod
├── go.sum
├── melody.txt
└── main.go

困っていること

syscall/jsを使ってファイルの読み込みをしたいです．JavaScriptには標準入力はないとのことなので，よく実装手順も調べずにファイル読み込みへと方針を変えて進めていたのですが，次のドキュメントを読んでみたり簡単に検索をかけてはみたのですが，ファイル読み込みのようなことをしているものが見つけられず．止まってしまっております．
https://pkg.go.dev/syscall/js#Value.Get

JavaScript単体ならば https://into-the-program.com/javascript-read-the-file/ のようにファイル読み込みはできるようなので方法自体はあるのではと考えております．

このサイトを，質問を書いているときに見つけ，これまでに書いてきたものの応用で記述できそうな気もしていますので，後程ゆっくり目を通して見て，回答をいただく前に解決した際には自己解決のところに記述させていただく可能性がございます．

webassembly.go

Go
1btn.Call("addEventListener", "click", js.FuncOf(func(js.Value, []js.Value) interface{} {
2		//ファイルの読み込み
3		f, err := os.Open("../melody.txt")
4		if err != nil {
5    		fmt.Println(err)
6    		fmt.Println("fail to read file")
7		}
8		data := make([]byte, 1024)
9		count, err := f.Read(data)
10		if err != nil {
11    		fmt.Println(err)
12    		fmt.Println("fail to read data")
13		}
14		fmt.Printf("read %d bytes:\n", count)
15		code.Set("value", string(data[:count]))
16		
17
18		mb := NewMusicBox()
19		window.Set("play", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
20			mb.Play(Note{args[0].Int(), args[1].Float()})
21			return nil
22		}))
23		code := document.Call("getElementById", "code")
24		src := code.Get("value")
25		window.Call("eval", src)
26		return nil
27	}))

上述のコードの，仮にGoのまま書いている

Go
1		//ファイルの読み込み
2		f, err := os.Open("../melody.txt")
3		if err != nil {
4    		fmt.Println(err)
5    		fmt.Println("fail to read file")
6		}
7		data := make([]byte, 1024)
8		count, err := f.Read(data)
9		if err != nil {
10    		fmt.Println(err)
11    		fmt.Println("fail to read data")
12		}
13		fmt.Printf("read %d bytes:\n", count)

の部分を置き換えたいです．

回答2件

ベストアンサー

os.Openは使えませんが、Web技術の延長ならファイルを読み取る方法がメジャーな方法でいくつかあります。

「input type="file"」フォームからユーザーがファイルをアップロードしようとするところをインターセプトする方法（参考リンクにあるものと同じ）
staticファイルサーブコンテンツに読みたいファイルを含めて置き、それをfetchで取得する
他の回答にあるブラウザ拡張やFileSystem-API（Chrome系 Only）を利用する方法

どれが適合するのかはやりたいこと次第です。
ちなみにJavaScript単体でできることのすべてはGoのWebAssemblyで実装可能です。

投稿2022/11/10 13:29

編集2022/11/10 13:41

nobonobo

総合スコア3358

回答へのコメント

aaaa____

2022/11/11 01:35 編集

なるほど，JavaScriptでできることとGoのwasmでできることが完全に一致するなら使う機能を探しやすいですので，とても嬉しい情報です．あまり手順を増やさないようにしたいと考えているので，上げていただいた候補の中で見てみると，二つ目か三つ目が適しているように思っています．ただ，読み込むテキストファイルは読み込む度に内容が変わっている(他のファイルによって内容を更新する)ことを想定しているので，二つ目の場合でも静的ということはやはり，変更した後にファイルサーブコンテンツに再度入れる手順が挟まれてしまいますよね． staticファイルサーブコンテンツに対しての知識がなかったので現状少し調べただけであり，回避方法もあるのかもしれませんが． FileSystemAPIについても軽く調べてみて https://www.mitsue.co.jp/knowledge/blog/frontend/201909/30_1002.html このサイトを見ましたところ，うまく読み込みができるのなら実験的な手法らしいこの方法でも良いのかなと感じました．Chromeでできれば問題もないと考えております．

nobonobo

2022/11/11 05:59 編集

更新されたファイルを静的サーブするものを読み込みなおすことはできると思います。（キャッシュの寿命について考慮は必要ですが）また、 https://teratail.com/questions/4r219gsgmpdniq ここのようにファイルアップロードしてサーバーサイドからそのファイルを静的ファイルサーブできるようにすれば、2番目の方法でもOKかと。（もちろんサーバーサイドも実装する必要がありますが）ただサーバーサイドを組めばもっと平易なフロント側の機能で実装できます。サーバーサイドはos.Openとかし放題なので、そうやって読み込んだデータをフロント側にもってこれさえすればいいので。（例えばWebSocket接続などを使います。）

nobonobo

2022/11/11 06:02 編集

FileSystemAPIをChromeのみ利用するのがありならそれでやってみるとよいと思います！ちなみに「Native～」とか書かれたものは古く、最新は「File System Access API」で検索してください。

aaaa____

2022/11/11 06:48

なるほど，staticファイルサーブコンテンツにおいてもそのような方法で対処できるのですね，頭に入れておきたいと思います．ひとまずはFileSystemAPIでどうできるか考えてみて，具体的にわからない箇所が出たらまた質問で投げさせていただこうと思います．また，古いものもあるとのことなのでその点にも気をつけたいと思います．ご回答ありがとうございました．