超初心者向け！jQueryをRPG風に解説！

まず最初に謝りたい事があります。
この記事の目的は
「やべぇ！急にjQuery使わないといけなくなった！でも今まで使った事ないし、かといって今から勉強してる時間もない…」
そんな悩める新入社員のために変数やメソッドなどといった知識をひとまず全てすっ飛ばして
とりあえずプラグインを導入できるようになる程度には読めるようになってもらおう！
という事なので、この記事を読んでもメソッドやイベント、jQuery関数などの
jQuery自体の事はほぼ理解できません。
ごめんなさい。。。
あ、で、でも一応使えるようにはなります！多少！
よろしければ最後までお付き合い下さい！

まずはjQueryを導入しない事には始まらないので、とりあえず何も考えずにこのコードをheadタグ内またはbodyの閉じタグの直前にコピペしてください。
どちらで読み込むかは職場やプロジェクトによって異なる場合があるので、仕事で使う場合は先輩等に確認しておくと良いかもしれません！

そしてcssファイルを読み込む時同様、jsファイルを作成し先ほどのコードよりも後に読み込みます。

$(function(){
　　//ここにコードを書いていきますよ
});

あとは作成したjsファイルに何も考えずにこのコードをコピペしてください。
ここにコードを…の部分は決してしまって大丈夫です！
これで準備は整いました！

まずはこちらをご覧ください。
青い箱にカーソルを乗せると下からキャプションがにょきっと出てきます。
今はまだコードを見ても何がなんだかわからないと思いますが、
この記事を読み終わる頃にはこの程度のコードなら軽く理解できるようになっている事をお約束します！

jQueryは簡単にいうと、
「何を」
「いつ」
「どうする」
これらを指示してあげる事で要素に動きをくわえる事ができるんですね。
ここでいう要素とは、htmlのdivであったり、cssでいうとcolorだったり…。
実際にやってみた方がイメージがつきやすいと思うので、まずは「何を」と「どうする」について見ていきましょう！

こちらのサンプルをご覧ください
divで箱を3つ作りました。
cssを見てもらえばわかりますが、全てbackgroundがblueです。
しかし1つの箱だけどうやらbackgroundがredのようです。
これはjQueryでそのような指定をしているからなんです！
それくらいcssでやればいいじゃんなんて野暮な事は言わないでください。。。
私も最初勉強した時思いました。

それでは次は「いつ」についても見ていきましょう！

・・・。
わかる、わかりますよ。
確かに赤くなりました。
でもなんか思ってたのと違う。
そういう事ですよね。
それでは一緒に原因を考えてみましょう。

失敗したというか、プログラム自体は失敗していないんですよね。
ただ、今回私たちがしてほしかった処理と違う方向に動いてしまっただけなんです。
なぜでしょうか？一度コードを見返してみましょう。

$('div').on('mouseover', function(){
　　$('div').css('background', 'red')
});

おわかりでしょうか？
.css()で背景を赤くする指定をしている対象が、「div」になっているんですね。
プログラムは、その時その時の人間の考えに合わせて処理を調整してくれません。
では今回、私たちがしてほしい処理はなんでしょうか？
そう、「マウスカーソルがのったそのdivが赤くなってほしい」！
そういう事ですよね！
そういう時にぴったりの記述があります！

$('div').on('mouseover', function(){
　　$(this).css('background', 'red')
});

.css()で背景を赤くする対象が、thisになっています。
直訳すると「これ」。わかりやすい！
ではこちらのコードでリベンジしてみましょう！

See the Pen EXqBoJ by nk.pecopla (@nk-pecopla) on CodePen.

うまくいきました！やったー！

覚えているでしょうか？
これ、最初に見ていただいたデモなんです！
どうですか？なんとなくコードを見ただけで、「ははーん、こういう事だな」って予想できるようになっていませんか？
なんと今までの知識があれば、これが作れます！
cssを調整すればよくブログとかで見る「アイキャッチ画像にカーソルを乗せたらタイトルと本文がにょきっと出てくるやつ」に使えそうです！

