Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
バックエンドの技術をブラウザで動かす技術
Search
hacusk
August 30, 2024
Programming
0
99
バックエンドの技術をブラウザで動かす技術
SAPPORO ENGINEER BASE #03 (
https://seb-sapporo.connpass.com/event/326145/
) にて発表した資料です。
hacusk
August 30, 2024
Tweet
Share
More Decks by hacusk
See All by hacusk
形なしからの脱却
hacusk
0
7
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
2
640
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
KATA
mclloyd
30
14k
Facilitating Awesome Meetings
lara
54
6.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Faster Mobile Websites
deanohume
307
31k
A designer walks into a library…
pauljervisheath
207
24k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Transcript
バックエンドの技術を ブラウザで動かす技術 Hakata Yusuke(@hacusk)
$ whoami 👤 はくすけ(@hacusk) / Hakata Yusuke 🎂 1998.11.16 (25)
🛠 PHP, Golang, TypeScript, Java…. ✏ VSCode, Vim ❤ アニメ∕ゲーム、声優、旅⾏、⾞(ドライブ)、 モータースポーツ、カメラ、オーディオ、ガジェット、ク ラゲ、美味しいもの、𝕏
みんなセンキュー フロントエンドカンファレンス北海道2024にて会 場担当のスタッフをしてました。 https://hacusk.hatenablog.com/entry/2024/08/26/220848
WebAssembly abbreviated Wasm
インプレス NextPublishing 実践⼊⾨ WebAssembly 著者: ⼋⽊ 明⽇⾹
https://fortee.jp/frontend-conf-hokkaido-2024/proposal/7e197630-4764-4b7a-9a0b-a754caa5954f
Wasmって? WebAssembly (略称 Wasm) は、スタックベースの仮想マシン⽤のバイナリ命令形式です。 Wasmは、プログラミング⾔語のポータブルなコンパイルターゲットとして設計されており、クライ アントアプリケーションとサーバーアプリケーションを Web 上で展開できるようになります。 https://webassembly.org/
Wasmって? WebAssembly (略称 Wasm) は、スタックベースの仮想マシン⽤のバイナリ命令形式です。 Wasmは、プログラミング⾔語のポータブルなコンパイルターゲットとして設計されており、クライ アントアプリケーションとサーバーアプリケーションを Web 上で展開できるようになります。 https://webassembly.org/
Wasmって? WebAssembly は現代のウェブブラウザーで実⾏できる新しい種類のコードです。 ネイティブに近いパフォーマンスで動作する、コンパクトなバイナリー形式の低レベルなアセンブ リー⾵⾔語です。 さらに、 C/C++、C# や Rust などの⾔語のコンパイル先となり、それらの⾔語をウェブ上で実⾏する
ことができます。 WebAssembly は JavaScript と並⾏して動作するように設計されているため、 両⽅を連携させることができます。 https://developer.mozilla.org/ja/docs/WebAssembly
Wasmって? WebAssembly は現代のウェブブラウザーで実⾏できる新しい種類のコードです。 ネイティブに近いパフォーマンスで動作する、コンパクトなバイナリー形式の低レベルなアセンブ リー⾵⾔語です。 さらに、 C/C++、C# や Rust などの⾔語のコンパイル先となり、それらの⾔語をウェブ上で実⾏する
ことができます。 WebAssembly は JavaScript と並⾏して動作するように設計されているため、 両⽅を連携させることができます。 https://developer.mozilla.org/ja/docs/WebAssembly ウェブブラウザー上で実⾏できる CやC++、C#やRustなどの⾔語からコンパイルできる ネイティブに近いパフォーマンスで動作する バイナリ形式のアセンブリ⾔語
Wasmって? WebAssembly は現代のウェブブラウザーで実⾏できる新しい種類のコードです。 ネイティブに近いパフォーマンスで動作する、コンパクトなバイナリー形式の低レベルなアセンブ リー⾵⾔語です。 さらに、 C/C++、C# や Rust などの⾔語のコンパイル先となり、それらの⾔語をウェブ上で実⾏する
ことができます。 WebAssembly は JavaScript と並⾏して動作するように設計されているため、 両⽅を連携させることができます。 https://developer.mozilla.org/ja/docs/WebAssembly ウェブブラウザー上で実⾏できる CやC++、C#やRustなどの⾔語からコンパイルできる ネイティブに近いパフォーマンスで動作する バイナリ形式のアセンブリ⾔語 の仕様とVirtualMachineのこと
CPUの話 CPUなどのプロセッサには命令セットという命令の集まりがある。 プロセッサは命令を実⾏することで処理を⾏うが、プロセッサが受け⼊れ可能な命令はプロセッサご とに異なる。 Windows x86-64 macOS AArch64 Linux RISC-V
低⽔準⾔語の話 C/C++ やGo、Rustなどの低⽔準⾔語(⼀般的にコンパイラを必要とする物)では実⾏したいCPUアー キテクチャごとに対応したバイナリに変換する必要がある。 Windows x86-64 macOS AArch64 Linux RISC-V
C/C++, Go, Rust …
低⽔準⾔語の話 C/C++ やGo、Rustなどの低⽔準⾔語(⼀般的にコンパイラを必要とする物)では実⾏したいCPUアー キテクチャごとに対応したバイナリに変換する必要がある。 Windows x86-64 macOS AArch64 Linux RISC-V
C/C++, Go, Rust … 近年のブラウザにおいてはJavaScriptは JITコンパイラを搭載し 実⾏の直前に最適化等を⾏っている (インタプリタとコンパイラの間のようなイメージ)
じゃあWebAssemblyは? WebAssemblyでは各低⽔準⾔語からWebAssembly上で実⾏可能なバイナリ とそれを実⾏するVMを⽤いてOSやCPUアーキテクチャの差異を吸収している。 Windows x86-64 macOS AArch64 Linux RISC-V C/C++,
Go, Rust … WebAssembly
似てるね 30億のデバイスで⾛るJavaは、JavaコンパイラからJVM(Java Virtual Machine)で実⾏可能なバイナ リをコンパイルしJVM上で実⾏することで実現している。 Windows x86-64 macOS AArch64 Linux
RISC-V Java(source) JVM(Java Virtual Machine)
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 …)
https://webassembly.org/features/
VMがあればなんでもできる C/C++, Go, Rust … WebAssembly (binary) WebAssembly (VM) Web
Browser (Firefox / Chrome …) Wasmer (WebAssembly System Interface) Frontend Backend
なにがいいのか - クライアント(ブラウザ)とサーバー側で同⼀のコード資産を⽤いることができる - 簡単な処理はブラウザで、複雑な処理はサーバーでなどが可能 - 同じコードを⽤いることでプロダクトの品質の維持も可能 - JavaScript以上の⾼いパフォーマンスが実現できる(可能性が⾼い)
Wasm採⽤例 PHP Playground - PHPをブラウザ上で動かす仕組みとしてWebAssemblyを⽤いている Amazon Prime Video Figma
None