君は2クリックでVue appを立ち上げたことがあるか!!<CodeSandboxを世の中に広めなければと思った件>
ちょっと時間が経ってしまったのですが、2月にアムステルダムで行われたVue conf AmsterdamとFrontend Developer Love conferenceに参加してきました。
初めての技術カンファレンス&海外でのイベントということで学ぶことばかりの数日間だったのですが、今回はその中でも特に印象に残ったセッションをご紹介します。この記事を読んで「CodeSandboxおもしろそう！」「使ってみたい！！」という方が1人でも増えると嬉しいです。
CodeSandboxとは
CodeSandboxとはオンラインで動くコードエディターで、ReactやVue、Angularなどのフレームワークですぐにアプリケーションを作成できるのが特徴です。
GitHubでオープンに開発が行われているのですが、なにより驚いたのがプロジェクトリーダーのIvesがまだ21歳の学生であること！まだ日本ではあまり知られていないプロダクトですが、将来がとても楽しみなのでこのCodeSandboxの便利な機能をいくつかご紹介したいと思います。
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コンポーネントを作成してみましょう
propsで受け取った textを表示するだけのbuttonです
ローカルで開発するのと全く同じ感覚で表示までできました
画面下部のコンソールにエラーも出力してくれます
外部ライブラリを読み込もうとすると怒られますが、
ボタンをクリックするだけで自動でライブラリがダウンロードされ、 package.jsonにも追記してくれます。
またCodeSandboxの特徴としてライブラリの設定ファイルをGUIからconfigできる機能があります。各種設定の概要を確認しながら調整できるのでなかなか便利です
さらにさらに、ライブラリの追加もGUIの検索ボックスから行えます(バージョンも指定できる)。このお手軽感めっちゃ好き❤️
Encourage sharing & discovery
CodeSandboxで作成したアプリは簡単に共有ができるだけでなく、お目当のプロジェクトを見つけるのも簡単に行えます。
せっかくなので <iframe/>でエディタを埋め込んでみました。みなさんも実際に僕が書いたコードを確認できるかと思います。ちゃんと動作もするはず・・・
共有方法は簡単。
左上の"share"をクリックすると埋め込みリンクやエディタの共有リンクがすぐに取得できます。
また、CodeSandbox上から直接GitHubのレポジトリを作成してpushすることも可能です
リポジトリができた！！
他のプロジェクトを探したい時はSearchページから検索するだけ。プロジェクト名だけでなく使っているフレームワークやライブラリからも絞りこむことができます
例えばElement UIを使っているプロジェクトならこんな具合に。
プロジェクトのページに飛べば実際にどのように動作して、どのようにコードが書かれているのか学べます
Easy to import
今までに作成したプロジェクトをCodeSandboxに取り込むのも簡単です。方法としては大きく
という3つの方法が用意されていますが、今回はDEMOとしてGitHub importを試してみましょう。
以前作成した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が動いています。
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へのお布施やIvesへの投げ銭はこちらからどうぞ👇👇
