本稿は、WebAssemblyの開発環境の構築について記録します。 WebAssemblyは、クライアントサイドスクリプトつまり、ユーザーのブラウザ上で動作するプログラミング言語です。wasmともいわれるそうです。私は、組み込みプログラマなので主にC/C++言語を利用してお仕事をさせていただいています。WebAssemblyはC/C++をトランスパイル（プログラミング言語を別のプログラミング言語に変換）して開発ができると聞いて興味をもちました。

はじめに

本稿では、WebAssemblyの開発環境をWindows上で構築することにします。サーバーサイドのソフトウェアはLinux上で動作していることが多いので、必然的にWeb上でみれるWeb開発に関する情報はLinuxが中心です。特に日本語で記載された情報はWindowsを相手にしているものがかなり少ない印象です。よって、Windows上でWebAssemblyの環境を構築する手順を記録するのは多少の需要があるかと考えました。対象読者は、Windowsのコマンドプロンプトを操作していろいろしたことがある人、そしてプログラミング言語を多少なりともいじったことがある人とします。できるだけ丁寧な記録を心がけたいと思いますが、プログラミングをしたことがない人はちょっとつらい内容になるかもしれません。

推奨OS

推奨OSは、Windows10 Proです。Windows10 ProでないとHyper-Vという仮想化機能が利用できないからです。クライアントサイドのWeb開発だけならWindows10 Homeでいけると思いますが、サーバーサイドのWeb開発をWindowsで行うのであれば、Hyper-Vは必須項目になるはずです。ちなみに私も泣く泣くWindows10 HomeをWindows10 Proにアップグレードしました。家でコチョコチョして遊びたいだけなのにHomeはいまいちとは世知辛いWindowsですね。 Proへのアップグレードがいやだという人は「Oracle VM VirtualBox」をダウンロードして仮想環境にLinuxをインストールして環境を構築してみるといいかもしれません。その方法については、Google先生にいろいろ聞いてみるといろいろ教えてくれます。頑張ってGoogle先生にいろいろ聞いてみてください。本稿では、とりあえずクライアントサイドの開発環境を構築するだけですので、Homeでいけると思います（私はProで環境構築したので確証はありません）。Windowsだけでいろいろ勝負したいというHomeな勇者は費用が発生しますがProにアップグレードしてください。HomeからProへのアップグレードの手順を簡単に説明します。

「windowsキー + x」を押す
「設定(N)」を選択
「更新とセキュリティ」を選択
「ライセンス認証」を選択
「Microsoft Store に移動」を選択
「Proへアップグレードする」を選択

あとは、Microsoft Storeが指示してくる手順にしたがってアップグレードしてください。

Web開発環境の構築　

まずは、Web開発のベース環境をWindows上に構築します。ベース環境の構築の概要を以下に列挙します。

いろんなソフトウェアを簡単にインストールできるようにする(Chocolateyの導入)
いろんな人が作った実装を簡単にPCにコピーできるようにする(gitの導入)
ネットワークアプリケーションを簡単に動作できるようにする(nvmとNode.jsの導入)
いろいろなコードファイルをまとめてトランスパイルできるようにする(GNU Makeの導入)
トランスパイル時に過去の生成物および中間生成物を削除できるようにする(rimrafの導入)
コーディングおよびトランスパイル、デバッグを容易にできるようにする(VS codeの導入)
簡単にローカルサーバーを起動できるようにする(serveの導入)

いろんなソフトウェアを簡単にインストールできるようにする

Chocorateyをインストールします。ChocorateyはLinuxでいうところの「apt-get」や「yum」と同じ機能を提供するソフトウェアです。 Windowsで新しいソフトウェアをインストールするとき、ウェブブラウザでインストーラーをダウンロード、さらにインストーラーをクリックして実行、さらにさらにチェックボックスにチェックを入れたり、利用規約に同意させられたりして「うへぇ超めんどくさいなぁ」とまったく思ったことがないという人はいるでしょうか。いや、いません。
そんなときにはこれ、Chocorateyです。コマンドプロンプトからコマンドを打つことにより、あっというまにソフトウェアがインストールできるようになります。

まずは、管理者権限でコマンドプロンプトを立ち上げてください。

