CodeIQ MAGAZINECodeIQ MAGAZINE

清水智公@chikoski氏が語る「WebAssemblyで何ができるのか?」#html5jplat

2018.02.02 Category:勉強会・イベント Tag: , , , ,

  • 23
  • このエントリーをはてなブックマークに追加

Webアプリはネイティブアプリと比べてロードが遅い、通知が出せない、実行が遅いといった課題を持つ。だがProgressive Web AppとWebAssemblyを活用し、ネイティブアプリと遜色のない速さを実現させたサイトも登場している。
html5j Webプラットフォーム部では今回「Progressive Web AppとWebAssembly」をテーマに勉強会を開催した。
by 馬場美由紀 (CodeIQ中の人)

WebAssembly(WASM)でできること

Google宇都宮佑亮@uskayさんに続いて登壇したのは、WebAssembly(WASM)コミュニティを率いている清水智公さん。セッションタイトルは「できる!WebAssembly」。WASMでどういうことができるのか、どうしたら作れるのか、使う際に気をつけることについて語った。

Unityで作ったゲームが任天堂SwitchにもWebにも展開できるものが登場している。これはUnityがすごいという話ではなく、これを実現している技術がWebGL、WASMという技術であるということ。

WASMは、ゲームのような重たいプログラムをどこでも速く動かすために使われる。例えばUnityで作ったコンテンツ、Unityちゃんが踊ったりするシーンで、エフェクトの処理などに用いられたりするが、それだけではない。

一つは他の言語の資産をWebに展開する場合。もう一つはCPUインテンショナルな処理を高速化する場合である。処理が重くなる理由は2つある。計算量が大きいこと、もしくは読み込むデータ量が多い場合だ。

どちらかに効くかというと、CPUが速ければ速くなるという処理にWASMは効いてくる。2016年3月に行った調査によると、ネイティブで書いたときに比べ、1.5倍ぐらいのスピードで動くようになる。

WASMはモダンなブラウザすべてで使えるようになっている。忘れてはいけないのは、Node8でも動くこと。サーバサイドの処理を速くすることもできる。WASMはバイナリーコード。だがファイルなので、手で書くこともできるが、たいていの人はツールを使う。WASMを生成ツールには次のようなものがある。

例えばCなら、EmscripitenかClangを使えばコンパイルできる。TypeScriptならAssembryScriptを使うことを覚えておけばよい。

WASMでできることは数値計算、線形メモリへのアクセス、関数の呼び出しである。

使い方は次の通り。

●JavaScript embedding API

WASMファイルを用意する。WASMモジュールをコンパイルする。WASMモジュールをインスタンス化する流れとなっている。インスタンス化がなぜ必要かというと、WASMはWASMからエクスポートした関数を使うだけでなく、WASMに関数をインポートして与えることができる。

どんな関数やメモリを与えるかはその場でコントロールする。このWASMにJavaScriptの関数を与える機能は非常に強力となっている。またWASMはnodeでも使える。

●Web embedding API

Webで使うときはもっと簡単に使うために、Web embedding APIとして定義されている。Webページ上での実行を前提にしているAPIでストリームコンパイルを行う。

●WebAssembly.Memory

WASMは数値演算しかできない。それを使って複雑なことを扱うために、メモリを擬似的に持つ。それがWebAssembly.Memoryである。WASMの作業用メモリ(ヒープとデータ)で、初期サイズと最大サイズをコンストラクタで指定する。サイズはページ64KB。実データはArrayBuffer上に取られる。リトルエンディアンとなっている。

  • メモリの使用例:Cの文字列の場合

  • メモリの利用例:Cの構造体の場合

上述の通り、WASMは様々なツールを使って出力できる。その一つがAssemblyScript。これはTypeScriptのサブセットを処理して、WASMを出力するツールである。

その一つがAssembryScriptで、これはTipeScriptを変化させたもの。TipeScriptとの違いは、そのまま変換できないこと。数値をより細かく片付けする必要がある。WASMで定義されている演算子が新しい演算子として追加される、NaN/Infinityは型が変わっていることなどが挙げられる。

例えば、足し算するコードはこんなコードに変わる。

オブジェクト指向のコードは変えられるが、AssembryScriptの場合、コンストラクタはメモリを初期化する関数に、メソッドはポインタを受け取る関数になる。

WASMを使うときに注意すべき点とは

WASMを使うときに最初に気をつけないといけないのは、うっかりするとサイズが大きくなってしまうということ。CでHello Worldを変換すると、C言語の標準ライブラリーも合わせて変換されて付け加えられるため、240KBくらいになってしまう。

Unityちゃんが踊っているものなどは、アセットが46MB、コードも3.5MBぐらいある。そこでキャッシュを上手く使うことが求められる。

タイミングは2つある。WASMのファイルはfetchで取ってくるが、そのタイミングでキャッシュする。

もう一つは、コンパイルをした後に、WASMのモジュールというオブジェクトができる。これは structuredCopyが実装されているので、IndexedDBにコピーできる。ここでキャシュする。

