NFTを始めるなら日本円で始められるHEXA

【毎日コツコツ】デイトラDay18 jQueryの基本的な使い方

上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。

デイトラ受講生のたくたくタックです。Webスキルを身に付けたく完全未経験から受講を始めています。

といっても、実はデイトラを開始したのは数年前….慣れないコードと向き合えなくなり挫折を繰り返しています。

こんな僕ですが、Webと関わるこの世の中では必須のスキルだと再認識して再起しました。

毎日コツコツ「必ず完走する」を目標に掲げ学んだ内容を記録に残します

過去に何度も挫折した私の記録はこちら→過去のブログ記事

タック
タック

ブログを書くことに時間をかけたり…計画性の無さを今では反省しています。

Web制作を学ぶ理由

僕がWeb制作を学ぶ理由は大きく分けて3つあります。

1,単純にWeb業界に興味がある

2,Web制作に関わる仕事で多くの人に喜んでもらいたい

3,現在中学受験を目指す息子が中学に上がった時にWeb制作の基本を教えたい

移り変わりの激しいWeb業界、変化をすることが当たり前であるという常識はサラリーマンではあまり常識ではありませんでした。ただ、Web制作を学ぶ中でプログラミングの常識を学ぶ事が出来ています。

もっと知識や実務経験を増やしたいと思っています。

【Web制作】jQueryの基本的な使い方

前回の記事に引き続きjQueryの基本的な使い方の続きの記事となります。

「jQueryをまだ使ったことがない!初めから学びたい!」といった人はコチラをまずお読みください。

JQueryの基本文

基本文はこのようになっていたかと思います。

jQuery
jQuery("セレクタ").メソッド("パラメータ")
jQuery("主語").動詞("補語")

前回の復習としてDay17のブログで記載したコードも紹介しますと、

