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

【毎日コツコツ】デイトラDay19 JavaScriptとjQueryを使ったアニメーションを操作する方法!<Web制作学習ブログ>

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

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

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

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

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

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

タック
タック

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

Web制作を学ぶ理由

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

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

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

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

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

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

【Web制作】ボタン操作などのアニメーション操作

この講義はJavaScriptとjQueeryを使ってアニメーションを作っていきます。

実践に近い内容となっているのでしっかり学びましょう!

タック
タック

どれも実践でよく使う操作とのこと!何度もコードを書いて覚えましょう。

今回実装する内容は以下の5つとなっております。

  • ボタンクリックしてアラート表示
  • アコーディオンメニューの作成
  • トップへ戻るボタンの作成
  • ドロワーメニューの作成
  • フォームに入力された値をアラート表示

今までの基礎よりも実践に近い内容となっています。

【JavaScript,jQuery】ボタン操作でアラートを表示させる方法

まずは難易度の低いボタンクリックさせてアラートを表示する方法です。

復習を兼ねてJavaScriptとjQueryの両方の入力方法を見ていきます。

js
document.querySelector("セレクタ").addEventListener("click",function(){
    alert("おはよう");
});
jQuery
jQuery("セレクタ").on("click",function(){
    alert("おはよう");
    
});

どちらの記述でも同じ結果が出力されます。

タック
タック

.addEventListenerや.onといったメソッドが逆になると動作しないので注意(僕は今まだ理解不足で逆になったりする…)JavaScriptとjQueryで読み込むライブラリが違うんだね。

【jQuery】アコーディオンメニューの作成

次はアコーディオンメニューの作成です。

クリックすると隠していた文字が出現するようなコードを記述していきます。

今回開くセレクタのCSSには、あらかじめdisplay:noneが入っていることを確認しましょう。

それでは完成したコードを見ていきましょう。

jQuery
Query("ボタンのセレクタ").on("click",function(){
  jQuery(this).next().slideToggle();
  });