「windowsキー」を押す
「cmd」と入力(Enterキーは押さないでください)
コマンドプロンプトにフォーカスが当たっていることを確認し、「Shiftキー + Ctrlキー」を押しながら「Enterキー」を押す
画面が黒くなって「このアプリがデバイスに変更を許可しますか」ダイアログが表示されるので、「はい」を選択

「管理者：コマンドプロンプト」と左上部に書かれたコマンドプロンプトが立ち上がったら成功です。以降の作業もこの「管理者：コマンドプロンプト」にお世話になります。以降、本稿でコマンドプロンプトといえば「管理者：コマンドプロンプト」をさすことになりますのでよろしくお願いいたします。

ChocorateyをコマンドプロンプトからインストールするためにはPowerShellが必要です。よって立ち上げたコマンドプロンプトからPowerShellを起動します。Windows10はPowerShellがプリインストールされているはずですので、以下のコマンドをコマンドプロンプトに入力してください。

PowerShell

多分、コマンドプロンプトの表示が以下のように変わるはずです

PS C:\WINDOWS\system32>

PSはPowerShellの略です。立派にPowerShellが立ち上がったことを確認したら、以下のリンクを踏んでChocolateyのインストールページに移動してください。

Chocolatey install
https://chocolatey.org/install#installing-chocolatey

なんだか英語でいっぱい書いてありますが、重要なのは「Step 2: Choose Your Installation Method」と書いてある部分です。「Run Get-ExecutionPolicy. If it returns Restricted, then run Set-ExecutionPolicy AllSigned or Set-ExecutionPolicy Bypass -Scope Process.」と書いてある下に「Now run the following command」と書いてあります。Chocolateyをインストールするなら「下にかいてあるコマンドを入力してください」ってことですね。

「Now run the following command」の下にあるボックスの右のメモ用紙みたいな絵が書いてある部分をクリックするとクリップボードにコマンドがコピーされます。 2020/1/5現在のコピーされるコマンドの内容は以下です。

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

サイトからコピーしてきたコマンドを、コマンドプロンプトにコピーしてEnterキーを押すと、Chocolateyがインストールされます。あとはPowerShellにお任せ。ときどき「yキー」を押していたらインストールが完了するんではないでしょうか。
Chocolateyについてもうちょっと知りたいのであれば以下のサイトなどを参考にしてください。

Qiita:Chocolateyを使った環境構築の時のメモ
 https://qiita.com/konta220/items/95b40b4647a737cb51aa

Chocolateyは、Chocolateyを使ってソフトウェアをアンインストールするときにレジストリにゴミが残ったりする問題があるそうです。不安な方は、代替ツールがあるようなので以下のサイトなどを参考にしてください。

Windows開発環境の構築をChocolateyからscoopに切り替える
 https://tech.guitarrapc.com/entry/2019/12/01/233522

世の中って、頭がよくてやさしい人がたくさんいて、そういう人たちが、いろんなソフトウェアをフリーで使えるようにしてくれているんですね。ありがたい。ありがたい。また、その情報をWebに記録してくれている人もたくさんいるんです。本当にありがたい。つるかめつるかめ。

本稿では以降、Chocolateyを使って、いろいろインストールしていきます。scoopを使いたい人は適宜、scoopではこうするああするを自分で考えていい感じにインストールしていってください。

いろんな人が作った実装を簡単にPCにコピーできるようにする

難しい感じでいえば「構成管理ツール」、簡単にいえば「履歴を簡単に追えるようにしてくれるツール」をインストールしていきます。超有名な「git」です。

Linuxの現人神といっても過言ではないリーナス・トーバルズ氏が、「「svn」とか「csv」とかの既存の構成管理ツールはどんくさすぎる！！」と、ご立腹されて開発されたのが「git」です。

自分でも何をいっているのかわからないまま書きますが、「svn」などの構成管理ツールは履歴を管理する上で、一つのところで「変更」を管理するんです。しかし、「git」は、分散した上で「差分」を管理するんです。これはすごい設計を考えたものだなとしみじみ思います。リーナス氏は天才なんでしょうか。そう天才なんですね。

