Reactで静的ページに動的インタラクションを追加する方法を完全解説

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  return {
    props: { data },
  };
}

export default function Page({ data }) {
  return (
    <div>
      <h1>静的ページの例</h1>
      <p>{data.content}</p>
    </div>
  );
}

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`;

const Page = ({ data }) => (
  <div>
    <h1>{data.site.siteMetadata.title}</h1>
    <p>これはGatsbyの静的ページです。</p>
  </div>
);

export default Page;

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
    </div>
  );
}

export default Counter;

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <h1>カウント: {state.count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>増やす</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>減らす</button>
    </div>
  );
}

export default Counter;

import React, { useState } from 'react';

function ToggleMessage() {
  const [message, setMessage] = useState('こんにちは！');

  const handleClick = () => {
    setMessage((prevMessage) =>
      prevMessage === 'こんにちは！' ? 'さようなら！' : 'こんにちは！'
    );
  };

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={handleClick}>メッセージを切り替える</button>
    </div>
  );
}

export default ToggleMessage;

function List({ items }) {
  const handleClick = (item) => {
    alert(`${item}がクリックされました！`);
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item} onClick={() => handleClick(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
}

export default List;

function TextInput() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>入力されたテキスト: {text}</p>
    </div>
  );
}

export default TextInput;

import React, { useState, useEffect } from 'react';

function FetchData() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => console.error('エラー:', error));
  }, []);

  if (loading) {
    return <p>データを読み込み中...</p>;
  }

  return (
    <div>
      <h1>APIから取得したデータ</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default FetchData;

import axios from 'axios';
import React, { useState, useEffect } from 'react';

function FetchDataWithAxios() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => setData(response.data))
      .catch((error) => setError(error));
  }, []);

  if (error) {
    return <p>エラーが発生しました: {error.message}</p>;
  }

  return (
    <div>
      <h1>Axiosで取得したデータ</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default FetchDataWithAxios;

import useSWR from 'swr';

function FetchDataWithSWR() {
  const fetcher = (url) => fetch(url).then((res) => res.json());
  const { data, error } = useSWR(
    'https://jsonplaceholder.typicode.com/posts',
    fetcher
  );

  if (error) return <p>エラーが発生しました: {error.message}</p>;
  if (!data) return <p>データを読み込み中...</p>;

  return (
    <div>
      <h1>SWRで取得したデータ</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default FetchDataWithSWR;

/* styles.css */
.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in;
}

.fade-in.show {
  opacity: 1;
}

import React, { useState } from 'react';
import './styles.css';

function FadeIn() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>アニメーションをトグル</button>
      <div className={`fade-in ${show ? 'show' : ''}`}>
        <p>フェードインするテキスト</p>
      </div>
    </div>
  );
}

export default FadeIn;

import React from 'react';
import { useSpring, animated } from 'react-spring';

function SlideIn() {
  const styles = useSpring({
    from: { transform: 'translateX(-100%)' },
    to: { transform: 'translateX(0%)' },
  });

  return (
    <animated.div style={styles}>
      <h1>スライドインアニメーション</h1>
    </animated.div>
  );
}

export default SlideIn;

import React, { useState } from 'react';
import { motion } from 'framer-motion';

function FramerExample() {
  const [visible, setVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setVisible(!visible)}>トグル</button>
      {visible && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5 }}
        >
          <p>Framer Motionのアニメーション</p>
        </motion.div>
      )}
    </div>
  );
}

export default FramerExample;

import React from 'react';

function BlogList({ posts }) {
  return (
    <div>
      <h1>ブログ記事一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={`/posts/${post.id}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default BlogList;

import React, { useState, useEffect } from 'react';

function BlogPost({ id }) {
  const [post, setPost] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/posts/${id}`)
      .then((response) => response.json())
      .then((data) => setPost(data));
  }, [id]);

  if (!post) {
    return <p>記事を読み込み中...</p>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export default BlogPost;

import React, { useState, useEffect } from 'react';

function Comments({ postId }) {
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState('');

  useEffect(() => {
    fetch(`https://api.example.com/posts/${postId}/comments`)
      .then((response) => response.json())
      .then((data) => setComments(data));
  }, [postId]);

  const handleSubmit = (e) => {
    e.preventDefault();
    const comment = { text: newComment, postId };

    fetch(`https://api.example.com/comments`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(comment),
    })
      .then((response) => response.json())
      .then((data) => {
        setComments((prev) => [...prev, data]);
        setNewComment('');
      });
  };

  return (
    <div>
      <h2>コメント</h2>
      <ul>
        {comments.map((comment, index) => (
          <li key={index}>{comment.text}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newComment}
          onChange={(e) => setNewComment(e.target.value)}
        />
        <button type="submit">コメントを追加</button>
      </form>
    </div>
  );
}

export default Comments;