はじめに
こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。
私はReactを使用していますが、会員登録フォームを作成するときにパスワード自動生成機能があった方が便利だと感じました。
そこで今回は、Reactでの会員登録フォームにおいて、autoComplete="new-password" を使ってパスワード自動生成の提案を有効にする方法をご紹介します。
💡結論：autoComplete="new-password" を使おう！
<input
type="password"
name="password"
autocomplete="new-password"
/>
たったこれだけ。
これを指定するだけで、Chrome や Safari などのブラウザが
「新しいパスワードを作成する場面」と認識して、
自動的に強力なパスワードを提案してくれます。
🧠補足：なぜ autocomplete="off" ではダメなの？
昨今はセキュリティ目的で autocomplete="off" が使われていましたが、
これだとブラウザが「ここは自動補完しちゃダメなのか」と判断して、
パスワード生成の提案も出なくなります。
そのため、現在では
-
autocomplete="new-password"：新規登録フォーム -
autocomplete="current-password"：ログインフォーム
のように使い分けるのがベストプラクティスです。
🗺️使い分け例
新規登録フォーム
<form>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" autocomplete="email" />
<label for="password">パスワード</label>
<input type="password" id="password" name="password" autocomplete="new-password" />
<label for="password">確認用パスワード</label>
<input type="password" id="password_confirmation" name="password_confirmation" autocomplete="new-password" />
<button type="submit">登録</button>
</form>
ログインフォーム
<form>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" autocomplete="username" />
<label for="password">パスワード</label>
<input type="password" id="password" name="password" autocomplete="current-password" />
<button type="submit">ログイン</button>
</form>
⚠️注意：開発環境ではパスワード生成が提案されないことがある
これは環境によって異なりますが、
私の環境（ローカル開発環境）ではパスワード生成が提案されませんでした。
おそらく、ブラウザが
「これは本番サイトじゃない」
と判断して自動生成を抵制していると思われます。
特に以下のような場合は提案されないことがあります：
-
http://localhost:3000などのローカルで動作中 - HTTPS でない環境
- Chrome のパスワードマネージャが無効化されている
- ブラウザログイン情報が同期されていない
その場合は、HTTPS化された本番またはステージング環境で試すと効くことが多いです。
💬まとめ
| シーン | 属性 | 効果 |
|---|---|---|
| 新規登録 | autocomplete="new-password" |
強力なパスワード提案 |
| ログイン | autocomplete="current-password" |
保存済みパスワード補完 |
| 開発環境 | — | 提案が出ない場合あり |
| 自動補完無効 | autocomplete="off" |
提案も補完も無効 |
✍️おわりに
小さなHTML属性ですが、ユーザー体験やセキュリティにも関わる大事なポイントです。
「パスワード生成提案が出ない…」と悩んでいる方は、
ぜひ autoComplete="new-password" を一行追加してみてください。
ただし、開発環境では動作しないこともあるのでその点は注意です。