SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Rust言語で作るWebバイナリファイル「WebAssembly」入門

RustではじめるWebAssembly入門~JavaScriptを超える高速なWebアプリ開発を実践しよう

Rust言語で作るWebバイナリファイル「WebAssembly」入門 第1回

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

 本連載では、Webブラウザー上でJavaScriptとともに動作できるバイナリ形式のプログラムファイル「WebAssembly」を、Rustプログラミング言語で実装する方法について、順を追って説明していきます。初回となる今回は、WebAssemblyの概要を説明するとともに、Rustを利用した簡単なサンプルで、実装方法のイメージを紹介します。

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

はじめに

 現在、Webフロントエンド開発においては、ページ構造を表すHTML、スタイルを表すCSSとともに、挙動を実装するためにJavaScriptが利用されます。JavaScriptの登場当初はWebページに動きをつける程度の扱いでしたが、その後の言語仕様の拡張や、WebブラウザーでのJavaScript実行速度の向上、Node.jsなどWebブラウザー以外でJavaScriptを動作させる環境の登場などにより、本格的なプログラミング言語としてその地位を確立しています。一方でJavaScriptはスクリプト言語ということもあり、実行速度のさらなる向上やファイルサイズの縮小が常に求められています。

 本連載で取り上げるWebAssemblyは、そのような要求にこたえることができるバイナリフォーマットです。ソースコードからコンパイルして生成されたWebAssemblyのコードは、WebブラウザーやCPUの種類を問わず実行できるバイナリファイルになります。速度やサイズが重要になる実装をWebAssemblyで作成して、JavaScriptから実行することができます。

図1 WebAssemblyの公式サイト

図1 WebAssemblyの公式サイト(webassembly.org

 WebAssemblyを作成するプログラミング言語としては、C/C++やC#など、さまざまなものが利用できます。その中でも特に注目されているのがRustです。RustはMozillaが開発を主導するプログラミング言語で、C/C++と同様、コンパイルでネイティブコードを生成できます。ランタイムやガベージコレクタを必要としない高いパフォーマンスと、言語レベルでメモリリークやスレッド競合を防ぐ高い信頼性に特徴があり、GoogleがLinuxカーネルやAndroidに、マイクロソフトがWindowsの開発に、それぞれ採用することで話題となりました。パフォーマンスと信頼性を両立できることから、RustはWebAssemblyの開発言語としても高い人気があります。

図2 Rustの公式サイト

図2 Rustの公式サイト(www.rust-lang.org/ja

 本連載では、RustでWebAssemblyを実装して活用する方法を、順を追って説明していきます。初回となる今回は、WebAssemblyが生まれるまでの背景を説明するとともに、WebAssemblyの利用例として、C#と.NETのサンプルを紹介します。次に、RustでWebAssemblyを実装する流れを、簡単なサンプルで説明します。次回以降、Rustの開発環境や文法の説明、WebAssemblyのより詳細な実装方法を紹介する予定です。

対象読者

  • 動的なWebページにさらなる速度を求める方
  • JavaScriptやAltJS以外のスキルを求めるフロントエンドエンジニアの方
  • 話題のRustについて学びたい方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • OS環境
    • Windows 10 64bit版
    • Microsoft Edge 91.0.864.67
  • C#と.NETの開発環境(p002-blazor-wasm)
    • Visual Studio Community 2019 10.16.3
  • Rustの開発環境(p003-rust-wasm)
    • rustup 1.24.3
    • cargo 1.53.0
    • wasm-pack 0.10.0
  • 生成したWebページプロジェクトの実行環境
    • Node.js v14.17.3 64bit版

 サンプルコードには、ソースコードのビルド結果をNode.jsで実行可能にしたプロジェクト(p002-blazor-wasm-web、p003-rust-wasm-web)が含まれます。これらを実行するには、サンプルのフォルダーで「npm install」コマンドを実行後、「npm run start」コマンドを実行して、Webブラウザーで「http://localhost:8080」を表示します。後述するasm.jsのサンプル(p001-asmjs)の実行方法も同様です。

 ソースコードプロジェクト(p002-blazor-wasm、p003-rust-wasm)をビルドする方法は後述します。

WebフロントエンドがたどったWebAssemblyまでの道のり

 冒頭でも少し説明しましたが、ここではWebAssemblyが登場することになった背景と道のりを少し振り返ってみます。

 JavaScriptはWebブラウザーで動作するプログラミング言語として、1995年に「Netscape Navigator 2.0」ブラウザーで導入されました。現在ではフロントエンド開発になくてはならない言語となったJavaScriptですが、当初は動作が遅く、できることも限られていたため、Webページ上でプラグインとして別のプログラムを動作させる方法がしばしば利用されました。プラグインとして、以下のような技術が存在しました。

  • Java(Javaアプレット)
  • Internet Explorerで利用できるActiveXコントロール
  • Macromedia Shockwave(のちにAdobeが買収)
  • Adobe Flash
  • Microsoft Silverlight

 これらのプラグインは、しばしばセキュリティが問題となり、AppleがiPhoneでFlashをサポートしないと宣言したり、いわゆる「HTML5」としてHTMLが多機能化したりしたこともあって、次第に使われなくなっていきました。

図3 Adobe Flash Playerのサポート終了ページ

図3 Adobe Flash Playerのサポート終了ページ(www.adobe.com/jp/products/flashplayer/end-of-life.html

 一方、JavaScriptの実行速度は、スクリプトを実行中にコンパイルするJIT(Just-In-Time)コンパイラ技術などにより高速化していきました。さらに、JavaScriptの数値型(Number)は全て浮動小数点型ですが、JavaScriptと互換性のある記法で整数型などを導入して数値計算の速度を上げる「asm.js」が2013年に登場しました。asm.jsでは手動でスクリプトを記述するほかに、C言語などからコンパイルしてasm.js対応スクリプトを生成する環境も提供されました。

 asm.jsで2整数の加算処理を実装した例をリスト1に示します。本記事ではasm.jsの細かい実装方法は説明しませんが、(1)や(2)の記法で、引数や戻り値が整数であることを表しています。リスト1はJavaScriptとしても動作しますが、asm.js対応のWebブラウザーでは実行前にAOT(Ahead-Of-Time)コンパイルが行われ、より高速に動作します。

[リスト1]asm.jsの実装例(p001-asmjs/AsmFunc.js)
function AsmFunc() {
  'use asm';
  // 加算処理
  function asmAdd(param1, param2) {
    param1 = param1 | 0; // 「| 0」は引数が整数であることを表す ...(1)
    param2 = param2 | 0;
    var result = 0; // 「= 0」で関数の戻り値が整数であることを表す ...(2)
    result = (param1 + param2) | 0;
    return result | 0;
  }
  return {
    asmAdd: asmAdd
  }
}

 なお、リスト1は、Web画面上で数値を加算する図4のサンプル(p001-asmjs)に含まれています。実装全体の詳細はサンプルコードを参照してください。

図4 リスト1を利用して数値を加算するサンプル(p001-asmjs)

図4 リスト1を利用して数値を加算するサンプル(p001-asmjs)

 リスト1の通り、asm.jsのコードはあくまでJavaScriptなので、スクリプトのロード・解釈にかかる時間やコードのサイズが問題として残りました。そこで登場したのがWebAssemblyです。スクリプトの形式を脱してバイナリファイルとすることで、ロード時間の短縮やコードサイズの縮小を実現しました。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
マイクロソフトの「Blazor」に見るWebAssemblyの利用例

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Rust言語で作るWebバイナリファイル「WebAssembly」入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/14567 2021/08/04 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング