5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ブラウザでAngularやReactを実行できるヤツだー!

Posted at

はこです!こんにちわ!
今日は
『ブラウザでさっくりとAngular/Reactを動かして確認したいんだよなー!できれば最新版(あるいは特定の版)で!』
とか
『StackOverFlowに質問を投げたりQiitaに書くときに問題が再現する最小で実行可能なサンプルを…!』
とかの要望に使えるやつの話をします!
つまりブラウザで動きトランスパイルもしてくれるエディタの話です!

よさげな順に並べときます。

StackBlitz

sdk-github-project - StackBlitz 2020-04-10 03-35-21.png

Angular, React, Ionic, TypeScript, RxJS, Svelte
あとは Kendoとかも対応してる。

各プラットフォーム向けの対応がしっかりしてる&軽くて早いのでオススメ。

GitHub同期は https://stackblitz.com/github/[ユーザー名]/[リポジトリ名] の形式。
GitHub同期わからん?上のURLと指定すると github参照してnpm installもして実行するんだよ!
実際に動くサンプルは これ
このリポジトリ を参照して動いてる。

CodeSandbox

todomvc - CodeSandbox 2020-04-10 03-42-21.png

StackBlitzより対応フレームワークが多い(Vueとか)
StackBlitzより重い気がする。

対応フレームワークが多い分、各フレームワーク向けのカスタマイズが足りない気がする。
たとえば、Angularだとデフォで app.component.ts を開いてくれないとか、デコレータの使用についてLintに怒られたりとか。

GitHub同期はちょっと面倒でブランチ指定しなきゃいけないっぽい

NG RUN

Angular demo runner 2020-04-10 03-32-08.png

Angular専用のオンラインエディタ。

ちなみに公開してるgithubのAngularプロジェクトなら、URL指定すると実行できる。
意味わからん?こんな感じ にURL https://ng-run.com/github/[ユーザー名]/[リポジトリ名]

すごいなー・・・。
これはなぜ完全に無償?

TODO: お金払わせてくれの画像

よく見るとFirebaseの無料枠で頑張ってる?のかな?

Plunker

starters: Starter templates for Plunker 2020-04-10 03-46-51.png

https://plnkr.co/
老舗。
2020年に使うことは特に無いのでは…

その他

Visual Studio Online

ブラウザ上から VS Code相当のものが使えるやつ。
詳しくはこちらの Qiita記事で Visual Studio Onlineで、ブラウザ上からVS Codeを使う【Public Preview】
よくわからんがフルタイムで月$50 ってのはキツそう。夢はあるけど。

jsDo.it

https://jsdo.it/
jsdo.it - Share JavaScript, HTML5 and CSS 2020-04-10 03-19-34.png

R.I.P

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?