More than 3 years have passed since last update.

5さいでもわかる(╹▽╹) WebAssemblyを使ってJavaScriptからC++を動かしてみよう！

Last updated at 2021-12-02Posted at 2021-10-28

みなさんこんにちは、こんばんは！！！！
今回はWebAssemblyを使ってJavaScriptからC++を動かしてみます

なおこの記事を書いた人はただの高校生です最近はライブラリに頼らず自力で図形描画してたりします
初投稿記事です

認識が間違ってるよ、とかあればコメント欄で連絡してくれるとありがたいです。助かります。

そもそもWebAssemblyって？

簡単に要約すると「高水準の言語をバイナリー形式に変換してウェブ上から動かすことができる」というのです

JavaScriptに実行速度が求められる時代になりましたが、インタプリンタ型で動的型付けをしている以上、コンパイラ言語より遅くなってしまう問題があります (グラフィック使ったりめちゃくちゃ凝ったサイトとかあるもんね)

そこでWebAssembly、バイナリに変換することで実際に読み込む量を減少させることができ、またC++など処理が速い言語を利用することができます

最高ですね

使ってみよう　インストール

今回はwasmを作ってもらうためにemscriptenを使うことにします
インストールについての解説サイト
ここは指示に従えばすんなりと行けるはずです　任意の場所でgit cloneしてください

補足
emccはemsdk/upstream/emscripten/emccにあります

使ってみよう　コードを書く(C++)

基本

forjs.cpp

//ファイル名は任意です

#include <stdio.h>
#include <vector>
#include <string>
#include <iostream>
#include <emscripten.h>
#include <emscripten/bind.h>
using namespace emscripten; //名前空間、これは任意です 私はstdはusing namespaceしない派です

//ここにクラスとかを書く 
class ClassName //任意の名前
{
private:

public:
    ClassName() //コンストラクタ
    {
    }
    void FunctionName() //これも任意の名前
    {
        std::cout << "おうどんたべたい" << std::endl;
    }
};

EMSCRIPTEN_BINDINGS(forjs){
    register_vector<std::string>("vector<std::string>");
    register_vector<int>("vector<int>");

    class_<ClassName>("ClassName")
        .constructor<>()
        .function("FunctionName", &ClassName::FunctionName);
}

最低これで動きます

EMSCRIPTEN_BINDINGS

簡単に要約すると「JavaScriptとC++の関係を記述する」というものです

forjs.cpp

    ClassName(int value) //コンストラクタ
    {
    }

またこのような感じでコンストラクタに引数を設定する場合は下記のように記述する必要があります

forjs.cpp

    class_<ClassName>("ClassName")
        .constructor<int>()

boost pythonもほぼ同じ書き方姉妹かな？

bits/stdc++.h は使えないようです
各自それぞれ標準ライブラリをincludeしてください
bits/stdc++.hはよく使われる標準ライブラリを一括でincludeしてくれるものなので、別になくても困りません

std::vectorを使えるようにする

何もしないと JavaScriptとC++の間の引数にstd::vectorを設定することができません
そのため EMSCRIPTEN_BINDINGS 内でvectorが使えるように設定する必要があります
vector内に入れる型ごとに書かないといけないようです、あーめんどくさい

forjs.cpp

    register_vector<std::string>("vector<std::string>");
    register_vector<int>("vector<int>");

どこまで記述すればいいのか？

EMSCRIPTEN_BINDINGSの中にどこまでclass周りの定義をしないといけないのか、
それは「JavaScriptに渡すクラスは基本書く」です
JavaScript側でインスタンス化するときも、C++内でインスタンス化して渡すときも、です
std::vectorの件もこの考え方に基づいてなんですかね？

使ってみよう　ビルドする！

makefileとかがおすすめです(オプションの数も多くなりがちなため)

emccコンパイラに対してg++を使う時と同じようにビルド対象、出力方法・・・などを記述していきます
また--bind -s WASM=1 を引っ付けます --bind は C++側のクラスをJavaScript側で呼び出すのに必要なようです

-o 任意の名前.js にしますこれによってwasmとwasmを簡単に利用できるようにするラッパー(js)が出力されます

利用できるメモリ量が決まっているようです
利用できるメモリ量を増やすには -s INITIAL_MEMORY=任意の値を追加します
この数字は 6410248 = 524288 = 64KBの倍数じゃないとだめなようです

emcc --bind forjs.cpp -s INITIAL_MEMORY=任意の値 -s WASM=1 -o output.js -std=c++14

output.jsのとこは任意の名前でも大丈夫です

拡張子をwasmにするとwasmが単体で出力され
htmlにするとhtml + js + wasmが出力されますこの出力されたhtmlを開くとWebAssemblyに関する記事あるあるのサイトが出てきます

使ってみよう　コードを書く(JavaScript)

main.js

var Module = {
    onRuntimeInitialized: function () {
       	///この中にモジュールが読み込まれた時の処理を書く！！！

       	var hoge= new Module.ClassName();
       	hoge.FunctionName();
       	///こんな感じでインスタンス化できます いいね
    }
};

使ってみよう　コードを書く(html)

もうすぐ終わり、お疲れさまでした

main.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>うどんたべたい！</title>
</head>

<body>
    <script src="main.js"></script>
    <script src="output.js"></script>
</body>

</html>

動かす前に！

セキュリティの観点からなのか、httpサーバを立てる必要があるらしいです

server.py

import http.server
import socketserver
import sys
Handler = http.server.SimpleHTTPRequestHandler

port_number = int(input())

Handler.extensions_map['.wasm'] = 'application/wasm'
with socketserver.TCPServer(("", port_number), Handler) as httpd:
    httpd.serve_forever()