PR

【コピペOK】JavaScriptで作るランダム挨拶アプリ｜名前を入力すると挨拶してくれる

【広告】

JavaScriptを使って、入力した名前に合わせてランダムに挨拶を表示するシンプルなアプリを作ってみます。
本記事では、サンプルコードをもとに、画面に名前を入力して挨拶を表示する仕組みをわかりやすく解説します。初心者の方でも手を動かしながら理解できる内容です。

ランダム挨拶アプリを使ってみよう

名前を入力してください。コンピュータが挨拶してくれます。

ランダム挨拶アプリの動き（処理の流れ）

  1. フォーム画面が表示されます。
  2. ユーザーが名前を入力して「OK」ボタンを押す。
  3. 名前を取得し、入力チェックを行う。
  4. 名前が入力されていない場合は、エラーメッセージが表示される。
  5. 名前が入力されていれば、ランダムで挨拶と敬称を選ぶ。
  6. 挨拶を表示するために、<p>タグを作成。
  7. 挨拶を画面に表示する。
  8. フォームの入力欄を空にする。
  9. 「もう一回」ボタンで再度入力画面に戻る。
  10. リセット処理が行われ、フォームが元の状態に戻る。

コードをチェックしてみよう

HTML・CSS・JavaScript を分けて解説します。
完成形のコードは一例ですので、スタイルなどは自由に変更してください。

HTML

<body>
  <div class="wrap">
    <p>コンピュータが挨拶してくれます</p>
    <form>
      <div class="label">
        <label for="inputName">お名前:</label>
      </div>
      <input type="text" id="inputName" maxlength="20" class="inputName" name="inputName" placeholder="名前を入力" />
      <button>OK</button>
    </form>

    <div id="resultArea" class="resultArea hide">
      <div id="greetArea" class="greetArea"></div>
      <div>
        <button id="resetBtn">もう一回</button>
      </div>
    </div>
  </div>
  <script src="./app.js"></script>
</body>

このHTMLは「ランダム挨拶アプリ」の画面構造を作る部分です。簡単に要素ごとに説明します。

1. 全体のラップ

<div class="wrap">
  • アプリ全体のコンテンツをまとめるコンテナ。CSSでサイズや余白を調整するためのものです。

2. 説明文

<p>コンピュータが挨拶してくれます</p>
  • アプリの簡単な説明。画面に常に表示されます。

3. 入力フォーム

<form>
  <div class="label">
    <label for="inputName">お名前:</label>
  </div>
  <input type="text" id="inputName" maxlength="20" class="inputName" name="inputName" placeholder="名前を入力" />
  <button>OK</button>
</form>
  • ユーザーが名前を入力するフォームです。
  • <label> と <input> を関連付けることで、アクセシビリティが向上します。
  • maxlength="20" は入力できる文字数の上限。
  • placeholder は入力欄に薄く表示されるヒント。
  • <button> は送信ボタン。クリックすると JavaScript で処理されます。

4. 結果表示エリア

<div id="resultArea" class="resultArea hide">
  <div id="greetArea" class="greetArea"></div>
  <div>
    <button id="resetBtn">もう一回</button>
  </div>
</div>
  • 挨拶メッセージを表示するエリア。
  • 初期状態では hide クラスで非表示になっています。
  • greetArea に挨拶文が表示され、resetBtn を押すと再度入力できるようにリセットされます。

5. JavaScriptの読み込み

<script src="./app.js"></script>
  • 挨拶をランダムに選ぶ処理や、フォーム送信・リセットの動作を実装した JavaScript ファイルを読み込んでいます。

まとめると、このHTMLは ユーザー入力→挨拶表示→リセット という流れの見た目と構造を作るための基本レイアウトです。

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrap {
  width: 100%;
  max-width: 400px;
  height: 400px;
  margin: 0 auto;
  font-size: 18px;
  padding: 20px;
}

p {
  margin-bottom: 30px;
}

form {
  margin-bottom: 40px;
}

.label {
  margin-bottom: 10px;
}

input {
  border: solid 1px #333;
  width: 240px;
  height: 40px;
  padding: 10px;
}

input:focus {
  box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.5);
}

button {
  padding: 10px;
  height: 40px;
}

.resultArea.hide {
  display: none;
}

.greetArea p {
  font-size: 1.6em;
  margin-bottom: 30px;
}

