Project

パスワードジェネレータ

TypeScript で実装した、暗号学的に安全なパスワードを生成できる Web アプリケーション。強度インジケーターと履歴機能付き。

TypeScriptTypeScriptHTML5CSS3Web Crypto APIClipboard API
TypeScriptFrontendTool
GitHubLive Demo

概要

Web Crypto API を活用し、暗号学的に安全な乱数でパスワードを生成するツールです。文字数（8〜64文字）、文字種（大文字・小文字・数字・記号）をカスタマイズでき、生成されたパスワードの強度をリアルタイムで表示します。履歴機能により、直近5件のパスワードを保持し、ワンクリックでコピーできます。型安全な TypeScript で実装し、DOM操作やイベントハンドリングのベストプラクティスを適用しています。

苦労した点・工夫した点

暗号学的に安全な乱数生成のため、Math.random() ではなく Web Crypto API (crypto.getRandomValues) を使用しました。また、各文字種から最低1文字を含めることを保証しつつ、最終的にシャッフルして偏りのないパスワードを生成するロジックの実装が課題でした。

得られた学び・振り返り

TypeScript の型システムを活用することで、DOM 操作や設定オブジェクトの型安全性を確保できました。また、Fisher-Yates シャッフルアルゴリズムや Web Crypto API の使い方を学び、セキュリティを考慮したフロントエンド実装の知見を得られました。

Live Demo / プレビュー

技術構成図（Mermaid）

現在は Mermaid 記法をテキストとして表示しています。必要に応じて Mermaid.js のレンダリング処理に差し替え可能です。

graph TD
  User[ユーザー設定] --> Options[オプション取得]
  Options --> Length[文字数: 8-64]
  Options --> CharSet[文字種選択]
  CharSet --> Upper[大文字 A-Z]
  CharSet --> Lower[小文字 a-z]
  CharSet --> Num[数字 0-9]
  CharSet --> Sym[記号 !@#$]
  Length --> Generate[パスワード生成]
  CharSet --> Generate
  Generate --> Crypto[Web Crypto API]
  Crypto --> Shuffle[Fisher-Yates シャッフル]
  Shuffle --> Display[画面表示]
  Display --> Strength[強度計算]
  Display --> History[履歴保存]
  Display --> Copy[クリップボードコピー]