パスワード生成ツールを作る＆便利コマンドをaliasに登録

パスワード生成ツールを作る＆便利コマンドをaliasに登録
目次

デモ

実際に動くツールを用意しました。

パスワード生成ツールを試す →

はじめに

パスワードを生成する場面は意外と多いです。今回は2つのアプローチを紹介します。

  1. ブラウザで動くパスワード生成ツール（JavaScript）
  2. ターミナルで使える便利コマンド（alias登録）

ブラウザで動くパスワード生成ツール

JavaScriptでパスワード生成ツールを作成します。サーバーに送信せず、ブラウザ内で完結するため安全です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>パスワード生成ツール</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 500px;
      margin: 50px auto;
      padding: 20px;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input[type="number"] {
      width: 80px;
      padding: 8px;
      font-size: 16px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background: #4285f4;
      color: white;
      border: none;
      border-radius: 4px;
    }
    button:hover {
      background: #1a73e8;
    }
    .result {
      margin-top: 20px;
      padding: 15px;
      background: #f5f5f5;
      border-radius: 4px;
      font-family: monospace;
      font-size: 18px;
      word-break: break-all;
    }
    .copy-btn {
      margin-top: 10px;
      background: #34a853;
    }
    .copy-btn:hover {
      background: #2d8e47;
    }
  </style>
</head>
<body>
  <h1>パスワード生成ツール</h1>

  <div class="form-group">
    <label for="length">文字数</label>
    <input type="number" id="length" value="16" min="4" max="128">
  </div>

  <div class="form-group">
    <label>
      <input type="checkbox" id="uppercase" checked> 大文字 (A-Z)
    </label>
    <label>
      <input type="checkbox" id="lowercase" checked> 小文字 (a-z)
    </label>
    <label>
      <input type="checkbox" id="numbers" checked> 数字 (0-9)
    </label>
    <label>
      <input type="checkbox" id="symbols" checked> 記号 (!@#$%...)
    </label>
  </div>

  <button onclick="generatePassword()">生成</button>

  <div class="result" id="result">ここにパスワードが表示されます</div>

  <button class="copy-btn" onclick="copyPassword()">コピー</button>

  <script src="password.js"></script>
</body>
</html>

JavaScript

function generatePassword() {
  const length = parseInt(document.getElementById('length').value);
  const useUppercase = document.getElementById('uppercase').checked;
  const useLowercase = document.getElementById('lowercase').checked;
  const useNumbers = document.getElementById('numbers').checked;
  const useSymbols = document.getElementById('symbols').checked;

  let chars = '';
  if (useUppercase) chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  if (useLowercase) chars += 'abcdefghijklmnopqrstuvwxyz';
  if (useNumbers) chars += '0123456789';
  if (useSymbols) chars += '!@#$%^&*()_+-=[]{}|;:,.<>?';

  if (chars === '') {
    alert('少なくとも1つの文字種を選択してください');
    return;
  }

  let password = '';
  const array = new Uint32Array(length);
  crypto.getRandomValues(array);

  for (let i = 0; i < length; i++) {
    password += chars[array[i] % chars.length];
  }

  document.getElementById('result').textContent = password;
}

function copyPassword() {
  const password = document.getElementById('result').textContent;
  if (password === 'ここにパスワードが表示されます') {
    alert('先にパスワードを生成してください');
    return;
  }

  navigator.clipboard.writeText(password).then(() => {
    alert('コピーしました');
  });
}

// 初期表示時に1つ生成
generatePassword();

ポイント

項目説明
crypto.getRandomValues()暗号学的に安全な乱数を生成
Math.random()は使わない予測可能なため非推奨
ブラウザ内完結サーバーに送信しないので安全

ターミナルで使える便利コマンド

コマンドラインでサクッとパスワードを生成したい場合のワンライナーです。

macOS / Linux

# openssl を使う方法（英数字）
openssl rand -base64 16

# /dev/urandom を使う方法（英数字記号）
cat /dev/urandom | LC_ALL=C tr -dc 'a-zA-Z0-9!@#$%^&*' | head -c 16; echo

# /dev/urandom を使う方法（英数字のみ）
cat /dev/urandom | LC_ALL=C tr -dc 'a-zA-Z0-9' | head -c 16; echo

aliasに登録する

毎回コマンドを打つのは面倒なので、aliasに登録しておくと便利です。

.bashrc または .zshrc に以下を追加します。

# パスワード生成 (デフォルト16文字)
alias pwgen='cat /dev/urandom | LC_ALL=C tr -dc "a-zA-Z0-9" | head -c 16; echo'

# パスワード生成 (記号あり)
alias pwgens='cat /dev/urandom | LC_ALL=C tr -dc "a-zA-Z0-9!@#$%^&*()_+-=" | head -c 16; echo'

# パスワード生成 (文字数指定可能)
# 使い方: pwgenx 32
pwgenx() {
  local len=${1:-16}
  cat /dev/urandom | LC_ALL=C tr -dc 'a-zA-Z0-9' | head -c "$len"; echo
}

設定を反映

source ~/.zshrc  # zshの場合
source ~/.bashrc # bashの場合

使用例

$ pwgen
xK9mNp2vQwRtYu3h

$ pwgens
aB3$xY7@kM9#pL2!

$ pwgenx 32
xK9mNp2vQwRtYu3haB3cxY7zkM9rpL2q

コマンドの解説

コマンド説明
cat /dev/urandom乱数を生成
LC_ALL=Cロケール設定（日本語環境対策）
tr -dc ‘a-zA-Z0-9’指定文字以外を削除
head -c 16先頭16文字を取得
echo改行を出力

まとめ

用途おすすめ
GUIで生成したいブラウザツール
ターミナルで素早くalias登録
スクリプトで使いたいopenssl or /dev/urandom

パスワード生成は頻繁に使う機能なので、自分の環境に合わせてセットアップしておくと便利です。