恐らくもう画像なんかなくても、十分読み解けるくらいにはjQueryにも慣れたかと思います。
改めてコードをご覧ください。

$('div').on('mouseover', function(){
　　$(this).children('span').stop(true).animate({
　　　　top: '50%'
　　},'linear');
})

すごいコンボ使っちゃってますね！
見慣れないものもあるかと思いますが、要するにやってる事って
topの値を変えているだけなんですよね。
それではコマンドを1つずつ見ていきましょう！

先ほど、やっている事はtopの値を変えているだけと言いました。
ではその対象はなんでしょうか？

$('div').on('mouseover', function(){
　　$(this).children('span').stop(true).animate({
　　　　top: '50%'

$(this)とあるので、div？と思うかもしれませんが、その後の.children(‘span’)にご注目ください。
最初から順に読んでいくと、
divにマウスカーソルが乗った時に、“function”
thisのchildren（子要素）であるspanに、stopを有効にして（後述）、animateさせる
どのように→top: ‘50%’
こういう風に読み解けますね。

$(this)を$(‘span’)に置き換えると、全てのspanが一斉に動いてしまいます。
なので、$(this)の子要素であるspanを指定したい時に

$(this).children('span').stop(true).animate({

このような記述をします。

.stop()ですが、これは今までのコマンドと少し考え方が異なります。
このコマンドはいわゆる状態変化スキルのようなものです！
例えば攻撃力や素早さなどのステータスを上昇させたり、
特定の状態異常に対する耐性を上昇させたりするような感じですね。
強化スキルではないので処理が早くなったりするとかはないのですが、
状態が変化すると覚えてもらえればとりあえず大丈夫だと思います！

それでは改めて見てみましょう。

$(this).children('span').stop(true).animate({

stopというコマンド（状態）がtrueになっており、つまり有効という意味です。
それはわかったけど、じゃあstopってなあに？と思いますよね。
一度話に出てきたのですが、プログラムは人間の都合を汲み取って処理を調整してくれません。
「マウスカーソルが乗った時」と指定されたら、「マウスカーソルが乗った回数」だけ処理を実行します。

See the Pen 下からキャプションその2 by nk.pecopla (@nk-pecopla) on CodePen.

.stop()の記述を外したデモを用意してみました。
試しに高速でマウスを乗せたり外したりしてみてください。
しばらくシャシャシャッ！と乗せたり外したりしたあとに、カーソルを乗せずに見守っていると、
ニョキ…ニョキ…ニョキ…とキャプションが何度か出てきてしまいませんか？
これは、実はプログラムを忠実に実行しているだけなんですね。
マウスカーソルが乗った時に処理を実行　イコール　マウスカーソルが乗った回数だけ処理を実行
と、プログラムは解釈するので…
しかし今回はそういう事をしてほしいわけではないので、.stop()を使いました！

.stop(true)

日本語訳をするとしたら、処理を中止するコマンドを有効化する、あたりですかね？
ちなみに無効化はfalseと書きます。

改めて最初のデモを見てみましょう！

See the Pen dRxQQM by nk.pecopla (@nk-pecopla) on CodePen.

いかがでしたか？
今回の記事は私が急遽jQueryを使わなければいけなくなった時、
「関数とかメソッドとか引数とかを順番に勉強してる時間なんてないよー！
とりあえず書けるようになれればそれでいいんだよー！」
と思い、そういった講座や解説サイトを探しまくった事があったので書きました。

その時はそんな都合の良いサイトを見つけることができず、しかも
「メソッドって何？イベントって何？変数と関数って何が違うの？」
など問題が次から次へと積もっていくばかり…
なので今回はとっつきやすいようにRPG風に解説してみました！

それでもjQueryの基礎や読み方自体はだいぶ染み付いたと思うので、
今後さらにjQueryの理解を深めたいと思って勉強した時もスムーズに理解できると思います！
変数やif文を使えるようになれば、今よりさらに複雑な指示をできるようになりますよ。
私もまだまだ覚える事がたくさんあるので、一緒に頑張りましょう！

お読みいただきありがとうございました！