WebAssemblyをWindows 10のWindows Subsystem for Linuxに設定する

基本的には本家サイトGetting Startedにあるやり方を踏襲する。

ただし、このサイトにあるやり方だとWindows 10に直接入れるやり方なので多少変更しなくてはいけない。

必要なもの

Windows Subsystem for Linux

これを入れないことには始まらない。入れ方はMicrosoftのページ、Windows Subsystem for Linux Installation Guide for Windows 10に従う。

以下のツール類は皆Windows Subsystem for Linux上でインストールする。

インストールが終わっていればStartメニューにUbuntuアイコンができているはずなのでそれを実行して開くターミナル内での操作となる。以下、このターミナルをUbuntuターミナルと呼ぶ。

Python 2.7

Anaconda2で入れる。ダウンロードするAnaconda2はWindows版ではなくてLinux版。ダウンロードそのものはWindows 10で行わなければならない。ダウンロードした場所がFドライブのダウンロードフォルダならUbuntuターミナル側では

/mnt/f/Downloads/Anaconda2-2019.03-Linux-x86_64.sh

のように見えるので

bash /mnt/f/Downloads/Anaconda2-2019.03-Linux-x86_64.sh

を実行する。このインストーラーではデフォルトの選択肢と反対のものがフルインストールに繋がるケースが多いのでちゃんと読んでから選択すること。

Node.js

nvmのinstall。これもUbuntuターミナルで行う。

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

実行後に最後の方で

=> Close and reopen your terminal to start using nvm or run the following to use it now:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

とでるので実行してからnvmのバージョンを調べると

$ nvm --version
1.34.0

のようにちゃんと入っている。これを使ってNode.jsをインストールするが、LTSを入れるのが普通だろう。

$ nvm install --lts
Installing latest LTS version.
Downloading and installing node v10.16.0...
Downloading https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz...
################################################################################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v10.16.0 (npm v6.9.0)
Creating default alias: default -> lts/* (-> v10.16.0)

Emscripten

EMSDKのインストール。これはgitで持ってくる。

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
./emsdk activate --build=Release sdk-incoming-64bit binaryen-master-64bit

環境設定

source ./emsdk_env.sh --build=Release

動作確認をemcc –versionで行う。

emcc --version
cache:INFO: generating system asset: is_vanilla.txt... (this will be 
中略
emcc (Emscripten gcc/clang-like replacement) 1.38.34 (commit 29b91e38e029ad4040e1faf50bd8e903276d096f)
Copyright (C) 2014 the Emscripten authors (see AUTHORS.txt)
This is free and open source software under the MIT license.
There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

のような出力が出る。

以上でWindows Subsystem for LinuxにWebAssemblyが入った。

動作確認

本家サイトGetting Startedの中にあるCompile and run a simple programの通りにやってみるとちゃんと動作するはずである。

Emscriptenのアップデート

Emscriptenのアップデートはgit pullで行う。これはEMSDKをgitで入れたからである。

まとめ

WebAssemblyをWindows 10のWindows Subsystem for Linuxに設定する事ができた。このやり方のいいところは開発環境をUbuntuというVM風のオブジェクトに閉じ込められる事だ。ダウンロードやブラウザでの動作確認のような作業はホストのWindows 10でやる。

インストールするゲストはUbuntuではなくUbuntu18.04という選択肢もある。Microsoft Storeで得られるので好みのものを選べば良い。