WebAssemblyの紹介

WebAssemblyが将来のWebプラットフォームの非常に重要な部分である理由を発見する

WebAssembly最近はとてもクールなトピックです。

WebAssemblyは、Web用の新しい低レベルのバイナリ形式です。これはあなたが書くプログラミング言語ではありませんが、代わりに他の高級言語(現時点ではC、Rust、C ++)がWebAssemblyにコンパイルされ、ブラウザーで実行できるようになります。

高速で、メモリセーフで、オープンになるように設計されています。

WebAssembly(WASMとも呼ばれます)でコードを記述することは決してありませんが、代わりにWebAssemblyは他の言語がコンパイルされる低レベルの形式です。

これは、90年代にJavaScriptが導入された後、Webブラウザで理解できる2番目の言語です。

WebAssemblyは、によって開発された標準です。W3CWebAssemblyワーキンググループ。今日、すべての最新のブラウザー(Chrome、Firefox、Safari、Edge、モバイルブラウザー)とNode.jsがそれをサポートしています。

Node.jsと言いましたか?はい。WebAssemblyはブラウザで生まれましたが、Nodeはバージョン8以降すでにサポートしており、JavaScript以外の任意の言語でNode.jsアプリケーションの一部を構築できます。

WebAssemblyのおかげで、JavaScriptが嫌いな人、または他の言語で書くことを好む人は、JavaScriptとは異なる言語でWeb用のアプリケーションの一部を書くことができるようになります。

ただし、注意してください。WebAssemblyはJavaScriptを置き換えることを意図したものではありません、ただし、他の言語で記述されたプログラムをブラウザーに移植し、それらの言語でより適切に作成された、または既存のアプリケーションの部分を強化する方法です。

JavaScriptとWebAssemblyコードは相互運用して、Web上で優れたユーザーエクスペリエンスを提供します。

JavaScriptの柔軟性と使いやすさを利用し、WebAssemblyのパワーとパフォーマンスでそれを補完できるため、これはWebにとって双方にメリットがあります。

安全性

WebAssemblyコードは、JavaScriptと同じセキュリティポリシーを使用してサンドボックス環境で実行され、ブラウザーは同一生成元ポリシーとアクセス許可ポリシーを保証します。

あなたが主題に興味があるなら、私は読むことをお勧めしますWebAssemblyのメモリそしてそのwebassembly.orgのセキュリティドキュメント

パフォーマンス

WebAssemblyはスピードを重視して設計されました。その主な目標は、本当に、本当に速くなることです。これはコンパイルされた言語です。つまり、プログラムは実行される前にバイナリに変換されます。

Cのようなネイティブにコンパイルされた言語に厳密に一致するパフォーマンスに達することができます。

動的で解釈されたプログラミング言語であるJavaScriptと比較すると、速度を比較することはできません。 WebAssemblyは常にJavaScriptのパフォーマンスを上回ります。これは、JavaScriptを実行するときに、ブラウザーが命令を解釈し、その場で可能な最適化を実行する必要があるためです。

今日WebAssemblyを使用しているのは誰ですか?

WebAssemblyは使用する準備ができていますか?はい!多くの企業がすでにWeb上で製品を改善するためにそれを使用しています。

あなたがおそらくすでに使用した素晴らしい例はフィグマ、私が日常業務で使用するグラフィックの一部を作成するためにも使用するデザインアプリケーション。このアプリケーションはブラウザ内で実行され、非常に高速です。

アプリはReactを使用して構築されていますが、アプリの主要部分であるグラフィックエディターは、WebAssemblyにコンパイルされたC ++アプリケーションであり、WebGLを使用してCanvasでレンダリングされます。

2018年の初めに、AutoCADは、WebAssemblyを使用して、C ++を使用して構築された(デスクトップクライアントコードベースから移行された)複雑なエディターをレンダリングする、Webアプリ内で実行される人気のあるデザイン製品をリリースしました。

Webは、コアに非常に高性能な部分を必要とする製品にとって、もはや制限技術ではありません。

WebAssemblyはどのように使用できますか?

CおよびC ++アプリケーションは、を使用してWebAssemblyに移植できます。Emscripten、コードを2つのファイルにコンパイルできるツールチェーン:

  • A.wasmファイル
  • A.jsファイル

どこ.wasmファイルには実際のWASMコードが含まれており、.jsファイルには、JavaScriptコードでWASMを実行できるようにする接着剤が含まれています。

Emscriptenは、OpenGL呼び出しをWebGLに変換するなど、多くの作業を行い、DOM APIおよびその他のブラウザーとデバイスAPIのバインディングを提供し、ブラウザー内で使用できるファイルシステムユーティリティを提供します。デフォルトでは、これらのものはWebAssemblyで直接アクセスできないため、非常に役立ちます。