「git」についてざっくり知りたい人は以下のサイトなどを読んでみてはいかがでしょうか。ざっくり説明してくれています。

難しいGitコマンドは、仕組みから理解してみよう
 https://qiita.com/_ha1f/items/2dca1047c57d4f0bd465

Qiita:Git の仕組みを5分で理解する!
https://qiita.com/hshimo/items/ab91b99cd61724127aa7

さて、Chocolateyを使ってgitをインストールしていきます。コマンドプロンプトを起動してください。お忘れかもしれませんが、本稿でコマンドプロンプトというときは「管理者：コマンドプロンプト」です。管理者権限をお忘れなきようよろしくお願いします。そして、コマンドプロンプトに以下のコマンドを入力してください。

choco install git -y

Chocolateyさんがその力を遺憾なく発揮して、「git」をインストールしてくれます。インストールが完了したら、以下のコマンドをコマンドプロンプトに入力して「git」がインストールされていることを確認してください

git --version

きっと、インストールされた「git」のバージョンが表示されるでしょう。例えば以下のように。

git version 2.15.0.windows.1

ネットワークアプリケーションを簡単に動作できるようにする

非同期でWebアプリケーションを起動する仕組みをインストールします。Web開発に多少なりとも興味がある人なら目にしたことがあるであろうJavaScript、その名も「Node.js」と「Node.js」のバージョン管理と実行の補助をしてくれる「nvm」です。

「Node.js」は難しくいうとスレッドレスな非同期処理をしてくれるサーバーサイドのスクリプト環境だそうです。簡単にいうと「要求されたときにさっと起動して必要な処理をして終わってくれる仕組み」のようです。詳しいことは、以下のサイトなどを参照されればよいのではないでしょうか。

Node.js® とは
 https://nodejs.org/ja/about/

リアルタイム通信で活用！注目の技術「Node.js」とは【初心者向け】
https://techacademy.jp/magazine/16248

私は「Node.js」をまったく理解できていません。私は「Node.js」を、socketにconnectがあったらピョンと起動してパッと処理して、スッとさようならをしてくれるとても軽い仕組みとして理解しています。まちがっていたらご指摘お願いします。

まずは、「nvm」をインストールします。ここでもChocolateyさんに活躍してもらいます。コマンドプロンプトを起動し以下のコマンドを入力してください。

choco install nvm

そのあと、「nvm」がインストールされていることを確認するために以下のコマンドを入力してください。

nvm version

以下のように「nvm」のバージョンが出力されます。

1.1.7

「nvm」のインストールが終わったら「Node.js」を導入してください。私は最新で問題ないと思っています。最新の「Node.js」を導入するには以下のコマンドをコマンドプロンプトに入力してください。

nvm install latest

2020/1/5現在の最新バージョンは、「v13.5.0」です。ちなみに私は、「v8.11.1」も念のために導入しました。本稿の最後に示す私が参考にした文献が「v8.11.1」を導入していたためです。

バージョンを指定して、「Node.js」を導入するには以下のコマンドをコマンドプロンプトに入力します。

nvm install 8.11.1

「nvm」に導入された「Node.js」を参照するには以下のコマンドを入力してください。

nvm list

私の環境では以下のように出力されました

C:\WINDOWS\system32>nvm list

    13.5.0
    8.11.1

二つ以上のバージョンの「Node.js」を導入した場合は、どちらを通常使用するかを「nvm」に設定する必要があります。例えば、「v13.5.0」を使用するように設定したいのであれば、以下のようにコマンドを入力してください。

nvm use 13.5.0

いろいろなコードファイルをまとめてトランスパイルできるようにする

古来からある便利スクリプト環境makeをインストールします。トランスパイルやコンパイル(プログラムが書かれたファイルを機械語に変換するプロセスのこと)したいファイルをザクっと指定しておけば、いい感じでトランスパイルやコンパイルをして出来たファイルをリンクして一つのファイルにするスクリプトが書ける仕組みです。私が所属する組み込み業界では、とにかくmakeが大活躍しています。makeと聞けば「あのおなじみの」という感じです。そう、あのおなじみのmakeです。