このCSSは「ランダム挨拶アプリ」の見た目を整えるためのスタイルです。要素ごとに簡単に解説します。

1. 全体の初期設定

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  • すべての要素の余白とパディングをリセット。
  • box-sizing: border-box で幅・高さにパディングやボーダーを含めるようにします。

2. アプリ全体のラップ

.wrap {
  width: 100%;
  max-width: 400px;
  height: 400px;
  margin: 0 auto;
  font-size: 18px;
  padding: 20px;
}
  • アプリの最大幅を400pxに制限。
  • 中央に配置するため margin: 0 auto。
  • 内側に20pxの余白を持たせています。
  • 基本の文字サイズは18px。

3. 段落とフォームの余白

p {
  margin-bottom: 30px;
}

form {
  margin-bottom: 40px;
}

.label {
  margin-bottom: 10px;
}
  • 段落やフォーム、ラベルの下に余白を設定して、見た目を整えています。

4. 入力欄

input {
  border: solid 1px #333;
  width: 240px;
  height: 40px;
  padding: 10px;
}

input:focus {
  box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.5);
}
  • 幅240px、高さ40pxのテキスト入力。
  • フォーカス時に薄い影がつき、どこに入力しているか分かりやすくしています。

5. ボタン

button {
  padding: 10px;
  height: 40px;
}
  • 高さ40pxで、文字周りに余白を設定。
  • フォーム送信ボタンとリセットボタン両方に適用されます。

6. 結果表示エリア

.resultArea.hide {
  display: none;
}
  • .hide クラスがついていると非表示になります。
  • JavaScriptで表示/非表示を切り替えます。

7. 挨拶メッセージ

.greetArea p {
  font-size: 1.6em;
  margin-bottom: 30px;
}
  • 挨拶文の文字サイズを少し大きくして見やすく。
  • 下に余白を持たせてリセットボタンと距離をとっています。

まとめると、このCSSは アプリ全体のレイアウト、入力欄やボタンのサイズ、挨拶表示の見やすさ を整えるための基本的なスタイルです。

JavaScript

const greets = ['こんにちは', 'おはようございます', '元気ですか', 'お疲れ様です', 'ごきげんよう'];

const endStr = ['さん', 'くん', 'ちゃん', '様', '殿'];

const form = document.querySelector('form');
const resultArea = document.querySelector('#resultArea');
const greetArea = document.querySelector('#greetArea');
const resetBtn = document.querySelector('#resetBtn');

const hello = (userName) => {
  const newP = document.createElement('p');
  let i = Math.floor(Math.random() * greets.length);
  let j = Math.floor(Math.random() * endStr.length);

  newP.textContent = greets[i];
  newP.textContent = `${greets[i]}\n${userName}${endStr[j]}`;
  newP.innerHTML = newP.textContent.replace(/\n/g, '<br>');

  greetArea.append(newP);
  resultArea.classList.remove('hide');
  form.elements.inputName.value = '';
};

form.addEventListener('submit', (e) => {
  e.preventDefault();
  greetArea.innerHTML = '';

  const inputName = form.elements.inputName.value.trim();
  if (!inputName) {
    alert('名前を入力してください');
    return;
  }
  hello(inputName);
});

const appReset = () => {
  resultArea.classList.add('hide');
  form.elements.inputName.value = '';
  greetArea.innerHTML = '';
};

resetBtn.addEventListener('click', appReset);

このJavaScriptは「ランダム挨拶アプリ」の動作を制御しています。初心者にも理解しやすいように丁寧に解説します。

1. 挨拶と敬称の配列を用意

const greets = ['こんにちは', 'おはようございます', '元気ですか', 'お疲れ様です', 'ごきげんよう'];
const endStr = ['さん', 'くん', 'ちゃん', '様', '殿'];
  • greets はランダムに表示する挨拶のリストです。
  • endStr は名前の後に付ける敬称のリストです。
  • 後で、ランダムに一つずつ選んで表示します。

2. HTMLの要素を取得

const form = document.querySelector('form');
const resultArea = document.querySelector('#resultArea');
const greetArea = document.querySelector('#greetArea');
const resetBtn = document.querySelector('#resetBtn');
  • document.querySelector() で HTML 上の要素を取得しています。
  • 取得した要素は後で操作（文字の表示や非表示切り替え）に使います。
  • それぞれの意味：
    • form → 名前を入力するフォーム
    • resultArea → 挨拶メッセージを表示する場所全体
    • greetArea → 挨拶文だけを入れる部分
    • resetBtn → 「もう一回」ボタン

