バックエンドの技術をブラウザで動かす技術

SAPPORO ENGINEER BASE #03 (https://seb-sapporo.connpass.com/event/326145/) にて発表した資料です。

Transcript

1. バックエンドの技術を ブラウザで動かす技術 Hakata Yusuke(@hacusk)
2. $ whoami 👤 はくすけ(@hacusk) / Hakata Yusuke 🎂 1998.11.16 (25) 🛠 PHP, Golang, TypeScript, Java…. ✏ VSCode, Vim ❤ アニメ∕ゲーム、声優、旅⾏、⾞（ドライブ）、 モータースポーツ、カメラ、オーディオ、ガジェット、ク ラゲ、美味しいもの、𝕏
3. みんなセンキュー フロントエンドカンファレンス北海道2024にて会 場担当のスタッフをしてました。 https://hacusk.hatenablog.com/entry/2024/08/26/220848
4. WebAssembly abbreviated Wasm
5. インプレス NextPublishing 実践⼊⾨ WebAssembly 著者: ⼋⽊ 明⽇⾹
6. https://fortee.jp/frontend-conf-hokkaido-2024/proposal/7e197630-4764-4b7a-9a0b-a754caa5954f
7. Wasmって? WebAssembly (略称 Wasm) は、スタックベースの仮想マシン⽤のバイナリ命令形式です。 Wasmは、プログラミング⾔語のポータブルなコンパイルターゲットとして設計されており、クライ アントアプリケーションとサーバーアプリケーションを Web 上で展開できるようになります。 https://webassembly.org/
8. Wasmって? WebAssembly (略称 Wasm) は、スタックベースの仮想マシン⽤のバイナリ命令形式です。 Wasmは、プログラミング⾔語のポータブルなコンパイルターゲットとして設計されており、クライ アントアプリケーションとサーバーアプリケーションを Web 上で展開できるようになります。 https://webassembly.org/
9. Wasmって? WebAssembly は現代のウェブブラウザーで実⾏できる新しい種類のコードです。 ネイティブに近いパフォーマンスで動作する、コンパクトなバイナリー形式の低レベルなアセンブ リー⾵⾔語です。 さらに、 C/C++、C# や Rust などの⾔語のコンパイル先となり、それらの⾔語をウェブ上で実⾏する ことができます。 WebAssembly は JavaScript と並⾏して動作するように設計されているため、 両⽅を連携させることができます。 https://developer.mozilla.org/ja/docs/WebAssembly
10. Wasmって? WebAssembly は現代のウェブブラウザーで実⾏できる新しい種類のコードです。 ネイティブに近いパフォーマンスで動作する、コンパクトなバイナリー形式の低レベルなアセンブ リー⾵⾔語です。 さらに、 C/C++、C# や Rust などの⾔語のコンパイル先となり、それらの⾔語をウェブ上で実⾏する ことができます。 WebAssembly は JavaScript と並⾏して動作するように設計されているため、 両⽅を連携させることができます。 https://developer.mozilla.org/ja/docs/WebAssembly ウェブブラウザー上で実⾏できる CやC++、C#やRustなどの⾔語からコンパイルできる ネイティブに近いパフォーマンスで動作する バイナリ形式のアセンブリ⾔語
11. Wasmって? WebAssembly は現代のウェブブラウザーで実⾏できる新しい種類のコードです。 ネイティブに近いパフォーマンスで動作する、コンパクトなバイナリー形式の低レベルなアセンブ リー⾵⾔語です。 さらに、 C/C++、C# や Rust などの⾔語のコンパイル先となり、それらの⾔語をウェブ上で実⾏する ことができます。 WebAssembly は JavaScript と並⾏して動作するように設計されているため、 両⽅を連携させることができます。 https://developer.mozilla.org/ja/docs/WebAssembly ウェブブラウザー上で実⾏できる CやC++、C#やRustなどの⾔語からコンパイルできる ネイティブに近いパフォーマンスで動作する バイナリ形式のアセンブリ⾔語 の仕様とVirtualMachineのこと
12. CPUの話 CPUなどのプロセッサには命令セットという命令の集まりがある。 プロセッサは命令を実⾏することで処理を⾏うが、プロセッサが受け⼊れ可能な命令はプロセッサご とに異なる。 Windows x86-64 macOS AArch64 Linux RISC-V
13. 低⽔準⾔語の話 C/C++ やGo、Rustなどの低⽔準⾔語（⼀般的にコンパイラを必要とする物）では実⾏したいCPUアー キテクチャごとに対応したバイナリに変換する必要がある。 Windows x86-64 macOS AArch64 Linux RISC-V C/C++, Go, Rust …
14. 低⽔準⾔語の話 C/C++ やGo、Rustなどの低⽔準⾔語（⼀般的にコンパイラを必要とする物）では実⾏したいCPUアー キテクチャごとに対応したバイナリに変換する必要がある。 Windows x86-64 macOS AArch64 Linux RISC-V C/C++, Go, Rust … 近年のブラウザにおいてはJavaScriptは JITコンパイラを搭載し 実⾏の直前に最適化等を⾏っている （インタプリタとコンパイラの間のようなイメージ）
15. じゃあWebAssemblyは？ WebAssemblyでは各低⽔準⾔語からWebAssembly上で実⾏可能なバイナリ とそれを実⾏するVMを⽤いてOSやCPUアーキテクチャの差異を吸収している。 Windows x86-64 macOS AArch64 Linux RISC-V C/C++, Go, Rust … WebAssembly
16. 似てるね 30億のデバイスで⾛るJavaは、JavaコンパイラからJVM(Java Virtual Machine)で実⾏可能なバイナ リをコンパイルしJVM上で実⾏することで実現している。 Windows x86-64 macOS AArch64 Linux RISC-V Java(source) JVM(Java Virtual Machine)
17. 30億のブラウザで⾛るWebAssembly ブラウザ上にWebAssemblyのVirtualMachineが 実装されている。 これにより、WebAssemblyのバイナリをブラウ ザ上で⾃由に実⾏できるようになっている。 また、バイナリフォーマットをWasmが直接扱う ことでJavaScriptよりも⾼いパフォーマンスが⾒ 込める。≒ マシン語 C/C++, Go, Rust … WebAssembly (binary) Windows x86-64 macOS AArch64 Linux RISC-V WebAssembly (VM) Web Browser (Firefox / Chrome …)
18. https://webassembly.org/features/
19. VMがあればなんでもできる C/C++, Go, Rust … WebAssembly (binary) WebAssembly (VM) Web Browser (Firefox / Chrome …) Wasmer (WebAssembly System Interface) Frontend Backend
20. なにがいいのか - クライアント（ブラウザ）とサーバー側で同⼀のコード資産を⽤いることができる - 簡単な処理はブラウザで、複雑な処理はサーバーでなどが可能 - 同じコードを⽤いることでプロダクトの品質の維持も可能 - JavaScript以上の⾼いパフォーマンスが実現できる（可能性が⾼い）
21. Wasm採⽤例 PHP Playground - PHPをブラウザ上で動かす仕組みとしてWebAssemblyを⽤いている Amazon Prime Video Figma