30DAYSトライアル お勉強

【デイトラ】【Progate】HTML & CSS JQuery中級編終了【30DAYSトライアル】

30DAYSトライアル

項目自体は少なかったですが、1つ1つのレッスンの内容がとても濃かったです...!

今回の記事からソースコードをWPのプラグイン『Prism Syntax Highlighter』で書いてみました!
時間があるときに過去記事も直していけたらと思います。

jQueryを使用する際は3つの準備が必要

ポイント

  • ①jQueryライブラリを読み込む
  • ②jQueryファイルを読み込む
  • ③jQueryの型を作る

①jQueryライブラリを読み込む

<script>タグを用いて<head>タグ内に定義します。
URLを読み込むことによりjQueryが使用出来るようになります!

ライブラリを読み込む方法は下記の2つがあります。
Progateでは『2.CDNを利用して外部サイトのjQueryを読み込む』方法で実行しています。

1.jQueryのサイトからライブラリをダウンロード

<script type="text/javascript" src="保存場所/jquery-x.x.x.min.js"></script>

2.Google CDNを利用してライブラリを読みこむ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>

②jQueryファイルを読み込む

WEBページの表示速度を速めるため、</body>の直前に書くこと!

<script src="ファイル名.js"></script>

③jQueryの型を作る

本業で使ってるjsファイルを見てみたのですが、

$(document).ready(function() {

の方を使用していました。
Progateで使われている

$(function(){

});

の方がコードが短くすんで良いですが、どちらも知識として覚えておくとよいのかな、と思いました!

【Progate 中級編】学んだこと【jQuery】

【jQuery】モーダル

要素をクリックしてウィンドウをポップアップさせたりする。
こういうのがあると「それっぽいなぁ!」と思っちゃいます(笑)。

でもカッコイイ動きとは裏腹に、中で書かなきゃいけない処理はたくさん...!

  • ①モーダルをCSSで非表示
  • ②ログインボタンにclickイベントを設定
  • ③clickイベントでモーダルを表示

ユーザーとして利用する際は意識しないけど、ボタン一つで一瞬で済む動作も中のコードはいろいろと複雑なんだよなぁ。
やっぱりエンジニアってすごい!!

演習でモーダル部分のCSSが61行もあって軽く絶望しました(笑)。
コピペで済んだけどこれ実際自分がコード書いて実装するってなると、、、、
モーダル部分だけでこの長さだよ...。
HTML&CSSの時も思ったけど、はたしてこれをスラスラできるようになる日が来るんだろうか...と思わずにはいられない。

初級編でやった「fadeIn」「fadeOut」「.click(function()」なんかも使いながら、初級編の復習!という感じでした。
「クリックイベントを作成してください」と言われましたけど全く手が動かなかったので普通にスライド見ながらやりました(笑)。
それでもオブジェクトの前のシャープや文末のセミコロンを忘れてしまう。。

あわせて読みたい
30DAYSトライアル
【デイトラ】【Progate】HTML & CSS JQuery初級編終了【30DAYSトライアル】

『JQuery』ってこんな感じだよ~。っていうので最初サイトの動き見た時、「なにこれめっちゃいいじゃん!これ出来たら絶対 ...

続きを見る

あと、htmlでのclass名とid名の付け方についても改めて復習できました!

ポイント

  • class名はページ内で共通で使いたい時。同じクラス名を何個でも使える
  • id名は同じ名前のものはページ内で1つだけ

【jQuery】hover時に要素を表示・非表示にさせる時のクラス付け

hover自体は初級編でもやっていたけど、中級編ではこれにプラスしてhover時にクラスを付加する宣言が!

  • ①addClassメソッド
  • ②removeClassメソッド

ここ最初こんがらがって、追加するだけならいつものように末尾に追加したらダメなの?とか思っちゃった(笑)。

<!--【HTML例】-->
<div class="hover">
 <div class="icon">
  <img src="https://images/jquery.png" />
 </div>
 <p class="text">文字を表示</p>
</div>
/* CSS例 */
.text-active {
  display: block;
}
// jQuery例
  // jQuery例
  $('.hover').hover(
  function() {
    // マウスをのせたとき
    $(this).find('.text').addClass('text-active');
  },
  function() {
  // マウスが外れたとき
    $(this).find('.text').removeClass('text-active');
  

png画像にマウスをのせた時、『文字を表示』という文章を画像の下に出すプログラム。
jQueryの記述でマウスをのせたときの処理を「addClass」外れた時の処理を「removeClass」で定義。
CSSで提示した『text-active』を「addClass」の時に追加し、「removeClass」の時に外す。
それによって文章が表示されたり消えたりの表現ができるんですね!

でも書き方でちょっと混乱したのがこの部分↓ですね。


$(this).find('.text')

以前勉強した箇所をもう一度振り返りながらコードの意味をひとつずつ理解していきました。

まず、

  • findメソッドは、『指定したセレクタの下層の要素すべてに対して処理を行う』
  • thisは、「.click」や「.hover」なんかのマウスイベント時に実際にクリックしたその要素のみに対して処理を行うための宣言

です。

でもこの場合findメソッド使うの意味あるのか?と思ってしまって(笑)
(まぁ学習した内容を復習するためには仕方ないのかなと...)
このfind存在意義と(this).find('.text')のコードの意味とを考えてて、結構な時間ぐるぐると考え込んでしまいました(笑)。

で、色々調べた結果。
以下の書き方でも動作することを確認できました!


$(".text-contents",this).removeClass('text-active');

こっちのほうが分かりやすくて簡単かな?(笑)。

【jQuery】アコーディオン機能の実装【hasClass】

hasClassメソッドは、引数に指定したクラスを、オブジェクトが持っているかどうかを判定するときに使用します。
$(this).find(".answer")を変数に代入しているので、if文の中でコードが短縮されているのもポイント!


  $('.faq-list').click(function() {
    var $answer = $(this).find('.answer');
    if ($answer.hasClass('open')) {
       // openクラスを持ってればopenクラスを取り除く
      $answer.removeClass('open');
      $answer.slideUp();
      $(this).find('span').text('+');
    }else{
       // openクラスを持っていなければopenクラスを追加する
      $answer.addClass('open');
      $answer.slideDown();
      $(this).find('span').text('-');
    }
  });

スライドと課題のif文の書き方が違ってちょっと混乱しました。
スライドに書かれたif文の書き方ではエラーで進めなかったので間違い...なのかな?
結局ここで長く詰まってしまって私は答え見ちゃいましたが(笑)。

ちなみにtextメソッドを使って書き換えてるところですが、私は初見以下のように書いてました。


var $span = $(this).find('span');
$span.text('+');

変数に入れてからのtextメソッド。
コードは長くなりましたがもちろん想定通りに動きます。
でも課題通りじゃないのでif文内にthisを入れろ。って怒られました(笑)。

模範解答よりコード数は多くなったけど、答え見ずに出来たことが嬉しい!!
でも答えの方がシンプルだからそっちを覚えた方がいいよね(笑)。
1行にまとめるのは苦手でいまだにこんがらがってしまう。
変数入れて整理した方が私は理解しやすいかなーって思いました。

-30DAYSトライアル, お勉強
-, ,

© 2021 文系女子とプログラミング