MENU
  1. ホーム
  2. コーディング
  3. 【JavaScript基礎編】Web制作でよく使うJSメソッド7選！

【JavaScript基礎編】Web制作でよく使うJSメソッド7選！

コーディング
JavaScript基礎編。Web制作で頻出！JSメソッド7選について解説！

このブログはアフィリエイト広告を利用しています

こんにちは！キャメルコードブログ運営者のしゅんです！

今回はWeb制作でよく使うJavaScript（以下JS）のメソッドについて解説をしていきます。

メソッド…難しそうだな…

メソッドは難しく考えず、まずは特定の処理を実行するための機能と覚えておきましょう！

jQueryもGSAPもJSライブラリであり、大元はJSです。そのためWeb制作を行うならJSの基本は必ず覚えておくべきです。基本を理解してこそ応用を効かせることができます。

ゴリゴリJSを書ける必要はありませんが、最低限JSを使えるくらいの知識はぜひ持っておきましょう^^

今回は、以下のサンプル表示をJSのメソッドを使用して変更していきます。

基本コードはこちら。こちらのコードを使いながら進めていきます^^

-- HTML --

<section class="practice">
　<div class="practice__inner">
　　<h2 class="practice__title" id="practice-title">こんにちは</h2>
　　<div class="practice__content">
　　　<p class="practice__text">これはJavaScriptの練習です。</p>
　　　<p class="practice__text">基本からしっかり学んでいきましょう！</p>
　　　<p class="practice__text">継続は力なり！！</p>
　　</div>
　　<div class="practice__buttonWrapper">
　　　<div class="practice__button"><a href="#">ボタン</a></div>
　　　<div class="practice__button02"><a href="#">追加ボタン</a></div>
　　</div>
　</div>
</section>
-- CSS --

.practice__inner {
  padding: 0 25px;
}

.practice__title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.practice__content {
  margin-inline: auto;
  padding: 30px;
  width: 100%;
  max-width: 700px;
  border: 1px solid #c7c7c7;
  border-radius: 10px;
}

.practice__text {
  text-align: center;
}

