JavaScriptのclassList.addメソッドを使ってclass属性を追加する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのclassList.addメソッドを使ってclass属性を追加する方法について解説しています。classListのaddメソッドではclassの値を追加することができます。基本の書き方と複数のclassを追加する場合の書き方を覚えておきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

監修してくれたメンター

高田 悠

JavaScriptを用いた実装などフロントエンド領域の開発が得意。Web上での3D表現に興味がありWebARの実装案件を複数経験。ワークライフバランスを重視してフリーランス生活を送っている。

JavaScriptのclassList.addメソッドを使ってclass属性を追加する方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

目次

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

classList.addメソッドを使ってclass属性を追加する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

classListとは

JavaScriptでは、HTML要素に対してclassListプロパティを参照することで、その要素に指定されたクラス名をDOMTokenListという形式で取得することができます。

具体的には下記のように記述します。

<div id="content-1" class="top content">
</div>
const div = document.getElementById("content-1");

console.log(div.classList) //DOMTokenList["top"`, "content"]

 

classList.addメソッドとは

上記で解説したclassListには、addメソッドという組み込みメソッド(最初から言語仕様に備わっているメソッド)が登録されています。

これは英語の意味通り、add = 追加するという意味で、指定のHTML要素にクラスを追加できます。

例えば、任意のp要素に”added”というクラス名を付けたい場合、コードは以下の通りです。

<p id="message">文章</p>
const p = document.getElementById("message");

p.classList.add("added") //p要素にaddedクラスが追加される

 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

実際に書いてみよう

classList.addメソッドを利用するケースとして多いのは、クラスを追加することでHTML要素の見た目を動的に切り替えることです。

今回は、「非表示」ボタンをクリックしたらテキストに “is-hidden” クラスをつけ、そのテキストを非表示にするプログラムを書いてみましょう。

このような仕様を実現するには、HTMLとJavaScriptに加えてクラスがついている場合のCSSも定義する必要があります。

まずは動作イメージです。

 

次に、実際のコードです。

<button id="hide-text">非表示</button>
<p id="text">これはテキストです</p>
p.is-hidden {
  display: none;
}
const hideButton = document.getElementById("hide-text");
const text = document.getElementById("text");

//ボタンをクリックしたら
hideButton.addEventListener('click', () => {
    text.classList.add("is-hidden")
})

 

今回の解説は以上です。

クラス名の操作を使いこなして、動きのあるWebサイト制作に慣れていきましょう!

大石ゆかり

JavaScriptのclassList.addメソッドを使ってclass属性を追加する方法がよくわかったので良かったです!

田島悠介

ゆかりちゃん、今後も分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか?

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!