CodePenはHTML・CSS・JavaScriptに対応したオンラインエディタで、どんな環境からでも無料で利用できる優秀なサービスです。
もちろんjQueryなどの各種ライブラリを使用できるため、node.jsといったサーバサイドライブラリ以外は自由に使えます。
そして、CodePenにはそれらライブラリを簡単に検索・利用できる機能が用意されているため、今回はその機能について紹介します。
目次から探す
CodePenでjQueryを追加する方法
追加する方法は二つあります。
1つ目が、jQueryを読み込むコードをHTMLに直接書き込む方法です。こちらは一般的なWebページ制作で使われる手法で、CodePenでも使えます。
そしてもう一つの方法ですが、CodePenならもっとスマートな書き方が用意されています。
まずはJSの左にある歯車アイコンをクリックしてください。
「Search CDNjs」のテキストボックスに”jQuery”と入力し、出てきた検索候補をクリックしてください。
これだけでjQueryライブラリを追加できます。追加した後は設定画面を閉じて大丈夫です。
こちらのサンプルを見てみてください。HTMLにjQueryを読み込むコードを書いていないにもかかわらず、jQueryのプログラムが正常に動作しています。
See the Pen PooQOja by Acceliv (@taka74) on CodePen.
このようにコンパクトなHTMLを維持した上で簡単にJavaScriptライブラリを使用できます。
同様の手順でReact.jsやVue.jsなども追加できますよ。
