Sekine Hisako Portfolio

デ　ジ　タ　ル　弱　者　を　減　ら　し　た　い

, , ,

jQuery基礎

学科【オンライン】2025.12.6

授業内容

  • jQueryの使い方について
  • jQueryの導入
  • 課題制作

習得内容

  • jQueryの使い方について

参考サイト　
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　L13～L15
https://html-css.hamaya2020.com/lesson-13.html

■ JavaScript と jQuery
Web ページに動きを付けたり計算などの処理を行うにはプログラミング言語である JavaScript を使用する。また、JavaScript を容易に記述できるようにした JavaScript ライブラリィである jQuery や JavaScript 機能ライブラリィを使用することもある。

■フォルダ構成
JavaScript ファイルのファイル数が多くなる場合は、js などのサブフォルダを作成して格納。

 ■jQuery 読み込み例（自サイト内に配置）
jQuery をダウンロードして自サイト内に配置する場合は、以下の記述を行う。

  • 一般的に外部の JavaScript ファイルは、「js」フォルダ配下に格納する。
  • script タグは、HTMLにhead タグ内に記述する場合と body タグ内に記述する場合がある。
  • 機能指示用 JavaScript は、外部ファイルに記述されることもある。
  • jQueryの導入

jQuery の処理部は、JavaScript で記述されており使用するためには、jQuery の処理部を導入する必要がある。
まず覚えておくのは以下の３点

【その1】一番上にjQueryの本体を読み込む（記述する。）

jQueryの公式サイトからダウンロードしたりCDNで直接読み込もう。
※要するにJavascriptの難しいのをまとめているファイルを読み込む。

公式サイトより 例えば…
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
上記をHTMLのファイルに記述する

そして読み込む方法は2つある。
1.CDNで読み込む
2.ファイルをダウンロードして読み込む
※どちらでも大丈夫だが、一般的にはCDNの方が多い。
※CDN（Content Delivery Network）・・・・インターネット経由でファイルを配信する仕組みのこと
CDN を使用すると jQuery や個別ライブラリィを使用する時に指定された URL を記述するだけで使用できるのでダウンロードしてサイト内に配置する作業が不要になる。
・CDN では、jQuery や個別ライブラリィのダウンロードが高速で大容量のサーバーから行われるので高速に実行されると同時に自サイトのサーバー負荷を軽減させることができる。
・CDN を使用する場合は、ネットの検索で「（使用する機能名） CDN」と検索して表示されたコードを Web ページ内に記述する。例えば、jQuery の CDNは「jQuery CDN」と検索する。
・例えば、jQuery の場合は「jQuery CDN」と検索することで CDN の情報を入手することができる。jQuery の場合は、jQuery の本家に加えて Google や Microsoft が提供している。

【その2】自作の「コード」を読み込む（記述する。）

次に、使いたい内容の為のコードを作成し、それを読み込ませます。
※このやり方は2種類です。HTMLのファイルの内部に記述するか、CSSと同じように外部ファイルを用意

■パターン１　内部に記述する
<script type=”text/JavaScript”>
//コード
</script>

■パターン２
外部ファイルに記述してよみこませる
<script type=”text/JavaScript src=”パス/ファイル名”></script>

【その3】動きに該当する要素（HTMLのタグ＋IDなど）と連動させる

HTMLのタグ（要素）と連動させる。また差別化としてIDと連動もさせたりする。
※この部分は様々なやり方がある。その為にHTML・CSSの理解が必要になる。

単純に言ってしまうと、ここまで学んだ、「HTML」と「CSS」の他には、この「Javascript」しか無い。
今後開発される可能性はあるが、いま世の中にある多くのWebページはこの「HTML」「CSS」「Javascript」で作られていると考えて頂いて大丈夫。まずは様々なWebページに組み込まれている「Javascript」を見てみよう。

■良く使うキーワドの一例とCSSについて
CSS３の登場以降、この「Javascript」を使わなくても実装できる内容が日々増えている。

js アコーディオンメニュー
js タブメニュー
js ハンバーガーメニュー
（※ナビゲーションドロワー）
js スライダー
js ドリルダウン
js フェードイン
js フェードアウト
js モーダルウィンドウ
js カルーセル
jsライトボックス
jsスクロール
js ユーザーエージェント切り替え
js 電話発信

CSS アコーディオンメニュー
CSS タブメニュー
CSS ハンバーガーメニュー
（※ナビゲーションドロワー）
CSS スライダー
CSS ドリルダウン
CSS フェードイン
CSS フェードアウト
CSS モーダルウィンドウ
CSS カルーセル
※ユーザーエージェント切り替えと電話発信はまだCSSだけではなさそうです。

■まとめと注意点

Webサイトの構成は「HTML」「CSS」「Javascript」で出来ている。
ここからやるべきことは、「再現力」や「実装」、「解析」や「改修」特に、コーダーとして現場のお仕事で求められることは、作る事よりも他人の作ったWebページをなおせる能力。
必要とされるのは、「間違い探し」修復する為の「HTML」「CSS」「Javascript」の知識と経験が必要となる。
当然その知識と経験を得るには、多くの作品を作成する事と、作品に携わる事。

見本となるサイトがたくさんあるのがWebページの良いところ。
「こんな動きのページ作れますか？」のような依頼はよくある為、その見本のサイトを解析できれば実装が可能。