LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YushiYamamoto(らくらくサイト 開発者)

🚀 初心者でも作れる！HTML/JSで実装する「ラク子さんチャットアプリ」開発ガイド 💬

Posted at

【初心者でも簡単】HTMLとJavaScriptで作るシンプルチャットアプリ開発ガイド

こんにちは、@YushiYamamotoです！今回は、Webフロントエンド開発の基礎として最適な「HTMLとJavaScriptを使ったシンプルなチャットアプリケーション」の作り方をご紹介します。この記事を読めば、Webアプリケーション開発の基本的な流れを理解しながら、実際に動くチャットアプリを作ることができますよ。それでは早速始めましょう！🚀

See the Pen ラク子さんとチャット by Yushi Yamamoto (@yamamotoyushi) on CodePen.

チャットアプリの基本構造を理解しよう 🧩

チャットアプリケーションは、基本的に以下の要素で構成されています：

  1. ユーザーインターフェース（UI） - メッセージの表示エリアと入力フォーム
  2. メッセージの送受信機能 - ユーザー入力を処理し表示する機能
  3. スタイリング - 見た目を整えるCSS

シンプルなチャットアプリの構造は次のようなフローで動作します：

ユーザー入力 → メッセージ処理 → 画面表示 → 応答生成 → 画面表示

今回作成するアプリでは、サーバーサイドの実装は省略し、クライアントサイドだけで動作する簡易版を作ります。実際のチャットアプリでは、WebSocketなどを使ってリアルタイム通信を実装しますが、まずは基本を押さえましょう。

開発環境の準備 🛠️

まずは開発に必要なファイルを作成します。以下の3つのファイルを用意しましょう：

  1. index.html - HTMLの構造
  2. style.css - CSSでのスタイリング
  3. script.js - JavaScriptでの機能実装

Visual Studio Codeなどのエディタを使うと効率的に開発できます。

HTMLでチャットUIを構築する 📝

まずはindex.htmlファイルを作成し、チャットアプリのUIを構築します：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ラク子さんとチャット</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
</head>
<body>
  <div class="container">
    <div class="chat-container">
      <div class="user-bar">
        <div class="avatar">
          <img src="https://rakuraku-site.prodouga.com/img/RakuRaku.avif" alt="ラク子さん">
        </div>
        <div class="name">
          <span>ラク子さん</span>
          <span class="status">オンライン</span>
        </div>
      </div>
      <div class="conversation">
        <div class="conversation-container" id="messages">
          <!-- メッセージがここに表示されます -->
        </div>
      </div>
      <form id="message-form" class="conversation-compose">
        <input id="message-input" class="input-msg" name="input" placeholder="メッセージを入力" autocomplete="off" autofocus>
        <button class="send" type="submit">
          <i class="fa fa-paper-plane"></i>
        </button>
      </form>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

このHTMLでは、チャットアプリの基本的な構造を定義しています：

  • ヘッダー部分（タイトル表示）
  • メッセージ表示エリア
  • メッセージ入力フォームと送信ボタン

CSSでスタイリングする 🎨

次に、style.cssファイルを作成して、チャットアプリのデザインを整えましょう：

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

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.chat-container {
  width: 100%;
  max-width: 500px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 80vh;
}

.chat-header {
  background: #4a6fa5;
  color: white;
  padding: 15px;
  text-align: center;
}

.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f9f9f9;
}

.message {
  margin-bottom: 15px;
  padding: 10px 15px;
  border-radius: 20px;
  max-width: 80%;
  word-wrap: break-word;
}

.user-message {
  background-color: #e3f2fd;
  margin-left: auto;
  border-bottom-right-radius: 5px;
}

.bot-message {
  background-color: #f1f1f1;
  margin-right: auto;
  border-bottom-left-radius: 5px;
}

.chat-input {
  display: flex;
  padding: 15px;
  background: white;
  border-top: 1px solid #eee;
}

#messageInput {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 30px;
  outline: none;
  font-size: 16px;
}

#sendButton {
  background: #4a6fa5;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-left: 10px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 16px;
}

#sendButton:hover {
  background: #3a5a80;
}

このCSSでは、モダンでシンプルなチャットインターフェースを実現しています。特に注目すべき点は：

  • フレックスボックスを使用したレイアウト
  • ユーザーメッセージとボットメッセージの視覚的な区別
  • レスポンシブデザインの基本原則

JavaScriptで機能を実装する ⚙️

最後に、script.jsファイルを作成して、チャットの機能を実装します：

