はじめに

Web画面の開発などでは良くJavaScriptが使用されていますが複雑な処理を行うと動作が遅くなる場合があります。
そのため、より早くより効率的に開発をするためにCやC++といったコンパイル可能な言語を使用してWebの開発を可能にしたものがWebアセンブリになります。
Emscriptenを使用してWindowsの開発環境を作る方法は公式に記載されていますが、自分の悩んだところやエラーなどを含めてまとめてみました。

環境

• windows 10
• python:3.6.5
• emcc:1.39.16
• clang:11.0.0

環境作成

2020/05/24時点で、EmscriptenはGit上からソースを取得してインストールを行う方法しかないようです。
GitのクライアントをWindowsに入れたくないため、GitHubのWebからソースをダウンロードしてインストールしています。

ソースのダウンロード

GitHubのサイトからダウンロードして解凍するか
クローンすることでソースを取得します。
解凍先のパスに日本語が入っていると後々エラーするため日本語のないパスの方が良いです。

インストール

・コマンドプロンプトを起動する
※フォルダの場所によっては管理者として実行が必要

・ソースを配置したフォルダに移動する
自分はC:\webassenbleに配置したので以下のコマンドになります。
コマンド:cd C:\webassenble\emsdk-master

・インストール
配置したソースの中にemsdkがあるはずなのでそれを使用してインストールを行います。
Emscriptenはバージョンの指定をしてインストール更新が可能になっており、今回はlatest(最新)を入れています。
このコマンドを実行した後に大体10分ほど時間がかかります。
コマンド:emsdk install latest

コマンド結果

Installing SDK 'sdk-releases-upstream-ae5001f
～～～～　略　～～～～～
Done installing SDK 'sdk-releases-

・設定更新
Emscripten用の設定を行います。この設定はWindows自体には設定されずにユーザのフォルダの直下のファイルに設定されます。
コマンド:emsdk activate latest

コマンド結果

Writing .emscripten configuration file to user home directory
～～～～　略　～～～～～
dows Registry, rerun this command with the option --global.

・設定反映
現在開いているコマンドプロンプトに環境設定を読み込みます。
コマンド:emsdk_env.bat

・インストール確認
インストールできたかを確認します。このコマンドでバージョン等が出てくればOKです。
この時にパスなどに日本語が含まれるとエラーします。
コマンド:emcc -v

実行

実行するには実行したいC/C++ファイルを作成して、上でインストールしたEmscripten用のプロンプト上でコンパイルします。

C/C++ファイルの作成

今回は新しい言語に遭遇したときにお決まりとなるhelloworldを表示するプログラムを作成します。

#include <stdio.h>

int main() {
  printf("hello, world!\n");
  return 0;
}

Emscripten用のプロンプト起動

ダウンロードしてきたemsdk-masterの下にあるemcmdprompt.batをダブルクリックしてEmscripten用のコマンドプロンプトを起動します。

コンパイル

作成したC++ファイルのフォルダまで移動してemccコマンドでコンパイルを行います。
3分ほどしてコンパイルが成功すると、今いるフォルダにa.out.jsとa.out.wasmができています。
コマンド:emcc cmain.cpp
※この時も場所によっては管理者による実行が必要になります。

実行

a.out.jsをnodeで実行するとhello, worldが表示されていることがわかります。

>node a.out.js
hello, world!

おわりに

Webアセンブリについて、公式の手順通りにインストールして実行してみました。
比較的簡単にできましたが、ところどころつまずく点や考える点などがありました。
次回以降はこの環境を使ってもう少し色々なことをしていこうと思います。