次にメモリをとても意識するようになること。WASMで使っているメモリとJavaScriptのメモリは別。JavaScriptで使っているメモリの一部にWASMのメモリが乗っている。

例えばUnityの場合、ブラウザに割り当てられたメモリの一部にJavaScriptが割り当てられていて、その一部にUnity用のメモリがあり、その一部を使う。

Unityのメモリ領域はブラウザの開発ツールからは見えないので、Unityのプロファイラーで見ることになるため、メモリマネジメントは難しい。

第三にツールチェーンが複雑になること。これは徐々に良くなってきている。Rustだとrust-webplatformというライブラリがある。

またWebpackの開発計画に、WASMへの対応がある。これが実装されると、WASMをJavaScriptのプロジェクトへの組み込みが容易になる。JavaScriptのモジュールをロードできるようになるという。実装はこれから。

第四はデバッグがつらいこと。いまのところ、WASMに埋め込まれたデバッグ情報を上手に利用できていない。そうはいっても、デバッグは必要なので、開発が行われている。

一例として、Firefoxの開発ツールはWASMのソースマップ表示に対応する機能が追加されようとしている。

WASMは進化しており、メモリに関してもGCのサポートが入っている。これはオプショナルなので、使うかどうかはプログラマが選択できる。他言語で速く書きたい場合は、GCをオンにする使い方もできる。

WASMはWebページすべてで使うのではなく、プロファイリングして効きそうなところを選択するのが正しい使い方。WASMの良いところは、Cで作った資産を持ってこられること。ツールも進化しているので、Cの資産を持っている人はWASMを使って、Webに展開してみよう。

⇒「日経電子版のページ高速化とPWA対応」に続く

関連ページ

イベントの様子は動画でも公開中

【PR】最高提示年収1000万超!先端企業があなたを求めています「moffers」

登録した詳細な経験・スキル情報に基づき、企業が「年収」を明示した形でスカウトを行う、ITエンジニアのための転職サービス「moffers」の第2回が開催中です。

第1回開催時の平均オファー年収額は600万円。最高提示額1000万を超えました。あなたの本当の評価がわかる「moffers」に登録してみませんか?

【moffers参加企業】
アイシン精機、オリンパス、セイコーエプソ、ソニー、日産自動車、富士フイルム、三菱電機、サイバーエージェント、リクルートテクノロジーズ、ほか

WebからIoT、自動運転、AIまで幅広い業種・職種がラインナップしています。この機会にぜひご登録ください!

  • 23
  • このエントリーをはてなブックマークに追加

■関連記事

リニューアルで表示を高速化させた「日経電子版のページ高速化とPWA対応」プロジェクトの舞台裏... リニューアルして表示が速くなったと大きな反響を呼んだ日経電子版 最後に登壇したのは、日本経済新聞社のソフトウェアエンジニアとして「r.nikkei.com」のフロントおよびバックエンドを担当している宍戸俊哉さん。 セッションタイトルは「日経電子版のページ高速化とPWA対応」。 日経電子版とは2...
Google宇都宮佑亮@uskay氏が語る「今からでも遅くない!Progressive Web Ap... Google宇都宮さんによるPWAの基本解説 2017年12月19日に開催された「html5j Webプラットフォーム部 第19回勉強会」が取り上げた技術は「Progressive Web App(PWA)とWebAssembly(WASM)」。ロードが遅い、通知が出せない、実行が遅いというWeb...
これからのWebクリエイターに欠かせないスキル─アクセシビリティ・インクルーシブデザイン講座... Webアクセシビリティは難しいモノではない スマートフォンをはじめとするモバイルデバイスの普及により、子どもから高齢者まで、障がいのあるなしに関わらず、多くの人がWebを利用する時代が到来している。 欧米では電子機器や電子文書について、障がいを持った人でも使用できるような法律が整備されているが、...
及川卓也・増井雄一郎・白石俊平・湊川あい──新しい言語・フレームワークは何を選ぶ?どう学ぶ?... 得意な言語と好きな言語 本セッションのファシリテーターを務めたのは、及川卓也さん。増井雄一郎さん、白石俊平さんがエンジニア枠、そして湊川あいさんはデザイナーという立場で語っていただいた。 ☆登壇者プロフィール プロダクト・エンジニアリングアドバイザー 及川 卓也さん早稲田大学理工学部卒業後...
技術系コミュニティ運営者たちが語る、コミュニティの成長の軌跡──21cafe 4周年感謝祭レポート... あきらめずに続けることが大事  コミュニティ運営者によるLT大会のトップバッターは、「DevRel Meetup in Tokyo」の中津川氏。 毎月開催しているイベントの参加率はほぼ100%という特徴があり、東京にとどまらずアジア圏にも活動の場を広げている。 今回は「楽しいコミュニティの作り...
Webで簡単・効率的にアニメーションを実現できる最新フレームワーク・CSS3アニメーションを紹介... MozillaでWebアニメーションの機能の開発者が登壇 Webでアニメーションというと、数年前まではFlashコンテンツが当たり前に使われていた。 しかしスマートフォンの普及と共に、Webから駆逐され、今はHTML5でアニメーションを表すには、setInterval関数やrequestAnim...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートへ