ウェブ開発では、ユーザーには見えないが、フォームデータとして必要な情報を保持するHidden Field（隠しフィールド）がよく使われます。
Hidden Fieldは主にHTMLの<input>タグの一種ですが、JavaScriptと組み合わせることで、より柔軟なデータ管理が可能になります。本記事では、Hidden Fieldの基本から、JavaScriptを使った操作方法まで詳しく解説します。
Hidden Fieldとは？
Hidden Field（隠しフィールド）とは、フォーム内に存在する非表示の入力フィールドのことです。
ユーザーには見えませんが、値を設定し、フォーム送信時にサーバーへ送ることができます。
<input type="hidden" name="user_id" value="12345">この例では、user_id というデータが 12345 という値で設定されています。
ユーザーには見えませんが、フォームが送信されると、この値がサーバーへ送られます。
Hidden Fieldの用途
Hidden Fieldは、以下のような用途で利用されます。
a. ユーザー情報の引き継ぎ
ログインユーザーのIDや権限を一時的に保持し、フォーム送信時にサーバーへ送ることができます。
<input type="hidden" name="session_id" value="abc123">b. ユーザーの操作履歴を保存
ページ遷移後にデータを保持したい場合、Hidden Fieldを使って情報を保存し、サーバーへ送信できます。
<input type="hidden" id="last_action" name="last_action" value="clicked_button">c. JavaScriptとの連携
JavaScriptを使ってHidden Fieldの値を動的に変更し、サーバーへ送ることができます。
例えば、ユーザーがボタンをクリックしたときに値を変更できます。
JavaScriptでHidden Fieldを操作する
Hidden FieldはJavaScriptを使って簡単に値の取得・変更ができます。
a. JavaScriptで値を取得する
<input type="hidden" id="user-id" value="12345">
<button onclick="getHiddenValue()">値を取得</button>
<script>
function getHiddenValue() {
const hiddenField = document.getElementById("user-id").value;
alert("Hidden Fieldの値: " + hiddenField);
}
</script>ポイント:
document.getElementById("user-id").valueで値を取得できます。
b. JavaScriptで値を変更する
Hidden Fieldの値を動的に変更することも可能です。
<input type="hidden" id="order-status" value="pending">
<button onclick="updateHiddenValue()">値を変更</button>
<script>
function updateHiddenValue() {
document.getElementById("order-status").value = "completed";
alert("値を 'completed' に更新しました！");
}
</script>ポイント:
.valueを変更すると、新しい値がセットされます。- ユーザーには見えないが、フォーム送信時には変更後の値が送信されます。
Hidden Fieldの注意点とセキュリティ
Hidden Fieldは便利ですが、セキュリティ面では注意が必要です。
a. クライアント側で値が変更可能
Hidden Fieldの値は、開発者ツール（F12）で簡単に変更できます。
そのため、以下のような重要な情報はHidden Fieldに保存しないようにしましょう。
❌ Hidden Fieldに保存すべきでない情報
- パスワード
- 認証トークン
- 管理者権限の情報
👉 代替策:
- サーバーサイドで情報を管理し、セッション（
sessionStorage）やJWTを利用する。
b. Hidden Fieldを隠し要素と混同しない
Hidden Field（<input type="hidden">）は、HTMLのdisplay: none;やvisibility: hidden;といったCSSで隠された要素とは異なります。
比較表
| 機能 | Hidden Field (<input type="hidden">) | CSSで非表示 (display: none; など) |
|---|---|---|
| 画面上に表示されるか | ❌ 表示されない | ❌ 表示されない |
| フォーム送信時に値が送られるか | ✅ 送信される | ❌ 送信されない |
| JavaScriptで値の変更が可能か | ✅ 可能 (.value) | ✅ 可能 (.innerText, .textContent) |
例えば、HTML要素を隠したいだけであれば、Hidden FieldではなくCSSを使うのが適切です。
<p id="hidden-text" style="display:none;">このテキストは非表示です</p>Hidden Fieldを使うべきか？
Hidden Fieldは「フォームデータとして必要だが、ユーザーには見せる必要がない情報」を扱う場合に便利です。ただし、セキュリティ上のリスクを考慮し、適切な用途で使用することが重要です。
✅ Hidden Fieldが適しているケース
- フォームの追加情報（例：セッションID、ページ遷移時の状態）
- JavaScriptで値を動的に設定し、フォーム送信時に利用する
❌ Hidden Fieldを使うべきでないケース
- ユーザーが変更できてはいけない重要なデータ（例：パスワード、管理者権限）
- フォーム送信とは関係のない一時的なデータ（→
sessionStorageやlocalStorageを使う）
まとめ
Hidden Field（<input type="hidden">）は、ユーザーには見せずにデータを保持し、フォーム送信時にサーバーへ送るための便利な方法です。JavaScriptと組み合わせることで、値の取得・変更が可能になり、より柔軟なデータ管理ができます。
ポイントまとめ
type="hidden"の<input>タグを使って非表示の値を保持document.getElementById("id").valueで値を取得・変更- ユーザーが開発者ツールで値を変更できるため、機密情報の保存には適さない
- フォーム送信とは無関係のデータなら、
sessionStorageやlocalStorageを検討
Hidden Fieldは正しく使えば非常に便利なツールですが、誤用するとセキュリティリスクを生むことになります。適切な場面で活用しましょう！
コメント