# Reactの簡単なものなら今でも作れるのだけども.#簡単止まり.
おはようございます.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;
```
<https://zxz.sakura.ne.jp>
明日へ続く
[  サイトを分離した話を黙々と書いていきます.
](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)