emscriptnを使用したｃ＋＋とjavascriptの値受け渡し方法まとめ

とりあえず、HTMLタグの

<div id = "hoge" style="display:none">hoge1</div>

と記載してそこに書き込んだり読み込んだりすることを考えてみよう。
HTMLタグを変数の入れ物にするのどうなんだ？という気はするので良いアイデアがある方はコメントでお願いします。JavaScriptの変数をC++のソースに持っていくやり方が分からなかったのでそれを書いてもらえれば助かります。

#HTMLタグからC++への文字列の取得

// 指定したhtmlのidのtextContentを文字列に変換して取得する（※メモリ解放の関係で直接この関数が呼ばれないようにすること！）
EM_JS(void *, getElementTextContent_, (char const *id),
{
    var e = document.getElementById(UTF8ToString(id));
    var str = e.textContent;
    var len = lengthBytesUTF8(str) + 1;
    var heap = _malloc(len);
    stringToUTF8(str, heap, len);
    return heap;
});

// 指定したhtmlのidのtextContentを文字列に変換して取得する
std::string getElementTextContent(std::string const &id)
{
    void *p = getElementTextContent_(id.c_str());
    std::string s((char const *)p);
    free(p);
    return s;
}

こう記載することで、

std::string str = getElementTextContent("hoge")
printf("%s",str.c_str());

と書けば

hoge1

と出力される。
紛らわしいが、アンダーバーが付いているgetElementTextContent_関数はJavaScript関数でメモリ解放機能が付いていないので必ずアンダーバーが付いていないC++関数のgetElementTextContent関数から呼び出さなければいけない。（こんな命名してしまってｽｲﾏｾﾝ）
privateメソッドに書き込んでカプセル化などそういう書き方が必要になってくるだろう。

#HTMLタグからC++への整数の取得

HTMLタグにこういうタグがあるとする。

<div id = "hoge_num" style="display:none">12</div>

整数は配列じゃないので、メモリ解放用のC＋＋関数を間に挟む必要はない。

// 指定したhtmlのidのtextContentを整数値に変換して取得する
EM_JS(int, NumReturn, (const char* id), {
   var testVar = document.getElementById(UTF8ToString(id));
  return parseInt(testVar.textContent);
});

だから、↓のように書き込むと

printf("%d",NumReturn("hoge_num"));

12

というように出力される。

#C++からHTMLタグへの書き込み

やはり、こういうHTMLタグがあったとする。

<div id = "hoge_str" style="display:none">まだ書き換わってない！</div>

で、こういう関数を作る。

// 指定したhtmlのidのtextContentを引数（ChangedStr）に変更する
EM_JS(void, StrChange, (const char* id, const char* ChangedStr), {
   var testVar = document.getElementById(UTF8ToString(id));
   testVar.textContent=(UTF8ToString(ChangedStr));
});

で、呼び出す

StrChange("hoge_str", "書き換わった！");

するとこうなる。

<div id = "hoge_str" style="display:none">書き換わった！</div>

ね？簡単でしょ？