JSFiddleやCodePenだとTypeScriptのサポート受けられないのでサクッといい感じに書けてブログなどで共有できるものが欲しい。StackBlitzとCodeSandboxの２択っぽいのでその２つについて調べたことをまとめておく。

---

StackBlitz

• React TypeScriptのサンプルプロジェクト
  • https://stackblitz.com/edit/react-ts-envuum
• 無料プランでPublicプロジェクトは無制限 & GithubのPublic Repoとも接続できる
• 見た目はほぼVisual Studio Codeと同じだがExtensionの追加はまだできなさそう
  • https://github.com/stackblitz/core/issues/3
  • 個人的にVim Pluginが無いのはちょっとマイナスポイント
• 設定は VS Code と同じ方法でできるので拡張いらないくらいの用途なら問題なさそう

CodeSandbox

• React TypeScriptのTemplate
  • https://codesandbox.io/s/react-ts-template-rlhgd
• Preferences > Appearance からVim extensionを有効にできる
• こちらもpublicは無料だがprivateは有料プラン
• Live機能がついており、Classroom modeと共同編集モードが選べるようになっていてちょっとした共有にはとても便利そう

まとめ

• 現段階では Vimサポートもある CodeSandbox 一択かな
• styled-components など CSS in JS なものだとうまくエディターに表示されないんだろうけどTypeScript × Reactの機能を試すにはこれらで十分そう

おまけ

Visual Studio Codespaces

• https://azure.microsoft.com/ja-jp/pricing/details/visual-studio-online/
• Azureと契約する必要あるので避けたくなってしまうが思っていたほど価格は高くなさそう