【動画解説付き】初心者のためのWebAssembly開発環境構築ガイド

どうも、プログラミングの鬼シヨツ鬼です。
この記事では「WebAssemblyとかいうやつの開発環境構築したいぜ」って人に向けてWindows機に仮想マシンを作って開発環境構築する方法を説明しています。
初心者の人がこの記事を見ただけで操作できるように、仮想マシンの準備から説明しますので、ぜひ参考にしてみてください。
(「仮想マシンの作り方は分かるよ！」って方は「開発環境構築」の項目から読むのでOK)

ちなみに、この記事は次の動画と同じ内容ですので、記事だけだと分かりづらい部分は、そちらもご活用ください。
(ボタンの位置や操作方法などがわかるので、初心者の方は動画のほうが分かりやすいかも)
YouTube:初心者のためのWebAssembly開発環境構築ガイド

#準備するもの
・インターネット接続されたWindows10のPC
・未知への好奇心

#VirtualBoxのインストール
Windows上に仮想マシンを作るためにVirtualBoxというソフトをインストールします。
過去の僕の動画の「VirtualBoxのインストール」の部分を参考にインストールを行ってください。
(動画の中ではCentOSのインストールも行っていますが、この部分は不要です)

#Ubuntuのインストールメディア準備
こちらのサイトよりUbuntuのisoイメージをダウンロードします。

#VirtualBoxに新規のマシンを追加する
VirtualBox上に新規の仮想マシンを作ります。
設定内容は自分のPCのスペックに応じて適宜決めてください。
僕が設定した内容は、動画の4:06～を参考にしてください。

#Ubuntuのインストール
以下の手順で仮想マシンにOSを入れて立ち上げます。
1.追加した仮想マシンのストレージより、[光学ドライブ]空となっている項目をクリックし、「ディスクイメージを選択」をクリックする
2.Ubuntuのインストールメディアを選択する
3.「起動」ボタンを押す

#Ubuntuのインストール設定
Ubuntuのインストール設定を以下の操作で行います。
1.「Ubuntuをインストール」を選択
2.「Ubuntuのインストール準備」の画面で「Ubuntuのインストール中にアップデートをダウンロードする」と「グラフィックス、Wi-fi機器、Flash～(略)」の項目にチェックを入れ、「続ける」を押す
3.「インストールの種類」の画面で「ディスクを削除してUbuntuをインストール」にチェックを入れ「インストール」を押す

*この後、キーボードの設定やアカウントの設定を行いますが、特に難しい項目はないため、ここでの説明は省略します。
#開発環境構築
###環境確認
仮想マシン上から次の事項を確認してください。(確認の方法は動画中で紹介)
・インターネットに接続できること
・Pythonがインストール済みのこと
・gccコンパイラが入っていること
・gitが入っていること

###Emscriptenをインストールする
1.次のコマンドを実行する
git clone http://github.com/emscripten-core/emsdk.git
2.1の作業で作成される「emsdk」ディレクトリに移動し、次のコマンドを実行する
./emsdk install latest
3.次のコマンドを実行する
./emsdk activate latest
4.次のコマンドを実行する
source ./emsdk_env.sh --build=Release

#コーディングと動作確認
###サンプルプログラム作成
お決まりの「Hello world」を表示させるプログラムを作ります。

hello.c

#include <stdio.h>
int main(int argc,char** argv){
  printf("Hello World!!\n");
}

###コンパイル
サンプルプログラムを作成したディレクトリに移動して、次のコマンドを実行します。
emcc hello.c hello.html

###動作確認
下記コマンドでブラウザを開いてください。
emrun --browser firefox hello.html

ブラウザ上の画面の下の部分に「Hello world!!」が表示されていれば成功です！

「No WebAssembly support found.Build with -s WASM=0 to target JavaScript instead.」のエラーが出ている場合は、firefoxのバージョンが古いことが原因と考えられます。
firefoxを最新版にインストールしてください。(WebAssemblyの対応はver.52以降)

#まとめ
新しい技術に挑戦するのは楽しいね。
最後まで、読んでくれてありがとう。
参考になったら「」押してね。