君は2クリックでVue appを立ち上げたことがあるか!!<CodeSandboxを世の中に広めなければと思った件>

www.youtube.com

ちょっと時間が経ってしまったのですが、2月にアムステルダムで行われたVue conf AmsterdamFrontend Developer Love conferenceに参加してきました。

初めての技術カンファレンス&海外でのイベントということで学ぶことばかりの数日間だったのですが、今回はその中でも特に印象に残ったセッションをご紹介します。この記事を読んで「CodeSandboxおもしろそう!」「使ってみたい!!」という方が1人でも増えると嬉しいです。

CodeSandboxとは

CodeSandboxとはオンラインで動くコードエディターで、ReactやVue、Angularなどのフレームワークですぐにアプリケーションを作成できるのが特徴です。

codesandbox.io

GitHubでオープンに開発が行われているのですが、なにより驚いたのがプロジェクトリーダーのIvesがまだ21歳の学生であること!まだ日本ではあまり知られていないプロダクトですが、将来がとても楽しみなのでこのCodeSandboxの便利な機能をいくつかご紹介したいと思います。

Ives van Hoorne

2クリックでアプリを立ち上げる

まずはCodeSandboxのページを開き、右上の"Create Sandbox"をクリックします

するとフレームワークを選択する画面が出てくるので、Vueのアイコンをクリックします

完成です👏👏

Lower the learning curve.

Installing tooling should not stand in the way of getting started

という言葉にもあるように、CodeSandboxでは「コードを書きたい!」と思った人がなるべくスムーズに開発できよう徹底的にしきいを下げる工夫が行われています。

画面に並んでいるのは左端から順にファイルツリー、エディタ、ミニブラウザです。 もちろんここにNPMパッケージを追加したり import/exportを記述することも可能です。

試しに簡単なButtonコンポーネントを作成してみましょう

f:id:andoshin11:20180412003851p:plain

propsで受け取った textを表示するだけのbuttonです

f:id:andoshin11:20180412003907p:plain

f:id:andoshin11:20180412003949p:plain

ローカルで開発するのと全く同じ感覚で表示までできました

f:id:andoshin11:20180412004133p:plain

画面下部のコンソールにエラーも出力してくれます

f:id:andoshin11:20180412004824p:plain

外部ライブラリを読み込もうとすると怒られますが、

ボタンをクリックするだけで自動でライブラリがダウンロードされ、 package.jsonにも追記してくれます。

またCodeSandboxの特徴としてライブラリの設定ファイルをGUIからconfigできる機能があります。各種設定の概要を確認しながら調整できるのでなかなか便利です

f:id:andoshin11:20180412005651p:plain

さらにさらに、ライブラリの追加もGUIの検索ボックスから行えます(バージョンも指定できる)。このお手軽感めっちゃ好き❤️

Encourage sharing & discovery

CodeSandboxで作成したアプリは簡単に共有ができるだけでなく、お目当のプロジェクトを見つけるのも簡単に行えます。

せっかくなので <iframe/>でエディタを埋め込んでみました。みなさんも実際に僕が書いたコードを確認できるかと思います。ちゃんと動作もするはず・・・

共有方法は簡単。

f:id:andoshin11:20180412012102p:plain

f:id:andoshin11:20180412012110p:plain

左上の"share"をクリックすると埋め込みリンクやエディタの共有リンクがすぐに取得できます。

また、CodeSandbox上から直接GitHubのレポジトリを作成してpushすることも可能です

f:id:andoshin11:20180412021114p:plain

github.com

リポジトリができた!!

他のプロジェクトを探したい時はSearchページから検索するだけ。プロジェクト名だけでなく使っているフレームワークやライブラリからも絞りこむことができます

例えばElement UIを使っているプロジェクトならこんな具合に。

プロジェクトのページに飛べば実際にどのように動作して、どのようにコードが書かれているのか学べます

Easy to import

今までに作成したプロジェクトをCodeSandboxに取り込むのも簡単です。方法としては大きく

という3つの方法が用意されていますが、今回はDEMOとしてGitHub importを試してみましょう。

github.com

以前作成したVue ToDo List sample(https://github.com/andoshin11/vue-todoList-sample)というレポジトリがあるのでこちらでお試し。

importするにはこのURLを貼り付けるだけ。あとは自動でCodeSandbox上にワークスペースが作成され、GitHubと同期された状態になります。

一瞬でimportが完了しました。こちらも <iframe/>で埋め込んでみるので是非触ってみてください

https://codesandbox.io/s/github/andoshin11/vue-todoList-sample/tree/master/

Local Editor Experience

CodeSandbox上ではmonaco-editorが動いています。

github.com

monaco-editorはブラウザ上で動くVS Codeのようなものです。そこで veturをもとにした monaco-vueが動作しているため、まるでVS Code上で開発しているかのような体験がブラウザで行えるのは良いですね。

その他の機能

ここでは紹介しきれないほどまだまだ機能がたくさんあるのですが、主だったものだけ箇条書き

  • Parcelサポート
  • preactサポート
  • svelteサポート
  • Sassサポート
  • TypeScriptサポート
  • Prettierデフォルトサポート
  • ES Lintデフォルトサポート
  • Liveコラボレーション機能
  • Jest実行サポート
  • 静的ファイルホスティング
  • HMR
  • Emmetサポート
  • zipエクスポート

などなど素敵なものがたくさん。OSSなので日々機能が追加されていくのも魅力の一つです。

まとめ

CodeSandboxめっちゃ良い👏👏

簡単なハンズオンやデモをする際にサクッと環境が立ち上がるのが良いですね。そしてシェアの手軽さも嬉しい。

VueやReactの楽しさを知る前にnpm, webpack, babel等の設定でドロップしてしまった人も多いと思います。これからはCodeSandboxをスッと差し出して「とりあえず触ってみて!」と言えるようになると素敵ですね。

普通に開発環境として優秀なので出先でGitHubからプライベートモードでimport → 開発 & デバッグ → 動作確認までワンストップで行えそうで期待大です。

まだリリースされて1年ほどなので今後がとても楽しみ。みなさんもこの機会にぜひ試してみてください!!

codesandbox.io

おまけ

CodeSandboxへのお布施やIvesへの投げ銭はこちらからどうぞ👇👇

https://codesandbox.io/patron