私は現在こちらの学習教材でCDNを使ってVue.jsの学習しています。
普段はVSCodeを使ってますが、オンラインエディタにも慣れてみたいと思いCodePen、JSFiddleのアカウントを取得しました。が、どちらでテストするか決めかねてました。
CodePenもJSFIddleもHTML/CSS/JSのコードを、ブラウザ上で編集しながら実行結果が確認できるオンラインエディターツールです。コードを保存して公開することもできます。
そこでどちらも登録してさっくり触った感想をここに残します。
JSFiddleの良かったところ
直感的に触れるとはまさにそのことで、立ち上げてすぐ見えるところに書くべき場所がわかること、個人的に「JS」のプルダウンを触ったときに選択肢に知っている言語がズラッと出てきてくれると選びやすく、また選択後も表示されていると何のフレームワークで書いているのか理解しやすいです。
左上のロゴを触ると各言語のテンプレートを見ることができます。初学者にとってまずこれを見てどんな記述なのかを観れるので参考になります。(最初の画像のようなTODOリストのサンプルが表示されます)(すごい)
Collaborateですぐにペアプロが出来るのも魅力的と感じました。
CodePenの良かったところ
アカウントを作成すると簡単なツアーが入りますが、おかげでCSS⇄SCSSにコンパイルしたり戻したりできると知りました(ほへー)。使い方を知らない人にとってはこういう案内を最初にしてくれるのはありがたいですね。絶対知らずに使ってたらスルーしてました。
スクリプトを追加する設定ではURLで入力もOK、予測に出てくれるのは初学者としてはありがたいです。
また、ログインするとTrending(Communityのようなもの?)があり、自分が気になったコーダーをフォローしたりコードをフォークすることができます。これはワクワクします!
どちらにも言えること
オンラインエディタには直感的に触れる便利さや、自分や相手のコードをプレビュー越しに見たりシェアできる良さはありますが、例えばVue.jsはwebpackでビルドすることがCodePenではできなかったりするので、書き方を変えたり分割したりして打開策が必要なのだそうです。
CodePenに少し軍杯が上がるものの、、
まずは試してみるという程度や参考を探してみるというのには良さそうなので、私は両方使ってみようと思います!
皆さんはどのオンラインエディタを利用していますか? おすすめなどあればコメントなどいただければ幸いです!