ProgateのjQueryコース（勝手に）修了試験
～初心者が初めてjQueryを実装してみただけの、ただの体験談～
勉強したけど、本当に身についたのかなぁ
先日ProgateのjQueryコースを終えたんですが、こういうお勉強ってやっぱりテストが無いと見についたかどうかの実感って湧かないですよね。
ということで、自分で勝手に「修了試験」と名前を付けて、ただやってみたってお話です。つまづきや疑問に思ったこととその答え、思考過程を書いておこうと思います。
試験内容
「自前で用意したHTMLに、自分で考えた動きを、jQueryで実装する」
試験時間：（設定なし）
１、HTMLの用意とjQueryを使う準備
HTMLの用意は先日ちづみさんの模写コーディング課題を終わらせていたので、それを使うことにしました。
Progateのhtml、cssがおわった方へ｜ちづみ｜note https://note.mu/chizumi_/n/n43e918e99656
jQueryを使う準備ですが、Progateによると
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>を<head>タグに書いて、さらに</body>タグの直前に
<script src="script.js"></script>と書くんでしたよね。
ただ、ここで気になったのが「バージョン2.1.4って最新なの？」ということでした。色々調べてみると、どうも3.xと2.xと1.xがあって全部動くらしいんですよね。なんじゃそりゃ。
調べたことをざっくりまとめると、
1.x → 古いブラウザ用のjQuery
2.x → 新しいブラウザ用のjQuery
3.x → 設計が見直された後のjQuery（対応するブラウザは2.xと同じ）
この3.xは2.xから大幅な変更があって、2.xで動くコードでも3.xでは動かないかもしれないとのこと。
とりあえず↓のリンクから2.xの最新リンクを引っ張ってくると良いということなので、そうしました。
Hosted Libraries | Hosted Libraries | Google Developers https://developers.google.com/speed/libraries/#jquery
２、実装したい動きを自分で考える
これは前から考えていました。スクロールして表示されたらふわっと現れるやつ。
HTMLを自分で作ってて、ここのテキストはこんな感じでふわっと出すしかないっしょー！なんて思いながら作ってました。
今回はとりあえずこれだけを実装してみます。
３、とりあえず何か実装
目標はあるけど、とりあえずやってみないとねーということで、まずはProgateで習った通りにクリックイベントを実装。
まずはCSSで対象を非表示にして、script.jsファイルを新規作成して、コードを書こう！
$(function(){
$('.cat1-item').click({
$(this).find(p).show()
})
});これで.cat1-itemの領域をクリックすれば文章が表示されるはずだ。
・・・
・・・
チーン
動きませんわなこれは。（笑）
ちなみにプログラミング初心者さんは、どこが間違っているか探してみてください。勉強したての人が実際に実装してみる段階になったら、ほぼ日本全国どこでも起こっていることだと思います。
正解
$(function(){
$('.cat1-item').click(function(){
$(this).find('p').show();
});
});１、.click({ → .click(function(){
２、find(p) → find('p')
３、そもそもセミコロンが無かった
４、ブラウザに表示されたら引き起こされるイベント
これはjQuery.inViewというプラグインを使うとできるそうです。
【jQuery】ウィンドウ内に要素が表示されたときに処理を行う［jquery.inview］プラグイン。 - ONZE
https://on-ze.com/archives/2679
でもコードを見ると.onイベントで書かれてあります。なんじゃそりゃ。そんなんProgateで習ってないぞ。分からん。
という訳で、さらにググってみた。
今更ながらjQueryのon("click")とclick()の違いを認識した恥ずかしい話し https://qiita.com//luccafort/items/424e4990ad88d576a5bd
なるほど、click()の上位互換がon("click")で、トリガー部分の"click"を'inview'に変えただけか。シングルクオーテーションとダブルクオーテーションはどっちでもよかったはず。
よしよし、それなら「参考にする」という名のコピペテクでコードが書けるはず。
$(function(){
$('.cat1-item').on('inview', function(event, isInView, visiblePartX, visiblePartY){
if (isInView) {
if (visiblePartY == 'both') {
$(this).find('p').stop().animate({opacity:1}, 300);
}
}
});
});ん？.stop()ってなんだ？分からん。
という訳でググってみた。
jQuery入門講座 使い方-stopメソッド(1) http://www.jquerystudy.info/tutorial/03/06.html
なるほど、イベントが発生した回数だけ律義に処理しようとするのを止める役目があるのか。
まあとりあえず入れとくか。
（ほかにもいろいろ調べたけど、ここでは直接関係ないので割愛）
よし！できたはず！
５、できてへんやん！
コードをいくら見返しても不具合があるようには見えなかったので、jQuery.inViewのプラグインの中身を見てみることにしました。
そしたらvisiblePartYなんて記述どこにも無い・・・
試しにif (visiblePartY == 'both')の部分をコメントアウトしてリロードしてみたら動きました。
問題児はvisiblePartXとvisiblePartYか。と言っても、どう修正したらいいのかはさすがにプラグインを読んでも分からん。→ググる。
inview.jsで画面スクロールで特定位置に入ったら要素をアニメーション表示させる方法
https://stand-4u.com/design/inview.html
とりあえず使わなかったらいいのか。というか最初からこのページにたどり着いてたら悩まなくても良かった・・・
でもそしたら今度は画面下にちらっとでも見えたら表示し始めるようになる。
（画面下にちらっと見えただけでアニメーションを開始しているのが分かりますか？）
これはイケてない。
ということで、この<p>の下に空タグ<div class="cat1-textIn">を仕込むことにして、この空タグが表示されたらアニメーションを開始するようにしよう。
でもそしたら、この空タグと<p>は兄弟要素になるな。これをjQueryオブジェクトとしてどうやって指定すれば・・・
jQueryで親要素を取得する：parent(), parents(), closest() | UX MILK
https://uxmilk.jp/8150
一度親要素に戻ってから.find('p')したらいいのか。
('p')＜ワカッタ！
もう顔文字にしか見えないこいつ。
６、完成
※「２、実装したい動きを自分で考える」の画像と同じです。
やり遂げました。達成感ハンパないっす。
できることなら「できたー！やっとできたー！」って大声で叫びながら付近を走り回りたかったんですが、そうするとお巡りさんと仲良くお話をすることになるのでやめました。
でもそれぐらい自分の中ではうれしかった。
７、評価
５０点
いや、ちゃんとできたんですけど、これだけのために3時間かけたというのがちょっと。
ちなみにこの記事は書くのに4時間かかりました。
次はもっと時間を短縮しよう。コードも、記事も。
この記事が気に入ったらサポートをしてみませんか？