HTML5+css+JavaScriptの学習や、ちょっとしたコードの実験のためのサンドボックスとして良いWebサービスはないか、と気になったので調べたらPlayCodeが良さげだったのでメモしておきます。
今回着眼したのは以下の点。
- ブラウザ上で動かせる→開発環境を組まなくて良い(エディタやIDEの設定を弄らない)
- ホットリロード→書いたコードがすぐ動作に反映されると分かりやすい
- EmmetやCSSプリプロセッサ、AltJS等がデフォルトで使える
- Sign Upの条件が緩い
- 曖昧な表現ですが、がっつりエンジニアではなくてもサインインできると良い。例えば、Sign Inの方法がGithubアカウント前提のみだったりすると敷居が上がる、という判断
この条件で
- JSFiddle
- CodePen
- CodeSandBox
- PlayCode
辺りを比較して、PlayCodeが良さそうだと感じました。
上記の点を挙げていくと、
- ブラウザ上で動作: OK
- ホットリロード: OK
- Emmet, CSSプリプロセッサ, AltJS: コードタブ右上のプルダウンから切り替え可能
- EJSはないですがEmmetはあり。CSSプリプロセッサではScss, Stylus、AltJSではTypeScript等、メジャーどころは押さえている感じがします
- Sign Upの条件: GithubとGoogleの2つのうちどちらか、という条件のようです。Googleアカウントが使えるので△という感じ
その他に良いと感じた点は、
- ファイルの追加・削除が直感的: 一番左のタブでHTML, css, JavaScriptのファイルを「+」から追加し、ゴミ箱のアイコンで削除できる、と直感的に操作が可能
- ライブラリの追加も簡単: jQueryやBootstrapといったライブラリの追加は「lib」のところで検索してファイルごとに追加できるので直感的かつ細かく指定できるので○。しかもバージョン指定も可
- Ctrl+Sでプロジェクトを上書き保存できる
逆にちょっと引っかかったのは
- デフォルトだと文字色と背景色の黒が近い色でやや見づらい(歯車アイコンの設定から変えられそう？)
- エラーコードの見方がやや見づらい(時刻は表示されるが、行数が表示されない？)
- 自分の書いたコードの中でのエラー行にはオレンジの●が付くので、そちらで判断か
といったところ。
使い方
- PlayCodeにアクセス
- 今回は一番右上の「Sign In」から「by Google」を選択。自分のGoogleアカウントでサインイン。サインインするとPlayCodeの画面に戻ります
- PlayCodeの画面に戻るとチュートリアル的なコードが既に展開されているので、適宜中身を適宜書き換えたり、ファイルを追加したりします
- ファイルの追加: ファイルの追加・削除は一番左で。+で追加。追加時ファイル名を聞かれるので入力。拡張子は自動で補完されます
- ファイルの削除: ゴミ箱アイコンで削除
- CSSプロプロセッサなどの切り替え: Emmetは標準でサポート。Scssはcssファイルをタブで開いている状態で、タブの右上のプルダウンからScssを選択すれば切り替わります
- ライブラリの追加: ライブラリの追加は「lib」で+。検索でライブラリ名を検索。選択するとファイルの種類やバージョンを聞かれるので選択
- プロジェクトの管理: 「My Project」に移動すると保存したプロジェクトの一覧が見られます
全体的に直感的な操作が可能で使いやすそうだったので、これで試してみましょうかね。
参考
アルム＝バンド