# Reactでパスワード生成にバグがあって数値、記号が確実に入らなかったので.
おはようございます.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に出来る機能がほしいところ、それがあればとてもコードを書くのは快適ですねー.あるのかなぁー🤔調べてみます.
明日へ続く
[  サイトを分離した話を黙々と書いていきます.
](https://zip358.com/2026/02/04/%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e5%88%86%e9%9b%a2%e3%81%97%e3%81%9f%e8%a9%b1%e3%82%92%e9%bb%99%e3%80%85%e3%81%a8%e6%9b%b8%e3%81%84%e3%81%a6%e3%81%84%e3%81%8d%e3%81%be%e3%81%99.html)
[  半額セールでアドビ様を延長.
](https://zip358.com/2026/02/03/%e5%8d%8a%e9%a1%8d%e3%82%bb%e3%83%bc%e3%83%ab%e3%81%a7%e3%82%a2%e3%83%89%e3%83%93%e6%a7%98%e3%82%92%e5%bb%b6%e9%95%b7.html)
[  何の前触れもなく変えたのは初めてかも.
](https://zip358.com/2026/02/02/%e4%bd%95%e3%81%ae%e5%89%8d%e8%a7%a6%e3%82%8c%e3%82%82%e3%81%aa%e3%81%8f%e5%a4%89%e3%81%88%e3%81%9f%e3%81%ae%e3%81%af%e5%88%9d%e3%82%81%e3%81%a6%e3%81%8b%e3%82%82.html)
[  跳ねたいサイトで跳ねたい
](https://zip358.com/2026/02/01/%e8%b7%b3%e3%81%ad%e3%81%9f%e3%81%84%e3%82%b5%e3%82%a4%e3%83%88%e3%81%a7%e8%b7%b3%e3%81%ad%e3%81%9f%e3%81%84.html)
[  映画、機動戦士ガンダム 閃光のハサウェイ キルケーの魔女
](https://zip358.com/2026/01/31/%e6%98%a0%e7%94%bb%e3%80%81%e6%a9%9f%e5%8b%95%e6%88%a6%e5%a3%ab%e3%82%ac%e3%83%b3%e3%83%80%e3%83%a0-%e9%96%83%e5%85%89%e3%81%ae%e3%83%8f%e3%82%b5%e3%82%a6%e3%82%a7%e3%82%a4-%e3%82%ad%e3%83%ab%e3%82%b1.html)