【Lua × JavaScript】Fengariのメモ

TypeScriptを弄っていたはずが、いつの間にか楽しくてFengariを弄っていた（？）ので……調べながら試したことのメモ。

FengariはJavaScriptで実装されたLuaのVMとのこと。

ブラウザ上でLuaのスクリプトを動かすことができる。

以下は簡単なHello Worldの例

例: index.html

<html>
<head>
<title>Hello World</title>
<script src="fengari-web.js" type="text/javascript"></script>
</head>
<body>
<script type="application/lua">
-- jsをrequire
local js = require "js"

-- windowを代入
local window = js.global

-- window.document.body.innerHTMLを書き換え
window.document.body.innerHTML = "Hello World.";
</script>
</body>
</html>

ブラウザで開くと単純に[Hello World.]と表示されるだけのHTML（笑）

[fengari-web.js]自体は事前にダウンロードしてきて同階層に置くのをお忘れなく。

ちなみにこれもまた公式に書いてある情報で、JavaScriptを使うのと同様にluaファイルを別で作成しscriptタグのsrcで指定するようにすることも可能。

もし本格的にこれを使って開発をすることになったら、変数のデバッグが欲しくなるかと。

ただ、JavaScriptのデバッグとLuaのデバッグの両方が必要になって大変かもしれない。

一応、変数の内容確認に使えそうなのが以下の3つで、それぞれ動きが違うのでまとめておく。

JavaScriptのwindow.console.log()
JavaScriptのwindow.console.dir()
Luaのprint()

先に言っておくと単純な文字列や数値の場合は、これら3つに大きな違いはなかった。

問題になるのはobject(table)の場合だ。

例: sample.html

<html>
<head>
<title>Sample</title>
<script src="fengari-web.js" type="text/javascript"></script>
</head>
<body>
<script type="application/javascript">
window.js_val = {"hoge": "fuga"};
</script>
<script type="application/lua">
local js = require "js"
local window = js.global

-- js_val
window.console:log(window.js_val)
window.console:dir(window.js_val)
print(window.js_val)

local lua_val = { hoge = "fuga" }

-- lua_valの内容確認
window.console:log(lua_val)
window.console:dir(lua_val)
print(lua_val)
</script>
</body>
</html>

実行結果は次の通り(consoleの内容で、少し見やすいように加工してある)

実行結果

fengari-web.js:8 {hoge: "fuga"}
                  hoge: "fuga"
fengari-web.js:8 Object
                  hoge: "fuga"
fengari-web.js:8 [object Object]
fengari-web.js:8 ƒ table: 0x23
fengari-web.js:8 ƒ n()
fengari-web.js:8 table: 0x23

パッとみた感じ、JavaScript由来のオブジェクトについては[console.log()]か[console.dir()]を使うのが良さそう。

逆にLua由来のオブジェクト(table)は、一発でconsoleに出すことは難しいのかもしれない。

Unknown Region

プログラムでハマったエラーとその解決方法についての備忘録メモ

【Lua × JavaScript】Fengariのメモ