【コピペで完成】JavaScriptだけで作る「ミニ相談チャットアプリ」

プロコム開発チーム

Web開発の学習では、「とりあえず動くものを作ってみる」ことが大きな自信につながります。今回は、HTML・CSS・JavaScript を1ファイルにまとめた“コピペするだけで動く”簡単アプリをご紹介します。

テーマは 「あなたの悩みに答えるミニ相談チャット」。
AIっぽい応答をランダムに返す仕組みなので、JavaScript の基本的な DOM 操作やイベント処理の理解にも役立ちます。

Contents

1 完成イメージ
2 コードをそのままコピペすれば動きます
3 動作のポイント
4 拡張アイデア
5 まとめ

完成イメージ

画面下部に入力欄
上部に会話ログが表示
入力したら即座に“AI風の返答”が返ってくる
スマホ表示にも対応

コードをそのままコピペすれば動きます

以下のコードを index.html にまるごと貼り付けるだけで起動します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>相談チャットアプリ</title>
<style>
  body {
    font-family: sans-serif;
    background: #f3f7ff;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  #chat {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
  }
  .msg {
    margin-bottom: 12px;
    line-height: 1.6;
  }
  .user { text-align: right; color: #0078ff; }
  .bot  { text-align: left;  color: #444; }

  #inputArea {
    display: flex;
    border-top: 1px solid #ccc;
    background: white;
  }
  #inputArea input {
    flex: 1;
    border: none;
    padding: 12px;
    font-size: 16px;
  }
  #inputArea button {
    border: none;
    padding: 12px 20px;
    background: #0078ff;
    color: white;
    font-size: 16px;
    cursor: pointer;
  }
</style>
</head>
<body>

<div id="chat"></div>

<div id="inputArea">
  <input id="textInput" type="text" placeholder="相談内容を入力..." />
  <button id="sendBtn">送信</button>
</div>

<script>
  const chat = document.getElementById('chat');
  const input = document.getElementById('textInput');
  const sendBtn = document.getElementById('sendBtn');

  // AI風のランダム返答
  const replies = [
    "それはとても大切な視点ですね。",
    "まずは一歩ずつ進めていけば大丈夫ですよ。",
    "気持ちを整理する時間も必要です。",
    "あなたの選択は間違っていません。",
    "もう少し詳しく教えていただけますか？",
    "それについて、あなたはどう感じていますか？"
  ];

  function addMessage(text, type) {
    const div = document.createElement('div');
    div.className = `msg ${type}`;
    div.textContent = text;
    chat.appendChild(div);
    chat.scrollTop = chat.scrollHeight;
  }

  function botReply() {
    const reply = replies[Math.floor(Math.random() * replies.length)];
    addMessage(reply, 'bot');
  }

  function send() {
    const text = input.value.trim();
    if (!text) return;

    addMessage(text, 'user');
    input.value = "";

    setTimeout(botReply, 500);
  }

  sendBtn.addEventListener('click', send);
  input.addEventListener('keypress', e => {
    if (e.key === 'Enter') send();
  });
</script>

</body>
</html>