js/tsを簡単に試せるplayground 7個

2022/08/13に公開

タイトルではjs/tsとしていますが、いくつかは他の言語もサポートしてます。

StackBlitz

Stay in the flow with instant dev experiences. No more hours stashing/pulling/installing locally — just click, and start coding.

StackBlitzはFE/BEともにサポートしてます。Koaが使えるのは珍しいかなぁと。
https://stackblitz.com/

CodePen

CodePen is a social development environment for front-end designers and developers.

個人的には、CodePenはCSSメインで何か試したい時に使っています。social development environmentと謳っているだけあって、他の人の書いたコードが簡単に見れるのはとてもいいかなぁと思います。
https://codepen.io/

JSFiddle

JSFiddleはシンプルなUIが好きな人にはオススメです。自分はjsでちょっと行数多めになりそうなの関数を試し書きとかに使う事が時々あります。
https://jsfiddle.net/

JS Bin

JS BinもUIがシンプルで、このPlaygroundでは結構な老舗かなぁと。

https://jsbin.com/

PlayCode

PlayCode is a website where you can type in code and it immediately shows you what you programmed in a little extra tab. All you need to do is select a programming language or a framework and you can start without needing to set up anything.

PlayCodeは学習コースがあるのが、他のPlaygroundとの大きな違いかなぁと思います。https://playcode.io/learn
UIはVSCodeとかなり近いので、VSCodeのUIが好きな人にはオススメです。
https://playcode.io/

code.sololearn

code.sololearn.comはUIがシンプルでメジャーな言語をサポートしています。最近、rustを勉強し始めたので、ラインナップに加わることを願ってやみません。
https://code.sololearn.com/

CodeSandbox

CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster.

CodeSandbox はStackBlitz同様FE and BE(node/nestjs)が簡単に試せます。
個人的には、CodeSandboxを一番多用してます。基本的には、React/TypeScriptテンプレートを使ってます。
1つ難点があるとしたら、変更をトラックしているっぽくて、変更を保存していなくても、再レンダリングされるので、書いている途中にエラーを見せられるとちょっと萎えますw
https://codesandbox.io/

Discussion