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
110
バックエンドの技術をブラウザで動かす技術
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
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
150
形なしからの脱却
hacusk
0
12
Other Decks in Programming
See All in Programming
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.3k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
130
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
8
3.5k
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
140
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
250
アセットのコンパイルについて
ojun9
0
120
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
速いWebフレームワークを作る
yusukebe
5
1.7k
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Navigating Dependency Injection with Metro
zacsweers
3
230
OSS開発者という働き方
andpad
5
1.7k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Code Reviewing Like a Champion
maltzj
525
40k
How to train your dragon (web standard)
notwaldorf
96
6.2k
4 Signs Your Business is Dying
shpigford
184
22k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
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