PHPerにとってのWebAssemblyの可能性

© 2012-2023 BASE, Inc. 1
PHP Conference 2023
BASE株式会社永野峻輔 ( @glassmonekey )
PHPerにとっての
WebAssemblyの可能性

View Slide

© 2012-2023 BASE, Inc. 2
自己紹介
所属
BASE 株式会社 BASE BANKチーム Engineering Program Manager
資金調達プロダクト「YELL BANK」の開発責任者やってます。
Go, PHP, Pythonを書きつつ時々データエンジニアも。
趣味
個人開発
最近は日帰り温泉とかも　　
SNS
X(Twitter)： @glassmonekey　
Github： https://github.com/glassmonkey
永野峻輔 (ながのしゅんすけ）
昨日ディズニーで全身バキバキ...

View Slide

© 2012-2023 BASE, Inc. 3
このトークの目的
● WebAssemblyの基本的な理解
● PHPerがWebAssembly(Wasm)と仲良くなること

View Slide

© 2012-2023 BASE, Inc. 4
1
2
3
Wasmとは
Wasmを使って実装してみる
PHPerにとってのWasmの可能性
今日話すこと

View Slide

© 2012-2023 BASE, Inc. 5
Wasm触ったことある人
✋

View Slide

© 2012-2023 BASE, Inc. 6
Wasmを
業務で使ったことがある人✋

View Slide

© 2012-2023 BASE, Inc. 7
ぜひ帰ったら遊んでみてください

View Slide

© 2012-2023 BASE, Inc. 8
Wasm とは

View Slide

© 2012-2023 BASE, Inc. 9
Wasmとは
Webブラウザを含む実行環境で
コード実行とコンパクトなコード表現を実現するバイナリ形式
https://developer.mozilla.org/ja/docs/WebAssembly/Concepts

View Slide

© 2012-2023 BASE, Inc. 10
対応状況
https://developer.mozilla.org/ja/docs/WebAssembly
モダンな環境なら基本動く

View Slide

© 2012-2023 BASE, Inc. 11
例1 webassembly.sh
Linuxを模倣したもの
https://webassembly.sh

View Slide

© 2012-2023 BASE, Inc. 12
例2 php-play.dev
https://php-play.dev
最近 PHP 8.3入荷しました。寄付待ってます!!

View Slide

© 2012-2023 BASE, Inc. 13
詳細はblogや過去slideで
https://speakerdeck.com/nagano/phpwoburauzadedong-kasuji-shu https://zenn.dev/glassmonkey/articles/ae6cadef80c6c4

View Slide

© 2012-2023 BASE, Inc. 14
なぜ Wasm なのか

View Slide

© 2012-2023 BASE, Inc. 15
Webアプリのリッチ化

View Slide

© 2012-2023 BASE, Inc. 16
JavaScriptだけだと辛い
● ブラウザゲーム(特に3D)
● AR/VR
● 画像処理
… etc

View Slide

© 2012-2023 BASE, Inc. 17
JavaScript + Wasm
WebAssembly: How and why
https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/
WASMはJSの一部の代替え

View Slide

© 2012-2023 BASE, Inc. 18
導入事例から見るWasm
https://madewithwebassembly.com/

View Slide

© 2012-2023 BASE, Inc. 19
1Password
● 入力解析部分で主な改善
● Chromeで最大13倍、Firefoxだと39倍　
https://blog.1password.com/1password-x-may-2019-update/

View Slide

© 2012-2023 BASE, Inc. 20
TensorFlow
● パフォーマンス向上(約10倍）
● 機械学習のようなCPUなどのリソースを酷使する場合とは相性が良い
https://yashints.dev/blog/2019/12/17/tfjs-wasm

View Slide

© 2012-2023 BASE, Inc. 21
Wasmの特徴

View Slide

© 2012-2023 BASE, Inc. 22
Web Assemblyとは（2回目）
Webブラウザを含む実行環境で
コード実行とコンパクトなコード表現を実現するバイナリ形式
https://developer.mozilla.org/ja/docs/WebAssembly/Concepts

View Slide

© 2012-2023 BASE, Inc. 23
Wasmの特徴
● 移植性
○ 任意の言語でWebAssemblyにbuildできたら良い
● セキュア
○ Runtimeが隔離（Sandbox化）されているのでセキュア
Wasm
Host System
Wasi API
Wasm Runtime

View Slide

© 2012-2023 BASE, Inc. 24
Wasmと仕様
● 基本仕様
○ Wasm-Core
● ブラウザ用仕様
○ Wasm Web API
○ Wasm JS API
● ブラウザ外仕様
○ Wasi (Web Assembly System Interface)
https://webassembly.org/specs/
それぞれ別物！！

View Slide

© 2012-2023 BASE, Inc. 25
Wasmと仕様
● 基本仕様
○ Wasm-Core
● ブラウザ用仕様
○ Wasm Web API
○ Wasm JS API
● ブラウザ外仕様
○ Wasi (Web Assembly System Interface)
https://webassembly.org/specs/
今回はこれにフォーカスする

View Slide

© 2012-2023 BASE, Inc. 26
WASI(Web Assembly System Interface)
任意のシステムで呼び出すための仕様
詳しくは
https://hacks.mozilla.org/2019/03/stan
dardizing-wasi-a-webassembly-system-i
nterface/
Wasm
Host System
Wasi API
Wasm Runtime
● Wasm Runtime上ならどこでも動かすことができる
○ 例) Wasmtime, NodeJS などなど

View Slide

© 2012-2023 BASE, Inc. 27
呼び出し例 (NodeJS)
https://nodejs.org/api/wasi.html

View Slide

© 2012-2023 BASE, Inc. 28
Wasiで動くプログラムを
書いてみよう

View Slide

© 2012-2023 BASE, Inc. 29
Wasmtimeとは
● Rust製の軽量runtime
● Bytecode Alliance projectの1つ
● Rust, Python, Go, .Net, C/C++ には埋め込み可能
○ 残念ながらPHPは未対応

View Slide

© 2012-2023 BASE, Inc. 30
Bytecode Allianceとは
● 様々なプラットフォームでWasmを実行できる基盤を作る団体
○ ブラウザだけでなくIoTデバイスなどなど
● インテル、Mozilla、Red Hat、Fastlyの4社が創立に関与
● ここのニュースを抑えておけばWasmの動向は大体わかる
https://bytecodealliance.org/

View Slide

© 2012-2023 BASE, Inc. 31
RustでWasmを作ってみる
● エントリーポイント実行でハロー
ワールドが出力される
● モジュールとして2つのintを足して
返却する関数を定義
● WasmはI/Fで数値しか扱えない。
文字列扱い場合は工夫が必要
○ build時のglueコードを使うという
手がある

View Slide

© 2012-2023 BASE, Inc. 32
Wasi用Wasmへコンパイルする
● targetをwasm32-wasiにする
● Wasi用のwasmが生成される

View Slide

© 2012-2023 BASE, Inc. 33
呼び出し例 (Wasmtime)
実行
インストール

View Slide

© 2012-2023 BASE, Inc. 34
呼び出し例 (Go with Wasmtime)

View Slide

© 2012-2023 BASE, Inc. 35
Wasmを使った開発のデバッグ方法
WebAssembly/wabt がおすすめ
● WebAssembly Binary Toolkitの略
● Wasmはbinaryファイルなので生成物の
把握が難しい。
● wabtを使って様座な角度からデバッグ
することができる。
● 今回はWasmをWat (Wasm text
format)に変換するwasm2watのみ扱
う。

View Slide

© 2012-2023 BASE, Inc. 36
wasm2watを使ってみる
● 事前にCMAKEをインストールしておく
必要はある。
● build後はよしなにpathを通しておく必
要がある
● 基本的にはlinux/macで使う前提
ビルドする
wasm2watを実行する

View Slide

© 2012-2023 BASE, Inc. 37
WasmファイルをWatに
ファイルの中身を抜粋
● WatはWasmと相互変換が可能
● WatはLISPでおなじみのS式という表現
● main関数は引数なしでintが返却される
● add関数は引数2つでintが返却される
● 内部的使われるシンボル定義も見えたりする
詳しくはWebAssembly テキスト形式の理解を参照
ください。
https://developer.mozilla.org/ja/docs/WebAssembly/Understanding_the_text_format

View Slide

© 2012-2023 BASE, Inc. 38
PHPerにとってのWasm

View Slide

© 2012-2023 BASE, Inc. 39
Wasmの可能性は無限大
nginxで呼び出せるようになったり

View Slide

© 2012-2023 BASE, Inc. 40
Wasi用build対応RFCも
https://github.com/php/php-src/pull/10457

View Slide

© 2012-2023 BASE, Inc. 44
どこでも動く軽量スクリプト
● luaがやりたかったこと
○ nginx-lua
○ Redis lua
○ etc..
● ファイルアクセスやホスト側とのデータのやりとりに
課題が多いが、Cとかの資産を活かすことができる
● 文字列が扱いずらい点は結構つらいので今後に期待

View Slide

© 2012-2023 BASE, Inc. 45
api7/wasm-nginx-module
https://github.com/api7/wasm-nginx-module
現在開発中。envoyプロジェクトで発端で策定されたwasm + proxyの仕様
のnginx上の実装。

View Slide

© 2012-2023 BASE, Inc. 46
Redis + Wasm
https://github.com/redis-rs/redis-rs/issues/508
現在提案がある形ではあるが、luaの代替えとして検討が進んでそう。

View Slide

© 2012-2023 BASE, Inc. 48
軽量ランタイム
● 脱コンテナ
○ Docker Desktopのサポートが始まったり
○ 昨今のCPUアーキテクチャ事情(ローカルと本番で異なる場合あり
○ RuntimeにOSが必ずしも必要とは言えなくなってきた
● エッジコンピューティング
○ FaaSを求めている場合ホストOSは不要
○ 起動の軽量化が大事

View Slide

© 2012-2023 BASE, Inc. 50
言語を跨いだライブラリ
● 複数のマイクロサービスを跨いだライブラリの作成
● バリデーションなどBEとFEで一貫性を持たせたい部分
の共通ロジック化
● OSSなどで各種言語への移植したい場合など

View Slide

© 2012-2023 BASE, Inc. 54
まとめ
● WasmはWebアプリのリッチ化で始まった技術
● バックエンド上の活用が増えてきた
● PHPが任意の言語上で動く未来も遠くないかも
● Wasm(Wasi)の動向は要チェック

View Slide

© 2012-2023 BASE, Inc. 57
宣伝その2「BASEからPHPerの挑戦状」
● スポンサーブースで
「BASEからのPHPerへの挑戦状」というクイズをします。
ぜひお越しください！PHP8.3ネタも用意しています。
「BASEからPHPerへの挑戦状」に挑戦する方はQRコードをよみとってください!
挑戦してくださった方にはコーヒーパックをプレゼントします!

View Slide

PHPerにとってのWebAssemblyの可能性

PHPerにとってのWebAssemblyの可能性

glassmonenkey

More Decks by glassmonenkey

Other Decks in Technology

Featured

Transcript