document.addEventListener('DOMContentLoaded', function() {
  // 要素の取得
  const messageInput = document.getElementById('messageInput');
  const sendButton = document.getElementById('sendButton');
  const messageArea = document.getElementById('messageArea');
  
  // 初期メッセージを表示
  addBotMessage('こんにちは！何か質問があればどうぞ！');
  
  // 送信ボタンのクリックイベント
  sendButton.addEventListener('click', sendMessage);
  
  // Enterキーでも送信できるようにする
  messageInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      sendMessage();
    }
  });
  
  // メッセージ送信関数
  function sendMessage() {
    const message = messageInput.value.trim();
    
    if (message !== '') {
      // ユーザーメッセージを表示
      addUserMessage(message);
      
      // 入力フィールドをクリア
      messageInput.value = '';
      
      // ボットの応答を生成（簡易版）
      setTimeout(() => {
        respondToMessage(message);
      }, 500);
    }
  }
  
  // ユーザーメッセージを表示する関数
  function addUserMessage(text) {
    const messageElement = document.createElement('div');
    messageElement.classList.add('message', 'user-message');
    messageElement.textContent = text;
    messageArea.appendChild(messageElement);
    
    // 最新のメッセージが見えるようにスクロール
    scrollToBottom();
  }
  
  // ボットメッセージを表示する関数
  function addBotMessage(text) {
    const messageElement = document.createElement('div');
    messageElement.classList.add('message', 'bot-message');
    messageElement.textContent = text;
    messageArea.appendChild(messageElement);
    
    // 最新のメッセージが見えるようにスクロール
    scrollToBottom();
  }
  
  // メッセージエリアを最下部にスクロールする関数
  function scrollToBottom() {
    messageArea.scrollTop = messageArea.scrollHeight;
  }
  
  // メッセージに応答する関数（簡易版）
  function respondToMessage(message) {
    // 簡単な応答ロジック
    const lowerMessage = message.toLowerCase();
    
    if (lowerMessage.includes('こんにちは') || lowerMessage.includes('hello')) {
      addBotMessage('こんにちは！今日はどのようなご用件ですか？');
    } else if (lowerMessage.includes('名前')) {
      addBotMessage('私はシンプルチャットボットです。よろしくお願いします！');
    } else if (lowerMessage.includes('天気')) {
      addBotMessage('申し訳ありませんが、天気情報は提供できません。');
    } else if (lowerMessage.includes('ありがとう')) {
      addBotMessage('どういたしまして！他に何かお手伝いできることはありますか？');
    } else {
      // デフォルトの応答
      addBotMessage('なるほど、興味深いですね。もう少し詳しく教えていただけますか？');
    }
  }
});

このJavaScriptコードでは、以下の機能を実装しています：

  1. ユーザー入力の処理
  2. メッセージの表示（ユーザーとボット）
  3. 簡易的な応答生成ロジック
  4. 自動スクロール機能

チャットアプリの動作確認 🔍

上記の3つのファイルを同じディレクトリに保存したら、index.htmlをブラウザで開いてみましょう。以下のような画面が表示され、メッセージのやり取りができるようになっているはずです：

チャットアプリの画面イメージ

チャットアプリの拡張アイデア 💡

基本的なチャットアプリができたら、以下のような機能を追加して拡張してみましょう：

  1. ユーザー名の設定 - チャット開始前にユーザー名を入力する機能
  2. タイムスタンプ - メッセージごとに送信時間を表示
  3. 絵文字サポート - 絵文字ピッカーの追加
  4. メッセージの保存 - LocalStorageを使ってメッセージ履歴を保存
  5. テーマ切り替え - ダークモード/ライトモードの切り替え機能

実際のチャットアプリへの発展 🚀

今回作成したのはクライアントサイドだけで動作する簡易版ですが、実際のチャットアプリを開発するには、以下の技術を組み合わせる必要があります：

  1. WebSocket - リアルタイム双方向通信
  2. Node.js - サーバーサイドの実装
  3. データベース - メッセージの永続化
  4. 認証機能 - ユーザー管理とセキュリティ

チャットアプリのアーキテクチャ図 📊

実際のチャットアプリケーションのアーキテクチャは以下のようになります：

+----------------+      WebSocket      +----------------+
|                ||                |
|  クライアント側  |                     |   サーバー側    |
|  (HTML/JS/CSS) |   HTTP/REST API    |   (Node.js)    |
|                ||                |
+----------------+                     +----------------+
                                              |
                                              | データの永続化
                                              v
                                       +----------------+
                                       |                |
                                       |   データベース   |
                                       |  (MongoDB等)   |
                                       |                |
                                       +----------------+

まとめ 📝

今回は、HTML、CSS、JavaScriptを使った簡単なチャットアプリケーションの作り方を紹介しました。この基本的な実装を理解することで、より高度なチャットアプリケーションの開発にも挑戦できるようになります。

特に重要なポイントは：

  • HTMLでUIの基本構造を作る
  • CSSでデザインを整える
  • JavaScriptで対話的な機能を実装する

実際のプロジェクトでは、WebSocketやNode.jsなどのサーバーサイド技術を組み合わせることで、より本格的なリアルタイムチャットアプリケーションを開発できます。

皆さんも是非、この記事を参考に自分だけのチャットアプリを作ってみてください！質問やコメントがあれば、お気軽にどうぞ。

それでは、楽しいコーディングライフを！👨‍💻✨

最後に：業務委託のご相談を承ります

私は、業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用し、レスポンシブなWebサイトやインタラクティブなアプリケーション、API連携など、幅広いニーズに対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、ぜひお気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 ポートフォリオ

🌳 らくらくサイト

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?