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
130
形なしからの脱却
hacusk
0
8
Other Decks in Programming
See All in Programming
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
600
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
230
OSS開発者という働き方
andpad
4
1.3k
Ruby Parser progress report 2025
yui_knk
1
180
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
3
1.7k
コンテキストエンジニアリング Cursor編
kinopeee
1
730
為你自己學 Python - 冷知識篇
eddie
1
290
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
930
ゲームの物理
fadis
5
1.6k
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Faster Mobile Websites
deanohume
309
31k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Bash Introduction
62gerente
614
210k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
490
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Building Adaptive Systems
keathley
43
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.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