小 中 大
■ ■ ■ ■ ■ ■ ■

Home > 2025年 > 4月 > 22日

Camera+ recipe? ? scene: Cloudy ? crop: Golden ? effect: Redscale (77%) ? border: Round White

Reactでパスワード生成にバグがあって数値、記号が確実に入らなかったので.

2025年04月22日

Logging

おはようございます.Reactでパスワード生成にバグがあって数値、記号が確実に入らなかったのでその修正を先日行いました.そういやそうだなってソースコードを見返して思った次第です…

修正したコードはこちらになります.その話とは別にVScodeにもAI補助が付いてから自分も生成AIと言う物を個人開発するときに使用するようになっただけど…

import RingLoader from "react-spinners/RingLoader";
import { useState } from "react";
import "./App.css";

function PasswordTmp() {
  const [passwordLength, setPasswordLength] = useState(8);
  const [password, setPassword] = useState("");
  const [includeSymbols, setIncludeSymbols] = useState(false);
  const [includeNumbers, setIncludeNumbers] = useState(false);

  function makePassword(passwordLength, includeSymbols, includeNumbers) {
    const lowercase = "abcdefghijklmnopqrstuvwxyz";
    const uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    const numbers = "0123456789";
    const symbols = "!@#$%^&*()_+[]{}|;:,.<>?";
    let characters = lowercase + uppercase; // 文字のセットを初期化
    if (includeNumbers) {
      characters += numbers; // 数字を追加
    }
    if (includeSymbols) {
      characters += symbols; // 記号を追加
    }
    let result = remakePassword(characters,includeNumbers,includeSymbols);
    setPassword(result);
  }

  function remakePassword(characters,includeNumbers,includeSymbols){
    let passwords = "";
    let NumbersChecking = true;
    let SymbolsChecking = true;
    for (let i = 0; i < passwordLength; i++) {
      const randomIndex = Math.floor(Math.random() * characters.length);
      passwords += characters[randomIndex]; // ランダムな文字を選択
    }
    if (includeNumbers) {
      NumbersChecking = passwords.match(/[0-9]/g) ? true : false;
    }
    if (includeSymbols) {
      SymbolsChecking = passwords.match(/[\!@#\$%\^&\*\(\)_\+\[\]\{\}\|;:\,\.<>\?]/g) ? true :false;
    }
    return NumbersChecking && SymbolsChecking?passwords:remakePassword(characters,includeNumbers,includeSymbols);
  }


  return (
    <>
      <div>
        <h1>パスワード生成</h1>
        <p>
          <input
            type="number"
            value={passwordLength}
            placeholder="パスワードの長さ"
            max={99}
            min={3}
            onChange={(e) => setPasswordLength(e.target.value)}
          />
        </p>
        <p>
          <input id={'Symbols'}
            type="checkbox"
            value={1}
            checked={includeSymbols}
            onChange={(e) => setIncludeSymbols(e.target.checked)}
          />
          <label for={'Symbols'}>記号を含める</label>
        </p>
        <p>
          <input id={'Numbers'}
            type="checkbox"
            value={1}
            checked={includeNumbers}
            onChange={(e) => setIncludeNumbers(e.target.checked)}
          />
          <label for={'Numbers'}>数字を含める</label>
        </p>
        <button
          className="btn"
          onClick={() =>
            makePassword(passwordLength, includeSymbols, includeNumbers)
          }
        >
          パスワードを生成
        </button>
        <button
          className="btn"
          onClick={() => navigator.clipboard.writeText(password)}
        >
          パスワードをコピー
        </button>
        <p>生成されたパスワード: {password}</p>
        <p>パスワードの長さ: {passwordLength}</p>
        <p>記号を含める: {includeSymbols ? "はい" : "いいえ"}</p>
        <p>数字を含める: {includeNumbers ? "はい" : "いいえ"}</p>
      </div>
    </>
  );
}

export default PasswordTmp;

この頃、補完機能がとても「うざったく」思う時と「ありがとう」と思うときが存在していてなんとも言えない.特にウザって思うときは自分が望んでいないコードが出てきた時は正直困る.コードを直打ちしないといけないので今までの補完機能がやはり良いなと思います.

自分としては生成AIの補完機能をOFFに出来る機能がほしいところ、それがあればとてもコードを書くのは快適ですねー.あるのかなぁー🤔調べてみます.

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2025年04月22 06:00日

タグ

コード, コピー, セット, ソースコード, バグ, パスワード, パスワード生成, ほしいところ, ランダム, 修正, 初期化, 数値, 数字, 文字, 次第, 生成, 補助, 補完機能, 記号, 選択,