Scala.js 1.17.0 で実験的な Wasm backend がサポートされました！
<iframe id="zenn-embedded__0afc55f9fc1dc" src="https://embed.zenn.studio/card#zenn-embedded__0afc55f9fc1dc" data-content="https%3A%2F%2Fwww.scala-js.org%2Fnews%2F2024%2F09%2F28%2Fannouncing-scalajs-1.17.0%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://www.scala-js.org/news/2024/09/28/announcing-scalajs-1.17.0/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.scala-js.org/news/2024/09/28/announcing-scalajs-1.17.0/</a>
リリースノートに書いてあるとおり、以下のような設定をすることでScala.jsがJSの代わりにWasmモジュール(とモジュールに渡すJS object)を生成することができます。
<code>@JSExport</code> によるモジュールのexportがサポートされていませんが、それ以外のsemanticsはサポートされており、既存のScala.jsアプリケーションを変更なしにWasmにビルドすることが可能なはずです。(もし何か問題があれば教えて下さい!)
<div class="code-block-container"><pre class="language-scala"><code class="language-scala code-line" data-line="8">// Emit ES modules with the Wasm backend
scalaJSLinkerConfig := {
 scalaJSLinkerConfig.value
 .withExperimentalUseWebAssembly(true) // use the Wasm backend
 .withModuleKind(ModuleKind.ESModule) // required by the Wasm backend
 .withPrettyPrint(true) // (デバッグ用) これを設定すると .wat ファイルも一緒に生成してくれる
},

