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

ちょこちょこVue.jsを使ってるんですが、まだ手に馴染みません。まだまだ馴染まない理由の1つにフォームがあります。 Railsをメインに使う生活をしているので、form_forがないとフォームが書けま

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

CodeSandbox

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

CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster

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

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

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

プロジェクトツリー

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

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

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

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

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

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

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

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

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

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

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