コラム

JavaScriptやCSS、HTMLをブラウザ上で記述して実行できるサービスは数多く存在します。こうしたサービスは大きく分けて二種類あります。ブラウザだけで完結するものと、サーバーサイドに実行環境を持つものです。

後者の特徴として、最近のJavaScriptライブラリのようにトランスパイルが必要なプロジェクトにも対応できるという点が挙げられます。たとえばReactやVue.jsなどでも実行ができるので、より複雑なプロジェクトでも使えるのが魅力です。

今回はそうした実行環境があるスニペットサービスを紹介します。

Replit

ReplitはJavaScriptだけでなく、以下の言語に対応しています（一部）。

• Python
• Node.js
• C++
• C
• Java
• PHP
• Bash
• Ruby
• C#
• Go言語
• Lua
• Kotlin
• Dart

これらのプロジェクトのコードを書き、Replit上で実行できます。実行結果はHTML表示されるので、Webアプリケーション開発用途に便利です。

main.dart – DartApp – Replit

CodeSandbox

CodeSandboxはフロントエンド向けであればReactやVue.js、Angularなどのテンプレートが用意されています。サーバー側ではRuby on RailsやNode.js、NestJSなどが用意されています。

Dockerに対応しているので、他の言語でも利用できます。また、GitHubとも連携し、コードを保存するのも簡単です。

CodeSandbox

StackBlitz

StackBlitzはJavaScriptプロジェクトに特化して提供されています。バックエンド向けにはNestJS、Express、Koaなどが挙がっており、フルスタックとしてNuxtやNext.jsに対応しています。

WebContainerというWebAssemblyベースのNode.js実行環境を開発しており、オフラインでの開発もできる（すべてではないようですが）のが魅力です。

StackBlitz | Instant Dev Environments | Click. Code. Done.

Glitch

GlitchはNode.jsベースのサーバーサイドを提供しています。ワンクリックですぐに開発ができるので、とても手軽に使えます。

プロジェクトはフロントエンドのみ、またはNode.js付きで選択できます。

Glitch: The friendly community where everyone builds the web

Playcode

Playcodeでは完全に自由なサーバー環境が提供されるわけではありませんが、プロジェクトの選択時に選ぶことでトランスパイル環境も提供されています。

ReactやTypeScriptであれば利用できます。NuxtやNext.jsには対応していないようです。コンソール出力ができるのは便利です。

Javascript Playground (Sandbox, Repl)

まとめ

プレイグラウンドサービスを使えば、ちょっとしたコードを他の人たちに手軽に共有できます。しかもサーバーサイドの実行もできれば、より本格的なコードを試せるでしょう。

今回紹介したサービスの多くはホスティング機能も備えています。PoCを書いて、そのまま公開・運用もできるのが便利です。