kondoumh のブログ

- とあるソフトウェアエンジニアのめったに更新されないブログ -

CodeSandbox : Playground 感覚な GitHub も使える Desktop PWAs 対応までしてるいいやつ

最近、CodeSandbox を使ってる人を見かけるようになりました

codesandbox.io

以前取り上げた CodePen はデザイナーも使う cool な JS Playground という感じで、ブログにデモとコードを一緒に貼り付けたりするのに便利でした。

blog.kondoumh.com

CodeSandbox はもう少しデベロッパー寄りのサービスのようです。

CodeSandbox のトップページの Create Soundbbox をクリックすると表示されるテンプレート選択ページで Sign in with GitHub ボタンからサインアップできます。

最近流行っているフロントエンドのフレームワークを数多くカバーしています。

f:id:kondoumh:20181118120809p:plain

コードエディタ + プレビューをブラウザの 1タブで使えます。

f:id:kondoumh:20181118141621p:plain

プレビューは別タブに出すこともできますので、Chrome DevTools などでデバッグも可能です。DevTools を使わなくても Console のログは見れます。

GitHub 連携は CodeSandbox の重要フィーチャーで、既存プロジェクトをインポートして開発できます。CodeSandbox 上でプロジェクトを作成して GitHub のリポジトリにエクスポートすることもできます。現時点では BitBucket などのサポートは無いようです。

Create Soundbox のページの下にある Import from GitHub のボタンから https://codesandbox.io/s/github に遷移して GitHub リポジトリの URL を指定します。package.json がプロジェクトルートに配置されていることが必要です。

f:id:kondoumh:20181118141722p:plain

プロジェクトが読み込まれプレビューも表示されます。

f:id:kondoumh:20181118143537p:plain

このプロジェクトは vue-cli で生成したものです。CodeSandbox にはターミナルはないので cli コマンドを叩くことはできませんが、プロジェクトの package.json を読み込んで裏でビルドしてくれます。create-react-app にも対応しています。各フレームワークが提供する CLI の規約を利用してコマンドを叩くことなく JS Playground 的な感覚で使えるのが CodeSandbox のウリのようです。

Document にもこうありました。

CodeSandbox is an online editor that's built for web application development. Web application development is a growing field, and with all new configuration options it becomes harder and harder to focus on writing code. We make this easier by doing most configuration for you.

インポートして実行までしてますが、この時点ではプロジェクトを表示しているだけです。左上の Fork ボタンをクリックすることでプロジェクトを取り込んで CodeSandbox 上で管理できます (新規作成時も同様)。

取り込まれるとエディタの左側にサイドバーが表示されます。

f:id:kondoumh:20181118143952p:plain

ダッシュボード画面にプレビューのサムネイルも追加されます。

f:id:kondoumh:20181118144012p:plain

GitHub 連携用の UI はまだ貧弱で diff なども見れませんが、ひとまず作業内容は push できます。

f:id:kondoumh:20181118133302p:plain

テストの実行も可能です。

f:id:kondoumh:20181118144446p:plain

なんと VS Code もブラウザ内で動きます(現状 Experimental ですが )。

f:id:kondoumh:20181118133645p:plain

さらに CodeSandbox は Desktop PWAs にも対応しており、インストールしてデスクトップアプリとして使うことも可能です。

f:id:kondoumh:20181118135748p:plain]

f:id:kondoumh:20181118145030p:plain

ブラウザのタブに埋もれてしまいがちなので、Web IDE が PWA 対応するのはいいことだと思います。

最後に

CodeAnywhere や Codenvy のような汎用的 Web IDE はデスクトップでの作業をなんとか Web だけで完結しようというコンセプトのサービスです。

blog.kondoumh.com

CodeSandbox は React や Vue による UI 開発に特化し JS Playground 感覚で使えて GitHub 連携が可能な Web Editor ということで、既存の Web IDE とは明確にターゲットユーザーやユースケースが異なっている印象を受けました。Web IDE って実質 JS にしか使わない(使えない) しこういった割り切りは素敵だと思います。