XMLHttpRequestを使ってローカルのファイルを読み込む

Question

環境

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

現状

FileSystemAccessAPIについて調べていた際に，読み込みだけに限定するならば，manifest.jsonを作ってやることで，パスを使ってファイルを読み込むことができるというのが見つかったので，試してみています．
http://var.blog.jp/archives/84619582.html

作ったmanifest.json

{
  "manifest_version": 3,
  "name": "Read File",
  "version": "1.0",

  "permissions": ["file:///*"]
}

index.htmlと同じ階層に置いてあります．

ファイル構成

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

困っていること

const xhr = new XMLHttpRequest()
xhr.open("GET", "/Users/usrname/Go/01/src/melody.txt")
xhr.send()
xhr.onload = () => console.log(xhr.responseText)

これを，Goに書き換えようとしているのですが．

	XMLHttpRequest = js.Global().Get("XMLHttpRequest")
		xhr := XMLHttpRequest.New()
		xhr.Call("open", "GET", "/Users/usrname/Go/01/src/melody.txt")
		xhr.Call("send")
		if (xhr.Call("onload") != `abort` && xhr.Call("onload") != `error`){
			code.Set("value", string(xhr.Get("responseText")))
		}

のように書き換えてビルドをしてみたところ，次のようなエラーが出てしまいました，

エラー内容->追記2へ

./webassembly.go:78:29: invalid operation: xhr.Call("onload") != `abort` (mismatched types js.Value and untyped string)
./webassembly.go:78:62: invalid operation: xhr.Call("onload") != `error` (mismatched types js.Value and untyped string)
./webassembly.go:79:29: cannot convert xhr.Get("responseText") (value of type js.Value) to type string

上2つの型の不一致の部分はstring(xhr.Call("onload")) != `abort` のようにすればエラーはなくなるのですが，これは一時凌ぎでエラーを掻い潜っているのではなくきちんと動作するのでしょうか．

また，3つめの箇所では，読み込んだファイルの内容を文字列としてcode.valueに入れたいのですが，stringで変換できない場合に他の対処法はあるのでしょうか．

追記

この状態で拡張機能をインストールすると，エラーが出てしまったので
https://www.extension.ninja/blog/post/solved-permission-is-unknown-or-url-pattern-is-malformed/
このサイトを参考にして

manifest.json

{
  "manifest_version": 3,
  "name": "Read File",
  "version": "1.0",

  "host_permissions": ["file:///*"]
}

のようにしたところ，エラーがなくなりました．

また，Goで書き換えていた部分は次のようになりました．

		xhr := XMLHttpRequest.New()
		xhr.Call("open", "GET", "file:///c:/Users/usrname/Go/01/src/melody.txt")
		xhr.Call("send")
		if (xhr.Get("onload").String() != `abort` && xhr.Call("onload").String() != `error`){
			code.Set("value", xhr.Get("responseText").String())
		}else{
			fmt.Println("fail of onload\n")
		}

この状態でビルド，サーバーの実行を行ってブラウザに行ってボタンを押すと，次のようになりました．
onloadの部分は.Get()に変更したので関数のようにはしていないつもりなのですが，反映ができていない，もしくは，ここでのString()が不適切なので　==nullで通過させるようにしたほうがいいのかもしれません．
!= nilにするとinvalid operation: xhr.Get("onload") != nil (mismatched types js.Value and untyped nil)のようにエラーが吐かれました．

Chromeを再起動させて更新は行いました．

https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/load_event
上記のサイト周りを見ているのですが，イベントは扱いが異なるのでしょうか．
ですが，Not allowedとなる理由がわかっておりません．

