JavaScript属性の完全マスター！20選の使い方とサンプルコード

はじめに
●JavaScript属性の基本知識
- ○属性とは
- ○よく使われる属性
●JavaScript属性の使い方とサンプルコード
●応用例とサンプルコード
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScript属性を使いこなせるようになります！

JavaScript初心者にもわかりやすく、20種類の属性の使い方やサンプルコードを紹介します。

また、注意点や応用例も詳しく解説しますので、是非最後まで読んでJavaScript属性をマスターしましょう！

●JavaScript属性の基本知識

○属性とは

属性とは、HTMLタグ内で要素に付与される追加情報です。

JavaScriptでは、これらの属性を取得・設定・操作することができます。

○よく使われる属性

よく使われる属性には、class、id、name、value、type、src、alt、style、disabled などがあります。

これらの属性は、JavaScriptで要素を操作する際に頻繁に利用されます。

●JavaScript属性の使い方とサンプルコード

○サンプルコード1：class属性

class属性は、要素にスタイルを適用するために使用されます。

JavaScriptでは、class属性を操作して動的にスタイルを変更することができます。

// HTML
// <button id="btn" class="button">ボタン</button>

// JavaScript
const btn = document.getElementById('btn');

// class属性を取得
const className = btn.className; // "button"

// class属性を追加
btn.classList.add('new-class');

// class属性を削除
btn.classList.remove('button');

○サンプルコード2：id属性

id属性は、要素を一意に識別するために使用されます。

JavaScriptでは、id属性を使って特定の要素を取得することができます。

// HTML
// <div id="myDiv">これはテキストです。</div>

// JavaScript
const myDiv = document.getElementById('myDiv');

// id属性を取得
const idName = myDiv.id; // "myDiv"

// id属性を変更
myDiv.id = 'newId';

○サンプルコード3：data属性

data属性は、要素にカスタムデータを付与するために使用されます。

JavaScriptでは、data属性を利用して要素に情報を追加・取得することができます。

// HTML
// <div id="info" data-name="Taro" data-age="20">情報</div>

// JavaScript
const info = document.getElementById('info');

// data属性を取得
const name = info.dataset.name; // "Taro"
const age = info.dataset.age; // "20"

// data属性を設定
info.dataset.job = 'Engineer';

○サンプルコード4：name属性

name属性は、主にフォーム要素に名前を付けるために使用されます。

JavaScriptでは、name属性を使って要素を取得・操作することができます。

// HTML
// <input type="text" id="username" name="username">

// JavaScript
const username = document.getElementById('username');

// name属性を取得
const nameAttribute = username.name; // "username"

// name属性を変更
username.name = 'newName';

○サンプルコード5：value属性

value属性は、フォーム要素の値を表します。

JavaScriptでは、value属性を使って入力された値を取得・設定することができます。

// HTML
// <input type="text" id="username" name="username">

// JavaScript
const username = document.getElementById('username');

// value属性を取得
const value = username.value;

// value属性を設定
username.value = '新しい値';

○サンプルコード6：type属性

type属性は、要素の種類を指定するために使用されます。

JavaScriptでは、type属性を取得・設定することができます。

// HTML
// <input type="text" id="inputField">

// JavaScript
const inputField = document.getElementById('inputField');

// type属性を取得
const type = inputField.type; // "text"

// type属性を変更
inputField.type = 'password';

○サンプルコード7：src属性

src属性は、外部リソースのURLを指定するために使用されます。

JavaScriptでは、src属性を取得・設定することができます。

// HTML
// <img id="myImage" src="image.jpg" alt="サンプル画像">

// JavaScript
const myImage = document.getElementById('myImage');

// src属性を取得
const src = myImage.src; // "image.jpg"

// src属性を変更
myImage.src = 'new-image.jpg';

○サンプルコード8：alt属性

alt属性は、画像が表示できない場合の代替テキストを指定します。

JavaScriptでは、alt属性を取得・設定することができます。

// HTML
// <img id="myImage" src="image.jpg" alt="サンプル画像">

// JavaScript
const myImage = document.getElementById('myImage');

// alt属性を取得
const alt = myImage.alt; // "サンプル画像"

// alt属性を変更
myImage.alt = '新しい代替テキスト';

○サンプルコード9：style属性

style属性は、要素に直接スタイルを適用するために使用されます。

JavaScriptでは、style属性を操作して動的にスタイルを変更することができます。

// HTML
// <div id="myDiv" style="color: blue;">これはテキストです。</div>

// JavaScript
const myDiv = document.getElementById('myDiv');

// style属性を取得・変更
myDiv.style.color = 'red'; // テキストの色を赤に変更
myDiv.style.backgroundColor = 'yellow'; // 背景色を黄色に変更

○サンプルコード10：disabled属性

disabled属性は、フォーム要素が無効化されているかどうかを指定します。

JavaScriptでは、disabled属性を取得・設定することができます。

// HTML
// <button id="myButton">ボタン</button>

// JavaScript
const myButton = document.getElementById('myButton');

// disabled属性を設定
myButton.disabled = true; // ボタンを無効化

// disabled属性を取得
const isDisabled = myButton.disabled; // true（無効化されている状態）

●応用例とサンプルコード

これからは、応用例としてよく使われる属性のサンプルコードを紹介していきます。

○サンプルコード11：カスタムデータ属性

カスタムデータ属性（data-*）は、要素に独自の情報を保存するために使用されます。

JavaScriptでは、これらの属性を取得・設定することができます。

// HTML
// <div id="myDiv" data-info="サンプル情報">これはテキストです。</div>

