Web制作において、JavaScriptの便利なメソッド及びプロパティを紹介

はじめに

概要

Web制作において、まず覚えておくべき便利なJavaScriptのメソッド及びプロパティをご紹介します。こちらを使用することで、クライアントの要件に柔軟に対応できると考えます。ぜひ参考にしてみてください。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

読者

Web制作において Javascriptの便利なメソッド・プロパティを紹介は、最初にどこを理解するとよいですか？

木村

対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。

読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

containsメソッド

containsメソッドでは、Web制作において Javascriptの便利なメソッド・プロパティを紹介を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

文字列に引数で指定した文字列が含まれるか判定するメソッドです。文字列が引数に指定した文字列を含む場合は true を、含まない場合は false を返します。第 2 引数には文字列の測定の開始位置を指定することができます。使用例:

class Onclick {
  constructor() {
    this.DOM = {};
    this.DOM.btn = document.querySelector(".mobile-menu__btn");
    this.DOM.container = document.querySelector("#global-container");
    this._addEvent();
  }

  _toggle() {
    const body = document.body;
    this.DOM.container.classList.toggle("menu-open");

    if (this.DOM.container.classList.contains("menu-open")) {
      // menu-open クラスがあるときにスクロールを無効化
      body.style.overflow = "hidden";
    } else {
      // menu-open クラスがないときにスクロールを有効化
      body.style.overflow = "auto";
    }
  }

  _addEvent() {
    this.DOM.btn.addEventListener("click", this._toggle.bind(this));
  }
}

このコードは、ハンバーガーメニューを実装するものです。重要な点は、`if (this.DOM.container.classList.contains(“menu-open”))` という部分にあります。これは、サイトの親要素である `global-container` に `menu-open` クラスが付与されているかどうかを判定し、もしそうであればクリックイベントを通じてメニューの開閉を制御する機能を実装しています。このコードは、ウェブページ上でメニューの開閉を切り替えるJavaScriptの関数です。_toggle()関数は、特定のHTML要素（this.DOM.container）にmenu-openクラスを追加したり削除したりすることにより、メニューが開いているか閉じているかの状態をトグルしています。メニューが開かれた時（menu-openクラスが存在する時）、スクロールを無効にするためにbody要素のstyle.overflowをhiddenに設定します。メニューが閉じられた時（menu-openクラスが存在しない時）、スクロールを再び有効にするためにbody要素のstyle.overflowをautoに設定します。これにより、メニューが開いている間はページの他の部分をスクロールできなくなり、メニューが閉じれば再びスクロールできるようにする内容です。 ※上記のように条件分岐と組み合わせることにより様々な要件に対応することが可能です。

containsメソッドで押さえたいポイント

containsメソッドは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

containsメソッドの確認方法

ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。

offsetHeight

offsetHeightでは、Web制作において Javascriptの便利なメソッド・プロパティを紹介を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

アニメーションを実装する際に、特定の要素が画面の上部、中央、または下部にスクロールされた時にイベントを発火させる必要がある場合があります。それを実行してくれるプロパティになります。これは要素の可視領域の高さをピクセル単位で取得するために使用され、CSSの高さとパディング、スクロールバー（もし表示されている場合）、および境界線の厚さを含みますが、マージンは含まれません。offsetHeightは読み取り専用のプロパティで、JavaScriptを使って要素の現在のレイアウトに基づいた計算された高さを提供します。使用例：

_headerActive() {
    // スクロールイベントを監視する
    window.addEventListener("scroll", function () {
      // 現在のスクロール位置を取得する
      var scrollPosition = window.scrollY || document.documentElement.scrollTop;

      // メインビジュアルの高さを取得する
      var mainVisualHeight = document.getElementById("hero").offsetHeight;

      // #global-containerに.menu-openが存在するかチェックする
      var globalContainer = document.getElementById("global-container");
      var isMenuOpen = globalContainer.classList.contains("menu-open");

      // スクロール位置がメインビジュアルの高さよりも大きく、かつ.menu-openが存在しない場合
      if (scrollPosition > mainVisualHeight && !isMenuOpen) {
        document.getElementById("header").style.top = "0";
      } else if (isMenuOpen) {
        // スクロール位置がメインビジュアルの高さ以下かつ.menu-openが存在する場合は何もしない
        document.getElementById("header").style.top = "0";
      } else {
        // スクロール位置がメインビジュアルの高さ以下、または.menu-openが存在しない場合は元のスタイルに戻す
        document.getElementById("header").style.top = "";
      }
    });
  }

