オンライン開発環境とWebAssembly

最近ではStackBlitzのようなオンライン開発環境サービスが増えてきました。

The online code editor for web apps. Powered by Visual Studio Code. - StackBlitz

オンライン開発環境とは

Webブラウザ上で開発を行う
ローカル環境と異なり、他プロジェクトとライブラリなどが競合しない
環境構築の必要が無いため、開発にすぐ入ることが出来る
スマホからでも開発出来る(画面サイズ的には厳しい)

他にもあるオンライン開発環境

環境の分離

数年前にはDockerが広く利用されるようになり開発を行うマシンと実行・開発環境を分離することが可能となりましたが、オンライン開発環境ではブラウザ上で動作するためローカルマシンに全く影響を与えずに開発することが出来るようになりました。

Dockerとは

コンテナと呼ばれる仮想環境を実行する仕組み
コンテナ自体が環境のため、環境依存を無くせる
OSの仕組みを利用し、高速で起動・停止する
運用環境と同等のテスト等が可能になる

ローカル vs Docker vs オンライン

オンラインが最高という訳ではなく、それぞれにメリット・デメリットがあるため用途や条件によって最適なものを選ぶ必要があります。

レイテンシー

いくつかのオンライン開発環境サービスではサーバー側の仮想マシンの内容をWeb経由で表示するといったものもあり、ローカル開発環境と比較し遅延や起動に時間が掛かるといった問題がありました。

遅いと何が困る？

開発者にとってレイテンシー(遅延)は可能な限り少ない方が効率がグングン上がります。バグの修正や開発中に実行してみようかなと思った時に、いちいち30秒も待たされるのはイライラでしかありません。

StackBlitz

StackBlitzは2018に設立された比較的新しい会社で、オンライン統合開発環境(IDE)を提供しています。またWebContainersと呼ばれるブラウザ上でネイティブ動作する仕組みを採用しています。

特徴

WebContainersは、WebAssemblyを利用することによって実現されており、ネイティブ実行であるローカル環境と比較しても遜色ない速度で動作します。

起動まで数秒

node.newからNode.jsの開発環境にアクセスすることが可能で、私が試した際は数秒でこのような開発環境画面がブラウザに表示されます。またターミナルやサーバーの起動など、全てがブラウザ上で完結します。

node.js IDE - https://stackblitz.com/

StackBlitzはVS Codeをベースにしているため、これまでデスクトップ上でVS Codeを利用していた開発者にとってなじみやすいものとなっています。

MEMO

StackBlitzでの開発を行う際は意識する必要はありませんが、開発環境についての知識は開発者にとって非常に重要な要素です。

フロントエンド

対応している言語・フレームワークとしてAngular, React, Vueや、シンプルなHTML/JS/CSSのみの開発を行うことが可能です。

バックエンド

Node.jsやそのフレームワークであるNext.js、他にも利用が増えてきたGraphQLデータベースも選択することが可能です。

Node.jsとは

サーバー側で動作するJavaScript言語の実行環境
V8 JavaScriptエンジン
Denoの作者であるライアン・ダールさんにより開発された

ベータ版

StackBlitzでのNode.jsサポートは2021年7月現在ベータ版の扱いとなっており、未知のエラーに遭遇する可能性があります。正式リリースされ業務で利用可能になるのはもう少し先になりそうです。

Today we’re excited to bring Node.js back to its roots - the browser!

Together with @googlechrome and @vercel, we're enabling a new type of development and debugging experience that was not possible before: 🧵https://t.co/uopxj2XR0v
— StackBlitz (@stackblitz) May 20, 2021

GitHubとの連携も簡単に

GitHubを利用することが前提と思えるほどの画面となっており、リポジトリからの取得などを非常に簡単に行うことが出来ます。

オフラインでも開発を継続出来る

WebAssemblyによって実装されているため、一旦ブラウザ側に全ての実行環境が整えばたとえマシンがオフラインになったとしても開発を続ける事が可能です。

WebAssembly

WebAssemblyはネイティブコードと同等の速度かつ安全にプログラムを実行するための仕組みとして開発が行われています。

またWebAssemblyは標準化された規格のためMacだけでしか動かないという事はなく、ブラウザがサポートしていればOSに関係無く動作します。

StackBlitzとWebAssembly

StackBlitzでもWebAssemblyにより多くの機能が実装されており高速に動作することが特徴です。

WebAssemblyとは

ブラウザ上でプログラムを実行する仕組み
WebAssemblyは実行できるバイナリコードの仕様を定めている
C/C++/Rust/Go/Swift等の様々な言語で記述できる
Chrome/FireFox/Safari/Edge等のブラウザで動作する
省略してWASMとも書かれる

サーバーの実行からアクセスまで全てがブラウザ内で実行されるため、ローカル開発環境よりも早いとの記載もあります。

Because it runs entirely within the browser security sandbox, server responses have less latency than localhost (!)
https://blog.stackblitz.com/posts/introducing-webcontainers/

localhostとは

開発者が利用しているマシン自体の事をローカル環境と呼び、その自分のマシンにて立ち上げているWebサービスにアクセスする際はブラウザのアドレスに対してlocalhostと入力しアクセスを行います。しかし、アクセスするためには通信プロトコルなどのオーバーヘッドがあるため、StackBlitzのようなブラウザ内で完結する仕組みと比べて遅くなります。

マシンパワーを有効利用出来る

WebAssemblyはブラウザ上であるものの、ローカルマシンの性能を活かすことが可能な実行環境のため、これまでのJavaScriptのみでは実現することが難しかった動画編集なども可能になります。

MEMO

これまでの記事でJavaScriptは遅いように思われるかもしれませんが、かなりのケースでWebAssemblyと比較しても同等もしくはJavaScriptの方早い場合も多々あります。WebAssemblyは現在の所、特定の処理において性能が必要となる場合に用いられています。

セキュアな環境

全ての実行はブラウザ内のsandboxで行われるため、最近問題となったリポジトリをチェックアウトしVScodeで開くだけで任意のコードが実行されてしまう問題などのリスクを大きく下げることが出来ます。

Sandboxとは

隔離された領域でプログラムを実行する
OSのファイルシステムにも限られた部分のみアクセス可能
プログラムからSandbox外へのアクセスは制限される
Webカメラ等には許可を与えた場合のみ利用できる

何に使われているの？

他にも代表的なものとしてGoogle Earthなどに活用されています。

Google Earth

まとめ

オンライン開発環境は増加

これまでのローカルマシンで環境構築し開発を行う仕組みがDockerによりコンテナ化され、さらには別に新たな手法としてWeb上で開発を行う仕組みが増えています。

WebAssemblyは必要な場合のみ利用される

開発効率や、エンジニアの確保の面から見てもJavaScriptでどうしても実現できない場合に採用される事が多く、置き換える訳ではなく共存といった形にしばらくなりそうです。

JavaScriptは遅くない

遅い印象を持たれるかもしれませんが、JavaScriptは決して遅くありません。特定のベンチマークではWASMと比較し遅い場合もありますが、V8のようなJavaScriptエンジンはかなりの最適化が施されており、ほぼ同等もしくはJavaScriptの方が早い場合もよくあります。

自分のような普通のプログラマーがWASMで書いても、JavaScriptを超える速度を出すことは難しいので、使うとしてもごく一部だけになりそうです。

References

StackBlitz https://stackblitz.com/