30歳からはじめる雑記ブログ

日々あった出来事、考えたことを書いていきます。

フロントの学習にはオンラインエディタがおすすめ「Codepen」

今まで業務以外で個人学習の際にもVSCodeIntelliJなどの使い慣れたIDEを使っていました。

 

しかし、フロント系の学習については次のようなことが気になっていた。

 

IDEとブラウザでの視点移動が疲れる

・ちょっと試したいだけなのに、プロジェクトやファイルをいちいち作るのが面倒

・テストで試したファイルを消すのを忘れてゴミが貯まる

 

今になってフロントの学習環境を見直すことにした。

そこで候補として考えたのが「オンラインエディタ」

 

オンラインエディタであれば、ローカルを汚さずに試せるし、1画面上にすべておさまっているから視点移動がなくて楽。

 

でも、今まで使ってこなかった理由としては、補完機能ないし、オンラインエディタってエディタとしてはしょぼいという印象があって使ってきませんでした。

 

ただローカルにファイルたてて環境整えるのは億劫すぎるということで、本格的にオンラインエディタについて調べることにした。

 

いくつか候補はあった。

・Codepen

・CodeSandbox

VSCode Online

 

パッと見シンプルで使ったことがあって、使いやすそうってことでCodepenを選択。

CodeSandboxは複数ファイル扱えたり、VueとかReactも使えるということで良さげだったんだけど、自分が今学ぼうとしているのは基本的なHTML/CSS/JSとjQueryだからCodepenで十分かなって思った。

 

Codepenのいいところは逆にHTML/CSS/JSそれぞれ1ファイルしかさわれないからこそ、作業ファイルの移動がないし、タブ移動もないから操作が最小限で済む。

最初補完機能ないのかと思ったら、Emmet記法で書いてTab押したら補完された。

jQueryライブラリはJSの欄の歯車マークで追加して使えた。

 

これだけあれば十分と思い、これにした。

ただ無料版だとPublicになって公開状態になるからそこは書く内容については気をつけなければいけない。