ブラウザで動く統合開発環境、StackBlitzで実現するブラウザでのNode.js開発

2024年10月30日 13:24

プログラムの開発において、手間がかかる作業を省いてくれるのが、StackBlitz です。ブラウザを開いてすぐ開発にとりかかることができるため、開発者は、コーディングに集中できます。ブラウザ上で、IDE（統合開発環境）としての機能を備えており、複数人チームでのコラボレーション開発も可能です。

この記事では、StackBlitz の特長をお伝えすると同時に、ベースにあるWebContainerAPIの解説、RDS接続ができないことにより課題となるデータ管理方法について解説していきます。

StackBlitz社が開発したブラウザ上の統合開発環境

StackBlitzは、StackBlitz社（StackBlitz, Inc.）が開発・運営しているオンラインコードエディタおよび統合開発環境（IDE）サービスです。StackBlitzは2017年に設立され、創業者のEric Simons氏とAlbert Pai氏によって開発されました。本社はアメリカのサンフランシスコにあり、同社の主力製品である「StackBlitz」は、JavaScriptやTypeScript、React、Angular、Vue.jsなどのフロントエンドフレームワークの開発に広く使用されています。

StackBlitzのすごさは、その革新的なWebContainerAPI技術にあります。これにより、ブラウザ上でNode.jsを直接実行できるようになり、オンライン開発環境の可能性を大きく広げました。この技術は、ローカル環境に頼らずにフル機能のNode.jsをブラウザで実行できるという点で画期的です。

業界内では、CodeSandboxやGitHub Codespaces、AWS Cloud9などと並び、StackBlitzはオンライン開発環境の主要プレイヤーの一つとして認識されています。その革新的な技術とサービス提供により、開発者コミュニティから高い評価を得ており、ウェブ開発の効率化と簡素化において重要な役割を果たしています。

ベースとなる WebContainerAPI 技術とは

WebContainerAPI とは StackBlitz社が開発した、WebAssemblyベースのNode.js 実行環境です。ブラウザ内でNode.jsアプリケーションを動作させることが可能で、サーバーサイドの機能をクライアントサイドで実現できます。

外部サーバーに依存せず、Node.jsベースのツールチェーンやWebアプリケーションの開発、テスト、実行できることなどから、ブラウザ上で完結した開発環境を構築可能です。

主な機能

ブラウザ内ファイルシステム：メモリ上に仮想的なファイルシステムを構築
HTTPサーバー：WebContainer内でHTTPサーバーをオンデマンドで起動可能
Node.js CLI：npm installやアプリケーションのscaffold作成などのコマンドラインオペレーションが可能

データ管理としての選択肢

RDS接続によるデータベースの操作はできないため、MySQLなどは利用できません。WebContainers APIの制約上、永続的なファイルシステムへのアクセスが限られていることもあり、データの管理には考慮が必要になります。利用が可能なデータベースとしては、以下のものが考えられます。

インメモリデータベース

データはメモリ上に直接格納されます。高速なデータ処理が必要なアプリケーションに特に適しており、従来のデータベースと比較して大幅なパフォーマンス向上を実現できます。ただし、メモリ容量の制限やデータの永続性に関する考慮が必要です。

JSON ファイルベースのストレージ

データをJSONファイルとして仮想ファイルシステムに保存して利用してアクセスします。人間が読み書きしやすい形式で、データ構造が直感的に理解できます。暗号化が標準で提供されないため、機密データの保存には追加の対策が必要です。大量のデータや複雑なクエリを必要とする場合は、専用のデータベースシステムの方が適しています。