Firebase Realtime DatabaseとReactでリアルタイムアプリを簡単に作る方法

npx create-react-app my-realtime-app
cd my-realtime-app

npm install firebase

my-realtime-app/
├── src/
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── firebase.js
├── public/
│   ├── index.html
│   └── ...
├── package.json
└── ...

npm start

// firebase.js
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Firebaseの初期化
const app = initializeApp(firebaseConfig);

export default app;

// src/index.js または任意のコンポーネントファイル
import firebaseApp from './firebase';

import { getDatabase, ref, set, onValue } from "firebase/database";

const database = getDatabase(firebaseApp);

function writeData(path, data) {
  const reference = ref(database, path);
  set(reference, data)
    .then(() => {
      console.log("Data written successfully!");
    })
    .catch((error) => {
      console.error("Error writing data: ", error);
    });
}

function readData(path, callback) {
  const reference = ref(database, path);
  onValue(reference, (snapshot) => {
    const data = snapshot.val();
    callback(data);
  });
}

writeData('/example', { name: "John", age: 30 });

readData('/example', (data) => {
  console.log("Data fetched: ", data);
});

import { getDatabase, ref, set } from "firebase/database";

const database = getDatabase();

function addData() {
  const reference = ref(database, 'users/user1');
  set(reference, {
    username: "john_doe",
    email: "john@example.com",
    age: 25
  })
    .then(() => {
      console.log("Data added successfully!");
    })
    .catch((error) => {
      console.error("Error adding data: ", error);
    });
}

import { getDatabase, ref, onValue } from "firebase/database";

const database = getDatabase();

function getData() {
  const reference = ref(database, 'users/user1');
  onValue(reference, (snapshot) => {
    const data = snapshot.val();
    console.log("Retrieved data: ", data);
  });
}

import { getDatabase, ref, update } from "firebase/database";

const database = getDatabase();

function updateData() {
  const reference = ref(database, 'users/user1');
  update(reference, {
    age: 26
  })
    .then(() => {
      console.log("Data updated successfully!");
    })
    .catch((error) => {
      console.error("Error updating data: ", error);
    });
}

import { getDatabase, ref, set } from "firebase/database";

const database = getDatabase();

function deleteData() {
  const reference = ref(database, 'users/user1');
  set(reference, null)
    .then(() => {
      console.log("Data deleted successfully!");
    })
    .catch((error) => {
      console.error("Error deleting data: ", error);
    });
}

import { getDatabase, ref, onValue } from "firebase/database";

const database = getDatabase();

function watchData(path) {
  const reference = ref(database, path);
  onValue(reference, (snapshot) => {
    const data = snapshot.val();
    console.log("Data updated: ", data);
  });
}

// 使用例
watchData('users/user1');

import React, { useState, useEffect } from 'react';
import { getDatabase, ref, onValue } from "firebase/database";

const RealtimeComponent = () => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const database = getDatabase();
    const reference = ref(database, 'users/user1');
    onValue(reference, (snapshot) => {
      setUserData(snapshot.val());
    });
  }, []);

  return (
    <div>
      <h1>リアルタイムユーザーデータ</h1>
      {userData ? (
        <div>
          <p>名前: {userData.username}</p>
          <p>年齢: {userData.age}</p>
        </div>
      ) : (
        <p>データを読み込み中...</p>
      )}
    </div>
  );
};

export default RealtimeComponent;

import React, { useState, useEffect } from 'react';
import { getDatabase, ref, onValue } from "firebase/database";

const RealtimeList = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const database = getDatabase();
    const reference = ref(database, 'items');
    onValue(reference, (snapshot) => {
      const data = snapshot.val();
      const itemList = data ? Object.entries(data).map(([id, value]) => ({ id, ...value })) : [];
      setItems(itemList);
    });
  }, []);

  return (
    <div>
      <h1>リアルタイムリスト</h1>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name}: {item.value}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default RealtimeList;

const [filter, setFilter] = useState('');

function filteredItems() {
  return items.filter(item => item.name.includes(filter));
}

return (
  <div>
    <input
      type="text"
      placeholder="検索"
      value={filter}
      onChange={(e) => setFilter(e.target.value)}
    />
    <ul>
      {filteredItems().map(item => (
        <li key={item.id}>
          {item.name}: {item.value}
        </li>
      ))}
    </ul>
  </div>
);

function deleteItem(id) {
  const reference = ref(database, `items/${id}`);
  set(reference, null);
}

function editItem(id, newValue) {
  const reference = ref(database, `items/${id}`);
  update(reference, { value: newValue });
}

// ボタンの追加
{items.map(item => (
  <li key={item.id}>
    {item.name}: {item.value}
    <button onClick={() => deleteItem(item.id)}>削除</button>
    <button onClick={() => editItem(item.id, '新しい値')}>編集</button>
  </li>
))}

{
  "messages": {
    "msg1": {
      "username": "Alice",
      "text": "Hello!",
      "timestamp": 1672345678901
    },
    "msg2": {
      "username": "Bob",
      "text": "Hi, Alice!",
      "timestamp": 1672345679901
    }
  }
}

import React, { useState } from 'react';
import { getDatabase, ref, push } from "firebase/database";

const ChatInput = () => {
  const [message, setMessage] = useState('');
  const [username, setUsername] = useState('User1');
  const database = getDatabase();

  const sendMessage = () => {
    if (message.trim() === '') return;
    const messageRef = ref(database, 'messages');
    push(messageRef, {
      username,
      text: message,
      timestamp: Date.now(),
    });
    setMessage('');
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Enter your message"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};

export default ChatInput;

import React, { useState, useEffect } from 'react';
import { getDatabase, ref, onValue } from "firebase/database";

const ChatMessages = () => {
  const [messages, setMessages] = useState([]);
  const database = getDatabase();

  useEffect(() => {
    const messageRef = ref(database, 'messages');
    onValue(messageRef, (snapshot) => {
      const data = snapshot.val();
      const messageList = data
        ? Object.entries(data).map(([id, value]) => ({ id, ...value }))
        : [];
      setMessages(messageList);
    });
  }, []);

  return (
    <div>
      <h2>Chat Messages</h2>
      <ul>
        {messages.map(msg => (
          <li key={msg.id}>
            <strong>{msg.username}:</strong> {msg.text} <em>({new Date(msg.timestamp).toLocaleTimeString()})</em>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ChatMessages;

import React from 'react';
import ChatInput from './ChatInput';
import ChatMessages from './ChatMessages';

const ChatApp = () => {
  return (
    <div>
      <h1>Realtime Chat App</h1>
      <ChatMessages />
      <ChatInput />
    </div>
  );
};

export default ChatApp;