つい先日、このブログを始めて1年が経過した。
そこで、過去どんなことを書いていたか眺めていたのだが…
jQuery講座なるものを書いていたようだが、わずか2回で止まっていた。
しかも、私も内容を完全に忘れている状態。
…折角なら一から勉強し直してまとめていこうと思い立ち、今回から改めてjQuery講座を開始する。
講座と言いながら、私が勉強した結果をまとめていく備忘録のようなものなので、そこは気を付けていただきたい。
初回は、そもそもjQueryというものが何者なのかを解説していこう。
前提知識
今回扱うjQueryを理解していただくためには、少なくとも以下二つの基礎知識や実行環境が必要だ。
そのため、このあたりはすでにある程度理解していて、かつすぐ使える環境があるものとして説明を行う。
もし不安な方は、これまた以前解説したことがあるので、そっちで勉強しておこう。
上の箇条書きに、それぞれの初回を貼ってある。
jQuery
では、本題に入っていこう。
jQueryとは
jQueryとは、オープンソースのJavaScriptライブラリの一つだ。
簡単に言ってしまうと、JavaScriptを使いやすくする、無料で使える外部ソースコード、という感じだ。
ただJavaScriptを使うのではなく、jQueryで書き方を拡張して色々記述していこう、というイメージでいいだろう。
しかし、そうであれば普通にJavaScriptを使えばいいのでは？と思われるかもしれない。
なぜわざわざこれを使うかというと、色々な理由があるが…個人的に一番魅力的なのは、組むのが楽になるから。
ある処理をJavaScriptだけで組もうとすると非常に面倒な時、このjQueryを使えば楽に表現できる、ということが多々ある。
この楽になる、というのは、ソースコードを書く量が減ることを意味している。
確かにこのjQueryを学習するコストはかかるかもしれないが、一度身に付けてしまえばそれ以上のリターンが得られる、ということだ。
と、表面上の説明はこのくらいで。
jQueryの使い方
上で書いたように、このjQueryというものは中身がJavaScriptで書かれている。
ということは、まずはその中身を読み込まなければいけない。
逆に言えば、読み込みさえしてしまえばあとは自由に使えるようになる。
では、その読み込みをしていこう。
これにも二つ方法がある。
- jQueryのファイルをDLし、それを読み込む
- Webで公開されているjQueryファイルを直接読み込む
読み込むリンク先はhttps://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
ここでは二つ目を前提として話を進めていこう。
やることは別のJavaScriptファイルの読み込みなので、前提知識として知っている…はず。
一応説明しておこう。
まず、書く場所はjQueryを書きたいHTMLファイルのheaderタグ内。
そこに、以下の内容を記載しよう。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>このURLの部分は3パターンほどあり、どれでも問題ない。
他のパターンが気になる方は、調べてみよう。
なお、中に入っている3.5.1の部分がバージョンになっている。
最新を使いたい場合は、ここを最新のものに合わせよう。
本講座では、今書いた3.5.1を前提とする。
これで、jQueryを使う準備ができた。
今後の講座の進め方
今回は導入なのでjQueryの解説はこのくらいにして、今後どう進めていくかを提示しておこう。
基本的に、各回の内容を使ったサンプルページを別で用意する。
そのリンクとソースを載せた後、その中身を解説する、という形で進めようと思う。
で、これは学習効率を上げるためなのだが、できればソースコードをコピペではなく自分で手を動かして打ってほしい。
そうすると自然と細かい点まで目がいくようになるので、書き方がどうなっているかより理解しやすくなるだろう。
そのサンプルページの書き方を固定してしまおう。
基本的に、各回で表示のためcourse-○○.htmlを用意する。
○○にはその回の数字を2桁で表記する。
今回で言えば第一回なので、course-01.htmlとなる、という感じ。
しかし、同じ回で複数のサンプルがある場合は、例えばcourse-01_1.html、course-01_2.htmlなど、アンダーバーで繋げることにしよう。
その中にはHTMLタグのみを記載し、メインの処理はjquery-○○.jsというファイルを用意してその中に書いていく。
当然ながら、それもcourse-○○.htmlで読み込むことになる。
また、スタイル調整用のcssがあれば、同じくstyle-○○.cssというファイルを作り、HTMLで読み込む。
階層は、以下のようにする。
- jquery
- course-01.html
- course-02.html
- …
- js
- jquery-01.js
- jquery-02.js
- …
- css
- style-01.css
- style-02.css
- …
太字がディレクトリ、通常の文字がファイルだ。
ということで、jQueryの読み込みだけをした状態のソースを以下に載せておこう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery講座第1回サンプルページ</title>
<!-- jQuery読み込み -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 各回ごとのJavaScriptファイル読み込み -->
<script type="text/javascript" src="./js/jquery-01.js"></script>
<!-- 必要に応じてcssファイル読み込み -->
<link rel="stylesheet" type="text/css" href="./css/style-01.css">
</head>
<body>
<!-- スタイルを反映するタグを用意 -->
<p class="contents">ようこそ</p>
</body>
</html>/* とりあえず読み込みされているか確認のため、
適当にコンソールに文字列を出力する*/
console.log("Hello World!");/* とりあえず読み込みされているか確認のため、
適当に変えてみる */
.contents {
font-weight: bold;
font-size: 5rem;
}今回のサンプルページはこちら。
まだ何もしていないので、殺風景なページだ。
今後、回を重ねていくごとに表示が増えたり、動きなんかも出てくることだろう。
一応読み込みができているかの確認のため、cssでは太字と大きさを大きく、JavaScriptではコンソールに出力している。
cssは見た目で分かると思うので、上手くいかない場合は打ち間違いがないかやリンクしているcssファイルの場所が間違ってないかなどを確認してみよう。
JavaScriptは、開発者モード(Google ChromeならF12キーで出てくるやつ)のConsoleタグで、Hello World!と出ていればOKだ。
これも表示されていなければ、同じく打ち間違い等をチェックだ。
この開発者ツールは、エラー対応などでも非常に使える優れものなので、是非使えるようになってほしい。
…ちなみに、人によってはサンプルページでConsoleを見ると、黄色背景の警告が出ていることがある。
今回出ているものは、どうやらブラウザのプラグイン等にも影響しているようで、一応シークレットウィンドウでアクセスしてもらえれば消えるはずだ。
これはメインで解説したい内容からかなり外れてしまうので、今後も無視して進めることにする。
気になる方は調べて対応するか、シークレットウィンドウで確認するようにしてほしい。
おわりに
今回は導入ということで、jQueryが何者なのかと使うための準備を簡単ではあるが解説した。
次回から、実際に中身を組んでいくことになる。
まずは基本的な書き方というものがあるので、それを紹介する。
jQueryとしての効力を発揮するのはしばらく後になるとは思うが、その下準備なので地道に進めていこう。
2021/2/12追記
次回の内容を更新した。
難しいことは抜きにして、とりあえずjQueryを使って動かしてみよう、という内容。
ただ、基本となる書き方が出てきているので、そこはしっかり理解していきたい。
コメント