webpackbin7
Pocket

教えてもらって便利だったのでメモ。Twitter追ってみると、前にちょっと話題になったっぽいですが、全然知らんかったです。

WEBPACKBINというReactやVue、Angularなどのコードをサクッと試すのに便利なサービスです。

https://www.webpackbin.com/

簡単に言うと、CodePenのようなものですが、フロントエンド特化型という感じです。書いたコードはダウンロードできて、package.jsonやwebpackのコードもついてくるので、npm installしてnpm startとかすればローカルでも動かせます。

アクセスするとES2015かTypescriptで始めるか聞かれます。好きな方を選ぶと、すぐにコードを書き始めることができます。「continue with empty bin」を選ぶとまっさらな状態で始めることができます。

webpackbin

まっさらな状態で始めて後から設定を追加したい場合や、変更したい場合はConfigureから変更できます。

webpackbin6

また、テンプレートも用意されていて、ReactやVue、Angularをはじめ、いろいろなテンプレートが用意されています。

webpackbin2

今回はReduxを選んでみました。すると、カウンターのサンプルコードが表示されます。Reduxを使える状態にあるので、コードを書くとこから始めることができます。

冒頭でも書きましたが、コードは右上のメニューからダウンロードすることができます。

webpackbin4

ダウンロードしたファイルには書いたコードと、Configureで設定した状態のpackage.jsonとwebpackのファイルがあるので、npm installもしくはyarnして、npm start or yarn startすればローカルでも動かすことができます。

そのほかにもログインしてお気に入り登録したり、ライブリロードなどもありますが、適当にメニューをいじればわかると思います。URLも発行されるので、コードを書いて他の人に共有も可能です。

ちょっと書いて試したいときには、オススメのサービスです!

オープンソースで開発してるようで、GitHubにリポジトリがありました。クローンして手順通りにコマンド打てばとりあえず動きます。

https://github.com/cerebral/webpackbin

参考サイト

WebpackBinでブラウザ上でWebpack+ESNextのようなコードを書いて動作をシェアする

Pocket