makeは1977年にベル研究所のスチュアート・フェルドマン氏が作ったそうです。インターネットのイの字も無い時代に作られたものが、いまでも使われているって考えると感慨深いですね。さすが、あのおなじみのmakeです。

あのおなじみのmakeのことについて知りたいのであれば、以下のサイトを参照してみるのも良いかもしれません。

いまさら人に聞けないmake入門
 https://system.blog.uuum.jp/entry/make

Makeのことはじめ
 https://qiita.com/thaladabar/items/1f72a3359acb5cf7428e

さて、今回もChocolateyさんに活躍してもらいます。コマンドプロンプトに以下のコマンドを入力してください。

choco install make

そして例によって、makeがインストール出来ているかどうかバージョンを確認してみてください。

make -v

トランスパイル時に過去の生成物および中間生成物を削除できるようにする

Linuxでいうところの「rm」コマンド（Windowsでいうところのファイル削除コマンド「DEL」およびディレクトリ削除コマンド「RMDIR」）をOSに依存しないでスクリプトから実行できるようにするためのソフトウェア「rimraf」をインストールします。主に、あのおなじみのmakeから使用されることを想定しています。OS依存をしないという意味では、「Node.js」から利用されることも想定されます。

「rimraf」の詳細を知りたいという素晴らしい方は以下のサイトなどを参照してみてください。

npm run のスクリプトの中でディレクトリの削除を行う (rimraf)
https://maku77.github.io/nodejs/npm/npm-run-rimraf.html

Node.jsでフォルダを再帰的に削除する
 http://info-i.net/rimraf

今回は「nvm」さんに活躍してもらいます。コマンドプロンプトを立ち上げて以下のコマンドを入力してください。

nvm on
npm install -g rimraf

「rimraf」が正常インストールされたかどうか確認するために、以下のコマンドをコマンドプロンプトに入力してみてください。

nvm on
rimraf -h

以下のように「rimraf」のヘルプが表示されるはずです。

Usage: rimraf <path> [<path> ...]

  Deletes all files and folders at "path" recursively.

