1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

初心者が使うならCodePen?JSFiddle?

Last updated at Posted at 2022-05-23

私は現在こちらの学習教材でCDNを使ってVue.jsの学習しています。

普段はVSCodeを使ってますが、オンラインエディタにも慣れてみたいと思いCodePenJSFiddleのアカウントを取得しました。が、どちらでテストするか決めかねてました。

CodePenもJSFIddleもHTML/CSS/JSのコードを、ブラウザ上で編集しながら実行結果が確認できるオンラインエディターツールです。コードを保存して公開することもできます。

そこでどちらも登録してさっくり触った感想をここに残します。


JSFiddleの良かったところ

image.png
直感的に触れるとはまさにそのことで、立ち上げてすぐ見えるところに書くべき場所がわかること、個人的に「JS」のプルダウンを触ったときに選択肢に知っている言語がズラッと出てきてくれると選びやすく、また選択後も表示されていると何のフレームワークで書いているのか理解しやすいです。

image.png
左上のロゴを触ると各言語のテンプレートを見ることができます。初学者にとってまずこれを見てどんな記述なのかを観れるので参考になります。(最初の画像のようなTODOリストのサンプルが表示されます)(すごい)

Collaborateですぐにペアプロが出来るのも魅力的と感じました。

CodePenの良かったところ

image.png
アカウントを作成すると簡単なツアーが入りますが、おかげでCSS⇄SCSSにコンパイルしたり戻したりできると知りました(ほへー)。使い方を知らない人にとってはこういう案内を最初にしてくれるのはありがたいですね。絶対知らずに使ってたらスルーしてました。
image.png
image.png
スクリプトを追加する設定ではURLで入力もOK、予測に出てくれるのは初学者としてはありがたいです。
image.png
また、ログインするとTrending(Communityのようなもの?)があり、自分が気になったコーダーをフォローしたりコードをフォークすることができます。これはワクワクします!

どちらにも言えること

オンラインエディタには直感的に触れる便利さや、自分や相手のコードをプレビュー越しに見たりシェアできる良さはありますが、例えばVue.jsはwebpackでビルドすることがCodePenではできなかったりするので、書き方を変えたり分割したりして打開策が必要なのだそうです。

CodePenに少し軍杯が上がるものの、、

まずは試してみるという程度や参考を探してみるというのには良さそうなので、私は両方使ってみようと思います!
皆さんはどのオンラインエディタを利用していますか? おすすめなどあればコメントなどいただければ幸いです!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?