このコードは、ウェブページのスクロールに応じてヘッダーの表示を切り替えるJavaScript関数_headerActiveです。以下の機能を実行します。 window.addEventListener(“scroll”, function () {…})でスクロールイベントを監視します。 var scrollPosition = window.scrollY || document.documentElement.scrollTop;で現在のスクロール位置を取得します。 var mainVisualHeight = document.getElementById(“hero”).offsetHeight;でメインビジュアル（idが”hero”の要素）の高さを取得します。 var globalContainer = document.getElementById(“global-container”);でidが”global-container”の要素を取得し、var isMenuOpen = globalContainer.classList.contains(“menu-open”);でメニューが開いているか（”menu-open”クラスがあるか）を確認します。スクロール位置がメインビジュアルの高さよりも大きく、メニューが開いていない場合、ヘッダー（idが”header”の要素）のstyle.topを”0″に設定して画面上部に固定します。スクロール位置がメインビジュアル以下でメニューが開いている場合は、ヘッダーの位置を変更しません（style.topを”0″に設定）。上記の条件に当てはまらない場合（スクロール位置がメインビジュアル以下でメニューが閉じている場合）、ヘッダーのstyle.topを空文字に設定して元のスタイルに戻します。

offsetTop

offsetTop は、指定された要素がその最も近い（offsetParent になっている）親要素からどのくらいの距離で配置されているかをピクセル単位で返すプロパティです。以下はその使用例です。

<!DOCTYPE html>
<html>
<head>
<style>
  .outer {
    position: relative;
  }
  .inner {
    position: absolute;
    top: 50px;
  }
</style>
</head>
<body>

<div class="outer">
  <div class="inner" id="myElement">この要素のoffsetTopを取得します。</div>
</div>

<script>
  var element = document.getElementById("myElement");
  alert("offsetTop: " + element.offsetTop + "px");
</script>

</body>
</html>

上記の例では、div class=”inner”要素が div class=”outer”要素内で50ピクセル下に配置されています。element.offsetTop を使ってこの距離を取得し、アラートダイアログで表示しています。

offsetの様々な種類について

offsetParent: 要素が配置されている、位置を決めるための基準となる親要素を返します。 offsetTop: 要素の上外側の境界が、offsetParent の内側の上境界からどれだけ離れているかをピクセル単位で返します。 offsetLeft: 要素の左外側の境界が、offsetParent の内側の左境界からどれだけ離れているかをピクセル単位で返します。 offsetWidth: 要素の外側の横幅をピクセル単位で返します。これには、要素の幅、パディング、ボーダーが含まれますが、マージンは含まれません。 offsetHeight: 要素の外側の縦幅をピクセル単位で返します。これには、要素の高さ、パディング、ボーダーが含まれますが、マージンは含まれません。

matchesメソッド

matchesメソッドでは、Web制作において Javascriptの便利なメソッド・プロパティを紹介を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

Element.matches メソッドは、指定されたセレクタ文字列と一致する要素かどうかをテストします。このメソッドを使用すると、要素が特定のセレクタにマッチするかどうかを簡単に確認できます。

var listElements = document.querySelectorAll(".single .content ul, .single .content ol");
listElements.forEach(function(element) {
if (!element.matches(".nomadList9_blue ul") && !element.matches(".nomadList9_black ul")) {
element.classList.add("blog_caption_list");
}
});

element.matches メソッドを使用して、現在の element が .nomadList9_blue ul または .nomadList9_black ul に一致しないことを確認します。 ! 演算子を使って、一致しない場合（つまり、指定されたクラスを持つ要素の内部の ul ではない場合）を条件としています。条件が満たされた場合（element が .nomadList9_blue ul または .nomadList9_black ul に一致しない場合）、element に blog_caption_list クラスを追加します。

※このように様々な応用が可能な内容ですので、ぜひ習得してみてください。

matchesメソッドで押さえたいポイント

matchesメソッドは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

matchesメソッドの確認方法

まとめ

containesメソッドは、特定の要素にクラスが存在するかを調べることができる
条件分岐と組み合わせることで様々なイベントを発生することができる
offsetHeghtは、スクロールイベントと組み合わせることで様々な要件に対応が可能
offsetの種類を理解すれば、様々なアニメーションが実装できる
要素の高さを取得し、その要素の位置によってイベントを発火させることができる

Web制作においてJavascriptの便利なメソッド・プロパティを紹介

目次

containsメソッド

containsメソッドで押さえたいポイント

containsメソッドの確認方法

offsetHeight

offsetTop

offsetの様々な種類について

matchesメソッド

matchesメソッドで押さえたいポイント

matchesメソッドの確認方法

まとめ

コメント（0件）

会員ログイン後にコメントできます

目次

containsメソッド

containsメソッドで押さえたいポイント

containsメソッドの確認方法

offsetHeight

offsetTop

offsetの様々な種類について

matchesメソッド

matchesメソッドで押さえたいポイント

matchesメソッドの確認方法

まとめ

関連する記事

JavaScriptのdata属性とは？使い方とアニメーション実装を徹底解説

Javascriptのtype=”module”とは

会員ログイン後にコメントできます