【jQuery】attr()でクラス名を取得する

今回の記事は、

  • jQueryを使ってクラス名を取得したい
  • 素のJavascriptを使った方法も知っておきたい

という方に向けた記事になっています。

この記事の前半では、「jQueryを使ってクラス名を取得する方法」について解説しつつ、後半では「Javascriptとの比較」をご紹介させていただきます。


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト


attr()メソッドを使ってクラス名を取得する

jQueryでクラス名を取得するには、attr()メソッドを使用します。

attr()メソッドの「attr」は「attributes」の略語であり、その意味の通り、HTML要素の属性を取得する際に利用されます。

使い方としてはとてもシンプルで、以下の通り、取得したい属性を引数に指定することで、その属性に設定されている値を取得することができます。

attr()メソッドの基本的な使い方

$("HTML要素").attr("属性")

それでは、実際にattr()メソッドを使ってクラス名を取得してみましょう。

実装コード

<h1 class="test-header">テストヘッダー</h1>

<script>
const className = $("h1").attr("class")

console.log(className)
</script>

実行結果

=> "test-header"

このように、jQueryオブジェクトであるHTML要素($("p"))のクラス名を簡単に取得することができます。

また、このattrattribute(属性)の略語であることからも分かる通り、クラス名以外の属性も取得することができます

実際の開発の中で使用するものはid属性やname属性、type属性などになりますが、これらも基本的な使い方は変わらずattr()メソッドの引数に指定してあげれば大丈夫です。

実装コード

<h1 id="test-header">テストヘッダー</h1>

<button type="submit">提出する</button>

<script>
// id属性を取得
const id = $("h1").attr("id")

// type属性を取得
const type = $("button").attr("type")

console.log(id)
console.log(type)
</script>

実行結果

=> "test-header"
=> "submit"

なお、実際の開発でもよく目にするvalue属性については、専用のval()メソッドが用意されていますので、そちらを使用するようにしましょう。主な使い方については以下の記事で詳しくご紹介していますので、こちらも併せてご覧ください。

おすすめ記事

今回の記事は、 jQueryをvalue属性を取得したいjQueryをvalue属性を設定/変更したい という方に向けた記事になっています。 val()メソッドでvalue属性を取得してみましょう まず[…]

PCで仕事

JavascriptのclassNameメソッドとの比較

ご説明した通り、jQueryのattr()メソッドを使用するととても簡単にクラス名を取得できましたが、素のJavascriptでも同じくらい簡単にクラス名を取得することができます

素のJavascriptではclassNameメソッドを使用してあげましょう。こちらはattr()メソッドとは違って、引数は取らず、クラス名を取得したいHTML要素に対して呼び出すだけで大丈夫です。

実装コード

<h1 class="test-header">テストヘッダー</h1>

<script>
const header = document.getElementsByTagName("h1")

console.log(header.className)
</script>

実行結果

=> "test-header"

こんなに簡単なの?とびっくりされた方も多いかと思います。普段はJavascriptの記法をより簡単に使いやすくしてくれるjQueryですが、今回ばかりは素のJavascriptの方がより直感的に使えそうですよね。

普段から素のJavascriptばかり書いている方にとってはわざわざjQueryのattr()メソッドを使ってまでクラス名を取得することはないとは思いますが、あまり使わないからこそ、いざという時に忘れてしまいがちです。

クラス名を取得する以外にも様々な属性を扱うことができますので、頭の片隅に置いておくと、いざという時に役に立つかもしれませんね。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、今回は、jQueryを使ってクラス名を取得する方法について解説してきましたがいかがでしたか?

結果的には、「クラス名を取得する」という機能だけを見てみると、素のJavascriptの方が直感的に使用できますが、全ての属性を取得できるという点ではattr()メソッドの方が便利ではあります。

場面ごとにいつでも両者を使い分けられるよう、この機会にそれぞれのやり方を覚えておいて損はないでしょう。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。