M1 MacへのWebAssembly環境構築手順


結論

良い点

  • WebAssembly(以下、Wasm)は実行環境を選ばない
  • 他言語との連携が可能
  • 5Gなど先の時代を見据えた高速な処理が可能
    • サーバーの処理をフロントで処理させることも可能
      • 動画変換など

イマイチな点

  • 資料が少ない
  • 環境が整っていない
  • 開発コストが高い(上記の理由により)

環境

  • macOS Big Sur ver11.2.1
  • zsh 5.8 (x86_64-apple-darwin20.0)

手順

Node.jsのインストール

過去のこちらの記事を参照しました

Rust のインストール

公式サイトまたは日本語サイトから手順を参照

特段理由が無い場合はrustupを用いてインストールを行うことが推奨されている

> curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

インストール方法を聞かれるがデフォルトで良い

You can uninstall at any time with rustup self uninstall and
these changes will be reverted.

Current installation options:


   default host triple: x86_64-apple-darwin
     default toolchain: stable (default)
               profile: default
  modify PATH variable: yes

1) Proceed with installation (default)
2) Customize installation
3) Cancel installation
> 1

下記、メッセージが表示されていればインストール完了

Rust is installed now. Great!

注意点として
パスは通してくれているが、現在のシェルに反映されてないので再読み込みさせる

To get started you need Cargo's bin directory ($HOME/.cargo/bin) in your PATH
environment variable. Next time you log in this will be done
automatically.

To configure your current shell, run:
source $HOME/.cargo/env
> source $HOME/.cargo/env

ライブラリをインストールする

Wasmへコンパイルするための標準ライブラリ

> rustup target add wasm32-unknown-unknown
info: downloading component 'rust-std' for 'wasm32-unknown-unknown'
info: installing component 'rust-std' for 'wasm32-unknown-unknown'

wasm-packのインストール

Wasmアプリケーションのbuildのために利用します

> cargo install wasm-pack

Installed package `wasm-pack v0.9.1` (executable `wasm-pack`)

以上です

余談

データ通信以外がすべてフロントエンドの技術で済む時代も来るのか!といった感じ
これからますますの発展に期待するばかりです