3. 挨拶を表示する関数

const hello = (userName) => {
  const newP = document.createElement('p');
  let i = Math.floor(Math.random() * greets.length);
  let j = Math.floor(Math.random() * endStr.length);

  newP.textContent = `${greets[i]}\n${userName}${endStr[j]}`;
  newP.innerHTML = newP.textContent.replace(/\n/g, '<br>');

  greetArea.append(newP);
  resultArea.classList.remove('hide');
  form.elements.inputName.value = '';
};
3-1. document.createElement('p')
  • <p>タグを新しく作ります。
  • このタグの中に挨拶を表示します。
3-2. ランダムに選ぶ
let i = Math.floor(Math.random() * greets.length);
let j = Math.floor(Math.random() * endStr.length);
  • Math.random() は 0 以上 1 未満の小数を返します。
  • 配列の長さを掛けて Math.floor() で整数にすることで、ランダムなインデックスを作ります。
  • これで挨拶と敬称をランダムに選べます。

Math.random() の基本を解説しています👇

【JavaScript】Math.random()の使い方｜ランダムな数字を生成する基本をやさしく解説
JavaScript初心者向けに「Math.random()」の使い方をやさしく解説。0以上1未満のランダムな小数の生成から、整数のランダム抽選まで基本を丁寧に紹介。
dev.himadeshow.com
2025.06.07
3-3. テキストを入れる
newP.textContent = `${greets[i]}\n${userName}${endStr[j]}`;
newP.innerHTML = newP.textContent.replace(/\n/g, '<br>');
  • \n は改行文字ですが、HTMLではそのままでは改行になりません。
  • replace(/\n/g, '<br>') で <br> に変換して改行します。
  • こうして、挨拶と名前を改行して表示します。
3-4. 表示と入力欄のリセット
greetArea.append(newP);
resultArea.classList.remove('hide');
form.elements.inputName.value = '';
  • append(newP) で作った <p> を画面に追加。
  • .classList.remove('hide') で非表示だった結果エリアを表示。
  • 入力欄を空にして、次の入力に備えます。

4. フォーム送信時の処理

form.addEventListener('submit', (e) => {
  e.preventDefault();
  greetArea.innerHTML = '';

  const inputName = form.elements.inputName.value.trim();
  if (!inputName) {
    alert('名前を入力してください');
    return;
  }
  hello(inputName);
});
  • addEventListener('submit', …)
    フォーム送信時の処理を設定します。
  • e.preventDefault()
    ページがリロードされるのを防ぎます。
  • greetArea.innerHTML = ''
    前回の挨拶を消します。
  • form.elements
    フォーム内のすべての要素にアクセスするためのプロパティ。
  • inputName.value
    まずは、ユーザーが入力した名前の文字列を取得します。
  • trim()
    入力欄の前後に余計な空白があれば、それを取り除くメソッド。空白だけの入力を防ぎます。
  • if (!inputName)
    ここでは、inputName が空（つまり、名前が入力されていない）場合に true になります。
  • alert('名前を入力してください')
    ユーザーに名前が入力されていないことを通知するためのアラート。
  • return
    名前が入力されていなければ、その後の処理（挨拶表示）を行わないように、return で処理を終了させます。
  • hello(inputName)
    名前が正しく入力されていれば、hello() 関数を呼び出して挨拶を表示します。

5. リセットボタンの処理

const appReset = () => {
  resultArea.classList.add('hide');
  form.elements.inputName.value = '';
  greetArea.innerHTML = '';
};

resetBtn.addEventListener('click', appReset);
  • appReset() はアプリを最初の状態に戻す関数です。
  • 結果エリアを非表示にし、入力欄と挨拶を空にします。
  • resetBtn にクリックイベントを付けて、ボタンを押すとリセットされます。

まとめ

  • フォーム送信 → 名前をチェック → ランダムに挨拶表示
  • リセットボタン → 結果を消して最初の状態に戻す
  • greets と endStr の配列からランダムに選ぶのがポイント
  • textContent と <br> を組み合わせて改行表示

この流れを理解すると、「入力した名前にランダムに挨拶を返すアプリ」の仕組みがわかります。

【広告】
タイトルとURLをコピーしました