WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた

WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた by うーたん | トーク | iOSDC Japan 2025 #iosdc - fortee.jp
https://fortee.jp/iosdc-japan-2025/proposal/f71e096d-1452-4e81-b0f4-c8a46dac557c

Transcript

1. https://fortee.jp/iosdc-japan-2025/proposal/f71e096d-1452-4e81-b0f4-c8a46dac557c

2. 自己紹介
 • うーたん
 ◦ 𝕏：@uutan1108
 • バックエンドエンジニア 
 • 株式会社ゆめみ 
 2

3. PHPerKaigi に参加して、 
 iOSDC も参加したくなったので 
 来ました！ 
 
 
 3

4. PHPerKaigi に参加して、 
 iOSDC も参加したくなったので 
 来ました！ 
 
 初参加です！ 
 4

5. 参加したいので、 
 プロポーザルを出したい ...
 5

6. https://swiftwasm.org/
 6

7. これを再現したい！ 
 7

8. https://github.com/OHMORIYUSUKE/swiftwasm-playground
 8

9. 再現できた 
 ※ 実装まで再現はできてないです
 9

10. 使った技術 
 
 TypeScript, SwiftWasm
 
 10

11. 使った技術 
 
 TypeScript, SwiftWasm
 
 11

12. TypeScript とは
 JavaScriptのスーパーセットとなるプログラミング言語。静 的型付け言語 であり、プログラムの正しさが静的に検査でき る。(1)
 
 
 
 12
 (1) TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
 https://typescriptbook.jp/
 
 

13. TypeScript とは
 JavaScriptのスーパーセットとなるプログラミング言語。静 的型付け言語 であり、プログラムの正しさが静的に検査でき る。(1)
 JavaScript は、デベロッパーがインタラクティブなウェブペー ジを作成するために使用するプログラミング言語です。(2)
 13
 (1) TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
 https://typescriptbook.jp/
 (2) JavaScript とは? - JavaScript (JS) の説明 - AWS
 https://aws.amazon.com/jp/what-is/javascript/

14. Web ブラウザに 
 表示やデータの送受信の処理 のため
 14

15. 使った技術 
 
 TypeScript, SwiftWasm
 
 15

16. Wasm (WebAssembly) とは
 WebAssemblyとは、Webブラウザ上で高速に動作 するバイナリコードの仕様 を指す言葉です。
 
 16
 WebAssemblyとは？何ができるのか？できないことやユースケースをわかりやすく解説 ｜パーソルクロステクノロジー 
 https://staff.persol-xtech.co.jp/hatalabo/it_engineer/641.html

17. Wasm (WebAssembly) とは
 WebAssemblyとは、Webブラウザ上で高速に動作 するバイナリコードの仕様 を指す言葉です。
 C、C++、Rustなど、さまざまなプログラミング言語 で書かれたプログラムをコンパイル でき、既存の コードをWebブラウザ上で実行できる
 17
 WebAssemblyとは？何ができるのか？できないことやユースケースをわかりやすく解説 ｜パーソルクロステクノロジー 
 https://staff.persol-xtech.co.jp/hatalabo/it_engineer/641.html

18. Wasm (WebAssembly) とは
 18
 WebAssemblyとは？何ができるのか？できないことやユースケースをわかりやすく解説 ｜パーソルクロステクノロジー 
 https://staff.persol-xtech.co.jp/hatalabo/it_engineer/641.html

19. C、C++、Rust に加えて、 
 Swift もコンパイルできる 
 19

20. 使った技術 
 
 TypeScript, SwiftWasm
 
 20

21. SwiftWasm とは
 SwiftWasmは、Swiftで書かれたコードを WebAssembly（WASM）にコンパイル するため のツール。
 21
 SwiftWasm - compile Swift to WebAssembly
 https://swiftwasm.org/

22. つまり
 22

23. https://github.com/OHMORIYUSUKE/swiftwasm-playground
 23
 これの仕組みは、 

24. 24
 print("Hello Swift") 
 サーバー側

25. サーバー側
 25
 print("Hello Swift") 
 コードを送信

26. 26
 Wasm
 print("Hello Swift") 
 SwiftWasm で
 コンパイル
 サーバー側
 コードを送信

27. サーバー側
 27
 Wasm
 print("Hello Swift") 
 バイナリを返す

28. サーバー側
 28
 Wasm
 print("Hello Swift") 
 Hello Swift 
 バイナリを返す
 Wasm の実行結果 を表示

29. おわり
 29

30. ではなく...
 30

31. もう少しやることがある！ 
 31

32. print() などのシステムコール を
 Wasm からする場合は、 
 WASI の実装をする必要がある 
 32
 OSのシステムコールの呼び出しとは＆バイナリエディタの使い方： main()関数の前には何があるのか（ 4）
 （1/3 ページ） - ＠IT
 https://atmarkit.itmedia.co.jp/ait/articles/1703/01/news169.html

33. print() などのシステムコール を
 Wasm からする場合は、 
 WASI の実装をする必要がある 
 33
 OSのシステムコールの呼び出しとは＆バイナリエディタの使い方： main()関数の前には何があるのか（ 4）
 （1/3 ページ） - ＠IT
 https://atmarkit.itmedia.co.jp/ait/articles/1703/01/news169.html
 TypeScript で実装しました

34. WASI とは
 34

35. WASI（WebAssembly System Interface） とは
 35
 参考：WASI とは？ | Fastly https://www.fastly.com/jp/learning/serverless/what-is-wasi
 

