HTML/JavaScript/スタイルシートを修正してその結果を確認する、いわゆるFeddle系のサービスは幾つか存在します。そういったサービスはWebサーバを用意しないで済む代わりにエディタが独自のものに限られます。 ローカルコンピュータ上でさくっとコンテンツを作ってHTMLコンテンツを作りたい、そんな方にお勧めなのがWeb Playgroundです。

Web Playgroundの使い方

Web Playgroundのインストールはnpmでできます。

npm i wpg -g

次にまずは何もないディレクトリでwpgコマンドを実行します。

$ wpg
[playground] Did not find playground file, creating one...
[playground] Created /Users/nakatsugawa/Downloads/test/playground.yml
[playground] Did not find /Users/nakatsugawa/Downloads/test/html.html, creating one...
[playground] Did not find /Users/nakatsugawa/Downloads/test/js.js, creating one...
[playground] Did not find /Users/nakatsugawa/Downloads/test/css.css, creating one...
[playground] Created /Users/nakatsugawa/Downloads/test/js.js
[playground] Created /Users/nakatsugawa/Downloads/test/css.css
[playground] Created /Users/nakatsugawa/Downloads/test/html.html
[playground] Run wpg again to start live-reload server

さらにもう一度wpgコマンドを実行するとWebサーバが立ち上がります。

ライブリロードが組み込まれていますので、ファイルを編集すればブラウザがリロードされます。

ファイル構成はこんな感じです。

Web Playgroundを使えばさくさくとWebフロントエンドの開発が進められます。ローカルでできるのでオフラインの時にも使えるのが便利です。

Web Playgroundはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

d6u/web-playground