jQuery
jQuery("#ID名”).Text = "変更後のテキスト";
  • 主語の部分 : IDやclass名
  • 動詞の部分 : メソッドなので動作したい内容。.textはテキストの追加
  • 補語 : 変更後のテキスト

こちらはこれからもよく出てくる文なのでしっかり覚えておくようにしましょう!

タック
タック

僕はスニペットに「jQuery(“セレクタ”).メソッド(“パラメータ”)」と登録して使っているよ。文字をわざわざ消さないとダメですが、考えないで使えるようになるまではこのようにしています。

jQueryを使ってCSS操作しよう

HTMLの操作だけでなくCSSの操作もjQueryで可能なのでその方法を学びます。

プロパティを書いていく際に注意する点もあとで紹介しますね。

【CSSのプロパティを設定する(2種類の書き方)】

jQuery
/例1
jQuery("セレクタ").css("color","red",)
jQuery("セレクタ").css("fontSize","80px",)

/例2
jQuery("セレクタ").css({
    color:"red",
    fontSize:"80px",
})

上記はセレクタの色とサイズを変更するための記述ですが、jQueryの基本の形を理解していれば、メソッドを.cssにしてプロパティを記入だけなので比較的理解出来たかと思います。

気付いた人もいたかもしれませんが、プロパティの記述には気を付けてください!fontSizeのように「S」が大文字となっています。CSSの記述の場合【font-size】のようにハイフンが入っていましたがjQueryではハイフンを外して大文字記述となっています。

タック
タック

ここではCSS(メソッド)の紹介なので割愛しますが、デイトラ講義では他にもたくさんのメソッドを紹介してくれていますよ。

メソッドチェーンについて

メソッドチェーンとはメソッドを複数つなげることを指しています。

例えば以下の例を見ると理解しやすいかと思います。

jQuery
jQuery("#js-title").css("color","red",).text("変更したいテキスト")

「.css」メソッドと「.text」メソッドを単純につなげた記述となっています。

こうすることでテキストを変更し、文字色を変更することができます。

これがメソッドチェーンとなりますが、メソッドであればどれでも繋げられるというわけではないそうなので注意しましょうね。

どういったものが繋げられないのか気になったので以下に記述しておきます。


css() メソッドと text() メソッドの後には、通常は他のメソッドを追加することができます。ただし、メソッドチェーンで追加するメソッドは、jQueryが提供するメソッドである必要があります。

例えば、addClass()、removeClass()、attr()、removeAttr()など、jQueryのメソッドであれば追加できます。ただし、JavaScriptの組み込みメソッドや外部ライブラリのメソッドは、メソッドチェーンに追加できません。

ですので、以下のように追加するメソッドが制限されます:

javascript
Copy code
jQuery("#js-title").css("color", "red").text("変更したいテキスト").fadeIn(); // fadeIn() メソッドが制限される可能性があります。
この例では、fadeIn() メソッドが制限される可能性があります。これは、jQueryのメソッドではなく、jQuery UIなどのプラグインやカスタムのアニメーション処理を行うためのメソッドです。そのため、jQuery UIなどのライブラリを読み込んでいない場合は、エラーが発生する可能性があります。

メソッドアニメーションについて

続いてはアニメーションの方法を学んでいきます。

アニメーションで何ができるかというと、要素の表示や非表示といったアクション。スライドショーだったりWebページを見た時にユーザーの満足度を高める為に使われます。

どういったメソッドがあるのか見ていきましょう!

  • 要素の移動 : .animate()
  • スライドショー : .fadeIn(), .fadeOut(), .slideDown(), .slideUp()
  • タイミングの制御 : .delay

一つ例文を作ったのでコチラを見てください。

jQuery

// セレクタを取得し、フェードイン・フェードアウトのアニメーションを行う
jQuery("セレクタ")
    .fadeIn(1000) // 1秒かけてフェードインする
    .delay(2000)  // フェードイン後、2秒待つ
    .fadeOut(1000); // 1秒かけてフェードアウトする

上記に説明を記述していますが、どういった動作か説明すると、画面を読み込んだ際に選択したセレクタが1秒間かけて表示、その後2秒間停止し1秒間かけて非表示します。

【デイトラWeb制作】jQueryのイベント監視方法

次々にメソッドが出てきて頭の中が整理しきれなくなって来ましたが、今回もあと一踏ん張り!イベントの監視方法について学びます。

クリックした時に他の要素を変更する方法

まずはボタンを操作した時に文字を変更する方法です。

jQuery
// jQuery("ボタンのセレクタ").on("click",function(){
//     jQuery("#変更したいセレクタ").text("test");
    
// });

コードは上記になります。

このコードでは、jQueryのon()メソッドが使用されています

on()メソッドは、イベントを要素に関連付けるために使用されます。つまり、特定のイベント(ここではクリックイベント)が発生したときに、指定した処理(この場合は関数)を実行します。

イベントというのはclickを意味していますが、このイベントの操作は他にも様々あります。コチラはデイトラDay18の講義の方で紹介されているので割愛します。

タック
タック

僕的に気になったことで、クリックして元のテキストに戻す方法も書いておきますね。

jQuery
jQuery("#ボタンのセレクタ").on("click", function() {
    const currentText = jQuery("変更したいセレクタ").text();
   
    
    if (currentText === "click") {
        // 元に戻す
        jQuery("変更したいセレクタ").text("テスト");
    } else {
        // "click" に変更
        jQuery("変更したいセレクタ").text("click");
    }
});

ホバーした時に他の要素を変更する&外した時には元に戻す方法

次にホバーした時にテキストの装飾を変更する方法を紹介します。

この記述はマウスを「ホバーした時」、「ホバーを外した時」この両方の記述が必要です。

jQuery
// ホバーされた時に、文字の色をレッドに変更します。
// ホバーが外れた時に元の色に変更します。

jQuery("変更したいセレクタ").on({
    mouseenter:function(){
        jQuery(this).css("color","red")
    },
    mouseleave:function(){
        jQuery(this).css("color","black");
        
    },
});

このコードは、指定したセレクタにマウスが乗ったときと離れたときに、その要素のテキストの色を変更します。

具体的には、以下のような処理が行われます:

  1. mouseenter イベントが発生したときに、マウスが乗った要素のテキストの色を赤色に変更します。
  2. mouseleave イベントが発生したときに、マウスが離れた要素のテキストの色を黒色に戻します。

on() メソッドは、イベントハンドラを設定するためのjQueryのメソッドです。このメソッドは複数の方法で使用することができますが、この例では、オブジェクトとして複数のイベントとそれに対応する処理を指定しています。これにより、mouseenter イベントと mouseleave イベントそれぞれに対する処理を一度に指定することができます。

on({}) の波括弧が入る理由は、オブジェクトリテラルを使って、複数のイベントとそれに対応する処理を一度に指定するためです。これにより、コードが見やすくなり、イベントハンドラの追加や変更が容易になります。

Baby panda
Baby panda

これからもいっぱい出てくる記述なんだって!覚えておこう!

【デイトラWeb制作】jQueryの基本 まとめ

この記事で学んだことをまとめると、

記事まとめ
  • jQueryの基本の文法
  • jQueryを使ったCSS操作
  • メソッドアニメーション
  • メソッドチェーン
  • イベント監視の方法

今回も内容の濃い学習ができました。

この講義については以上となりますが、少し雑談で僕のデイトラ挫折話と今の目標設定などをお話します。

これから先はプログラミングとは関係ないので飛ばしてもらっても結構です。

冒頭でも書いていますが、僕はデイトラの勉強でつまづき一度学習を離れている期間がありました。

各単元を動画をみて真似するだけで頭を使った学習が出来ていない状態で連続で躓いていたからです。

タック
タック

前回の反省を活かして今回していることをここで少しお話します。

まず、結論からお話すると以下の点を意識したり変更して取り組んでいます。

  • 毎日1分でもいいので必ず毎日講義を進める
  • 周りに惑わされない。1年かけてでもいいので自分が納得いく学習で進める
  • 講義内容で出てくるコードを少し自分で変更して出力してアウトプット量を増やす
  • デイトラ学習生の方々と共に学習できる環境に感謝する(デイトラ運営者にも感謝)
  • まずは講義の完走を目指す(案件獲得も大事だけど努力で必ず達成できる目標にする)

過去に学習した時はやみくもに学習をスタートした覚えがあります。この反省から必ず達成できる目標と、焦らずに自分のペースで学習することにしました。

すると学習ペースは遅いものの確実に進んでいる感覚があって楽しく学べています。

ただ、1つ不安なのは2年前に受講して今になるのでメンターさんへの質問期間が終了していることです。再度受けようと思うと追加料金が払う必要があるのですがどうしようかと迷っています(完全に自分の責任…笑)

今後の進捗でこの辺は決定していきたいと思っています。

それでは今回はここまでとしたいと思います。これからも講義は進んでいきますが、その時その時の思いや考え方を記録に残しておくことで未来のデイトラ生の方の誰か1人のためになることを願っています。

今日もデイトラに感謝や〜〜〜笑 ではでは(*^^*)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA