はこです!こんにちわ!
今日は
『ブラウザでさっくりとAngular/Reactを動かして確認したいんだよなー!できれば最新版(あるいは特定の版)で!』
とか
『StackOverFlowに質問を投げたりQiitaに書くときに問題が再現する最小で実行可能なサンプルを…!』
とかの要望に使えるやつの話をします!
つまりブラウザで動きトランスパイルもしてくれるエディタの話です!
よさげな順に並べときます。
StackBlitz
Angular, React, Ionic, TypeScript, RxJS, Svelte
あとは Kendoとかも対応してる。
各プラットフォーム向けの対応がしっかりしてる&軽くて早いのでオススメ。
GitHub同期は https://stackblitz.com/github/[ユーザー名]/[リポジトリ名]
の形式。
GitHub同期わからん?上のURLと指定すると github参照してnpm installもして実行するんだよ!
実際に動くサンプルは これ。
このリポジトリ を参照して動いてる。
CodeSandbox
StackBlitzより対応フレームワークが多い(Vueとか)
StackBlitzより重い気がする。
対応フレームワークが多い分、各フレームワーク向けのカスタマイズが足りない気がする。
たとえば、Angularだとデフォで app.component.ts を開いてくれないとか、デコレータの使用についてLintに怒られたりとか。
GitHub同期はちょっと面倒でブランチ指定しなきゃいけないっぽい
NG RUN
Angular専用のオンラインエディタ。
ちなみに公開してるgithubのAngularプロジェクトなら、URL指定すると実行できる。
意味わからん?こんな感じ にURL https://ng-run.com/github/[ユーザー名]/[リポジトリ名]
すごいなー・・・。
これはなぜ完全に無償?
TODO: お金払わせてくれの画像
よく見るとFirebaseの無料枠で頑張ってる?のかな?
Plunker
https://plnkr.co/
老舗。
2020年に使うことは特に無いのでは…
その他
Visual Studio Online
ブラウザ上から VS Code相当のものが使えるやつ。
詳しくはこちらの Qiita記事で Visual Studio Onlineで、ブラウザ上からVS Codeを使う【Public Preview】。
よくわからんがフルタイムで月$50 ってのはキツそう。夢はあるけど。