1. 導入：なぜsetAttributeが重要なのか？
Webサイトを作っていると、「ボタンをクリックした時に無効化したい」「画像リンクを動的に変更したい」といった場面に遭遇します。HTMLの属性（srcやdisabled、idなど）をJavaScriptから自由に変更できれば、Webページに「動き」を与えることができます。そのための最も基本的で強力なツールが、この「Element.setAttribute」です。これを使うことで、ページをリロードせずに見た目や機能を柔軟にコントロールできるようになります。
2. 基礎知識：属性とメソッドの仕組み
HTML要素は、タグの中に「属性」と呼ばれる情報を持っています。例えば、
というタグがあれば、srcが属性で、cat.jpgがその値です。
setAttributeは、JavaScriptからこの「属性」と「値」をセットするためのメソッドです。
基本的な書き方は以下の通りです。
element.setAttribute(属性名, 値);
これを使うと、HTMLを直接書き換えなくても、JavaScriptが裏側から属性を追加・更新してくれます。
3. 実装・解決策：実際に属性を操作してみよう
setAttributeを使うには、まず「どの要素を操作するか」を指定する必要があります。document.querySelectorなどで要素を取得し、そこにメソッドを適用します。
4. サンプルプログラム
以下のコードをHTMLファイルに貼り付けて、ブラウザで動作を確認してみてください。ボタンを押すと、リンク先が変わり、さらにボタン自体が押せなくなる（disabled属性が付与される）サンプルです。
5. 応用・注意点：現場で役立つポイント
setAttributeを使う際に知っておくべき注意点がいくつかあります。
・「値」は常に文字列として扱われる
setAttributeで渡す値は、数値や真偽値（true/false）であっても、すべて文字列として保存されます。例えば、disabled属性を消したい場合は「false」という文字列ではなく、removeAttribute(‘disabled’)という別のメソッドを使うのが正解です。
・プロパティと属性の違い
JavaScriptには element.id = ‘new-id’ のように、直接プロパティに代入する書き方もあります。単純な属性の変更であればプロパティの方が短く書けることが多いですが、setAttributeは「独自のカスタム属性」や「複雑な属性操作」を行いたい時に特に役立ちます。
・クラス名の付与について
クラス名を変更したい場合は、setAttribute(‘class’, ‘foo’) と書くこともできますが、クラスが複数ある場合に上書きしてしまうリスクがあります。その場合は classList.add() を使うのがフロントエンド開発の現場では一般的です。
用途に合わせてsetAttributeと他のメソッドを使い分けることで、より堅牢で読みやすいコードが書けるようになりますよ！