はじめに

技術を触れる際にすぐに試せる環境が用意できると、
本質だけを素早く学ぶことができると思いました。

とくに昨今では一つの技術を学ぶために、
それに付随する技術を知らないと、
例えば環境構築に時間を取られ最悪学習までに至らない可能性があります。

このような場合にオンラインエディターサービスが便利でした。
特に最近はサービスのULRをドキュメントにリンクしてあり、
該当コードをすぐに試せたりする状況が進んでいるようにも見えます。
私がそれらのサービスがどのような違いがあるか理解できていなかったので、
備忘録としてサービスを簡単にレビューしてみました。

サービス紹介/レビュー

今回見てみた対象サービスを紹介します。
どれもgithubアカウントで連携することで無料ですぐに利用できました。

repl.it

REPL(read eval print loop)とあるように、
そのコンセプトをそのままサービスにしたような印象です。
私はClojure開発でREPLを知りましたが、
ClojureではほぼREPLで開発するといっても過言じゃないぐらい重要かなと思います。

サービスとしてはEditorの横にConsoleがあり実行結果が出力されます。
Consoleの場所はShellに変更でき、
ほとんどサーバを実行するような感覚で利用できるようです。
そのため、言語の制限がなく、javaやNode.js,R,C++などなんでも試せるようでした。
今回の比較サービスの中では、
他のサービスに利用したい言語がない場合repl.itと言えるかもしれません。

試しにClojureで実行してみましが、
実行までが（初回のインストールを除いたとしても）遅いのが気になりました。
vite.js等も試してみましたが、
Console部分が二分割されてブラウザ出力も確認することができましたので、
それらは通常通り使えそうな印象でした。
一方でフロントエンド環境のためだったら、もっと抽象化された他のサービスでよさそうです。

言語制限がない場合の選択肢としてのサービスとみた場合、
実行の遅さを取るか、言語の実行環境をローカルに構築するか悩ましい感じを受けました。

codesandbox

フロントエンド技術特化のIDE(デプロイまでできるという意味でIDEと言っています)サービスに見えました。
フロントエンドに特化している分、
今回の見たサービスの中では一番良く抽象化できているサービスと感じました。

内部はvscodeベースのようですが、
そのままvscodeと同じにはせず必要な部分のみを出しているようなUIです。
例えば一番右側は出力部分で、Browserの結果が確認できますが、
Testsというタブでテストの出力結果も確認できるといった構成となっていました。
UIは全体的に綺麗で利用する上で迷う部分がありませんでした。

ayu darkが個人的に好きなのですが、
custom themeを設定することでテーマの変更も簡単にできました。
https://github.com/ayu-theme/vscode-ayu

DeploymentではVercel,Netlify,Github Pagesと連携できるので、
ある程度の規模であればこれ一つで完結するプロジェクトも多そうな印象です。

stackblitz

こちらもフロントエンド技術特化のIDEサービスのようです。

vscodeベースで作られている一方で、
テンプレートから読み込んだ後必要な操作がわからないことが多かったです。
例えば、React Tsテンプレート読み込み後最初からコードにエラーが出ている箇所があり、
エラー箇所の修正のためtsconfigをいじろうとしてもtsconfigがなかったりしました。
他にも新規packageの入れ方がわからず、
そもそも今回の技術の学習という意味ではその技術が利用されたテンプレートがないと学習できないのかもしれません。

Firebaseとの連携が最初からできるようで、
Firebaseを利用したい場合は選択肢になるかもしれません。

無料枠でできることが少ない可能性もありますが、
個人的にはUI共に優れたcodesandboxの利用で十分に感じました。

codepen

フロントエンド技術特化のサービスです。
ただし用途としてはブラウザの結果を試すことだけに特化していて、
HTML,CSS,JSの入力部とブラウザの結果の4つに別れています。

このエディターでゴリゴリコードを書くのは難しい印象なので、
どちらかというと決まったコードをシェアすることがメインの用途となりそうです。

シェアされたものはログイン等不要で参照でき、
コードもその場で変更できる点は他のサービスと異なる点と言えそうです。
MDNのCSS関連ドキュメントにはよくcodepenで貼ってある印象ですが、
これはログイン不要な使いやすさに起因しているのかもしれません。

最後に

技術を学ぶことを念頭に比較してみました。
ざっくりまとめると、
CSSの学習だったらcodepenで十分だったり、
design systemのフレームワークだったらcodesandboxのテンプレートを利用したり、
言語の制限がないrepl.itを利用することができそうです。

皆さんの学習の効率化につながればと思います。