HTMLの要素をJavaScriptから取得するとき、HTML側のid名とJavaScript側の変数名を同じ名前にしてよいのか迷うことがあります。例えばHTMLにidがnameの要素があり、JavaScriptでconst name = document.getElementById("name");と書くケースです。
結論として、HTMLのid名とJavaScriptの変数名が同じでも、それ自体は問題ありません。id属性の値とJavaScriptの変数は別の仕組みとして扱われるためです。ただし、実際の開発では変数が何を表しているのか分かりやすい名前を付けることや、ブラウザがid付き要素をグローバルプロパティとして扱う仕組みに依存しないことが重要です。
HTMLのidとJavaScriptの変数は別物
まず理解しておきたいのは、HTMLのid属性とJavaScriptでconstなどを使って宣言する変数は役割が異なるという点です。HTMLのidは文書内の要素を識別するための識別子であり、JavaScriptの変数名はプログラム内で値を参照するための識別子です。
例えばHTMLが<input id="name">であれば、document.getElementById("name")はidがnameである要素をDOMから検索して返します。その戻り値をconst nameというJavaScriptの変数へ代入しても、両者が同名であることを理由に衝突するわけではありません。
したがって、次のような考え方になります。"name"は「検索するHTML要素のid」、左側のnameは「取得した要素をJavaScript内で参照するための変数」です。同じ文字列が使われていても意味するものは別です。
const name = document.getElementById("name")は使える
const name = document.getElementById("name");という記述は、通常のJavaScriptとして使用できます。このコードでは、HTML文書からidがnameの要素を探し、そのDOM要素への参照を変数nameへ格納しています。
例えば<input id="name" type="text">という入力欄を取得したのであれば、その後にname.valueなどとして入力値へアクセスできます。idと変数名を一致させることで、短いプログラムでは対応関係が分かりやすくなる場合もあります。
ただし、nameという単語だけでは「名前の文字列」が入っているのか「input要素」が入っているのか判断しにくくなることがあります。コードが大きくなるほど、同名にするかどうかよりも変数の中身が名前から分かるかが重要になります。
実務では要素だと分かる変数名にすると読みやすい
DOM要素を格納する変数なら、例えばnameInput、nameElement、nameFieldなどの名前を利用できます。HTML側を<input id="name">としたまま、JavaScript側をconst nameInput = document.getElementById("name");とする方法です。
こうしておくと、後からconst name = nameInput.value;のように「DOM要素」と「入力された名前」を別々の変数として扱う場合にも意味が明確になります。
例えばnameInputにはinput要素そのものが入り、nameには利用者が入力した文字列が入る、という命名ルールにできます。複数人で開発するときや、数か月後に自分でコードを読み直すときにも理解しやすくなります。
idから自動的に作られるグローバル変数には依存しない
ブラウザには、条件によってid付きのHTML要素がwindowオブジェクトの名前付きプロパティとして参照できる仕組みがあります。そのため、環境によってはid="example"を付けただけで、JavaScriptからexampleという名前で要素を参照できるように見える場合があります。
しかし、この挙動を利用して「idを書けばJavaScriptの変数を宣言しなくてもよい」と考えるのは避けた方が安全です。既存の名前との競合やコードの分かりにくさにつながる可能性があるため、document.getElementById()やdocument.querySelector()などを使って明示的に取得する方が意図の分かりやすいコードになります。
つまり、const name = document.getElementById("name");のように明示的に変数へ代入する書き方と、「idがnameだからnameだけで参照できるはず」という書き方は区別して考える必要があります。
id名を付けるときにも注意点がある
HTMLのidは、文書内で要素を識別するために使います。同じidを複数の要素へ付けるような設計は避け、対象を一意に識別できるようにします。JavaScriptから要素を取得するときだけでなく、CSSやページ内リンクなどでもidは利用されます。
また、単にbox1やdata2などとするより、userName、submitButton、searchFormのように用途を想像しやすい名前にすると保守しやすくなります。
JavaScript側についても同様で、HTMLと必ず同じ名前にするというルールはありません。例えばid="submit-button"の要素をconst submitButton = document.getElementById("submit-button");として扱うなど、それぞれの一般的な命名方法に合わせることができます。
getElementByIdとquerySelectorはどう使い分ける？
idが分かっている要素を取得するなら、document.getElementById("name")はシンプルで分かりやすい方法です。一方、CSSセレクターと同じ形式で対象を指定したい場合にはdocument.querySelector("#name")も利用できます。
例えばconst nameInput = document.querySelector("#name");でもidがnameの要素を取得できます。さらにクラスならdocument.querySelector(".example")のように指定できるため、セレクターを統一的に扱いたい場合に便利です。
どちらを利用する場合でも、取得したDOM要素を格納する変数名とHTML側のid名を一致させる義務はありません。コード全体の命名規則を統一し、役割が読み取れる名前を選ぶことが大切です。
要素が見つからない場合はnullになる点にも注意
document.getElementById()は、指定したidの要素が見つからなければnullを返します。そのため、JavaScriptが実行されるタイミングによっては、正しいidを書いていても期待した要素を取得できないことがあります。
例えば対象のHTML要素が読み込まれる前にJavaScriptが実行されれば、取得に失敗する可能性があります。scriptタグを配置する位置やdefer属性など、DOMが利用可能になるタイミングも確認するとよいでしょう。
「idと変数名を同じにしたから動かない」と考える前に、ブラウザの開発者ツールでエラーを確認し、対象要素が存在するか、idのスペルが一致しているか、JavaScriptの実行タイミングに問題がないかを順番に確認するのが効率的です。
まとめ｜同じ名前でも問題ないが役割が分かる命名がおすすめ
HTMLのid名とJavaScriptの変数名は別の識別子なので、const name = document.getElementById("name");のように同じ名前を使用すること自体は問題ありません。
一方、実際の開発ではnameInputやnameElementのように、変数がDOM要素であることを読み取れる名前にするとコードの意図が明確になります。特に「要素そのもの」と「要素から取得した値」の両方を扱うプログラムでは、この区別が役立ちます。
重要なのはidと変数名を無理に一致させたり別名にしたりすることではなく、それぞれの役割を理解し、読みやすく衝突しにくい名前を選ぶことです。DOM要素はgetElementById()などで明示的に取得する習慣を付けておくと、規模が大きくなっても扱いやすいJavaScriptになります。
コメント