ブラウザ上でコードを試すコードサンドボックス系サイトまとめ

ブラウザ上でコードを試すコードサンドボックス系サイトまとめ:

本記事はOPENLOGI AdventCalendar 5日目の記事です。

8月からオープンロジ社に入社したエンジニアの @ykhirao です。

前職までRails＋Vueだったので、現職のReact+Laravel or Vue/Nuxt+Laravelに慣れるのに必死です。

優秀なメンバーが20人くらいいてかなり相談しやすい環境なので助かっています。

さて本題、

ブラウザ上でコードを試すコードサンドボックス系まとめ

問題

この時期、アドベントカレンダーの検証用に、たくさんnode環境を作らないといけないじゃないですか。

その上で

Fryday, November 30th 
Munetaka [10:58 AM] 
 
vueをsfcでブラウザのみで動かす方法ってあるんすか  
アドベントカレンダーの記事のリソース検証すんのに、わざわざnode環境作るのめんどい :thinking:  

Slackでこんな発言を観測したので、環境構築いらずに始めれるサービスを並べてみようと思います。

めんどい : 怠惰はエンジニアに欠かせない資質のひとつなので彼はいいエンジニアですね。

JSFiddle

一瞬でVue.js環境作成できました。

CodePen

html, css, jsのサンプルコードを共有するにはいい感じのサービスかと思います。

CodeSandbox

こちらもJSFiddleと同じでテンプレートから選択してすぐにVueファイルが作成されました。

例えばこちらはVue-test-utilsのチームが使っているコードサンドボックスで、何か問題があるとこのテンプレートで問題を再現してからIsuue立てたりしています。すでにJest+Vue-test-utilsでのテストが書かれているので、試したい方はぜひ使ってみてください。

PLAYCODE

Vue系のプラグインを入れることもできます。テンプレート選択式ではないです。

最後に

作ってから気づいたのですが2017年度版はpaizaさんがまとめてくれてました。こちら

.