つい先日、都内で開かれていた初心者向けReact講習会に参加した際、開発環境として CodeSandbox が推奨されており、使ってみた所大変良いと感じたので紹介しておきます。
どんなものか
フロントエンド用の開発環境を秒でブラウザ上に構築してくれるやつです。 どのくらい秒かというと、本当に秒。ユーザー登録すらいらない。
- https://codesandbox.ioにアクセスする
- 右上の
Create Sandboxをクリック - 使いたいフレームワークを選択
この3ステップだけで、Reactならcreate-react-appが、Vueならvue-cliでinitした感じのやつがクラウド上に構築され、かつブラウザ上で編集できるようになります。
良いところ
- 繰り返しになりますが手軽にイチから環境構築できるので、Qiitaとかで見かけたサンプルコードをちょっと写経してみるときのハードルが低くなります。
- 作成したサンドボックスを共有できます。講習会などで予め作成したコードを元に話をしたい場合、サンドボックス上でコーディングしてURLを配布すればOKです。
イマイチなところ
- ライブエディットには対応していないので、複数人で同じサンドボックスを同時編集して、モブプロぽくすることは出来なさそうな感じ。
- コマンドラインが使えないので、
gulpなどのタスクランナーを走らせることは出来ません。Webサーバも立ち上げられないので、サーバサイドまで含めたWebアプリは作れません。この辺は既存のクラウドIDE(Cloud9とか)の方が向いてますね。 - エディタがMonacaエディタ固定らしく、使い慣れたエディタがある人にはややストレスかも。VSCode使いの方にはよく似たサービスで https://stackblitz.com/があります。
個人的には上に書いた写経の例のように「ちょっと時間があるから勉強しよう」くらいの気持ちのときにちょうどよいサービスだと思っています。 あと、Chromebookしか持ってなかったりとかすると、こういうブラウザベースの開発環境は貴重ですね。今後も育っていって欲しい分野ですー