wasm_exec.js:349 Not allowed to load local resource: file:///c:/Users/usrname/Go/01/src/melody.txt
syscall/js.valueCall @ wasm_exec.js:349
$syscall_js.valueCall @ build.wasm:0xe2bf9
$syscall_js.Value.Call @ build.wasm:0xe0da4
$main.main.func1 @ build.wasm:0x13616e
$wasm_pc_f_loop @ build.wasm:0xd3719
$wasm_export_resume @ build.wasm:0xd36fa
_resume @ wasm_exec.js:538
(anonymous) @ wasm_exec.js:549
wasm_exec.js:22 panic: syscall/js: Value.Call: property onload is not a function, got null

追記2

Goで書き換えていた部分を以下のように修正しました．

		xhr := XMLHttpRequest.New()
		xhr.Call("open", "GET", "file:///c:/Users/usrname/Go/01/src/melody.txt")
		xhr.Call("send")
		code.Set("value", xhr.Get("responseText").String())

このようにしたのちにビルドと実行を行うと
panic: syscall/js: Value.Call: property onload is not a function, got null
はなくなり，ブラウザのコンソール上で発生するエラーは次の一つだけとなりました．

wasm_exec.js:349 Not allowed to load local resource: file:///c:/Users/usrname/Go/01/src/melody.txt
syscall/js.valueCall @ wasm_exec.js:349
$syscall_js.valueCall @ build.wasm:0xe2bf9
$syscall_js.Value.Call @ build.wasm:0xe0da4
$main.main.func1 @ build.wasm:0x13616e
$wasm_pc_f_loop @ build.wasm:0xd3719
$wasm_export_resume @ build.wasm:0xd36fa
_resume @ wasm_exec.js:538
(anonymous) @ wasm_exec.js:549

調べてみたこと

番号リストリストhttps://qiita.com/smurakami/items/1764a80f40d33dce5243
このような記事が出て，軒並み
open -a /Applications/Google\ Chrome.app --args -allow-file-access-from-files index.html
をコンソールで打ち込めと出てきますが，そういった記事は2012や2013年の記事が多く，不安になってしまいます．
https://taremimi.hatenablog.jp/entry/2018/08/10/170035
新しめのでも2018などですね．
Chromeが開いてある状態でこのコマンドを実行しても意味ないですかね．

teratail上の同様の質問で
https://teratail.com/questions/28389
このようなものがあったのですが，見てみても解決できませんでした．

https://support.apple.com/ja-jp/guide/mac-help/mchld5a35146/mac
このサイトを頼りに「ファイルとフォルダ」を見に行きもしましたが，そもそもChromeはチェックボックスすらなく，Chromeを追加できる様子でもありませんでした．
https://apple.stackexchange.com/questions/385093/how-do-i-grant-access-in-files-and-folders-in-catalina-for-chrome
このサイトではChromeが見えているので何かして追加できるのかもしれません．

Comments

[nobonobo]

追記分でも
xhr.onload = () => console.log(xhr.responseText)
このJSの処理をGoに変換が正しくありません。

[nobonobo]

やはり一旦Goのことは抜きにJSで目的を果たすということをやってみたほうが良いかもしれません。

[aaaa____]

この部分はアロー関数式という認識で調べているのですが，合っていますでしょうか．

[nobonobo]

はい。onloadはfunctionをセットすべきフィールドであって、onloadの値を見ることにあまり意味はありません。

[aaaa____]

アロー関数式の構文などと見比べて，()の左に項があって構文と違っていますし，名前つき関数でもないなと思っていたのですが．もしかしなくてもこれは意味合い的には，
xhr.onload = ( () => console.log(xhr.responseText) )
となっていて，xhr.onloadにアロー関数式を入れているということになっていますでしょうか．
とすると，別に今回のコードに入れる必要はなく，
code.Set("value", xhr.Get("responseText").String())
をそのまま実行させれば良い，ということになりますか．
この部分を編集した結果を追記2として書かせていただきます．

以下のサイトを見て，「リクエストが完了したときに、成功した場合 (load の後)、成功しなかった場合 (abort または error の後) のどちらでも発生します。 onloadend プロパティを通して利用することもできます。」から，条件分岐で書こうと判断していました．

https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

[nobonobo]

