Windows11 の VSCode+Emscripten で wasm によるハローワールド (1)

すべての記事

はじめに

これは ハンズオンWebAssembly を読み VSCode で試してみようと考えたが、cmake などの前提となる知識が必要だったのでメモを残しながら進める目的で記述したものです。

このため記事の主題は CMakeLists.txt の記述方法であり、それ以外の詳細については書籍を確認してください。

また、記事で掲載されているファイルの最新版は Github にあります。

進め方

再現性を考慮して以下のような方針で進める

• Windows11 に日本語化された VSCode がインストール済である
• 上記以外は可能な限りポータブルなものを使用する
• 他の記事を参照せずにすむよう、同じ内容のファイルでも記事ごとに掲載する

また、動作確認は主にコンソール・ログへの出力により行っている。

必要となるソフトウェア

関連するすべてのものは C:\wasm\ を起点として保存している。ダウンロードしたものは C:\wasm\tool\ に展開しパスを通す。
以下は取得、展開したものの一覧となる。

• Python
  python-3.14.0-embed-amd64.zip
• CMake
  cmake-4.1.2-windows-x86_64.zip
• LLVM/Clang
  clang+llvm-21.1.0-x86_64-pc-windows-msvc.tar.xz
• Ninja
  ninja-win.zip
• Emscripten
  emsdk-4.0.16.zip
• WABT
  wabt-1.0.37-windows.tar.gz
• wasmtime
  wasmtime-v37.0.2-x86_64-windows.zip

これらを展開した結果、以下のようなディレクトリ構成になっている。

C:\wasm\tool>dir /A:D
 ドライブ C のボリューム ラベルは OS です
 ボリューム シリアル番号は E886-5372 です

 C:\wasm\tool のディレクトリ

2025/10/08  14:35    <DIR>          .
2025/10/08  13:03    <DIR>          ..
2025/08/27  05:39    <DIR>          clang+llvm-21.1.0-x86_64-pc-windows-msvc
2025/10/08  13:05    <DIR>          cmake-4.1.2-windows-x86_64
2025/10/08  14:06    <DIR>          emsdk-4.0.16
2025/10/08  13:14    <DIR>          ninja-win
2025/10/08  13:58    <DIR>          python-3.14.0-embed-amd64
2025/10/08  13:20    <DIR>          wabt-1.0.37-windows
2025/10/08  02:21    <DIR>          wasmtime-v37.0.2-x86_64-windows
               0 個のファイル                   0 バイト
               9 個のディレクトリ  630,289,997,824 バイトの空き領域

Emscripten については展開以外にも以下のコマンドの実行が必要となる。

C:\wasm>cd C:\wasm\tool\emsdk-4.0.16

C:\wasm\tool\emsdk-4.0.16>set PATH=C:\wasm\tool\python-3.14.0-embed-amd64;%PATH%

C:\wasm\tool\emsdk-4.0.16>python -V
Python 3.14.0

C:\wasm\tool\emsdk-4.0.16>.\emsdk install latest
Resolving SDK alias 'latest' to '4.0.16'
...

C:\wasm\tool\emsdk-4.0.16>.\emsdk activate latest
Resolving SDK alias 'latest' to '4.0.16'
...

展開したものにパスを通す。

set PATH=C:\wasm\tool\clang+llvm-21.1.0-x86_64-pc-windows-msvc\bin;%PATH%
set PATH=C:\wasm\tool\cmake-4.1.2-windows-x86_64\bin;%PATH%
set PATH=C:\wasm\tool\emsdk-4.0.16;%PATH%
set PATH=C:\wasm\tool\ninja-win;%PATH%
set PATH=C:\wasm\tool\wabt-1.0.37-windows\wabt-1.0.37\bin;%PATH%
set PATH=C:\wasm\tool\wasmtime-v37.0.2-x86_64-windows;%PATH%

その結果、以下のような確認ができるようになる。

C:\wasm>clang --version
clang version 21.1.0
Target: x86_64-pc-windows-msvc
Thread model: posix
InstalledDir: C:\wasm\tool\clang+llvm-21.1.0-x86_64-pc-windows-msvc\bin

C:\wasm>cmake --version
cmake version 4.1.2

CMake suite maintained and supported by Kitware (kitware.com/cmake).

C:\wasm>emsdk list | findstr INSTALLED
         4.0.16             INSTALLED
         4.0.16    INSTALLED
    *    sdk-releases-e68ea3dc5ca3eda4e2bba62359b033074e506925-64bit    INSTALLED
    (*)    releases-e68ea3dc5ca3eda4e2bba62359b033074e506925-64bit      INSTALLED
    (*)    node-22.16.0-64bit           INSTALLED
    (*)    python-3.13.3-64bit          INSTALLED

C:\wasm>ninja --version
1.13.1

C:\wasm>wasm-objdump --version
1.0.36 (git~1.0.37)

C:\wasm\tool>wasmtime --version
wasmtime 37.0.2 (7a95dd325 2025-10-07)

動作確認

wasm をコンパイルするために必要となるソフトウェアの準備ができたので、簡単な C++ のコードを使って動作確認を行う。

C:\wasm\project\01-helloworld-wasmtime\main.cpp

// UTF-8N CRLF

#include <cstdio>
#include <cstdlib>

int main(int argc, char** argv)
{
	puts("Hello World");
	return 0;
}

// EOF

main.cpp をコンパイルして実行。

C:\wasm\project\01-helloworld-wasmtime>C:\wasm\tool\emsdk-4.0.16\emsdk_env.bat
Setting up EMSDK environment (suppress these messages with EMSDK_QUIET=1)
Setting environment variables:
...

C:\wasm\project\01-helloworld-wasmtime>emcc main.cpp -o main.wasm

C:\wasm\project\01-helloworld-wasmtime>wasmtime main.wasm
Hello World

ここまでの操作に問題がなければ VSCode を使ってデバッグ実行ができる環境が整っているはず。
次の記事 では VSCode で Emscripten を使うための環境を作成する。