(Sample)
ログインで使用するメールアドレスやパスワードを毎回入力するのは手間なものです。特にユーザーを目の前にしたデモの場面では緊張して間違いも発生しやすいものです。
そこで、今回はログイン情報を覚えてくれるフォームのJavaScriptを、新人エンジニアの皆さんにもわかりやすく解説します！
今回のコードのキーワードは 「ローカルストレージ」 と 「イベント処理」 です。
「ボタンを押すと何が起こるか？」という流れを中心に見ていきましょう。
ローカルストレージとは？
まず出てくるのが localStorage（ローカルストレージ）。
これは「ブラウザの中に小さなメモ帳を作って情報を保存する」ようなイメージです。
たとえば：
localStorage.setItem('userId', 'tanaka123');
と書くと、ブラウザは「userId = tanaka123」という情報を保存します。
スクリプトのポイント解説
1. HTMLの要素を取得する
const userIdInput = document.querySelector('#userId');
const passwordInput = document.querySelector('#password');
const rememberCheckbox = document.querySelector('#rememberMe');
const loginForm = document.querySelector('#loginForm');
const forgetButton = document.querySelector('#forgetMe');
ここでは、HTMLで作った入力欄やボタンをJavaScriptで操作できるように「ひもづけ」ています。querySelector() は「CSSセレクタ」と同じ感覚で使える便利な命令です。
2. ページを開いたとき、自動で入力内容を読み込む
window.addEventListener('DOMContentLoaded', () => {
const savedUserId = localStorage.getItem('userId');
const savedPassword = localStorage.getItem('password');
const rememberMe = localStorage.getItem('rememberMe');
if (rememberMe === 'true') {
userIdInput.value = savedUserId || '';
passwordInput.value = savedPassword || '';
rememberCheckbox.checked = true;
}
});
ここでのポイント：
DOMContentLoadedは「HTMLが読み込まれた後に実行するよ」という合図。- 保存していた情報を
getItem()で読み取り、フォームに入力してくれます。 || ''は「もし保存されていなければ空文字を使う」という保険的な書き方。
3. ログイン時の保存処理
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
if (rememberCheckbox.checked) {
localStorage.setItem('userId', userIdInput.value);
localStorage.setItem('password', passwordInput.value);
localStorage.setItem('rememberMe', 'true');
} else {
localStorage.removeItem('userId');
localStorage.removeItem('password');
localStorage.setItem('rememberMe', 'false');
}
alert('ログイン処理（ダミー）完了！');
});
解説：
submitイベントは「フォームが送信されるとき」に発生。preventDefault()で本当の送信を止めて、代わりにローカルストレージに情報を保存。- チェックボックスがオンなら保存、オフなら削除するというシンプルな流れです。
4. 「Forget me」ボタンの処理
forgetButton.addEventListener('click', () => {
userIdInput.value = '';
passwordInput.value = '';
rememberCheckbox.checked = false;
localStorage.removeItem('userId');
localStorage.removeItem('password');
localStorage.removeItem('rememberMe');
alert('保存されていたログイン情報を削除しました。');
});
ポイント：
- 入力欄の内容を空にして、チェックボックスもオフに。
- ローカルストレージから関連する全データを削除。
- 最後にアラートでユーザーに知らせるという、親切な設計ですね。
セキュリティ上の注意点
とても大事な話ですが、パスワードをそのまま保存するのは本番では絶対にNG！
なぜかというと…
ローカルストレージに保存された情報は、ブラウザの開発者ツールで誰でも見られます。
このコードは学習用・ダミー用途なので許されていますが、実際のサービスでは以下のような対策が必要です：
| 対策項目 | 内容 |
|---|---|
| ハッシュ化 | パスワードは変換して保存（例：SHA-256） |
| HTTPS化 | 通信経路の暗号化 |
| トークン認証 | パスワードの代わりに一時的な鍵（トークン）を使う |
このコードで身につく5つの力
| スキル | 説明 |
|---|---|
| DOM操作 | フォーム要素を操作できるようになる |
| イベント処理 | ボタンや送信時の動作を定義できる |
| ローカルストレージ活用 | ブラウザに情報を保存する技術が学べる |
| 条件分岐 | if文を活用して処理を分ける力 |
| フォーム制御 | ページ遷移を止めて処理をカスタマイズ |
まとめと今後の学習の道しるべ
このコードは「JavaScriptによる基本的なフォーム操作とデータ保存」の良い練習素材です。
次に学ぶべきテーマとして、こんな内容に進むのがおすすめです。
次のステップ：
- セッションストレージとローカルストレージの違い
- JavaScriptによるバリデーション処理（入力チェック）
- バックエンドとの連携（API通信）
- セキュリティの基礎（XSS、CSRFなど）
まずはこのコードをベースに、自分で少しずつカスタマイズしてみると理解が深まりますよ！
何か追加で知りたい内容があれば、遠慮なく聞いてくださいね。