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
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
120
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
GitHub's CSS Performance
jonrohan
1031
460k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Designing for Performance
lara
610
69k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Building a Scalable Design System with Sketch
lauravandoore
462
33k
A Tale of Four Properties
chriscoyier
160
23k
Automating Front-end Workflow
addyosmani
1370
200k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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