偽名ジェネレーターをJavaScriptで作ってみる【コード解説付き】

「偽名をランダムで作るアプリ」を、HTML・CSS・JavaScriptでシンプルに実装してみました。
ボタンを押すだけで、昭和っぽい雰囲気の名前が次々と表示されます。

完成形

コードをチェック

HTML・CSS・JavaScriptの3つに分けてコードを紹介します。

HTML

<div class="wrap">
  <p id="fakeName" class="fakeName"></p>
  <button id="generateBtn" class="generateBtn">偽名を生成</button>
</div>

このコードは「偽名ジェネレーター」アプリのUI部分です。
<div class="wrap">が全体の囲いで、その中に偽名を表示する<p>タグと、偽名を生成する<button>タグが配置されています。
ボタンを押すと、ランダムな偽名が<p>に表示されます。

CSS

* {
  box-sizing: border-box;
}
.wrap {
  width: 90%;
  max-width: 500px;
  min-height: 300px;
  margin: 0 auto;
  padding: 10px;
  font-size: 18px;
  background-color: #709bac;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wrap .fakeName {
  width: 80%;
  min-height: 100px;
  margin: 0 0 30px;
  padding: 10px;
  font-size: 1.8em;
  background-color: #fff;
  border: 2px solid #100600;
  box-shadow: 2px 2px 2px #100600;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap .generateBtn {
  display: block;
  width: 60%;
  min-height: 60px;
  margin: 0 auto;
  padding: 10px;
  font-size: 1.2em;
  color: #fff;
  background-color: #ad4226;
  border: 2px solid #100600;
  box-shadow: 1px 1px 1px #100600;
  cursor: pointer;
}
.wrap .generateBtn:hover {
  opacity: 0.9;
}

このCSSは、偽名ジェネレーターの見た目を整えるスタイルです。

• .wrap は全体のレイアウト枠で、中央寄せ・背景色・余白などを設定。
• .fakeName は生成された名前を表示する領域で、枠線や影付きの白背景。
• .generateBtn はボタンで、目立つ色・サイズ・ホバー時の透明度変化が指定されています。

全体的にレトロな雰囲気を意識した、シンプルかつ読みやすいデザインです。

JavaScript

const firstName = ['清', '勇', '博', '実', '茂', '三郎', '弘', '正', '進', '一男'];
const lastName = ['佐藤', '鈴木', '高橋', '田中', '伊藤', '渡辺', '山本', '中村', '小林', '加藤'];

const fakeName = document.querySelector('#fakeName');
const generateBtn = document.querySelector('#generateBtn');

function selectName(array) {
  let i = Math.floor(Math.random() * array.length);
  return array[i];
}

function makeFullName(firstName, lastName) {
  return `${selectName(lastName)} ${selectName(firstName)}`;
}

generateBtn.addEventListener('click', function () {
  fakeName.textContent = makeFullName(firstName, lastName);
});

このJavaScriptコードは、「偽名」をランダムに生成して画面に表示する仕組みです。
苗字と名前の候補をそれぞれ配列で用意し、ボタンがクリックされるたびに、そこからランダムに一つずつ選んで組み合わせて表示します。

---

const firstName = ['清', '勇', '博', '実', '茂', '三郎', '弘', '正', '進', '一男'];

▶ 名前（下の名前）の候補を配列として用意しています。

---

const lastName = ['佐藤', '鈴木', '高橋', '田中', '伊藤', '渡辺', '山本', '中村', '小林', '加藤'];

▶ 苗字（上の名前）の候補を配列として用意しています。

---

const fakeName = document.querySelector('#fakeName');

▶ 偽名を表示する <p> 要素を取得し、変数に代入しています。

---

const generateBtn = document.querySelector('#generateBtn');

▶ HTML上の「偽名を生成」ボタン要素を取得して、変数に代入しています。

---

function selectName(array) {

▶ 任意の配列からランダムに1つ値を選ぶ関数の定義が始まります。

---

  let i = Math.floor(Math.random() * array.length);

▶ 配列の要素数の範囲内でランダムな整数を作っています。

---

  return array[i];

▶ 選ばれたインデックスの要素（名前）を返します。

---

function makeFullName(firstName, lastName) {

▶ フルネーム（姓＋名）を作る関数の定義が始まります。引数で名前と苗字の配列を受け取ります。

---

  return `${selectName(lastName)} ${selectName(firstName)}`;

▶ ランダムに選ばれた苗字と名前を組み合わせて1つの文字列にして返します（姓と名の間にスペース）。

---

generateBtn.addEventListener('click', function () {

▶ ボタンがクリックされた時の処理を登録します。

---

  fakeName.textContent = makeFullName(firstName, lastName);

▶ 偽名を生成し、表示エリアにテキストとして表示します。

Web制作を学ぶならUdemy

HTML・CSS・JavaScriptの基本から本格的なWebアプリ制作まで学べます。

【世界で90万人が受講】Web Developer Bootcamp（日本語版）

※このリンクは広告です（アフィリエイトリンク）

📚 おすすめのUdemy講座について詳しく
👉 独学でWebアプリが作れる！初心者におすすめのUdemy講座【体験レビューあり】