さっき決めたブログ

[Nim]NimでWebAssemblyを作成する

目次

• WebAssemblyとは？
• 開発環境の構築
• とりあえず書いてみる
• DOMをいじったり、JavaScriptの関数呼んだり
• 感想
• 参考にしたサイト

WebAssemblyとは？

WebAssemblyは、ウェブブラウザのクライアントサイドスクリプトとして動作するプログラミング言語（低水準言語）である。wasmとも称されており、ブラウザ上でバイナリフォーマットの形で実行可能であることを特徴とする

との事です。

今まで、ブラウザ上で動作するスクリプトと言えば、JavaScript一択だった訳ですが、WebAssemblyを用いればコンパイル可能な様々な言語をブラウザ上で動作させられるという訳ですね。

開発環境の構築

NimでWebAssemblyの実行ファイルを構築するには、Emscripten(なんて読むのだろう？)というものを使用しなくてはならないらしいです。

今回このEmscriptenやそれに付随する諸々のインストールがかなり大変でした💦

ネットで出回っている解説の多くがLinuxなどのUnix系OSを前提とした内容が多く、自分のようにWindowsで開発している方は、色々と変換しなくてはならない箇所が出てきます。

この記事ではWindowsを前提に説明していきますので、Unix系やMacの方は逆にうまく行かないこともあるかもしれません。

まずはPythonをインストールしなくてはならないらしい

EmscriptenはPythonで書かれているらしい。
なので、Emscriptenを動かすためには、先にPythonをインストールする必要があります。

Pythonのサイトからファイルをダウンロードします。
自分は zip形式のファイルをダウンロードして手動で D:\devtools\python に解凍してます。

解凍が終わったら忘れずにフォルダにパスを通しておきます。

Emscriptenとやらをインストール

次にEmscriptenをインストールします。
普通はgitを使ってインストールするのが一般的みたいですが、今回はこちらよりzipファイルをダウンロードし、D:\devtools\emsdk フォルダに解凍しています。

解凍後、以下のコマンドを実行
cd D:\devtools\emsdk
emsdk install latest
emsdk activate latest
emsdk_env.bat

これがとにかくやたら長い。なんか、javaとかnodeとかpythonをダウンロードしているようです。自分のやりたい事には必要なのでしょうか？

それに、pythonとかさっきダウンロードしたのになんでまたダウンロードしてるの？アホなの？？

とか考えつつ、しばらく待つとコマンドが完了するので、以下のフォルダにパスを通します。
D:\devtools\emsdk
D:\devtools\emsdk\node\12.18.1_64bit\bin
D:\devtools\emsdk\python\3.7.4-pywin32_64bit
D:\devtools\emsdk\java\8.152_64bit\bin
D:\devtools\emsdk\upstream\emscripten

以下の環境変数も定義しておきます。
SET EMSDK = D:\devtools\emsdk
SET EM_CONFIG = D:\devtools\emsdk\.emscripten
SET EMSDK_NODE = D:\devtools\emsdk\node\12.18.1_64bit\bin\node.exe
SET EMSDK_PYTHON = D:\devtools\emsdk\python\3.7.4-pywin32_64bit\python.exe
SET JAVA_HOME = D:\devtools\emsdk\java\8.152_64bit
SET EM_CACHE = D:\devtools\emsdk\upstream\emscripten\cache

webサーバの構築とmime-typeの設定

設定はまだ続きます。

WebAssemblyを起動するためには、拡張子 ".wasm" のmime-typeが "application/wasm" に設定されていなくてはいけないそうで、つまりはファイルシステムでの起動は出来ないようです。
なので、ローカル環境で動作させるにしても、WEBサーバを立ち上げて、mime-typeを設定しなくてはなりません。

サーバは以前にWordPress開発環境の構築を行ったときに使用したxamppのサーバを使用することにします。

[xamppを入れたフォルダ]\apache\conf\mime.typesをテキストエディタで開き、一番最後に以下の一文を追加します。

また、httpd.conf に今回の検証で用いる作業用フォルダを追加しておきます。

以上で、環境の構築は完了なので、実際にVisualStudioe Codeでプログラムを作成してみます。