WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： K.K.
カテゴリー： プログラム >JavaScript

SNS、ショッピングサイトなどアカウントごとに安全なパスワードが必要ですが、同じパスワードを使い回すのは非常に危険であり、人によってはそれぞれの会員登録時に都度パスワードを考えるのが億劫になる方も少なくありません。
この記事ではJavaScriptやPHPを使って、ボタンを押すだけでランダムなパスワード生成機能をフォーム内に実装する方法を紹介します。

JavaScriptでランダムパスワードを生成

JavaScriptを使うことで、ブラウザのみで動作を行うためサーバー負荷無しでパスワードを生成できます。
ユーザーがボタンを押すと即座にパスワードが生成され、会員登録フォームのコード内に追記するだけで完結するため手軽です。

See the Pen
ランダムパスワード生成 by qam (@qam)
on CodePen.

非リロード（Ajax）でランダムパスワードを生成するPHP版

PHPではサーバー側で実行するため、生成過程のコードをユーザーから隠すことができ、Ajaxを組み合わせることで、PHPでもページリロードを挟まずパスワードを生成することが可能です。
今回はフォームページをindex.php、実行するバックエンドファイルをgenerate.phpとします。

フロント側（HTML + JS）

<input type="text" id="password" size="30" readonly>
<button id="generate">パスワード生成</button>

<script>
document.getElementById('generate').addEventListener('click', async () => {
    const response = await fetch('generate.php');
    const password = await response.text();
    document.getElementById('password').value = password;
});
</script>

バックエンド（generate.php）

<?php
function generateRandomString($length = 12) {
    $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
    $charLen = strlen($chars);
    $result = '';
    for ($i = 0; $i < $length; $i++) {
        $result .= $chars[random_int(0, $charLen - 1)];
    }
    return $result;
}

echo generateRandomString(12);

まとめ

この記事では、JavaScriptとPHPの両方でランダムパスワードを生成する方法を紹介しました。
ユーザーの利便性向上にもつながるため、必要に応じて実装してみてください。