Rustコードは、出力ターゲットとしてWebAssemblyに直接コンパイルできるため、異なります。https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm

将来、WebAssemblyには何が来るのでしょうか?それはどのように進化していますか?

WebAssemblyはバージョン1.0になりました。現在、公式には3つの言語(C、Rust、C ++)のみをサポートしていますが、さらに多くの言語が登場する予定です。 Go、Java、C#は、ガベージコレクションがまだサポートされていないため、現在(公式に)WebAssemblyにコンパイルできません。

WebAssemblyを使用してブラウザAPIを呼び出す場合、現在、最初にJavaScriptを操作する必要があります。 WebAssemblyをブラウザーでよりファーストクラスの市民にし、DOM、Web Workers、またはその他のブラウザーAPIを直接呼び出せるようにするための作業が進行中です。

また、JavaScriptコードがWebAssemblyモジュールをロードできるようにするための作業が進行中です。ESモジュール仕様。

Emscriptenのインストール

クローンを作成してEmscriptenをインストールしますemsdkGitHubリポジトリ:

git clone https://github.com/juj/emsdk.git

その後

dev cd emsdk

ここで、Pythonの最新バージョンがインストールされていることを確認してください。 2.7.10があり、これによりTLSエラーが発生しました。

新しいもの(2.7.15)をからダウンロードする必要がありましたhttps://www.python.org/getit/それをインストールしてから実行しますInstall Certificates.commandインストールに付属するプログラム。

次に

./emsdk install latest

パッケージをダウンロードしてインストールし、実行します

./emsdk activate latest

次のコマンドを実行して、シェルにパスを追加します。

source ./emsdk_env.sh

CプログラムをWebAssemblyにコンパイルします

簡単なものを作成しますCプログラムと私はそれをブラウザ内で実行したいです。

これはかなり標準的な「HelloWorld」プログラムです。

#include <stdio.h>

int main(int argc, char ** argv) {
  printf("Hello World\n");
}

次を使用してコンパイルできます。

gcc -o test test.c

と実行中./test「HelloWorld」をコンソールに出力します。

Emscriptenを使用してこのプログラムをコンパイルし、ブラウザで実行してみましょう。

emcc test.c -s WASM=1 -o test.html

Emscriptenは、コンパイルされたWebAssemblyプログラムを既にラップし、実行できる状態になっているhtmlページを提供してくれました。ただし、ローカルファイルシステムからではなく、Webサーバーから開く必要があるため、ローカルWebサーバーを起動します。http-serverグローバルnpmパッケージ(を使用してインストールしますnpm install -g http-serverまだインストールしていない場合)。ここにあります:

The program running in the browser

ご覧のとおり、プログラムが実行され、コンソールに「HelloWorld」が出力されました。

これは、WebAssemblyにコンパイルされたプログラムを実行する1つの方法でした。もう1つのオプションは、JavaScriptから呼び出す関数をプログラムに公開させることです。

JavaScriptからWebAssembly関数を呼び出す

以前に定義したHelloWorldを微調整しましょう。

含めるemscriptenヘッダー:

#include <emscripten/emscripten.h>

と定義しますhello関数:

int EMSCRIPTEN_KEEPALIVE hello(int argc, char ** argv) {
  printf("Hello!\n");
  return 8;
}

EMSCRIPTEN_KEEPALIVEから呼び出されない場合に関数が自動的に削除されないようにするために必要ですmain()または起動時に実行される他のコード(コンパイラーが結果のコンパイル済みコードを最適化し、未使用の関数を削除するためですが、これをJSから動的に呼び出すため、コンパイラーはこれを認識します)。

This little function prints Hello! and returns the number 8.

ここで、を使用して再度コンパイルするとemcc

emcc test.c -s WASM=1 -o test.html -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"

今回は追加しましたEXTRA_EXPORTED_RUNTIME_METHODSコンパイラに終了するように指示するフラグccallそしてcwrapJavaScriptで使用するModuleオブジェクトの関数。

これで、Webサーバーを再度起動でき、ページが開いたら呼び出しますModule.ccall('hello', 'number', null, null)コンソールに「Hello!」と表示されます。そして8を返します:

Calling from JS

その4つのパラメータModule.ccallテイクは、C関数名、戻り値の型、引数の型(配列)、および引数(これも配列)です。

たとえば、関数が2つの文字列をパラメータとして受け入れる場合、次のように呼び出します。

Module.ccall('hello', 'number', ['string', 'string'], ['hello', 'world'])

使用できるタイプはnullstringnumberarrayboolean

のJavaScriptラッパーを作成することもできますhelloを使用して機能するModule.cwrap関数。これにより、JSの対応物を使用して、関数を何度でも呼び出すことができます。

const hello = Module.cwrap('hello', number, null, null)

Using cwrap

こちらが公式ドキュメントですccallそしてcwrap

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: