@Blog
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
Reactでパスワード生成にバグがあって数値、記号が確実に入らなかったので.
2025.04.22
おはようございます.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
タグ
コード, コピー, セット, ソースコード, バグ, パスワード, パスワード生成, ほしいところ, ランダム, 修正, 初期化, 数値, 数字, 文字, 次第, 生成, 補助, 補完機能, 記号, 選択,
Reactの簡単なものなら今でも作れるのだけども.#簡単止まり.
2025.04.20
おはようございます.Reactの簡単なものなら今でも作れるのだけども簡単止まりなところを1UPしたいなと思っています.Xにもポストしたんだけどパスワード生成出来るものをReactで作ったのでソースコードを公開しますね.
Reactは基本そのままだとさくらレンタルサーバーなどでは動かないだけど、viteというモノを使用してビルドするとJavascriptに変換されたソースコードが出力されるので、それをレンタルサーバーにファイルアップロードする事によりレンタルサーバーでも動くようになります.
Reactにviteというモノを導入するに当たってDockerにUbuntuかcentOSなどを構築してその中にNodeJsとApache2を入れて自分はビルドしたモノを確認しています.
普通はNodeJsでサーバー立ててそちらで確認するのが普通なんだと思うのだけど、それだとレンタルサーバーで動いているかどうかが分からないので自分はビルド後のdistフォルダを中をApacheと紐づけて確認している形です.
トイウコトデ、ソースコードとサイトのリンクを貼っときます.
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 passwords = "";
for (let i = 0; i < passwordLength; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
passwords += characters[randomIndex]; // ランダムな文字を選択
}
setPassword(passwords); // パスワードを更新
}
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;
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
コピー, さくらレンタルサーバー, セット, ソースコード, トイウコトデ, ところ, パスワード, パスワード生成, ビルド後, フォルダ, ランダム, レンタルサーバー, 初期化, 形, 数字, 文字, 普通, 生成, 紐, 記号,
仕事と私生活で使用するPCは分けるべきだと思ふ。#docker
2023.06.09
おはようございます。仕事と私生活で使用するPCは分けるべきだと思います。アカウントを分けている方はいると思うのですが、それよりも端末ごとに分けるべきだったと最近思い出しました。PCの初期化とか気軽にできない。理由は開発環境でCドライブを一部使用しているからです。
一部使用しているのは物はDockerさんですね。バックアップしてイメージに吐き出して、ロードすれば済む話なのですが、もし環境が崩れてしまったら面倒くさいなって思っていてやっていない。
この作業はお盆休みにでも行おうと思います。何故、初期化したいのかと言えばBluetoothが壊れているのですね。レジストリとかバックアップしないでいじってしまって一部変なんです。なので、初期化したいなって思っています。
本当は先週の休みに行おうと思っていたのですが、そんな事（上記）を考えるとこわいなーって思ってできなくなったのです。この頃、思うのだけど仕事と私生活のPCは分けたいなと思っています。仕事はノートパソコンか別途PC買って動かせば良いのかなって思っています。WEBアプリケーション系とかを開発している仕事なので、それほどスペックが必要という訳でもないのでそうしたいなって思っていますが、今年入り様なので来年になりそうです😐。
尚、別々にするメリットはこんな感じ。
仕事と私生活で使用するPCを分けることで、セキュリティ面やプライバシー面で安心できます。また、仕事と私生活を切り離すことで、仕事に集中したり、プライベートを充実させたりするのに役立ちます。
仕事と私生活で使用するPCを分けることを検討してみてはいかがでしょうか？
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
bluetooth, Cドライブ, Dockerさん, PC, WEBアプリケーション系, アカウント, お盆休み, スペック, セキュリティ面, ノートパソコン, プライバシー面, プライベート, メリット, 作業, 初期化, 別途PC, 来年, 私生活, 端末ごと, 訳,
windows10の初期化にできなかったので購入した。
2016.10.01
windows10の初期化にできなかったので購入した。
９月３０日の夜からごとごと１０月１日の朝までパソコンと格闘してました。
壮絶に眠いですが、昼から仕事です。
最近のアップデートでパソコンが異常に遅くなり
イライラするぐらいの処理だったのが今ではまぁサクサク動くように
なりました。本当は初期状態にしたかったのですが
できなかったため、マイクロソフト社からWIN10のISOファイルを
ダウンロードしてきて、クリーンインストールしました。
その後、シリアル認証キーを購入して
今はまぁサクサク動くようになりました^_^。
そこまでは良いのですが、２万７千円ちょっとお金が・・・・。
クリーンインストールする時点でダメだなと思っていたのです、
かすかな希望もあったりしたんだけど、結局、WIN7から
クリーンインストールするとお金が発生するだと言うことです。
ちなみに今月、馬鹿みたいに10万ほど
お金が吹っ飛びました・・・・。
節制しないと・・・・。
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2万7千円ちょっとお金, ISOファイル, WIN10, WIN7, Windows10, アップデート, お金, シリアル認証キー, パソコン, マイクロソフト社, ムダづかい, 初期化, 初期状態, 希望, 昼, 時点, 結局,