.practice__buttonWrapper {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.practice__button {
  text-align: center;
}

.practice__button02 {
  text-align: center;
}

.practice__button a {
  color: #fff;
  background-color: orange;
  width: 100%;
  max-width: 500px;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}

.practice__button02 a {
  color: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  background-color: pink;
}

.color-red {
  color: red;
}

.font-large {
  font-size: 36px;
  font-weight: bold;
}

それでは始めましょう！

この記事で学べること
  • JSのメソッドについて理解できる
  • JSの基本的なメソッドを使えるようになる
目次

1. document.querySelector()

document.querySelector()は要素を一つ取得するメソッドです。

DOM操作の基本であり、非常によく使われるメソッドなのでぜひ覚えておきましょう！

それでは、タイトルのidを取得して変更してみましょう！

-- HTML --

<section class="practice">
　<div class="practice__inner">
　　<h2 class="practice__title" id="practice-title">こんにちは</h2>
　　<div class="practice__content">
　　　<p class="practice__text">これはJavaScriptの練習です。</p>
　　　<p class="practice__text">基本からしっかり学んでいきましょう！</p>
　　　<p class="practice__text">継続は力なり！！</p>
　　</div>
　　<div class="practice__buttonWrapper">
　　　<div class="practice__button"><a href="#">ボタン</a></div>
　　　<div class="practice__button02"><a href="#">追加ボタン</a></div>
　　</div>
　</div>
</section>
-- JS --

document.querySelector('#practice-title').innerText ='こんばんわ';

変更されましたね！

2. document.querySelectorAll()

document.querySelector()は1つ目の要素のみを取得するのに対し、document.querySelectorAll()は指定したセレクターに一致する複数の要素を取得します。

-- HTML --

<section class="practice">
　<div class="practice__inner">
　　<h2 class="practice__title" id="practice-title">こんにちは</h2>
　　<div class="practice__content">
　　　<p class="practice__text">これはJavaScriptの練習です。</p>
　　　<p class="practice__text">基本からしっかり学んでいきましょう！</p>
　　　<p class="practice__text">継続は力なり！！</p>
　　</div>
　　<div class="practice__buttonWrapper">
　　　<div class="practice__button"><a href="#">ボタン</a></div>
　　　<div class="practice__button02"><a href="#">追加ボタン</a></div>
　　</div>
　</div>
</section>
-- JS --

  const texts = document.querySelectorAll('.practice__text');

上記コードでは定数「texts」の中に、document.querySelectorAll()で取得した「.practice__text」を持つすべての要素を代入してます。

document.querySelectorAll()は、forEachなどの繰り返し処理と一緒に使うことが多いです。それではどのように使うかforEachと一緒に見ていきましょう^^

3. Array.forEach()

下記コードでは、document.querySelectorAll()で取得した要素をforEachでループを回してます。

-- JS --

  const texts = document.querySelectorAll('.practice__text');
  texts.forEach((text)=> {
    text.innerHTML = '変更したよ！';
});

一行目のコードでは、document.querySelectorAll()で取得した「.practice__text」を持つすべての要素を定数「texts」に代入してます。

ニ行目では、取得した「.practice__text」を持つ要素（今回は3つ）を一つずつ順番に「text」という引数に入れてます。

三行目で取得した3つの要素のテキストをinnerHTMLで書き換えるという作業を行ってます。

4. element.addEventListener()

element.addEventListener()は、要素にイベントを登録するためのメソッドです。クリックやスクロールなど、指定したイベントが発生したときに処理を実行できます。

今回はボタンをクリックしたときに、タイトルの色とサイズを変更する処理を実行してみましょう。

流れとしては、

  • CSSであらかじめクラスにスタイルを指定する
  • JSでボタンをクリックした際にそのクラスを付与する
-- HTML --

<section class="practice">
　<div class="practice__inner">
　　<h2 class="practice__title" id="practice-title">こんにちは</h2>
　　<div class="practice__content">
　　　<p class="practice__text">これはJavaScriptの練習です。</p>
　　　<p class="practice__text">基本からしっかり学んでいきましょう！</p>
　　　<p class="practice__text">継続は力なり！！</p>
　　</div>
　　<div class="practice__buttonWrapper">
　　　<div class="practice__button"><a href="#">ボタン</a></div>
　　　<div class="practice__button02"><a href="#">追加ボタン</a></div>
　　</div>
　</div>
</section>
-- CSS --

.color-red {
  color: red;
}

.font-large {
  font-size: 36px;
  font-weight: bold;
}

それでは具体的に見ていきましょう。

-- JS --

  document.querySelector('.practice__button').addEventListener('click', ()=> {
  document.querySelector('.practice__title').classList.add('font-large', 'color-red');
});

まずはdocument.querySelector(‘.practice__button’)で要素を取得します。

-- JS --

  document.querySelector('.practice__button').addEventListener('click', ()=> {
  document.querySelector('.practice__title').classList.add('font-large', 'color-red');
});

addEventListener(‘click’, ()=> {
これは「取得した要素をクリックしたときに次の処理を実行するよ！」という意味になります。

addEventListenerの基本的な書き方

element.addEventListener(‘イベント名’, 実行する処理);

イベントはclick以外にも色々なものがあります。

addEventListenerの色々なイベント例
  • click → クリックしたとき
  • mouseover → マウスカーソルが要素に乗ったとき
  • scroll → スクロールしたとき
  • submit → フォームを送信したとき

イベントは他にもたくさんあるからぜひ調べてみてね！

-- JS --

  document.querySelector('.practice__button').addEventListener('click', ()=> {
  document.querySelector('.practice__title').classList.add('font-large', 'color-red');
});

そして、クリックしたときに実行する処理を書きます。
今回は「.practice__title」に対して「.font-large」と「.color-red」というクラスを付与しています。

変更されましたね！^^

5. element.classList.add()

こちらは前述した通り、クラスを付与するメソッドになります。
非常によく使うメソッドなのでぜひ覚えておきましょう！

クラスを付与するメソッドがあるということは、クラスを取り除くメソッドもあるということですw

addをremoveに変えるだけなので簡単ですね^^

クラスを取り除くメソッド

element.classList.remove(‘クラス名’);

さらに、クラスの付け外しをするメソッドもあります^^
クラスが付いていれば外し、外れていれば付けます。

クラスの付け外しをするメソッド

element.classList.toggle(‘クラス名’);

6. document.createElement()

残り2つですが、一気に説明します！

-- HTML --

<section class="practice">
　<div class="practice__inner">
　　<h2 class="practice__title" id="practice-title">こんにちは</h2>
　　<div class="practice__content">
　　　<p class="practice__text">これはJavaScriptの練習です。</p>
　　　<p class="practice__text">基本からしっかり学んでいきましょう！</p>
　　　<p class="practice__text">継続は力なり！！</p>
　　</div>
　　<div class="practice__buttonWrapper">
　　　<div class="practice__button"><a href="#">ボタン</a></div>
　　　<div class="practice__button02"><a href="#">追加ボタン</a></div>
　　</div>
　</div>
</section>

今回は「追加ボタン」を押したときにコンテンツを追加する処理を実行します。

-- JS --

  document.querySelector('.practice__button02').addEventListener('click', ()=> {
    const pElement = document.createElement('p');
    pElement.classList.add('practice__text');
    pElement.textContent = '頑張ろう！！';
    document.querySelector('.practice__content').appendChild(pElement);
  });

一行目は「.practice__button02」をクリックしたときに次の処理を実行しますよ！という意味でしたね↑↑↑

-- JS --

  document.querySelector('.practice__button02').addEventListener('click', ()=> {
    const pElement = document.createElement('p');
    pElement.classList.add('practice__text');
    pElement.textContent = '頑張ろう！！';
    document.querySelector('.practice__content').appendChild(pElement);
  });

createElement(‘p’)でp要素を新たに生成してます。そして生成されたp要素をpElement（任意の名前でOK！）という定数に代入してます↑↑↑

-- JS --

  document.querySelector('.practice__button02').addEventListener('click', ()=> {
    const pElement = document.createElement('p');
    pElement.classList.add('practice__text');
    pElement.textContent = '頑張ろう！！';
    document.querySelector('.practice__content').appendChild(pElement);
  });

p要素にpractice__textというクラスを付与してます↑↑↑

-- JS --

  document.querySelector('.practice__button02').addEventListener('click', ()=> {
    const pElement = document.createElement('p');
    pElement.classList.add('practice__text');
    pElement.textContent = '頑張ろう！！';
    document.querySelector('.practice__content').appendChild(pElement);
  });

textContentを使って「頑張ろう！！」というテキストを入れてます↑↑↑
これで下記のような要素が出来上がりました↓↓↓

-- HTML --

  <p class="practice__text">頑張ろう！！</p>

そして最後にappendChild()を使って「.practice__content」を持つ要素の子要素に挿入します↓↓↓

-- JS --

  document.querySelector('.practice__button02').addEventListener('click', ()=> {
    const pElement = document.createElement('p');
    pElement.classList.add('practice__text');
    pElement.textContent = '頑張ろう！！';
    document.querySelector('.practice__content').appendChild(pElement);
  });
appendChild()の基本構文

親要素.appendChild(追加する子要素);

表示を確認すると…できてますね！^^

7. appendChild()

先ほど解説した通りですが、appendChild()は親要素に新しい子要素を追加するメソッド です。

createElement()で新たに作った要素を追加する場合などに使います。

まとめ：代表的なメソッドをまずは覚えよう！

さて、いかがでしたか？

今回はWeb制作でよく使う代表的なメソッドを紹介しました。

今回紹介した代表的メソッド7選
  • document.querySelector()
  • document.querySelectorAll()
  • Array.forEach()
  • element.addEventListener()
  • element.classList.add()
  • document.createElement()
  • appendChild()

まだまだ他にもありますが、使いながら徐々に覚えていきましょう！

このブログでもまた紹介していきます。

まずは今回紹介したものを使えるようになりJSのイメージをつかみましょう^^

JSの学習を始めるときにはドットインストールなどの動画教材から入るのがおすすめです！
個人的には書籍よりも理解がしやすいと思います。

おすすめ書籍も貼っておきます^^
ガッツリJSの書籍なので、「14章DOM」、「15章イベント」あたりをまずは読んでみるといいと思います！

それではまた次回の記事でお会いしましょう^^

コーディング
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次