// JavaScript
const myDiv = document.getElementById('myDiv');

// カスタムデータ属性を取得
const info = myDiv.dataset.info; // "サンプル情報"

// カスタムデータ属性を設定
myDiv.dataset.info = '新しい情報';

○サンプルコード12：イベントハンドラ属性

イベントハンドラ属性は、要素に対するイベントの動作を指定します。

JavaScriptでは、イベントハンドラ属性を使ってイベントリスナーを設定することができます。

// HTML
// <button id="myButton">クリックしてください</button>

// JavaScript
const myButton = document.getElementById('myButton');

// イベントハンドラ属性を設定
myButton.onclick = () => {
  alert('ボタンがクリックされました！');
};

○サンプルコード13：要素の状態を制御する属性

要素の状態を制御する属性（例：checked、selected）は、要素の特定の状態を指定するために使用されます。

JavaScriptでは、これらの属性を取得・設定することができます。

// HTML
// <input type="checkbox" id="myCheckbox">

// JavaScript
const myCheckbox = document.getElementById('myCheckbox');

// 状態属性を取得
const isChecked = myCheckbox.checked; // false（チェックされていない状態）

// 状態属性を設定
myCheckbox.checked = true; // チェックボックスをチェック状態にする

○サンプルコード14：フォーム関連属性

フォーム関連属性（例：action、method、placeholder）は、フォーム要素の動作や見た目を制御するために使用されます。

JavaScriptでは、これらの属性を取得・設定することができます。

// HTML
// <form id="myForm">
//   <input type="text" id="myInput" placeholder="テキストを入力してください">
// </form>

// JavaScript
const myForm = document.getElementById('myForm');
const myInput = document.getElementById('myInput');

// フォーム属性を取得
const action = myForm.action; // フォームが送信されるURL
const method = myForm.method; // フォームの送信方法（GET/POST）
const placeholder = myInput.placeholder; // "テキストを入力してください"

// フォーム属性を設定
myForm.action = 'https://example.com/submit';
myForm.method = 'POST';
myInput.placeholder = '新しいプレースホルダー';

○サンプルコード15：リンク関連属性

リンク関連属性（例：href、target）は、リンク要素（a要素）の動作を制御するために使用されます。

JavaScriptでは、これらの属性を取得・設定することができます。

// HTML
// <a id="myLink" href="https://example.com">これはリンクです。</a>

// JavaScript
const myLink = document.getElementById('myLink');

// リンク属性を取得
const href = myLink.href; // "https://example.com"
const target = myLink.target; // 通常は空文字（_selfと同じ効果）

// リンク属性を設定
myLink.href = 'https://example2.com';
myLink.target = '_blank'; // 新しいタブでリンクを開く

○サンプルコード16：メタデータ属性

メタデータ属性（例：charset、content、http-equiv）は、ページのメタデータを制御するために使用されます。

JavaScriptでは、これらの属性を取得・設定することができます。

// HTML
// <meta id="myMeta" charset="UTF-8">

// JavaScript
const myMeta = document.getElementById('myMeta');

// メタデータ属性を取得
const charset = myMeta.charset; // "UTF-8"

// メタデータ属性を設定
myMeta.charset = 'ISO-8859-1';

○サンプルコード17：グローバル属性

グローバル属性（例：title、lang）は、どのような要素でも利用できる属性で、要素の一般的な情報や振る舞いを制御します。

JavaScriptでは、これらの属性を取得・設定することができます。

// HTML
// <p id="myParagraph" lang="ja">これは日本語の文章です。</p>

// JavaScript
const myParagraph = document.getElementById('myParagraph');

// グローバル属性を取得
const lang = myParagraph.lang; // "ja"

// グローバル属性を設定
myParagraph.lang = 'en'; // 言語を英語に変更

○サンプルコード18：アクセシビリティ属性

アクセシビリティ属性（例：aria-label、aria-labelledby）は、ウェブページのアクセシビリティを向上させるために使用されます。

JavaScriptでは、これらの属性を取得・設定することができます。

// HTML
// <button id="myButton" aria-label="クリックしてください">クリック</button>

// JavaScript
const myButton = document.getElementById('myButton');

// アクセシビリティ属性を取得
const ariaLabel = myButton.getAttribute('aria-label'); // "クリックしてください"

// アクセシビリティ属性を設定
myButton.setAttribute('aria-label', 'ボタンを押してください');

○サンプルコード19：マルチメディア属性

マルチメディア属性（例：src、controls、loop）は、マルチメディア要素（例：video、audio）の動作や見た目を制御するために使用されます。

JavaScriptでは、これらの属性を取得・設定することができます。

// HTML
// <video id="myVideo" src="sample-video.mp4" controls></video>

// JavaScript
const myVideo = document.getElementById('myVideo');

// マルチメディア属性を取得
const src = myVideo.src; // "sample-video.mp4"
const controls = myVideo.controls; // true

// マルチメディア属性を設定
myVideo.src = 'new-sample-video.mp4';
myVideo.loop = true; // 動画をループ再生する

○サンプルコード20：その他の属性

その他の属性には、特定の要素に固有の属性やカスタム属性があります。

JavaScriptでは、これらの属性を取得・設定することができます。

// HTML
// <div id="myDiv" data-custom-attribute="カスタム属性の値">これはdiv要素です。</div>

// JavaScript
const myDiv = document.getElementById('myDiv');

// その他の属性を取得
const customAttribute = myDiv.getAttribute('data-custom-attribute'); // "カスタム属性の値"

// その他の属性を設定
myDiv.setAttribute('data-custom-attribute', '新しいカスタム属性の値');