jQueryはJavaScriptを簡単にしてできること増やしました！君です
昨日に続いてTOPページの話ですが、先日ではデザインの話、今回はプログラム領域での制御をいくつかご紹介したいと思います！！本記事では、jQuery君のご紹介とその導入方法をご案内していきます！次回以降実際の記述内容をお話していきますので、お楽しみに～
～今回はWebエンジニア初心者向けのトピックです～
jQueryってそもそも何でしょうか？
まずのjQueryの導入ですが、そもそもjQueryとjavascriptとの違いってご存じでしょうか。こちらの記事を開いた方はどちらも聞いたことがある言葉かもしれません。
jQueryはJavaScriptを簡単にしてできること増やしました！君です
jQueryのロゴの下には write less（書くこと少なく）,do more（できることを多く）って書いてあります。すごいですね、〇〇するだけダイエットで効果があるものはないですがｗ、jQuery君はその夢かなえてくれます♪
そもそも1990年代中盤に誕生したJavaScript君は書くこと長いし、読みにくいんですよね・・（実際自分書けないし・・）
そうなんです、16世紀に宗教改革者ルターが読みにくいラテン語聖書をドイツ語に翻訳したことから始まる宗教改革と同じことが、500年の時を経てプログラム界隈でも起きたのです！！！！！
そしてこのjQuery君もまた、現代の波にのまれていくのですが・・それはまた別のお話（機関車トーマス森本〇オさん風）
jQuery君との出会い方
ここまで紹介した、jQuery君ですがどうやって出会うのか、ご紹介していきたいと思います。簡単なソースを乗っけておきました。<head>の中身はあまり気にしないでください～
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>hogehoge</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="./hoge.css" />
</head>
<body>
<div class="container">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./hoge.js"></script>
</body>
</html></body>の直前の下記がまさに読み込んでいるところですね。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>2021年7月時点の最新は3.6.0ですね。ローカルに落として読み込む方式でもCDNで読み込む形式でもどちらでも問題ありません。このソースはCDNで動かしています。個人的にはCDNで動かすほうがユーザーフレンドリーかな、と思います。※ローカルでのダウンロードはこちらから
まぁCDNで世界で1つのものを読み込むほうが、キャッシュの観点でもええやん！まぁただCDNサーバー落ちたら終わるけど、CDN落ちるときはどうせ世界崩壊しているし～みたいな考えですね
jQuery君の読み込みができているのか、確認
<script src="./hoge.js"></script>jQueryを読み込んだ後に、個別のjsファイルを読み込んでいます。ここではjQueryのバージョンを取得して変数hに代入、それを<div class="container">に差し込むという処理をしています。
//jsファイル
$(function () {
const $h =($.fn.jquery);
$('.container').append($h);
});こんな風に、独自のファイル（今回はhoge.js）みたいなものを用意して、いろいろ動かしていきます。※実際のページはこちら
次回はオトナ帝国サイトで実際に動かしているスムーススクロール、カルーセル、ハンバーガメニューなどをご紹介していきます～
最後にこれからも進化するぞjQuery君
こちらはwikipedia先生に載っていたjQuery君のバージョンの歴史。2006年6月30日に爆誕して以降、実に23回もアップデートという名の生まれ変わりをしているんですね。感慨深いですね。宇宙の星の超新星爆発を彷彿とさせませす・・
もうお役御免になっていくところもありそうですが・・・
私は君の成長を願っているぞ！jQuery君
ゲームし放題の施設「オトナ帝国」の２拠点目となる浅草橋基地を作るにあたり、クラウドファンディングを実施しています！支援していただけると「懐かしさに浸れる秘密基地」をいち早く体験して頂けます。限定数のあるメニューもあるのでご興味ある方はお早めに！
