Upgrade to Pro — share decks privately, control downloads, hide ads and more …

wasmって何? WebAssemblyはじめての方へ

wasmって何? WebAssemblyはじめての方へ

こちらの会の発表資料です

ElixirImp#25:はじめてのWebAssembly+Elixir
https://fukuokaex.connpass.com/event/262073/

nako@9時間睡眠

October 19, 2022
Tweet

More Decks by nako@9時間睡眠

Other Decks in Programming

Transcript

  1. wasmって何?
    WebAssemblyはじめての方へ
    2022/10/19 nako

    View full-size slide

  2. 自己紹介
    ● nako@9時間睡眠
    ● Elixir/Phoenix初心者コミュニティ
    『piyopiyo.ex』オーガナイザー
    ● 会社員。Webサービスのサーバサイ
    ドエンジニア
    ● Elixir10周年のお祝いにSnapCamera
    エフェクトを作りました:D

    View full-size slide

  3. WebAssemblyとは?

    View full-size slide

  4. WebAssemblyとは?
    ● WebAssembly(略称:Wasm)は、
    ブラウザでプログラムを高速実行するための
    「ブラウザ上で動くバイナリコードの新しいフォーマット(仕様)」です。
    ● WebAssemblyの開発はMozilla、マイクロソフト、Google、Appleといった主要ブラ
    ウザの開発者により行われています。

    View full-size slide

  5. WebAssemblyを利用したサービスが出来るまで
    C/C++/Rustなどで記述されたソースコードをコンパイルし、 wasmコードを生成する。
    生成したwasmコードをWebアプリとして
    アップロードする。
    JavaScriptコードから呼び出したり、
    wasmコードからJavaScriptコードを呼び出す
    ことができる。
    C/C++/Rust
    などの
    ソースコード
    コンパイラ
    wasm
    コード
    Webアプリケーション
    wasm
    コード
    Java
    Script
    HTML CSS

    View full-size slide

  6. Google Earthを開発ツールで
    見てみると、wasmファイルが
    あることがわかります。

    View full-size slide

  7. WebAssemblyの歴史
    2015年6月17日 開発開始を公式にアナウンス
    2016年3月15日 主要ブラウザ (Firefox, Chromium, Google Chrome, Microsoft Edge) 上で
    UnityによるAngry Botsというデモが行われた
    最初の目標としてCとC++からのコンパイルをサポートすることを目指し、 Rust
    がバージョン1.14以降で、Goがバージョン1.11以降で、Kotlin/Nativeがバー
    ジョン0.4以降で対応するなど、他のプログラミング言語のサポートも進められ

    2017年3月7日 WebAssemblyに標準対応した初のブラウザとなる Firefox 52.0がリリースされ

    2017年11月 MozillaはSafariとEdgeがWebAssemblyに対応したと発表し、すでに対応して
    いるChromeとFirefoxを含め、主要なブラウザすべてでサポートされることに
    なった
    2019年12月5日 W3C勧告「WebAssembly Core Specification」が策定され、WebAssemblyは
    正式なウェブ標準に認定された

    View full-size slide

  8. WebAssemblyが使えるプログラミング言語
    https://github.com/appcypher/awesome-wasm-langs より
    🥚進行中、🐣不安定だが使える、🐥本番環境で使える
    🐥 .Net、🐥 AssemblyScript、🥚 Ballerina、🐥 Brainfuck、🐥 C、🐥 C#、🐥 C++、🐣
    C4wa、🐥 Clean、🥚 Co、🐥 COBOL、🥚 Crystal、🐣 D、🐣 Eel、🐣 Elixir、
    🐥 F#、🥚 Faust、🥚 Forest、🐥 Forth、🐥 Go、🥚 Grain、🥚 Haskell、🐣 Java、
    🐣 JavaScript、🥚 Julia、🐣 Kotlin/Native、🥚 Kou、🐣 Lisp、🐥 Lobster、🐥 Lua、
    🐣 Lys、🐥 Never、🥚 Nim、🥚 Ocaml、🐣 Pascal、🐣 Perl、🐣 PHP、🥚 Plorth、🐣
    Poetry、🐣 Python、🐣 Prolog、🐣 Ruby、🐥 Rust、🐣 Scheme、🐣 Scopes、🐣
    Swift、🐥 TypeScript、🥚 Wase、🐥 WebAssembly、🥚 xcc、🐥 Zig

    View full-size slide

  9. WebAssemblyでよく使われる言語
    よく使われる言語は
    ● Rust
    ● C++
    ● AssemblyScript
    が多いようです。
    ※調査は2021年6月、196カ国
    (米国21.8%、ドイツ9.1%、
     中国9.1%など)に分散した
    250人のITエンジニアが回答

    View full-size slide

  10. WebAssemblyとElixir
    ● Wasmex
    ○ https://github.com/tessi/wasmex
    ○ Wasmexは、Elixirのための高速で安全なWebAssemblyとWASIランタイム
    ○ 2020年に開発開始
    ○ 定期的にバージョンアップがあり、開発が進んでいる
    ● Firefly
    ○ https://github.com/GetFirefly/firefly
    ○ BEAM言語用の新しいコンパイラとランタイム
    ○ 2018年に開発開始

    View full-size slide

  11. WebAssemblyが
    使われているプロダクト

    View full-size slide

  12. WebAssemblyが使われているプロダクト
    『Made with WebAssembly』というサイトで確認できます。
    https://madewithwebassembly.com/
    Google Earth、
    Unity、Figmaといった
    WebAssemblyを使った
    サービスが確認できます。

    View full-size slide

  13. 国内事例:VKET CLOUD
    ● 自社の所有する仮想空間でサービス展開を可能にするVRエンジン
    ● Webリンクからの簡単なアクセス、3Dアバターを使った音声とチャットによるコミュ
    ニケーション、美しい仮想空間での様々なサービス展開が可能です

    View full-size slide

  14. 国内事例:メルカリレンズβ
    ● メルカリレンズβでは、カメラの入力をサーバーに送信せず、デバイス内で高速に機
    械学習に関連する処理を実行
    ● 物体検出の数値計算のバックエンドにWebAssemblyを用いている。
    ● https://engineering.mercari.com/blog/entry/20211222-mercari-lens/ より
    ● 2021/12/16公開

    View full-size slide

  15. ご清聴ありがとう
    ございました!

    View full-size slide