第65回：jQuery勉強結果本編1「基本的な書き方＋オマケ2つ」
我慢できずに病院後また喫茶店に入ってしまった。
どうも、シノだ。
早速、jQueryの勉強結果を残していく。
今回は、どうやってjQueryの内容を書いていくか、だ。
併せて、はてなブログで動かすための方法と、エラーの確認方法も書いていく。
今回の目次だ。
0.前回の復習
前回は、「そもそもjQueryとは何か」について勉強した。
簡単に言ってしまえば、jQueryはJavaScriptの機能を簡単に使えるようにしたライブラリの一つ、になる。
個人的に、見た目の変化が楽しい。
1.基本的な構文
jQueryの基本構文は、以下の通りだ。
$(セレクタ).関数(引数);
ちょっと前に、軽く使ってみた記事の中でも紹介したものだが、しっかり勉強した内容として、改めて残しておく。
セレクタは、どんなHTMLの要素に対して処理を行うか。ここには、CSSと同じ決まりで対象を書く。
例えば、idで「test」という名前をつけたものに対して処理を行う場合は、
$('#test').関数(引数);
となる。
もちろん、クラス名をつけた場合には、先頭の「#」が「.」になるし、タグで取得する場合には「body」、「p」などになる。
関数は、どんな処理を行うかを記述する。具体例は下に書こう。
必要に応じて、引数を渡す必要がある。
2.関数の一例
ごく簡単な関数から紹介しよう。
例えば、スタイルの内容を変更する関数。あ、実際にCSSが書き換わるわけではない。
css(変化させるプロパティ, 変化させる内容);
これが実行されると、対象のスタイルがここに書いたものに変化する。
変化させるプロパティは、CSSでコロンの前に書くものだ。
具体例として、以下のようなid名「test」のp要素を、赤文字に変えたいとする。
<p id="test">ここのテキストが赤字になります。</p>
そのとき、実際に書くjQueryの内容は以下の通りだ。
$(function(){
$('#test').css('color', 'red');
});
これを実行してみたら、こうなる。
ここのテキストが赤字になります。
これを他の内容と組み合わせることで、かなり幅広い見た目のカスタムが可能となる。
ん？前後に変なもんが入ってるって？
大丈夫、これから解説する。
3.先頭の「$(function(){」と末尾の「});」について
なんか関数っぽいもので囲んでいる。
まあ、確かに関数だ。しかし、特殊なもの。
そもそも、HTMは上から順番に処理をしていく。
もちろん、その一部であるJavaScript、jQueryも例に漏れない。
そのとき、jQueryで、そこより下に書かれた内容を参照するとしよう。
以下のような例だ。
<script>
$(function(){
$('#test').css('color', 'red');
});
</script>
<p id="test">ここのテキストが赤字になります。</p>
このとき、2行目と4行目、「$(function(){」と「});」がなかった場合どうなるかというと…
まず、1行目でスクリプトとして内容を読み取ろうと判断する。
次に、3行目で「test」ってidを…あれ、今読み込んだ中にないぞ？
となり、うまく反映されないのだ。
じゃあ、2行目と4行目があるときはどうなるか。
これがあると、いったんそこを待機して、先にそのあとを読み込む。
そして、最後にこの中身を読み込むようになるのだ。
そうすれば、今度は3行目を処理するときに、6行目にあったぞ、というわけでしっかり取得できる。
私も最初ちょっとひっかかった部分なので、注意してほしい。
4.はてなブログでjQueryを使う方法
検索すると色々な解説ページがあったが、ここでは私ができた方法を記載する。
以下一行を、「ダッシュボード」⇒「設定」⇒「詳細設定」⇒「検索エンジン最適化」の中の「headに要素を追加」という部分に貼り付けるだけだ。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
これだけで、記事の中でjQueryを使えるようになる。
5.エラーの確認方法
私はChromeしか使わないので、Chromeの場合で説明する。
違うブラウザを使用している方は、申し訳ないが「開発者ツール (使用しているブラウザ)」でグーグル先生に聞いてほしい。
まず、ふつうにChromeで「F12」キーを押してみてほしい。
右側になんか出てくるはずだ。
英語ばっかりだが落ち着いてくれ。冷静に見れば難しいことは書いてない。
この部分のことを「開発者ツール」という。
その中で、「Element」とか「Console」とかが並んでいる部分があるのはわかるだろうか。
その、「Console」というところを選択する。
すると、なんか英文で色々出てくる場合と出てこない場合がある。
そして、最後に「>」だけ表示されているはずだ。
この部分に、エラーがあった場合は赤で、警告があった場合は黄色でその内容が表示される。すまない、黄色が見づらかったので黒で書いた。
なんか思ったように動かない場合は、ここを見るといいだろう。
オマケでもう一つ。
変数の中身を確認したいときや、そもそもそこの処理が行われているか確認したい場合があると思う。
そんなときに使える関数を一つ紹介する。
ちなみに、これはjQuery固有ではなく、JavaScriptのものだ。
console.log(出力内容);
これを書くと、そこが実行されたときに出力内容の部分に書いたものが、開発者ツールのConsoleに表示される。
よく使うやつなので、是非使えるようにしたい。
まとめ
いかがだっただろうか。
あまり詰め込みすぎてもよくないと思い、軽めにした。
まだCSSの内容を変えるくらいしかできないので、ありがたみはそんなにないだろう。
なので、次回はアクションによって内容を変える方法を勉強結果として残すことにする。
見た目がアニメーションで変わるので、テンションが上がると思う。私はかなり上がった。
更新情報はTwitterにて垂れ流している。
よかったら覗いてみてほしい。
次回：(未投稿)
それでは。
