YMLib - React - チャットアプリ

チャットアプリ

2025/11/30

チャットアプリを作ってみます。

以下のコマンドでプロジェクトを作成します。

npm create vite@latest

コマンドプロンプトでコマンドを実行します。

>npm create vite@latest

> npx
> create-vite

|
o  Project name:
|  simple-chat
|
o  Select a framework:
|  React
|
o  Select a variant:
|  JavaScript
|
o  Use rolldown-vite (Experimental)?:
|  No
|
o  Install with npm and start now?
|  Yes
|
o  Scaffolding project in C:\...\simple-chat...
|
o  Installing dependencies with npm...

added 157 packages, and audited 158 packages in 9s

33 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
|
o  Starting dev server...

> simple-chat@0.0.0 dev
> vite

  VITE v7.2.4  ready in 865 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

ファイルを3追加します。 main.jsxは生成されたままです。

src/
  App.jsx
  main.jsx
  MessageList.jsx
  MessageInput.jsx

全体を制御するjsxです。

App.jsx

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:

import { useState } from "react";
import MessageList from "./MessageList";
import MessageInput from "./MessageInput";

function App() {
  const [messages, setMessages] = useState([]);

  const handleSend = (text) => {
    if (!text.trim()) return;

    setMessages((prev) => [
      ...prev,
      { id: Date.now(), text }
    ]);
  };

  return (
    <div style={{ padding: 20 }}>
      <h1>Simple Chat App</h1>
      <div style={styles.container}>
        <MessageList messages={messages} />
        <MessageInput onSend={handleSend} />
      </div>
    </div>
  );
}

const styles = {
  container: {
    width: 400,
    height: 500,
    border: "1px solid #ccc",
    display: "flex",
    flexDirection: "column",
    borderRadius: 8
  }
};

export default App;

メッセージを表示するjsxです。

MessageList.jsx

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

export default function MessageList({ messages }) {
  return (
    <div style={styles.list}>
      {messages.map((m) => (
        <div key={m.id} style={styles.msg}>
          {m.text}
        </div>
      ))}
    </div>
  );
}

const styles = {
  list: {
    flex: 1,
    overflowY: "auto",
    padding: 10
  },
  msg: {
    padding: 8,
    marginBottom: 6,
    background: "#f2f2f2",
    borderRadius: 6
  }
};

メッセージを入力するjsxです。

MessageInput.jsx

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:

import { useState } from "react";

export default function MessageInput({ onSend }) {
  const [text, setText] = useState("");

  const send = () => {
    onSend(text);
    setText("");
  };

  return (
    <div style={styles.inputArea}>
      <input
        style={styles.input}
        value={text}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={(e) => e.key === "Enter" && send()}
        placeholder="メッセージを入力"
      />
      <button onClick={send}
              style={styles.button}>送信</button>
    </div>
  );
}

const styles = {
  inputArea: {
    display: "flex",
    padding: 10,
    borderTop: "1px solid #ddd"
  },
  input: {
    flex: 1,
    padding: 8,
    marginRight: 8
  },
  button: {
    padding: "8px 12px"
  }
};

ブラウザでコマンドプロンプトに表示されているURLにアクセスしてみます。

メッセージ欄にこんにちわ！と入力して送信ボタンを押します。

上の欄に入力したメッセージが表示されました。

何個かメッセージを入力して送信してみます。

ブラウザをリロードすると入力したメッセージは消えました。

▲ PageTop ■ Home