CodePenでjQueryを使う方法を備忘録になります。※2023年3月時点の情報です。
CodePenで「JS」の欄にjQueryのコードを書いてSaveボタンを押した時に、「uncaught referenceerror $ is not defined」というエラーが出てしまう場合は、jQuery自体が読み込まれていないことを意味しています。
そのためCodePenでjQueryを読み込む設定をしていきます。
Settings画面でjQueryを読み込む設定をする
まずは、CodePenの「Settings」画面を開きます。
「Settings」画面が開きましたら、左側メニューの中にある「JS」を選択します。
そして「Add External Scripts/Pens（外部スクリプト/ペンの追加）」項目の検索窓に「jquery」と入力します。
すると「jquery」に関連した外部スクリプトの名前が表示されますので、今回は一番上の「jquery 3.7.1」を選びます。
一番上の「jquery 3.7.1」を選びましたら、検索窓の下の入力欄部分にjqueryのCDNパスが自動で入力されますので、「Save & Close」ボタンを押して設定完了です！
設定がきちんと反映されているかどうか確認したい場合は、再度「Settings」画面を開き、「JS」メニュー画面の検索窓の下の入力欄にjqueryのCDNパスが入っているかどうかチェックします。
これでCodePenでjQueryが使えるようになりました！
まとめ
jQuery以外の言語も読み込みが可能ですので、必要に応じて色々と設定できます。
CodePenは本当に便利なツールです。
（もうかれこれ10年以上お世話になっていますが、流行り廃りの激しいWeb開発の中で生き残っている優良ツールの中の一つです。）
まだ使ったことないよ～という方はぜひぜひ使ってみてくださいね（^o^）
comment