WebAssembly と JavaScriptどちらを勉強するべきか

WebAssemblyもJavaScriptも、どちらもブラウザで動作するプログラムを記述できます。

このことから、どちらも似たようなユースケースが想起され、JavaScriptはWebAssemblyに置き換えられると考える方もいるようです。

しかし、JavaScriptはWebAssemblyに置き換えられることは、現時点ではありません。


🤔 < そうは言っても、WebAssemblyとJavaScriptどちらを勉強したらいいの?


という疑問にお答えします。

本題:Web Assemblyと JavaScriptどちらを勉強するべきか

結論は、まずはJavaScriptを優先して習得し、その後にWebAssemblyを習得することをお勧めします。

理由としては、詳細は後述しますがWebAssemblyでは実装できないことがあるからです。

具体的には、DOM操作などはまだWebAssemblyでは実装できませんので、このような部分はJavaScriptで書いていく必要があります。

しかし、WebAssemblyにも強みがあります。1つ目は計算処理が高速ということ、2つ目は言語の恩恵を得られること、です。

WebAssemblyを習得することでエンジニアとしての幅が広がることは間違いありませんので、勉強しておいて損はありません。

WebAssemblyって何ができるの?

WebAssembly(wasm)を使ってできることは以下のようなものがあります。

  • 計算処理の高速化 → ネイティブ水準の速度で実行が可能。
  • 言語の恩恵が得られる → 言語独自のデータ型・文法やライブラリなどが使える。
  • コードの難読化 → ポータブルなバイナリセットとして出力されます。

WebAssemblyはc/c++やRust、c#などで記述してコンパイルして生成します。これによりネイティブ水準の計算速度で実行が可能になり、WebAssemblyコンポーネントはJavaScriptから自由自在に呼び出しが可能です。

WebAssemblyって何のプログラミング言語が使われてるの?

WebAssemblyはいろいろなプログラミング言語で記述し、コンパイルして生成します。

使用可能なプログラミング言語は、以下のものがあります。

  • c/c++
  • Rust
  • c#
  • AssemblyScript

WebAssemblyはブラウザの制約を受けますので、ファイルの読み書きなど出来ないことがあります。

しかし、そうした制約を受けない部分はWebAssemblyとして実行が可能で、いろいろなライブラリが公開されています。

また、各プログラミング言語の文法やデータ型が使えます。

JavaScriptのようにデータ型宣言が無いプログラミング言語がちょっと…という方はこれらの言語を使ってプログラミングしてもいいかもしれません。

JavaScriptの強み、WebAssemblyの強み

JavaScriptとWebAssemblyそれぞれに強みがあります。

JavaScriptで書いた方がいいもの、WebAssemblyで書いた方がいいもの、があります。

以下のページを参考に分析した結果を記載します。

https://www.assemblyscript.org/frequently-asked-questions.html

JavaScriptで書いた方がいいもの

assemblyscript.orgのページによると、DOM操作、Webサイトやブログなどで使われる簡単なプログラムは、JavaScriptで書いた方がいいとされています。

WebAssemblyではDOM操作ができないことと、Webサイトやブログでは複雑な計算が行われないということを想定しているためと考えられます。

WebAssemblyで書いた方がいいもの

同じくassemblyscript.orgによると、画像編集やビデオ編集、暗号など計算量の多い処理、複雑なアルゴリズムを計算するものは、WebAssemblyで記述した方がいいとされています。

WebAssemblyはネイティブコードに近い処理速度で計算できますので、このような複雑な計算に活用することが効果的と考えられます。

WebAssemblyにおすすめな本

入門WebAssembly

WAT(WebAssembly Text)を用いてWebAssembly技術を解説している本です。

c/c++やRust、c#などWebAssemblyコンポーネントを生成するプログラミング言語の説明ではないので、実用的ではない可能性はありますが、WebAssembly技術の概要を掴むという点においてはおすすめです。

内容
第1章 WebAssemblyとは
第2章 WATの基礎
第3章 関数とテーブル
第4章 低レベルのビット操作
第5章 WebAssemblyの文字列
第6章 線形メモリ
第7章 Webアプリケーション
第8章 キャンバスの操作
第9章 パフォーマンスの最適化
第10章 WebAssemblyのデバッグ
第11章 AssemblyScript

プログラミング言語Rust入門

Rust言語の入門本です。Kindle Unlimitedの対象ですので、Kindle Unlimitedユーザーの方は追加費用なしで読むことができます。

内容
第1章 Rustの特徴
第2章 環境構築
第3章 基本的な型、変数の扱い、束縛
第4章 文字列
第5章 文と式と関数
第6章 制御文とパターンマッチ
第7章 配列とベクター
第8章 構造体とメソッド
第9章 ジェネリクスとトレイト
第10章 所有権
第11章 パッケージの作成
第12章 ファイル入出力
第13章 マクロ
第14章 Web API呼び出し
第15章 データベースアクセス
第16章 C言語ライブラリの呼び出し
第17章 クロージャ
第18章 並列化
第19章 テストコード

Blazor入門

BlazorはWebAssemblyを活用したシングルページアプリケーションを開発するフレームワークです。c#で開発可能です。

私もBlazorを用いていくつかウェブアプリを開発しています。

内容
第1章 Blazorの仕組み
第2章 開発環境
第3章 最初のBlazorアプリ
第4章 コンポーネント
第5章 データバインディング
第6章 イベント処理
第7章 Razor記法
第8章 フォームと検証
第9章 データベースアクセス
第10章 Web APIの活用
第11章 SVGの活用
第12章 JavaScriptとの連携

おわりに

WebAssemblyを適用するウェブアプリは、コンポーネントをWebAssemblyで記述して、JavaScriptから呼び出し制御するという方法になります。

WebAssemblyで書かれたライブラリはGitHub上に多く公開されていますが、それらを使うにはやはりJavaScriptの知識が必要です。

コメントを残す

メールアドレスが公開されることはありません。