JSの非同期挙動について学びましょう。
xhr.send()した直後に「xhr.responseTextを参照」してもまだ格納されていないかと。
xhr.onloadに入れた関数は応答を受け取ったら呼ばれる関数を入れておくところで、
その関数が呼ばれたということは応答を受け取った後なので「xhr.responseTextを参照」することができます。
xhrは古い仕様ですし先行事例をみても書き方がいろいろあってわかりにくいと思います。
可能であればfetchを使いましょう（非同期の扱いが自然にできます）。

[aaaa____]

なるほど，そのようになっているのですね．
ご提案ありがとうございます，fetch周りや非同期挙動を調べてみることにします．

Answer 1

これまでの質問のほとんどがいきなりGoで書こうとしてJS側のコンテキストを考慮できていないという問題を繰り返しています。

例えば「xhr.onload」はユーザーコードからコールするものではありません。functionを代入すべきフィールドです。

また、Goのsyscall/jsの実例をもっと見に行ったほうがいいと思います。js.Valueをstringにキャストはできません。js.Value.String()メソッドを使いましょう。

GoのWASMはJSのためのGoの記述を学びつつJSの知識も要求されるいばらの道なのですが突き進むというのであれば、
手順としては以下のものをお勧めします。

1. まずJavascriptで目的の挙動を実現し動作をしっかり把握する
2. 次にJSの記述をGoによる記述に置き換えていく

この二度手間を何度も繰り返したのち、慣れてくればいきなりGoで書けるようになっていきます。

また、Chrome拡張のつくり方はチュートリアルを済ませましたか？
これまでの延長でmanifest.jsonを書けばファイル読み込みができるというわけではありません。

追記への実装案

1. Monkey処理系ごとWASMにした実装をロード＆RUN。
2. ブラウザでボタンを押したのを契機にローカルファイルを読み込む。
3. ブラウザ側でファイルの内容に従ってMonkeyスクリプト処理する。

というフローでサーバーサイドではややこしいことはしたくないという考え方でしょうか。

だとすると、WASMファイルと一緒にスクリプトファイルも静的ファイルサーブするのが最もシンプルな気がします。

wasmファイル配信と同じフォルダに「sample.txt」を置いておき、双方静的ファイルサーブの対象とします。

package main

import (
	"log"
	"syscall/js"
)

var (
	document = js.Global().Get("document")
	fetch    = js.Global().Get("fetch")
)

func load(fn string) string {
	ch := make(chan string, 1)
	success := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		log.Println("success")
		var received js.Func
		received = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
			defer received.Release()
			log.Println("received")
			ch <- args[0].String()
			return nil
		})
		args[0].Call("text").Call("then", received)
		return nil
	})
	defer success.Release()
	failed := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		log.Println("failed")
		ch <- ""
		return nil
	})
	defer failed.Release()
	go fetch.Invoke(fn).Call("then", success).Call("catch", failed)
	return <-ch
}

func main() {
	btn := document.Call("createElement", "button")
	btn.Set("textContent", "run")
	btn.Call("addEventListener", "click", js.FuncOf(func(js.Value, []js.Value) interface{} {
		go func() {
			log.Println(load("sample.txt"))
		}()
		return nil
	}))
	document.Get("body").Call("appendChild", btn)
	select {}
}

これであればsample.txtを書き換えて、ブラウザのボタンを押せば更新した内容をブラウザ側で読めるはずです。

Comments

[nobonobo]

js.Valueをstringにキャストはできません。js.Value.String()メソッドを使いましょう。

[nobonobo]

たぶん、どういうファイルを用意してどういうときにファイルを更新し、どういうタイミングでそのファイルを読みたいのか実現したいデータのフローを明示してもらったほうがアドバイスしやすいかもしれません。

[aaaa____]

JavaScriptの経験が足りず，まだしっかりとコンテキストを読み取りきれていないようですね，申し訳ございません．
今回も，参考サイトにJavaScriptでの記述があるのをいいことに何も考えずいきなりGoで書こうとしてしまっていました．焦らず，おっしゃられた二つの手順を意識しようと思います．