Options:

  -h, --help          Display this usage info
  -G, --no-glob       Do not expand glob patterns in arguments
  -g, --glob          Expand glob patterns in arguments (default)
  --preserve-root     Do not remove '/' (default)
  --no-preserve-root  Do not treat '/' specially
  --                  Stop parsing flags```

コーディングおよびトランスパイル、デバッグを容易にできるようにする

いまでは、有名すぎるテキストエディタであるVisualStudioCode（以降、VSCodeといいます）をインストールします。ちなみに私はVSCodeを勝手に「意識高い系エディタ」と心の中で呼んでいます。もちろん異論は認めます。便利なツールを便利に使うことに問題があろうはずがありません。心置きなくVSCodeをインストールしましょう。私はもちろん意識が高いのでVSCodeを私の大事なPCにインストールしました。

VSCodeは、偉大なるMicrosoft様のおかげで、Windowsに限らず、LinuxやMacで動作します。VSCodeが上手に扱える人は、OSを選ばずになれた環境でコーディングを楽しむことができます。さすが意識が高いテキストエディタですね。ありがたい。ありがたい。

さて、またまたChocolateyさんに活躍してもらいます。コマンドプロンプトを立ち上げて以下のコマンドを入力してください。

choco install visualstudiocode

そして、例のごとくVSCodeのインストールを確認するためバージョンを確認してみましょう。コマンドプロンプトに以下のように入力してみてください。

code --version

私の環境では以下のように出力されました。

C:\WINDOWS\system32>code --version
1.41.1
26076a4de974ead31f97692a0d32f90d735645c0
x64

さらに、VSCodeをWebAssemblyの開発に使えるように、VSCodeにいろんなエクステンションを適用しましょう。私が適用したのは以下のエクステンションです。

特に必須なのは以下の二つのエクステンションです。
C/C++ IntelliSense, debugging, and code browsing.
https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools

WebAssembly Toolkit for VSCode
https://marketplace.visualstudio.com/items?itemName=dtsvet.vscode-wasm

よければ適用したら便利なのが以下のエクステンションです。
Auto rename paired HTML/XML tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

A customizable extension for colorizing matching brackets
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Material Design Icons for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

ほかにも便利なエクステンションがあれば、ぜひ私に教えてください。

ちなみにさらっと「VSCodeにいろんなエクステンションを適用しましょう」と書きましたが、VSCodeを触ったことがない人にはなんのことだかわからないと思います。しかしながら申し訳ありません。本稿ではVSCodeの使い方についての詳細は述べません。例えば、以下のサイトなどを参考にVSCodeについてざっくり把握してください。

【初心者必見！】Visual Studio Codeの使い方を分かりやすく解説！
https://www.sejuku.net/blog/40607

ほかにもGoogle先生に聞けば、VSCodeについて説明してくれているサイトがたくさんヒットするはずです。Google先生にマジ感謝、そしていろんな情報をウェブに記録してくれている優しい方々に超マジ感謝しながらVSCoedeのあれこれについて確認してみてください。

簡単にローカルサーバーを起動できるようにする

HTTPサーバーをデバッグ用にローカル環境でお気軽に起動できるツール「serve」をインストールします。WindowsのHTTPサーバーといえば、IISが超有名です。ただIISは設定がめんどくさいし気軽に立ち上げたり終了したりすることが難しいです。「serve」はコマンドラインからパッと起動し、不要になったらあっというまに「ctrlキー + c」で終了させることができます。シリアルキラーのように生かしたり殺したりを何回も心置きなく行えるのが「serve」です。殺人は絶対にだめですが、殺サーバーはとても良いものです。

「serve」は「Node.js」を利用したソフトウェアになります。よって「nvm」を利用してインストールを行います。コマンドプロンプトを起動し以下のコマンドを入力してください。

nvm on
npm install -g serve

「serve」が正常にインストールできたかどうかを確認するためにHTMLでHello worldをしてみましょう。Hello worldは、プログラミング初学者が必ず行わなければならない世界共通の儀式です。古くはC言語の法王といっても過言ではないブライアン・カーニハン氏とデニス・リッチー氏によってこの儀式が主催されました。いまでは、C言語に限らずいろんなプログラミング言語でこの儀式が行われています。詳細については以下のウィキペディアを参照してみてください。

Hello world
https://ja.wikipedia.org/wiki/Hello_world

まずはPC上の任意の位置にディレクトリを作成してください。私はコマンドプロンプトから以下のコマンドを入力し「C:\usr\tmp」というディレクトリを作成しました。

mkdir c:\usr\tmp

コマンドプロンプトで任意のディレクトリに移動し、「index.html」を作成します。

cd c:\usr\tmp
type nul > index.html

VSCodeを使って、index.htmlの中身を編集します。以下のように入力すると、VSCodeは現在のディレクトリをオープンして起動します。

code .

ちなみに、WindowsのExploreを使えば、マウス操作で簡単にディレクトリを作成したりファイルを作成したりできるのはご存じかと思います。私がコマンドプロンプトを使った例を執拗に記載しているのは、コマンドラインによる操作に対して「ひるまない心」、「おれない心」を育んでほしいからです。その「心」がないとWeb開発に限らずソフトウェア開発全般が非常に困難になります。もちろん簡単にできることは簡単な手段で行えば良いです。手段にこだわって目的が達成できないなんてことは、ばかばかしいことですから。ただ、手段がわかりにくいから目的が達成できないのもちょっと悲しいですよね。ソフトウェア開発という「わかりにくさ」のかたまりを手数で粉砕するために、いまは積極的にコマンドプロンプトを使っていってほしいです。

話をもとに戻します。VSCodeを使って、index.htmlを編集してください。例えば、以下のように。

<!doctype html>
<head>
  <title>Hello World</title>
</head>
<body>
  <h1>Test</h1>
  <div>
    Hello Worldは「こんにちは、世界」という意味です。
  </div>
</body>
</html>

編集が終わったら、index.htmlを保存してください。「ctrlキー + sキー」を押すと保存が実行されます。ほかにもキーボードショートカットはたくさんあるので、覚えておくと良いでしょう。作業効率が上がります。ソフトウェア業界では効率の鬼みたいな人がガミガミいうことが多いです。「～～したら早いのになぜしないんですか」とか「～～が遅延したのはなぜなんですか」とか、人につめよるのが大好きな鬼がすくう鬼が島、それがソフトウェア業界です。そんな鬼に絡まれないようにキーボードショートカットを覚えておくのは「転ばぬ先の杖」として結構なことです。例えば以下のサイトを確認してみてください。

Qiita:【Windows版】VS Code キーボードショートカット一覧（オススメ付き）
https://qiita.com/TakahiRoyte/items/cdab6fca64da386a690b

次に、VSCodeのターミナルを開きます。ターミナルはコマンドプロンプトと似たようなものと考えてください。VSCode上で「ctrlキー + `キー」でターミナルが開かれます。無事にターミナルが開いたら、ターミナルに以下のコマンドを入力してください。

