【6日でできるJavaScript入門】属性値の変更

　Webページでは、リンクのURLや画像のパス、ボタンの状態など、**要素が持つ属性値（attr）**をJavaScriptで動的に変更できます。
これにより、「リンク先の切り替え」「画像の切り替え」「入力欄の有効/無効化」など、インタラクティブで柔軟なWeb体験が実現できます。

　ここでは、属性値の取得・変更の基本から、配列・ループを使った一括変更、画像ギャラリー応用例までを、サンプルプログラムを通じて丁寧に解説します。

トピック	概要
setAttribute()	属性値の変更
getAttribute()	属性値の取得
配列・ループ	複数要素を一括で操作
thisキーワード	イベント発生元要素の特定

１．属性値の変更：setAttributeの基本

HTML要素の属性値をJavaScriptから変更するには、setAttribute() メソッドを使います。

書式例	意味
`要素.setAttribute('属性名', 値)`	属性値を変更
例：`a.setAttribute('href', 'https://...')`	リンク先URLを書き換える
例：`img.setAttribute('src', 'photo2.jpg')`	画像を切り替える

1.1. サンプル：リンク集をSNSへ切り替え

ファイル名： lesson21-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔗 属性値の変更サンプル</title>
  <style>
    #links { margin: 20px 0; }
    #links a { color: #2277cc; text-decoration: underline; }
  </style>
</head>
<body>
  <h1>🔗 属性値の変更サンプル</h1>
  <ul id="links">
    <li><a href="https://www.google.com/">Google検索</a></li>
    <li><a href="https://www.yahoo.co.jp/">Yahoo!検索</a></li>
    <li><a href="https://www.bing.com/">Bing検索</a></li>
  </ul>
  <button onclick="switchToSNS()">SNSリンクに切り替え</button>
  <script>
    const snsNames = ['X（旧Twitter）', 'LINE', 'Instagram'];
    const snsUrls = [
      'https://twitter.com/',
      'https://line.me/ja/',
      'https://www.instagram.com/'
    ];
    function switchToSNS() {
      let links = document.querySelectorAll('#links li a');
      for (let i = 0; i < links.length; i++) {
        links[i].textContent = snsNames[i];
        links[i].setAttribute('href', snsUrls[i]);
      }
    }
  </script>
</body>
</html>

ブラウザの出力例

出力例
ボタンを押す前：「Google検索」「Yahoo!検索」「Bing検索」
ボタンを押すと：「X（旧Twitter）」「LINE」「Instagram」へのリンクに変わる。

タグ・構文	解説
<a href="...">...</a>	リンク要素。hrefはリンク先の属性
.setAttribute('属性', 値)	属性の値を書き換える
.textContent	リンクの表示文字を変更
querySelectorAll('#links li a')	複数a要素をまとめて取得

1.2. setAttributeを使うときの注意点

属性名・値は文字列で指定（''で囲む）
classやidなど基本的なHTML属性すべてに利用可能
styleの直接変更にはsetAttribute('style', '...')も使えるが、通常は.style.プロパティで操作

属性例	説明	使用例（setAttribute）
href	リンク先	a.setAttribute('href', url)
src	画像パス	img.setAttribute('src', path)
alt	代替テキスト	img.setAttribute('alt', text)
disabled	ボタンの無効化	button.setAttribute('disabled', true)

２．属性値の取得：getAttribute

HTML要素が持つ属性値を取得したい場合は、getAttribute() を使います。

書式例	意味
変数 = 要素.getAttribute('属性名')	属性値を取得し変数に代入

2.1. サンプル：画像クリックでメイン画像を切り替え

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。

js-change-attribute ダウンロード

ファイル名： lesson21-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🖼️ 写真切り替えサンプル</title>
  <style>
    #main_photo { width: 300px; height: 220px; background: #eee; margin-bottom: 8px; }
    #thumbs img { width: 90px; border: 2px solid #ccc; margin: 0 5px; cursor: pointer; opacity: 0.7; }
    #thumbs img:hover { opacity: 1.0; border-color: #3399ff; }
  </style>
</head>
<body>
  <h1>🖼️ 写真切り替えサンプル</h1>
  <div id="main_photo">
    <img id="big_img" src="pic01.png" width="300" height="220">
  </div>
  <div id="thumbs">
    <img src="pic01.png" alt="写真1" onclick="showBig(this)">
    <img src="pic02.png" alt="写真2" onclick="showBig(this)">
    <img src="pic03.png" alt="写真3" onclick="showBig(this)">
  </div>
  <script>
    function showBig(obj) {
      // クリックされた画像のsrc属性値を取得
      let file = obj.getAttribute('src');
      // メイン画像のsrcを書き換え
      document.getElementById('big_img').setAttribute('src', file);
    }
  </script>
</body>
</html>

ブラウザの出力例

出力例
サムネイルをクリックすると、大きな写真がその画像に切り替わる。

タグ・構文	解説
.getAttribute('src')	クリックされた画像のsrc（ファイル名）を取得
.setAttribute('src', ...)	メイン画像のsrcを変更
onclick="showBig(this)"	イベント元（this）を関数に渡して識別

３．応用：他の属性値や複数プロパティを動的に操作

3.1. 例：フォームの入力欄を一括で有効/無効に

ファイル名： lesson21-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>✅ 入力欄の属性切り替え</title>
  <style>
    input { margin-bottom: 10px; }
  </style>
</head>
<body>
  <h1>✅ 入力欄の属性切り替え</h1>
  <input type="text" placeholder="名前を入力" id="name">
  <input type="text" placeholder="メールアドレス" id="email">
  <input type="password" placeholder="パスワード" id="pw">
  <br>
  <button onclick="disableAll()">全て無効にする</button>
  <button onclick="enableAll()">全て有効にする</button>
  <script>
    function disableAll() {
      document.getElementById('name').setAttribute('disabled', true);
      document.getElementById('email').setAttribute('disabled', true);
      document.getElementById('pw').setAttribute('disabled', true);
    }
    function enableAll() {
      document.getElementById('name').removeAttribute('disabled');
      document.getElementById('email').removeAttribute('disabled');
      document.getElementById('pw').removeAttribute('disabled');
    }
  </script>
</body>
</html>

ブラウザの出力例

出力例

「全て無効にする」ボタンで入力欄が操作不可になる。
「全て有効にする」ボタンで入力欄が操作可能に戻る。

まとめ

setAttribute() で、任意の属性値（href、src、altなど）を変更できる。
getAttribute() で、現在の属性値を取得できる。
配列・ループ・thisを活用することで、複数要素を柔軟に制御可能
ボタンやイベントと連携して、Webページのインタラクションが大幅に向上

属性値の動的な変更を活用すれば、より使いやすく・楽しいWeb体験を作ることができます。
いろいろな属性を操作して、自在なUIを作ってみましょう！