// Configure Node.js (at least v22) to support the required Wasm features
jsEnv := {
 val config = NodeJSEnv.Config()
 .withArgs(List(
 "--experimental-wasm-exnref", // required
 "--experimental-wasm-imported-strings", // optional (good for performance)
 "--turboshaft-wasm", // optional, but significantly increases stability
 ))
 new NodeJSEnv(config)
},
</code></pre></div>以下の Wasm features を利用した Wasm module を生成しているため、新し目のブラウザ・JSランタイムが必要になります(Node.js v22 など)
<ul data-line="31" class="code-line">
<li data-line="31" class="code-line">Wasm Garbage Collection</li>
<li data-line="32" class="code-line">Wasm Exception Handling</li>
<li data-line="33" class="code-line">(optional) JS String Builtin
<ul data-line="34" class="code-line">
<li data-line="34" class="code-line">利用できない場合はpollyfillによる実装にfallbackします</li>
</ul>
</li>
<li data-line="35" class="code-line">Tail Call Extension</li>
</ul>
各種ブラウザ・JSランタイムのサポート状況は <a href="https://webassembly.org/features/" target="_blank" rel="nofollow noopener noreferrer">https://webassembly.org/features/</a>
またJS環境で実行可能なWasmしか生成することができず、wasmtimeやWasmEdgeといったWasmランタイムはサポートしていません。
<h2 id="%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E3%83%BB%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA%E3%82%B5%E3%82%A4%E3%82%BA" data-line="41" class="code-line">
<a class="header-anchor-link" href="#%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E3%83%BB%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA%E3%82%B5%E3%82%A4%E3%82%BA" aria-hidden="true"></a> パフォーマンス・バイナリサイズ</h2>
Wasmは早いとか遅いとか言われますが、実際はWasmは最適化する余地がJSより大きいというだけの話(という理解)で早いか遅いかはアプリケーションの性質とコンパイラとVMの実装にかかっています。残念ながら、現時点ではWasmバックエンドは必ずしもScala.jsのJSバックエンドより実行速度が早いコードを生成するとは限りません。
また生成されるコードのサイズも、現時点では Scala.js の JS backend + Google Closure Compiler を使って最適化したものの方が、Wasm backend よりも小さいコードを生成します。
少し前のデータになりますが、以下のブログ(英語)にベンチマーク結果を書いていますので詳しく知りたい方はそちらを参照してください。
<iframe id="zenn-embedded__f774fde1f26ae" src="https://embed.zenn.studio/card#zenn-embedded__f774fde1f26ae" data-content="https%3A%2F%2Fdev.virtuslab.com%2Fi%2F146705467%2Frun-time-performance-analysis" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://dev.virtuslab.com/i/146705467/run-time-performance-analysis" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://dev.virtuslab.com/i/146705467/run-time-performance-analysis</a>
また以下のツイートではJSバックエンドとWasmバックエンドで生成したLife of Gameの実行速度を比較していますが、やはりJSの方が幾分早いですね。 
単純な数値計算なんかはWasmが長じているのですが、JS interopが多く発生するとそのオーバーヘッドがパフォーマンスに大きく影響してくるように感じています。
<iframe id="zenn-embedded__add3caa0b6388" src="https://embed.zenn.studio/tweet#zenn-embedded__add3caa0b6388" data-content="https%3A%2F%2Fx.com%2Fvelvetbaldmime%2Fstatus%2F1840009315094016489" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://x.com/velvetbaldmime/status/1840009315094016489" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/velvetbaldmime/status/1840009315094016489</a>
これを見てWasm遅いじゃん！と思ってほしくはなくてScala.jsは10年以上の最適化の積み重ねにより効率的なJSコードを生成している(VMも同じですね)のに対して、Wasmバックエンドは開発開始からまだ約半年。まだまだ最適化の余地が多く残されています。
例えばまだ<a href="https://github.com/WebAssembly/binaryen" target="_blank" rel="nofollow noopener noreferrer">wasm-opt</a>は<a href="https://github.com/WebAssembly/binaryen/issues/6407" target="_blank" rel="nofollow noopener noreferrer">一部のWasmGCの機能が不足している</a>ため、Scala.jsが生成したWasmバイナリに対して最適化を実行することができません。(block parameter typeを<code>local.get</code>と<code>local.set</code>にlowerするパッチは手元にあるのですが...)
今後の最適化でどのくらい高速にバイナリサイズを小さく出来るか楽しみですね。
<h2 id="%E4%BB%8A%E5%BE%8C" data-line="62" class="code-line">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%BE%8C" aria-hidden="true"></a> 今後</h2>
<ul data-line="64" class="code-line">
<li data-line="64" class="code-line">さらなる最適化</li>
<li data-line="65" class="code-line">JS依存のないWasmモジュールの生成。これによりwasmtimeやwasmedgeなどのstand-alone wasm runtimeで実行できるコードを生成
<ul data-line="66" class="code-line">
<li data-line="66" class="code-line"><a href="https://github.com/scala-js/scala-js/issues/4991" target="_blank" rel="nofollow noopener noreferrer">https://github.com/scala-js/scala-js/issues/4991</a></li>
</ul>
</li>
<li data-line="67" class="code-line">Wasm Component Model (host/guest) 対応
<ul data-line="68" class="code-line">
<li data-line="68" class="code-line">WASI Preview 2 対応のためにどちらにしろhostとしての対応は必要になる</li>
<li data-line="69" class="code-line">GCをmoduleに組み込まず、WasmGCを利用する選択をしたからこそサイズの小さいguest componentが作れるのではないか?</li>
</ul>
</li>
<li data-line="70" class="code-line">
<a href="https://github.com/WebAssembly/stack-switching" target="_blank" rel="nofollow noopener noreferrer">stack swtiching proposal</a>による効率的なVirtual Threadの実装
<ul data-line="71" class="code-line">
<li data-line="71" class="code-line">ScalaJVMはProject Loom、<a href="https://dl.acm.org/doi/abs/10.1145/3679005.3685979" target="_blank" rel="nofollow noopener noreferrer">ScalaNativeはsetjmp/longjmpベースのdelimcc</a>によりVirtual Thread APIをサポートしていますが、ScalaJSではwhole program transformationをするしか術がありませんでした。stack switching proposal により ScalaJS でも効率的な Virtual Thread API の実装が可能になるのではないかと期待しています(まだ全然調べてない)</li>
</ul>
</li>
</ul>
<h2 id="%E6%84%9F%E6%83%B3" data-line="74" class="code-line">
<a class="header-anchor-link" href="#%E6%84%9F%E6%83%B3" aria-hidden="true"></a> 感想</h2>
2024年初め頃にScala.jsのWasmバックエンド実装を始めて、やっとこさアップストリームへのリリースまでこぎつけることができました。最初のベース実装は僕がやったのですが、そこから実際にあらゆるソフトウェアを動かすことができるようにするまではScala.js作者の<a href="https://github.com/sjrd" target="_blank" rel="nofollow noopener noreferrer">@sjrd</a>がかなり実装してくれました(ありがとう)。
<iframe id="zenn-embedded__42f04430aebc1" src="https://embed.zenn.studio/card#zenn-embedded__42f04430aebc1" data-content="https%3A%2F%2Fgithub.com%2Ftanishiking%2Fscala-wasm" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/tanishiking/scala-wasm" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/tanishiking/scala-wasm</a>
<iframe id="zenn-embedded__2b883789579d3" src="https://embed.zenn.studio/card#zenn-embedded__2b883789579d3" data-content="https%3A%2F%2Fgithub.com%2Fscala-js%2Fscala-js%2Fpull%2F4988" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/scala-js/scala-js/pull/4988" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/scala-js/scala-js/pull/4988</a>
引き続き、ScalaのWasm対応頑張っていこうと思います。

Scala の Wasm バックエンドを実装した

パフォーマンス・バイナリサイズ

Discussion