serve -l 8080 .

上記のコマンドを実行するとVSCodeがオープンしているディレクトリを「公開ディレクトリ」として「serve」が起動します。「serve」が正常起動したのであれば、以下のような表示がVSCodeのターミナルに表示されているはずです。

   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   Serving!                                       │
   │                                                  │
   │   - Local:            http://localhost:8080      │
   │   - On Your Network:  http://192.168.11.2:8080   │
   │                                                  │
   │   Copied local address to clipboard!             │
   │                                                  │
   └──────────────────────────────────────────────────┘

「http://localhost:8080」または「http://192.168.11.2:8080」のどちらでも良いので、ctrlキーを押しながらクリックすると、PCのデフォルトブラウザが起動します。ブラウザにihdex.htmlの内容が表示されれば、成功です。良かったですね。試しに、index.htmlに書かれている「Hello Worldは「こんにちは、世界」という意味です。」という文言を、例えば、「Hello Worldは世界中で行われている神聖な儀式です。」と書き換えて保存してみてください。そして、ブラウザ上でF5キーを押してみてください。index.htmlが再読み込みされ、表示されている文言が変わるはずです。よかったですね。

ついでにブラウザによりクライアントサイドのデバッグができることを確認しておきましょう。私はブラウザはChromeを使っています。Chrome上で「ctrlキー + shiftキー + iキー」を押すと、ChromeのDevToolが起動します。ここでは、「おお、なんか難しそうな画面がでたぞ」で終わって構いません。WebAsssemblyによってソフトウェア開発をしていく過程でいやでもDevToolにお世話になるはずです。私も「おお、なんか難しそうな画面がでたぞ」と独り言をいって右上に表示されている「×」を押してDevToolをそっと閉じました。ちなみに「Edge」でも「FireFox」でも「ctrlキー + shiftキー + iキー」でDevToolが起動するはずです。

動作が確認できたら、「serve」を停止しましょう。VSCodeのターミナル上で「ctrlキー + cキー」を押すと「serve」にシグナルが送られ動作が停止します。

WebAssemblyの開発環境を構築する

Web開発のベース環境が構築できたので、次はWebAssemblyの開発環境を構築します。WebAssemblyのトランスパイラ/コンパイラのデファクトスタンダードである「Emscripten」を導入します。「Emscripten」はC/C++のコードをトランスパイルしてJavaScriptファイルを作ったり、C/C++のコードをコンパイルしてwasmファイルを作ってくれます。以下に「Emscripten」でwasmを作る時の簡単なフローを記載します。

f:id:pumpkintan:20200105200102p:plain

Emscripten SDKの中に配置されているClangは、C/C+のプログラムが書かれたファイル(C code file/C++ code file)をLLVM IRやLLVM BitCodeに変換してくれるライブラリです。LLVN IRは誤解を恐れずにいえば仮想機械のためのアセンブラ言語です(そしてLLVM Bitcodeは、仮想機械のための機械語です)。Clangが生成したLLVM IRをBynaryEnというライブラリが最適化などをほどこしながらwasmにしてくれるという図式です。図の中でByaryEnを通って吐き出されているGlue codeというのは、ブラウザがwasmを取り込む上で必要なラッパー(wasmを優しく包み込んでHTML上で使えるようにしてくれるファイル)と考えれば良いでしょう。

などと、断言調で書いていますが上記は私のつたない英語力でいろんな情報を読んで解釈した結果を書いているだけなので間違っているかもしれません。図を含む文章に間違いがあれば、誰かが私に指摘してくれることをものすごく期待しながら断言しています。やさしい人、よろしくお願いします