36. WASI（WebAssembly System Interface） とは
 WASIは、WebAssembly（Wasm）の制約を解決 するため に開発されました。
 36
 参考：WASI とは？ | Fastly https://www.fastly.com/jp/learning/serverless/what-is-wasi
 

37. WASI（WebAssembly System Interface） とは
 
 WASIは、WebAssembly（Wasm）の制約を解決 するため に開発されました。
 WASI によって
 • ファイルやネットワークなどのシステムリソースに直接ア クセス可能にする
 • システムコール を直接できるようにする
 37
 参考：WASI とは？ | Fastly https://www.fastly.com/jp/learning/serverless/what-is-wasi
 

38. 38
 WebAssembly: Docker without containers!
 https://wasmlabs.dev/articles/docker-without-containers/

39. 39
 WebAssembly: Docker without containers!
 https://wasmlabs.dev/articles/docker-without-containers/
 システムコール
 システムコール（System Call） は、WindowsやLinuxといった OSのカーネルが持つサービス を要求するための命令です。
 システムコールとは【用語集詳細】 
 https://www.sompocybersecurity.com/column/glossary/system-call
 

40. 今回実装した WASI のメソッド 
 40
 参考：OSのシステムコールの呼び出しとは＆バイナリエディタの使い方： main()関数の前には何があるのか（ 4）
 （1/3 ページ） - ＠IT
 https://atmarkit.itmedia.co.jp/ait/articles/1703/01/news169.html
 Swiftのメソッド WASIのメソッド システムコール print() fd_write() write() readLine() fd_read() read() exit() proc_exit() _exit() Int.random() random_get() getrandom() Swift が表で示したシステムコールをしているか調べきれてないです。

41. fd_write を
 TypeScript で実装
 41
 print()

42. fd_write: (fd: number, iovs: number, iovsLen: number, nwritten: number) => { if (fd === 1 || fd === 2) { const memory = (instance.exports.memory as WebAssembly.Memory); const buffer = new Uint8Array(memory.buffer); let totalWritten = 0; for (let i = 0; i < iovsLen; i++) { const iovPtr = iovs + i * 8; const strPtr = new DataView(memory.buffer).getUint32(iovPtr, true); const strLen = new DataView(memory.buffer).getUint32(iovPtr + 4, true); const str = new TextDecoder().decode(buffer.slice(strPtr, strPtr + strLen)); setOutput(prev => prev + str); totalWritten += strLen; } new DataView(memory.buffer).setBigUint64(nwritten, BigInt(totalWritten), true); return 0; } return -1; }
 42

43. fd_write: (fd: number, iovs: number, iovsLen: number, nwritten: number) => { // fd === 1: 標準出力(stdout), fd === 2: 標準エラー出力 (stderr) if (fd === 1 || fd === 2) { // WebAssemblyインスタンスのメモリを取得 const memory = (instance.exports.memory as WebAssembly.Memory); const buffer = new Uint8Array(memory.buffer); let totalWritten = 0; // 実際に書き込まれたバイト数の合計 // iovs（iovec配列）をループ処理 // iovecは { データのポインタ , データの長さ } の構造体 for (let i = 0; i < iovsLen; i++) { // 各iovecの位置を計算（8バイトずつ: ポインタ4バイト + 長さ4バイト） const iovPtr = iovs + i * 8; // DataViewを使ってメモリから値を読み取り const strPtr = new DataView(memory.buffer).getUint32(iovPtr, true); // 文字列の開始アドレス const strLen = new DataView(memory.buffer).getUint32(iovPtr + 4, true); // 文字列の長さ // メモリから文字列データを取得してデコード const str = new TextDecoder().decode(buffer.slice(strPtr, strPtr + strLen)); // Reactのstate更新関数を使って出力を表示 setOutput(prev => prev + str); // 書き込まれたバイト数を累積 totalWritten += strLen; } // nwrittenポインタに実際に書き込まれたバイト数を書き込み // これにより、SwiftWasm側で書き込み結果を確認できる new DataView(memory.buffer).setBigUint64(nwritten, BigInt(totalWritten), true); return 0; // 成功を示す戻り値 } // 標準出力・標準エラー出力以外のファイルディスクリプタの場合はエラー return -1; // エラーを示す戻り値 }
44. メモリからデータを取得してはデ コードする 
 44

45. 画面に文字列を 
 表示する処理は簡単 
 45

46. fd_write: (fd: number, iovs: number, iovsLen: number, nwritten: number) = (省略) for (let i = 0; i < iovsLen; i++) { const iovPtr = iovs + i * 8; const strPtr = new DataView(memory.buffer).getUint32(iovPtr, tru const strLen = new DataView(memory.buffer).getUint32(iovPtr + const str = new TextDecoder().decode(buffer.slice(strPtr, strPtr + setOutput(prev => prev + str); totalWritten += strLen; } (省略) }
 46
 一文字づつ文字列連結して
 画面に表示する TypeScript の命令

47. サーバー側
 47
 Wasm
 print("Hello Swift") 
 Hello Swift 
 Wasm の実行結果 を表示

48. ここまでして 
 print() の結果を画面に 
 表示できた 
 48

49. 感想
 49

50. Wasm や WASI について
 勉強になった 
 50

51. メモリやビット、アドレスの 
 話がたくさん出てきて辛かった 
 51

52. 今回
 Swift をほとんど書けなかったので 
 
 次は
 Swift をゴリゴリに書いて何かしたい 
 52

53. おわり
 
 懇親会ではよろしくお願いします！ 
 iOS エンジニアの方々と話たいです！ 
 53