VeeValidateを紹介するときに、CodePenというサービスを使ってサンプルコードを紹介しました。

Vue.jsでのフォームバリデーションにVeeValidateを使ってみる - PIYO - Tech & Life -
ちょこちょこVue.jsを使ってるんですが、まだ手に馴染みません。まだまだ馴染まない理由の1つにフォームがあります。 Railsをメインに使う

他にもJSFiddleやJSBinなど類似のサービスがいくつかあるのは知ってしましたが、Vueのサンプルを書くときにPreprocessorを選択したり、ライブラリをCDNから検索して簡単に追加したりといい感じだったのでCodePenを使ったんですよね。

CodeSandbox

で、ここから本題なんですが、VeeValidateのExampleが用意されていたCodeSandboxというオンラインエディターサービスが非常に強力そうでした。

CodeSandbox
CodeSandbox is an online code editor with a focus on creating and sharing web application projects

JSFiddleやCodePenがPlayGroundなら、CodeSandboxはJavaScriptの実行環境付のIDEという雰囲気。画面はこんな感じです。

(ちなみにこれはvueのExampleをForkした状態です。)

左側にプロジェクトツリーがあって、真ん中にエディターがあって、右側にはプレビューというか実行中のサイトをプレビューするための画面があります。

プロジェクトツリー

「File Editor」と呼ばれているみたいです。

ここではファイルの追加、移動、削除ができたり、依存ライブラリを追加したりできます。

依存関係は「Add Dependency」ボタンから、インクリメンタルに検索して追加できます。すごい。よくできてる。

設定ファイル類

package.jsonとか.babelrcとかを確認したりいじったりできるようです。

エディター部

普通のエディターですがvueファイルまで扱えます。

入力補完もある程度効く模様。え、すごくない?

ブラウザ部分

index.htmlを開いて実行結果を見ることができます。リロードが効くのでコードを編集するとリアルタイムに更新されていくし、コードが間違っていればエラーを出してくれます。

また、実行環境のURLhttps://81oy51q9o8.codesandbox.io/は外部からも使えないこともないです。永続的に使える感じではなさそうに見えます。どうなのかな。ブラウザ変えて確認してみるみたいなときに便利かもしれません。

埋め込み

埋め込んでみるとこんな感じになります。

Edit Vue Template

その他

その他にもコンソールが下からにゅっとでてきたりとか、GitHubと連携できたりとか、すごいです。

もしかしてCodePenとかと比べるのが間違ってて、Cloud9とかと比べたほうがいいのではないかもしれない。