はじめに

こんにちは。アメリカ在住で独学エンジニアを目指している 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" を一行追加してみてください。

ただし、開発環境では動作しないこともあるのでその点は注意です。