中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
id属性とname属性の違いを徹底解説
id属性とname属性の違いは、ウェブ開発の基礎であり、見た目だけでなく機能にも直結します。id属性は一意な識別子として要素を特定するために使われ、CSSのセレクタやJavaScriptからの取得に活躍します。アンカーリンクのターゲットにもなり、URLに #id名 を追加するとその場所へジャンプします。ただし、文書内で同じidを複数の要素に付けてはいけません。これを守らないと、スタイルの適用が乱れたりスクリプトが正しく動かなかったりします。
一方 name属性は フォームの送信データの名前としての役割を持ち、サーバへデータを送る際のキーになります。各入力要素には name が設定されることで、その値がサーバのデータとして受け渡されます。
したがってidは「この要素そのものを指す」ための識別子、nameは「送信データの名前」を指す識別子だと覚えると混乱が減ります。さらに昔は anchor の nameを使う時代もありましたが、現在は id の利用が主流で nameは推奨されません。この違いを知っておくと、後でコードを見直すときも迷うことが少なくなります。
基本的な意味と使われる場所
id属性は要素を一意に識別するための属性で、CSSのセレクタとして #id名 で指定できます。JSで要素を取得する時にも document.getElementById を使います。
name属性は フォームデータの名前として機能し、同じnameを複数の入力が共有することも普通です。ラジオボタンのグループ名に使われるのが典型で、それぞれの値はサーバへ送信される際に同じ名前で関連付けられます。ご注意として、idは送信データには含まれない点を覚えておくと、データ設計の時に誤解が生まれません。
実務での使い分けと注意点
実務ではこの二つを分けて使うのが基本です。ラベルを要素に結びつけたいときはidを使い、サーバへ送るデータを識別したい場合はnameを使います。例えば入力欄のidをusernameに設定し、同時にnameもusernameに設定すると、ページ上は分かりやすく、送信時には適切なキー名でデータが届きます。
また動的に要素を操作する場合にはidを使って要素を取得し、表示を切り替えたり値を検証したりします。反対にサーバ側でデータを受け取る欄にはnameが必要です。ここで大事なのは、idは文書内で一意、nameは同名の要素を複数持つことができる、という点を理解することです。これを活かせば、コードの保守性とアクセシビリティの両方を高められます。
id属性の話を友達とカフェでしていたときのこと。彼は id は一意だから同じページで使い回せないと信じていたが、実は同じページ内に複数の要素があるときは別の名前をつける工夫が必要になる。私は label の for 属性と id の組み合わせで、視覚的にも操作性にも配慮した設計を説明した。 id は要素を指す札、name はデータの名前札。これを混同するとクリックしても反応しなかったり、送信データの整合性が崩れたりする。
ITの人気記事
