Slide 1
Slide 1 text
© 2012-2023 BASE, Inc. 1
PHP Conference 2023
BASE株式会社 永野 峻輔 ( @glassmonekey )
PHPerにとっての
WebAssemblyの可能性
Slide 2
Slide 2 text
© 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
永野 峻輔 (ながの しゅんすけ）
昨日ディズニーで全身バキバキ...
Slide 3
Slide 3 text
© 2012-2023 BASE, Inc. 3
このトークの目的
● WebAssemblyの基本的な理解
● PHPerがWebAssembly(Wasm)と仲良くなること
Slide 4
Slide 4 text
© 2012-2023 BASE, Inc. 4
1
2
3
Wasmとは
Wasmを使って実装してみる
PHPerにとってのWasmの可能性
今日話すこと
Slide 5
Slide 5 text
© 2012-2023 BASE, Inc. 5
Wasm触ったことある人
✋
Slide 6
Slide 6 text
© 2012-2023 BASE, Inc. 6
Wasmを
業務で使ったことがある人✋
Slide 7
Slide 7 text
© 2012-2023 BASE, Inc. 7
ぜひ帰ったら遊んでみてください
Slide 8
Slide 8 text
© 2012-2023 BASE, Inc. 8
Wasm とは
Slide 9
Slide 9 text
© 2012-2023 BASE, Inc. 9
Wasmとは
Webブラウザを含む実行環境で
コード実行とコンパクトなコード表現を実現するバイナリ形式
https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
Slide 10
Slide 10 text
© 2012-2023 BASE, Inc. 10
対応状況
https://developer.mozilla.org/ja/docs/WebAssembly
モダンな環境なら基本動く
Slide 11
Slide 11 text
© 2012-2023 BASE, Inc. 11
例1 webassembly.sh
Linuxを模倣したもの
https://webassembly.sh
Slide 12
Slide 12 text
© 2012-2023 BASE, Inc. 12
例2 php-play.dev
https://php-play.dev
最近 PHP 8.3入荷しました。寄付待ってます!!
Slide 13
Slide 13 text
© 2012-2023 BASE, Inc. 13
詳細はblogや過去slideで
https://speakerdeck.com/nagano/phpwoburauzadedong-kasuji-shu https://zenn.dev/glassmonkey/articles/ae6cadef80c6c4
Slide 14
Slide 14 text
© 2012-2023 BASE, Inc. 14
なぜ Wasm なのか
Slide 15
Slide 15 text
© 2012-2023 BASE, Inc. 15
Webアプリのリッチ化
Slide 16
Slide 16 text
© 2012-2023 BASE, Inc. 16
JavaScriptだけだと辛い
● ブラウザゲーム(特に3D)
● AR/VR
● 画像処理
… etc
Slide 17
Slide 17 text
© 2012-2023 BASE, Inc. 17
JavaScript + Wasm
WebAssembly: How and why
https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/
WASMはJSの一部の代替え
Slide 18
Slide 18 text
© 2012-2023 BASE, Inc. 18
導入事例から見るWasm
https://madewithwebassembly.com/
Slide 19
Slide 19 text
© 2012-2023 BASE, Inc. 19
1Password
● 入力解析部分で主な改善
● Chromeで最大13倍、Firefoxだと39倍
https://blog.1password.com/1password-x-may-2019-update/
Slide 20
Slide 20 text
© 2012-2023 BASE, Inc. 20
TensorFlow
● パフォーマンス向上(約10倍）
● 機械学習のようなCPUなどのリソースを酷使する場合とは相性が良い
https://yashints.dev/blog/2019/12/17/tfjs-wasm
Slide 21
Slide 21 text
© 2012-2023 BASE, Inc. 21
Wasmの特徴
Slide 22
Slide 22 text
© 2012-2023 BASE, Inc. 22
Web Assemblyとは（2回目）
Webブラウザを含む実行環境で
コード実行とコンパクトなコード表現を実現するバイナリ形式
https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
Slide 23
Slide 23 text
© 2012-2023 BASE, Inc. 23
Wasmの特徴
● 移植性
○ 任意の言語でWebAssemblyにbuildできたら良い
● セキュア
○ Runtimeが隔離（Sandbox化）されているのでセキュア
Wasm
Host System
Wasi API
Wasm Runtime
Slide 24
Slide 24 text
© 2012-2023 BASE, Inc. 24
Wasmと仕様
● 基本仕様
○ Wasm-Core
● ブラウザ用仕様
○ Wasm Web API
○ Wasm JS API
● ブラウザ外仕様
○ Wasi (Web Assembly System Interface)
https://webassembly.org/specs/
それぞれ別物！！
Slide 25
Slide 25 text
© 2012-2023 BASE, Inc. 25
Wasmと仕様
● 基本仕様
○ Wasm-Core
● ブラウザ用仕様
○ Wasm Web API
○ Wasm JS API
● ブラウザ外仕様
○ Wasi (Web Assembly System Interface)
https://webassembly.org/specs/
今回はこれにフォーカスする
Slide 26
Slide 26 text
© 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 などなど
Slide 27
Slide 27 text
© 2012-2023 BASE, Inc. 27
呼び出し例 (NodeJS)
https://nodejs.org/api/wasi.html
Slide 28
Slide 28 text
© 2012-2023 BASE, Inc. 28
Wasiで動くプログラムを
書いてみよう
Slide 29
Slide 29 text
© 2012-2023 BASE, Inc. 29
Wasmtimeとは
● Rust製の軽量runtime
● Bytecode Alliance projectの1つ
● Rust, Python, Go, .Net, C/C++ には埋め込み可能
○ 残念ながらPHPは未対応
Slide 30
Slide 30 text
© 2012-2023 BASE, Inc. 30
Bytecode Allianceとは
https://nodejs.org/api/wasi.html
● 様々なプラットフォームでWasmを実行できる基盤を作る団体
○ ブラウザだけでなくIoTデバイスなどなど
● インテル、Mozilla、Red Hat、Fastlyの4社が創立に関与
● ここのニュースを抑えておけばWasmの動向は大体わかる
https://bytecodealliance.org/
Slide 31
Slide 31 text
© 2012-2023 BASE, Inc. 31
RustでWasmを作ってみる
● エントリーポイント実行でハロー
ワールドが出力される
● モジュールとして2つのintを足して
返却する関数を定義
● WasmはI/Fで数値しか扱えない。
文字列扱い場合は工夫が必要
○ build時のglueコードを使うという
手がある
Slide 32
Slide 32 text
© 2012-2023 BASE, Inc. 32
Wasi用Wasmへコンパイルする
● targetをwasm32-wasiにする
● Wasi用のwasmが生成される
Slide 33
Slide 33 text
© 2012-2023 BASE, Inc. 33
呼び出し例 (Wasmtime)
https://nodejs.org/api/wasi.html
実行
インストール
Slide 34
Slide 34 text
© 2012-2023 BASE, Inc. 34
呼び出し例 (Go with Wasmtime)
Slide 35
Slide 35 text
© 2012-2023 BASE, Inc. 35
Wasmを使った開発のデバッグ方法
WebAssembly/wabt がおすすめ
● WebAssembly Binary Toolkitの略
● Wasmはbinaryファイルなので生成物の
把握が難しい。
● wabtを使って様座な角度からデバッグ
することができる。
● 今回はWasmをWat (Wasm text
format)に変換するwasm2watのみ扱
う。
Slide 36
Slide 36 text
© 2012-2023 BASE, Inc. 36
wasm2watを使ってみる
● 事前にCMAKEをインストールしておく
必要はある。
● build後はよしなにpathを通しておく必
要がある
● 基本的にはlinux/macで使う前提
ビルドする
wasm2watを実行する
Slide 37
Slide 37 text
© 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
Slide 38
Slide 38 text
© 2012-2023 BASE, Inc. 38
PHPerにとってのWasm
Slide 39
Slide 39 text
© 2012-2023 BASE, Inc. 39
Wasmの可能性は無限大
nginxで呼び出せるようになったり
Slide 40
Slide 40 text
© 2012-2023 BASE, Inc. 40
Wasmの可能性は無限大
Wasi用build対応RFCも
https://github.com/php/php-src/pull/10457
Slide 41
Slide 41 text
© 2012-2023 BASE, Inc. 41
ブラウザ上でPHPが動いたり
https://php-play.dev
Slide 42
Slide 42 text
© 2012-2023 BASE, Inc. 42
Wasmの可能性
● どこでも動く軽量スクリプト
● 軽量ランタイム
● 言語を跨いだライブラリ
Slide 43
Slide 43 text
© 2012-2023 BASE, Inc. 43
Wasmの可能性
● どこでも動く軽量スクリプト
● 軽量ランタイム
● 言語を跨いだライブラリ
Slide 44
Slide 44 text
© 2012-2023 BASE, Inc. 44
どこでも動く軽量スクリプト
● luaがやりたかったこと
○ nginx-lua
○ Redis lua
○ etc..
● ファイルアクセスやホスト側とのデータのやりとりに
課題が多いが、Cとかの資産を活かすことができる
● 文字列が扱いずらい点は結構つらいので今後に期待
Slide 45
Slide 45 text
© 2012-2023 BASE, Inc. 45
api7/wasm-nginx-module
https://github.com/api7/wasm-nginx-module
現在開発中。envoyプロジェクトで発端で策定されたwasm + proxyの仕様
のnginx上の実装。
Slide 46
Slide 46 text
© 2012-2023 BASE, Inc. 46
Redis + Wasm
https://github.com/redis-rs/redis-rs/issues/508
現在提案がある形ではあるが、luaの代替えとして検討が進んでそう。
Slide 47
Slide 47 text
© 2012-2023 BASE, Inc. 47
Wasmの可能性
● どこでも動く軽量スクリプト
● 軽量ランタイム
● 言語を跨いだライブラリ
Slide 48
Slide 48 text
© 2012-2023 BASE, Inc. 48
軽量ランタイム
● 脱コンテナ
○ Docker Desktopのサポートが始まったり
○ 昨今のCPUアーキテクチャ事情(ローカルと本番で異なる場合あり
○ RuntimeにOSが必ずしも必要とは言えなくなってきた
● エッジコンピューティング
○ FaaSを求めている場合ホストOSは不要
○ 起動の軽量化が大事
Slide 49
Slide 49 text
© 2012-2023 BASE, Inc. 49
Wasmの可能性
● どこでも動く軽量スクリプト
● 軽量ランタイム
● 言語を跨いだライブラリ
Slide 50
Slide 50 text
© 2012-2023 BASE, Inc. 50
言語を跨いだライブラリ
● 複数のマイクロサービスを跨いだライブラリの作成
● バリデーションなどBEとFEで一貫性を持たせたい部分
の共通ロジック化
● OSSなどで各種言語への移植したい場合など
Slide 51
Slide 51 text
© 2012-2023 BASE, Inc. 51
まとめ
Slide 52
Slide 52 text
© 2012-2023 BASE, Inc. 52
まとめ
Wasmの可能性は無限大
Slide 53
Slide 53 text
© 2012-2023 BASE, Inc. 53
まとめ
Wasmと仲良くなりましょう
Slide 54
Slide 54 text
© 2012-2023 BASE, Inc. 54
まとめ
● WasmはWebアプリのリッチ化で始まった技術
● バックエンド上の活用が増えてきた
● PHPが任意の言語上で動く未来も遠くないかも
● Wasm(Wasi)の動向は要チェック
Slide 55
Slide 55 text
© 2012-2023 BASE, Inc. 55
宣伝
Slide 56
Slide 56 text
© 2012-2023 BASE, Inc. 56
宣伝その1 php-play.dev
https://php-play.dev
最近 PHP 8.3入荷しました。機能追加のissueやDMお待ちしています
Slide 57
Slide 57 text
© 2012-2023 BASE, Inc. 57
宣伝その2「BASEからPHPerの挑戦状」
● スポンサーブースで
「BASEからのPHPerへの挑戦状」というクイズをします。
ぜひお越しください！PHP8.3ネタも用意しています。
「BASEからPHPerへの挑戦状」 に挑戦する方はQRコードをよみとってください!
挑戦してくださった方にはコーヒーパックをプレゼントします!
Slide 58
Slide 58 text
© 2012-2023 BASE, Inc. 58
フルサイクル開発やってます!!
Go, Pythonも書いてます!!
DM待ってます!!
We are hiring !!