CodePenでjQuery・Vue・Reactなどのライブラリを使用する

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なども追加できますよ。

目次から探す