Chrome拡張の作り方については
https://qiita.com/n_yamadamadamada/items/4e469073486e11babddb
このサイトを参考にしていたのですが，最後のところまできちんと目を通していませんでした．
申請が必要であり，なおかつ金銭のタスクも発生してしまうのですね．
なるべく金銭のコストは発生させたくないので根本からやり方を見直すことになりそうです．

Stringで取り出す方法についてはwebassembly.goの他の箇所でFloat型で取り出していたものと同様であるのに，染みついておらず，出てきていませんでした．確認不足でも申し訳ございません．

フローとしましては，
play(60, 0.3)
のような命令が記述されたテキストファイル(.txt)を用意して，Monkey言語でplay文を実行するときにファイルを更新し，webassembly.goをビルドするとき，またはブラウザ上でボタンを押してシンセサイザーを鳴らす直前にそのファイルを読み込みたいと考えております．

[nobonobo]

Chrome拡張を公開するためのハードルはありますが、開発モードでローカルインストールするならそのハードルは無視出来ます。

[aaaa____]

https://setup-lab.net/chrome-extended-local-install/
ローカルの場合の適応の仕方を発見いたしました，ありがとうございます．

追加対応した部分を本文に追記として載せさせていただきます．

[nobonobo]

老婆心ながらアドバイスしておきます。

Chrome拡張の役割に（ブラウジング体験を向上させるツールの実現など）沿ったなにかを作るのならまだしも、
ブラウザで禁止されていることをしたいためだけにChrome拡張に向かうのは労多く得るものは少ないと思います。

ブラウザで上で実現したいのであればブラウザの機能の中でやりくりするほうが得るものは多いと思います。

[aaaa____]

そうなのですね，みていた記事があまりにもさっぱりしていて，シンプルに書けるものだと思っていました．
覚えておきます．
また，具体的なコードもありがとうございます．

考えていますのは，ブラウザに頼るのは音を鳴らす部分だけなので，
Monkey言語の処理系全体をwasmするというよりは，play命令を受け取った時にその命令をテキストファイルに書き込み，そのテキストファイルの命令でブラウザで音を鳴らすというものです．

具体的には
```
% go run main.go
Hello. This is The Monkey Programming language.
Feel free to type in commands
>> play(50, 0.2);
write 19 bytes
50
>> play(60, 0.3);
write 19 bytes
60
>> let i = 0;
>> while(i< 3){play(51+i, 0.2); let i = i + 1;}
write 19 bytes
write 19 bytes
write 19 bytes
```

のように命令していたらテキストファイルが
```
play(50, 0.200000)
play(60, 0.300000)
play(51, 0.200000)
play(52, 0.200000)
play(53, 0.200000)
```
となるので，これを以前のコードで評価させて音を鳴らそうというものです．

ひとまず，私の理解が及ばず，この質問も長くなってしまったうえ，読み込みに関して具体的なコードをいただいたので，それを読んでみて自分のコードの中に組み込んでみて，また困った部分が出れば新しく質問させて頂こうと思っております．

[nobonobo]

なるほど、CLI（コマンドラインインターフェースのツール）とブラウザの両方でMonkeyエンジンを動かすということですね。鳴らし始めるきっかけはブラウザ上のボタンですか？
CLIでスクリプト処理ー＞テキスト出力ののちブラウザのボタンでそれを読み取って再生するというフローであってますか？（以前のやり取りにあるようにブラウザのボタンを完全になくすことはできませんが）

[aaaa____]

はい，動かし方はおっしゃる通りです，そのように表現するのですね，参考になります．
きっかけはブラウザ上のボタンでと考えております．
フローもその認識で問題ありません，ボタンが無くすことができないのは以前教えていただいた際に承知しておりますので，採用判断に含めた上で選ばさせていただいております．