では、WebAssemblyの開発環境の構築の概要を以下に列挙します。

Emscripten SDKを導入するために必要なソフトウェアを導入する(Pytho2.7の導入)
Emscripten SDKをPCにコピーする
Emscripten SDKをインストールする

Emscripten SDKを導入するために必要なソフトウェアを導入する

AIが将棋のプロをうちまかしたとか、AIが碁の名人に引退を決意させたとか、AIが人間の仕事を奪うとかとかとか。そうやって、いろいろ注目される機械学習ですが、その機械学習のライブラリがたくさんあることで、今とても激熱なプログラミング言語といわれるPythonをインストールします。Pythonは機械学習のためにあるんやないんやで。ないんやで。

おなじみのChocolateyさんに活躍してもらいましょう。ここで気をつけなければならないのは、2019/01/05現在では、Emscripten SDKのインストールに必要なのはPython2.7ということです。Python3.X系をいれるとEmscripten SDKのインストールに失敗します。それではコマンドプロンプトを立ち上げて、以下のコマンドを入力してください。

choco install python2

インストール出来たかどうか、以下のコマンドを入力してバージョンを確認してみましょう。

python --version

私の環境では以下のように出力されました。

Python 2.7.17

Emscripten SDKをPCにコピーする

ここでgithubの登場です。gitをgithubのことだと思っている人がいるくらいgitを語る上で重要なgithub。かなり雑に言えばいろんなオープンソースソフトウェアが集積されているサイトです。話がそれますが、昔はOSS(オープンソースソフトウェア)の集積場といえば、SourrceForgeだったりしたんですが、いろんな騒動があって悲しいことになっています。コンテンツを提供してくれる人たちの気持ちを大事にしないで自分の都合を優先するポータルサイトはうまくいかないという知見を、私に最初に与えてくれたのがSourrceForgeでした。詳細は以下のサイトなどを見れば良いのではないでしょうか。

オープンソースソフトウェアの老舗サイト「SourceForge」はいかにして堕ちていったのか
 https://gigazine.net/news/20150722-sourceforge/

話をもとに戻します。githubにはEmscripten SDKのgitリポジトリがあります。それを自分のPCにコピー(clone)します。まずはコピーするための任意のディレクトリをPC上に作りましょう。私は以下のようにコマンドプロンプトに入力し「C:\emscripten」を作りました。

mkdir C:\emscripten

そして、作った任意のディレクトリに移動。

cd C:\emscripten

任意のディレクトリにEmscripten SDKをgitを使ってコピーします。以下のように入力してください。

git clone https://github.com/juj/emsdk.git

任意のディレクトリに「emsdk」というディレクトリが出来て、かつ「emsdk」の下にはいろんなファイルやディレクトリが出来ていれば成功です。

Emscripten SDKをインストールする

「Emscripten SDK」を利用してC/C言語をwasmにコンパイルできるように「Emscripten SDK」をPCにインストールしましょう。早速コマンドプロンプトを立ち上げて、コピーしたディレクトリ「emsdk」に移動しましょう。

cd C:\emscripten\emsdk

最新の「Emscripten SDK」のツールを取り寄せます。

emsdk update

最新版のインストールを開始します。

emsdk install latest

「Emscripten SDK」が動作できるようにします。

emsdk activate latest

上記で多分、失敗したようなログがでます。なんかWindowsのパス設定でPythogがコケているようですが大きな問題ではないようです。慌てず騒がず以下を実行してください。

emsdk_env

これで「Emscripten SDK」のインストールが終了しました。早速「Emscripten SDK」のバージョンを確認してみましょう。

emcc --version

最後に

気力があれば、次回の記事は「Emscripten SDK」を使ったHello Worldを書きます。

参考文献

Learn WebAssembly: Build web applications with native performance using Wasm and C/C++ (English Edition)

著者：Mike Rourke 出版社: Packt Publishing; 1版 (2018/9/25) ASIN: B07HQKD16Q

私は好きにした

君らも好きにしろと言われたから私も好きにします

WebAssemblyの開発環境をWindows上に作りたい