この記述を説明すると、.on("click)でボタンのセレクタが押された時に関数が動作します。

動作内容ですが、jQuery(this).next()で兄弟要素を選択し、.slidToggle()で選択したセレクタを表示したり非表示にしています。

これにより、上記の画像のようにmenuを押すと「soup」という文字が表示されます。そしてもう一度クリックすると非表示状態となります。

タック
タック

未熟な僕が書いたコードも以下に紹介しておきます(失敗例)

jQuery
jQuery(".ボタンのセレクタ").on("click",function(){
    jQuery("表示したいセレクタ").slideToggle();
    
});

これをするとどうなるかというと、「表示したいセレクタ」がclassで複数あるとすべてが表示されてしまいます。

普通の人はこんなミスをしないと思いますが、僕はまだまだこんなレベルです…反省の意味を込めてここに記録しておきます。

【jQuery】トップへ戻るボタンの作成

次もクリックした時の動作を覚えていきます。

今回はボタンをクリックした時に画面のトップへ戻るアニメーションです。

Baby panda
Baby panda

ブログサイトではよく右下などに出てくる小さなボタンだよね!よく使うからしっかり覚えよう!

jQuery
// jQuery("セレクタ").on("click",function(){
//     jQuery("html,body").animate({scrollTop:0},500);
    
// });

このコードは、指定された要素(セレクタ)がクリックされたときに、ページをスクロールトップにスムーズに移動させる効果を実現しています。

具体的には、jQuery("html,body").animate({scrollTop:0},500);の部分がその役割を果たします。

  • jQuery("html,body")は、ページ全体の html 要素と body 要素を選択しています。これらの要素を一緒に選択することで、クロスブラウザのスムーススクロールを実現します。
  • .animate({scrollTop:0}, 500)は、スクロール位置をアニメーションさせるためのjQueryのメソッドです。{scrollTop:0}は、スクロール位置をページの上端に移動させることを意味します。500はアニメーションの速度をミリ秒単位で指定します。つまり、この場合は0.5秒間かけてスクロールします。

また、例えばスクロールのスピードを1秒にしたい場合は、数値をミリ秒単位で指定します。つまり、数字が1000になります。

「クロスブラウザのスムーススクロール」とは、異なるWebブラウザ(Chrome、Firefox、Safari、Edgeなど)で同じように機能するスムーススクロールのことを指します。どのブラウザでも動作するようにhtmlbodyの両方をしておくほうが良いとされています。

【jQuery】ドロワーメニューを作ろう

まずドロワーメニューとは何かというと、日本語で訳すと引き出しや引き出し式の収納スペースです。よくWebサイトの右上にありボタンをクリックするとメニューが表示したり、非表示になったりします。

コードを書いてその後に説明を追記します。

タック
タック

この記述もよく使うので覚えよう!

jQuery

jQuery("#js-button-drawer").on("click",function(){
    jQuery(this).toggleClass("is-checked");
    jQuery("#js-drawer").slideToggle();
    jQuery("body").toggleClass("is-fixed");
    
});

一行ずつ詳しく解説しますね。

jQuery(this).toggleClass(“is-checked”);

このコードは、特定のボタン(#js-button-drawer)がクリックされたときに、そのボタンのクラスを切り替える役割を果たします。具体的には、クリックされたボタンのクラスに is-checked をトグルします。トグルするとは、そのクラスが要素に存在しない場合は追加し、既に存在する場合は削除することを意味します。

つまり、もしボタンに is-checked クラスが既にあれば、それを削除し、なければ追加します。これによって、ボタンの外観や挙動が変化します。

CSSの部分では、.button-drawer.is-checkedというセレクタが定義されています。このセレクタは、.button-drawerクラスを持ち、さらに.is-checkedクラスも持っている要素を指定します。そして、それらの要素に対して特定のスタイルを適用します。

つまり、ボタンがクリックされて .is-checked クラスが追加されると、CSSによってそのボタンの背景画像が変更されます。.is-checkedクラスが削除されると、元の背景画像に戻ります。

ちなみに.toggleClass()は、jQueryのメソッドの一つで、要素のクラスを追加または削除する役割を果たします。

jQuery(“#js-drawer”).slideToggle();

jQuery("#js-drawer").slideToggle();: ドロワーメニュー(#js-drawer)をスライドトグルします。つまり、メニューが非表示の場合は表示し、表示されている場合は非表示にします。

jQuery(“body”).toggleClass(“is-fixed”);

jQuery("body").toggleClass("is-fixed");: ページのボディ要素のクラスに .is-fixed を追加または削除します。これにより、メニューが表示されたときにスクロールを固定したり、メニューが閉じられたときにスクロールを解除します。.is-fixed クラスは、通常、ページのスクロールを固定するCSSスタイルを適用するために使用されます。

これらの処理を組み合わせることで、ボタンのクリックに応じてドロワーメニューの表示状態を切り替え、ページ全体のスクロールを制御する機能を実装できます。

フォームに入力された値をアラート表示

最後5つ目のアニメーションはフォームの送信動作です。

今回の動作内容は以下になります。

  • フォームに入力されないまま「送信」すると”必須項目”です”を表示
  • フォームに「〇〇」と記入された場合、”〇〇さん、こんにちは”と表示
タック
タック

コードを書いてその説明をしますね

jQuery
jQuery("#js-form-name").on("submit",function(e){
    e.preventDefault();

    const nameInput = jQuery("#js-input-name");
    const yourName = nameInput.val();

    if (!yourName){
        nameInput.next(".error-message").text("必須項目です");
        return;}

    nameInput.next(".error-message").text("");
    alert(`${yourName}さん、こんにちは`);
    return false;

    })

このコードは、フォームが送信されたときに特定の処理を行うためのものです。以下に、コードの各行の意味を詳しく説明します。

  1. jQuery("#js-form-name").on("submit", function(e) {: フォームの送信(submit)イベントが発生したときに、指定された処理を実行するように設定します。#js-form-nameはフォームのIDを指定し、submitは送信イベントを示します。イベントハンドラの引数 e はイベントオブジェクトを表します。
  2. e.preventDefault();: デフォルトのフォームの送信動作をキャンセルします。これにより、フォームが通常の方法でサーバーに送信されるのを防ぎます。
  3. const nameInput = jQuery("#js-input-name");: フォーム内の名前入力フィールド(ここでは#js-input-name)を選択し、そのjQueryオブジェクトを nameInput 変数に格納します。
  4. const yourName = nameInput.val();: 名前入力フィールドの値を取得し、yourName 変数に格納します。
  5. if (!yourName) {: 名前が入力されていないかどうかをチェックします。もし名前が空であれば、次の行の処理を実行します。
  6. nameInput.next(".error-message").text("必須項目です");: 名前が空の場合、隣接するエラーメッセージ要素(.error-message)に「必須項目です」というテキストを設定します。
  7. return;: 名前が空の場合、処理を終了して、フォームの送信を防ぎます。
  8. nameInput.next(".error-message").text("");: 名前が空でない場合、エラーメッセージ要素のテキストを空にして、エラーメッセージを消去します。
  9. alert(${yourName}さん、こんにちは);: 入力された名前を使用してアラートメッセージを表示します。
  10. return false;: フォームの送信を完全に防ぐために、偽の値を返します。ただし、この行は実際には不要です。e.preventDefault(); によって既にフォームのデフォルトの送信がキャンセルされています。

【Web制作】JavaScriptとjQueryのアニメーション操作 まとめ

この講義ではJavaScriptとjQueryの基本的なアニメーションを作ってきました。

HTMLとCSSはデイトラ側で作ってくれているので動きだけの記述でしたが、僕からすれば難しく、

タック
タック

特に最後のフォームを使った記述は何度か自分で使わないと覚えられないと感じました。

今回の講義内容をまとめると

  • ボタンクリックしてアラート表示
  • アコーディオンメニューの作成
  • トップへ戻るボタンの作成
  • ドロワーメニューの作成
  • フォームに入力された値をアラート表示

上記の5つのアニメーションを自分でコードを書いて実装しました。

今後も何度も出てくるものなので必ず覚えておきたい内容です。

それでは今回の内容は以上とします。次回は今話題のAI「ChatGPT」の活用方法についてです。ですが、この講義については重要度が高いためあえてブログ記事にはしないでおきます。

その理由として、デイトラ講義を受けた時に感動してもらいたいためです。実際僕はこれを知って感動しました。

タック
タック

ChatGPTの活用法を知るとプログラミング学習がとてもはかどるよ

それでは次の講義は1つ飛んでDay21となりますのでよろしくお願いします。

コメントを残す

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

CAPTCHA