Repl.it で HTML+JavaScript+CSS のコードをブラウザで書く

こんにちは。オンラインIDE大好き、北山です。
今回は Repl.it を紹介します。

TL;DR

• Repl.it
  • 使ったらわかります。GitHubアカウントでログインできて便利
  • https://repl.it/

Repl.it

ブラウザ上のJavaScript実行環境といえばみんな大好き CodePen ですよね。
私も好きです。
別に CodePen には何の文句もないのですが
たまには違うものも使ってみようと思って Repl.it を使ってみたら
悪くなかったので共有です。

• CodePen
  • https://codepen.io/

良いところ

Run ボタンがあるのが良い

CodePenはコードを変更するとそのまますぐ反映されますが、
たまに反映されなかったり、「あれ？これ反映されてる？」みたいなのがあってモヤッとすることがありました。
その点、 Repl.it は「Run ▶︎」ボタンがあるので
前述した心配や不安、モヤみたいなのはないので良いです。

ファイルツリー があるしフォルダも作れるのが良い

ファイルツリー（directory tree）があるので
複数ファイルを使った作業もやりやすいですし、もちろんフォルダも作れます。
左側メニュー：一番上のFilesボタンを押すことでカラムを隠せるのも良いです。

デフォルトの3カラム表示が ファイルツリー | コード | 実行結果画面 なのが良い

これは一番のお気に入り部分なんですが
実行結果画面が横長ではなく縦長なのが嬉しいです。
最近はスマホをよく使ってることもあり縦長画面への違和感が少ないからかもしれません。
コンソールも出てるので、conosole.log などが使いやすいのも良いです。
画像のテスト画面がクソダサなのは勘弁してください。

入力補完が見やすくて良い

入力補完が個人的には見やすくて使いやすいです。

共有しやすくて良い

右上の「💁‍♀️+Share」ボタンから共有リンクの作成、
埋め込み用コードの取得が簡単にできるのも良いです。

使ってないけど良さそうなところ

対応言語が多くて良い

これはまだ全く使ってない機能なので実例は話せないのですが
対応言語がめちゃ多いのは面白いなあと思いました。

おわり

みんなも使ってみてください