public function store(Request $request, ConversationGroup $conversationGroup): JsonResponse|RedirectResponse
{
    // バリデーション
    $request->validate([
        'message' => 'required|string|max:1000',
    ]);

    // ユーザー権限チェック
    if (!$conversationGroup->hasParticipant(Auth::id())) {
        abort(403, 'Unauthorized action.');
    }

    // メッセージ作成
    $message = new DirectMessage([
        'sender_id' => Auth::id(),
        'message' => $request->message,
    ]);

    $conversationGroup->messages()->save($message);
    $conversationGroup->touch(); // updated_atを更新

    // Ajax リクエストの場合は JSON レスポンスを返す
    if ($request->expectsJson() || $request->ajax()) {
        return response()->json([
            'success' => true,
            'message' => $message->load('sender'),
        ]);
    }

    // 通常のフォーム送信の場合はリダイレクト
    return redirect()->back();
}

import { useState, useEffect, useRef } from "react";
import { useForm } from "@inertiajs/react";
import axios from "axios";
import DirectMessage, { DirectMessageType } from "@/Components/DirectMessage";

// コンポーネント内
export default function Show({
    auth,
    conversationGroup,
    messages: initialMessages,
    participants,
}) {
    // メッセージの状態管理
    const [messages, setMessages] = useState<DirectMessageType[]>(initialMessages);
    const [sending, setSending] = useState(false);
    const messagesContainerRef = useRef<HTMLDivElement>(null);

    const { data, setData, errors, reset } = useForm({
        message: "",
    });

    // メッセージ送信処理
    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        
        if (!data.message.trim() || sending) {
            return;
        }
        
        setSending(true);
        
        try {
            // CSRFトークンの取得
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
            
            // APIでメッセージを送信
            const response = await axios.post(
                route("messages.store", conversationGroup.id), 
                data,
                {
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    }
                }
            );
            
            // 成功したら新しいメッセージを追加
            if (response.data && response.data.message) {
                const newMessage: DirectMessageType = {
                    ...response.data.message,
                    sender: auth.user
                };
                
                setMessages([...messages, newMessage]);
                reset("message");
            }
        } catch (error) {
            console.error('メッセージ送信エラー:', error);
        } finally {
            setSending(false);
        }
    };

    // メッセージが追加されたらスクロール位置を最下部に移動
    useEffect(() => {
        if (messagesContainerRef.current) {
            messagesContainerRef.current.scrollTop =
                messagesContainerRef.current.scrollHeight;
        }
    }, [messages]);

    // JSXの返却（省略）
}

// メニューの状態を管理
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [menuVisible, setMenuVisible] = useState(false);
const [animating, setAnimating] = useState(false);

// DOM要素への参照
const mobileMenuRef = useRef<HTMLDivElement>(null);
const mobileButtonRef = useRef<HTMLButtonElement>(null);

useEffect(() => {
    if (mobileMenuOpen) {
        // メニューを開く処理
        setMenuVisible(true);
        setAnimating(true);
        setTimeout(() => setAnimating(false), 300);
    } else if (menuVisible) {
        // メニューを閉じる処理
        setAnimating(true);
        setTimeout(() => {
            setMenuVisible(false);
            setAnimating(false);
        }, 300);
    }
}, [mobileMenuOpen]);

useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
        // ボタン自体のクリックは無視（トグル動作は別のハンドラで処理）
        if (
            mobileMenuRef.current && 
            !mobileMenuRef.current.contains(event.target as Node) &&
            mobileButtonRef.current &&
            !mobileButtonRef.current.contains(event.target as Node) &&
            menuVisible &&
            !animating
        ) {
            setMobileMenuOpen(false);
        }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
        document.removeEventListener("mousedown", handleClickOutside);
    };
}, [menuVisible, animating]);

<button
    className="l-header__mobile-button"
    onClick={toggleMobileMenu}
    aria-label="メニューを開く"
    ref={mobileButtonRef}  // ここでボタン要素を参照
>
    {/* ボタンの中身 */}
</button>

{menuVisible && (
    <div
        className={`l-header__mobile-menu ${
            mobileMenuOpen ? "menu-fade-in" : "menu-fade-out"
        }`}
        ref={mobileMenuRef}  // ここでメニュー要素を参照
    >
        {/* メニューの中身 */}
    </div>
)}

// 「田中さん」という名札を用意する
const 田中さんRef = useRef(null);

// 実際の生徒（HTML要素）に名札をつける
<div ref={田中さんRef}>田中</div>

// これで後から「田中さん」を見つけることができる
console.log(田中さんRef.current); // この生徒（div要素）を取得

// メニューとボタンの名札を用意
const mobileMenuRef = useRef(null);
const mobileButtonRef = useRef(null);

// 実際の要素に名札をつける
<button ref={mobileButtonRef}>メニュー</button>
<div ref={mobileMenuRef}>メニューの内容</div>

import { createContext, useContext } from "react";

const UserContext = createContext();

const ParentComponent = () => {
  const user = { name: "OZ", age: 18 };

  return (
    <UserContext.Provider value={user}>
      <ChildComponent />
    </UserContext.Provider>
  );
};

const ChildComponent = () => {
  const user = useContext(UserContext);
  return (
    <p>
      こんにちは！{user.name}くん！年齢は、{user.age}ですね！
    </p>
  );
};

export default ParentComponent;

import { useReducer } from "react";

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return initialState;
    default:
      throw new Error("不明なアクションです");
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  debugger;
  return (
    <div>
      <p>カウント：{state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>増やす</button>
      <button onClick={() => dispatch({ type: "decrement" })}>減らす</button>
      <button onClick={() => dispatch({ type: "reset" })}>リセット</button>
    </div>
  );
};

export default Counter;

const initialState = { count: 0 };

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

const [state, dispatch] = useReducer(reducer, initialState);

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

import React, { createContext, useReducer, useContext } from 'react';

// 初期状態とreducer関数
const initialState = [];
function reducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, action.payload];
    case 'remove':
      return state.filter((_, index) => index !== action.payload);
    default:
      throw new Error('Unhandled action type: ' + action.type);
  }
}

// Contextの作成
const TodoContext = createContext();

function TodoProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <TodoContext.Provider value={{ state, dispatch }}>
      {children}
    </TodoContext.Provider>
  );
}

function TodoList() {
  const { state, dispatch } = useContext(TodoContext);

  return (
    <div>
      <ul>
        {state.map((todo, index) => (
          <li key={index}>
            {todo} <button onClick={() => dispatch({ type: 'remove', payload: index })}>削除</button>
          </li>
        ))}
      </ul>
      <button
        onClick={() => dispatch({ type: 'add', payload: `新しいタスク ${state.length + 1}` })}
      >
        タスクを追加
      </button>
    </div>
  );
}

function App() {
  return (
    <TodoProvider>
      <TodoList />
    </TodoProvider>
  );
}

export default App;

const initialState = [];

function reducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, action.payload];
    case 'remove':
      return state.filter((_, index) => index !== action.payload);
    default:
      throw new Error('Unhandled action type: ' + action.type);
  }
}

const TodoContext = createContext();

function TodoProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <TodoContext.Provider value={{ state, dispatch }}>
      {children}
    </TodoContext.Provider>
  );
}

function TodoList() {
  const { state, dispatch } = useContext(TodoContext);

  return (
    <div>
      <ul>
        {state.map((todo, index) => (
          <li key={index}>
            {todo} <button onClick={() => dispatch({ type: 'remove', payload: index })}>削除</button>
          </li>
        ))}
      </ul>
      <button
        onClick={() => dispatch({ type: 'add', payload: `新しいタスク ${state.length + 1}` })}
      >
        タスクを追加
      </button>
    </div>
  );
}

import { useState } from "react";
import styled from "styled-components";

const StyledButton = styled.button`
  border-radius: 12px;
  border: none;
  display: block;
  width: 120px;
  height: 50px;
  margin: 20px auto;
  font-weight: bold;
  cursor: pointer;
  background-color: ${({ isActive }) => (isActive ? "green" : "red")};
  color: white;
  transition: background-color 0.3s;

  &:hover {
    opacity: 0.8;
  }
`;

const StyledExample = () => {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };
  return (
    <StyledButton isActive={isActive} onClick={handleClick}>
      クリックして色を変更
    </StyledButton>
  );
};

export default StyledExample;

import { useState } from "react";
import styled from "styled-components";

const ThemeButton = styled.button`
  background-color: ${(props) => (props.theme === "dark" ? "black" : "white")};
  color: ${(props) => (props.theme === "dark" ? "white" : "black")};
`;

const Example = () => {
  const [theme, setTheme] = useState("dark");
  const toggleTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark");
  };
  return (
    <ThemeButton theme={theme} onClick={() => toggleTheme()}>
      ボタン
    </ThemeButton>
  );
};
export default Example;

const PrimaryButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

const SecondaryButton = styled(PrimaryButton)`
  background-color: gray;
`;

import { useState } from "react";

const animals = ["Tiger", "Lion", "Elephant"];
// POINT filterメソッドの使い方
const Example = () => {
  const [filterVal, setFilterVal] = useState("");

  return (
    <>
      <h3>配列のフィルター</h3>
      <input
        type="text"
        value={filterVal}
        onChange={(e) => setFilterVal(e.target.value)}
        placeholder="動物の名前を入力してみてね"
      />
      <ul>
        {animals
          .filter((animal) => animal.includes(filterVal))
          .map((animal) => (
            <li key={animal}>{animal}</li>
          ))}
      </ul>
    </>
  );
};

export default Example;

import Profile from "./components/Profile";
import { useState } from "react";

const persons = [
  {
    name: "Alex",
    age: 20,
    hobbies: ["swimming", "reading"],
  },
  {
    name: "Bella",
    age: 25,
    hobbies: ["cooking", "painting"],
  },
  {
    name: "Chris",
    age: 18,
    hobbies: ["gaming", "music", "hiking"],
  },
];

const Example = () => {
  const [filterVal, setFilterVal] = useState("");

  return (
    <>
      <input
        type="text"
        value={filterVal}
        onChange={(e) => setFilterVal(e.target.value)}
        placeholder="名前を入力してみてね"
      />
      <ul>
        {persons
          .filter((person) => person.name.includes(filterVal))
          .map((person) => (
            <li key={person.name}>
              <Profile {...person} />
            </li>
          ))}
      </ul>
    </>
  );
};

export default Sample;

const Profile = ({ name, age, hobbies }) => {
  return (
    <div>
      <hr />
      <div>名前: {name}</div>
      <div>年齢: {age}</div>
      <div>
        <div>趣味:</div>
        <ul>
          {hobbies.map((hobby) => (
            <li key={hobby}>{hobby}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default Profile;

 <ul>
        {persons
          .filter((person) => person.name.includes(filterVal))
          .map((person) => (
            <li key={person.name}>
              <Profile {...person} />
            </li>
          ))}
      </ul>

<Profile name={person.name} age={person.age} hobbies={person.hobbies} />

<ul>
  {hobbies.map((hobby) => (
    <li key={hobby}>{hobby}</li>
  ))}
</ul>

const numbers = [1, 2, 3, 4, 5];

// 偶数のみを抽出
const evenNumbers = numbers.filter(function(element) {
  return element % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

const words = ['apple', 'banana', 'cherry', 'date'];

// インデックスが偶数の要素のみを抽出
const evenIndexWords = words.filter((_, index) => {
  return index % 2 === 0;
});

console.log(evenIndexWords); // ['apple', 'cherry']

const numbers = [1, 2, 3, 2, 1];

// 重複する要素を除去
const uniqueNumbers = numbers.filter((element, index, array) => {
  return array.indexOf(element) === index;
});

console.log(uniqueNumbers); // [1, 2, 3]

const sports = ["サッカー", "野球", "バスケ"];

const SportsList = () => {
  return (
    <>
      <h3>人気のスポーツ</h3>
      <ul>
        <li>{sports[0]}</li>
        <li>{sports[1]}</li>
        <li>{sports[2]}</li>
      </ul>
    </>
  );
};

export default SportsList;

const sports = ["サッカー", "野球", "バスケ"];

const SportsList = () => {
  const sportList = [];
  for (const sport of sports) {
    sportList.push(<li>{sport}</li>);
  }
  
  return (
    <>
      <h3>人気のスポーツ</h3>
      <ul>
        {sportList}
      </ul>
    </>
  );
};

const sports = ["サッカー", "野球", "バスケ"];

const SportsList = () => {
  return (
    <>
      <h3>人気のスポーツ</h3>
      <ul>
        {sports.map((sport) => (
          <li>{sport}</li>
        ))}
      </ul>
    </>
  );
};

const newArray = array.map((element, index, array) => {
  // 要素ごとに行いたい処理
  return element * 2; // 例: 各要素を2倍にする
});

const numbers = [1, 2, 3, 4];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6, 8]

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const upperCaseNames = users.map((user) => user.name.toUpperCase());
console.log(upperCaseNames); // ['ALICE', 'BOB', 'CHARLIE']

const newArray = array.filter((element) => {
  // 条件に合う場合のみ `true` を返す
  return element < 10;  // 例: 10未満の要素を抽出
});

const newArray = array.filter((element, index, array) => {
  // 条件式（真偽値を返す）
  return condition;
});

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8]

const foods = [
  { id: 1, name: "ハンバーガー", price: 800 },
  { id: 2, name: "ステーキ", price: 1500 },
  { id: 3, name: "サラダ", price: 600 }
];

const cheapFoods = foods.filter((food) => food.price <= 1000);
console.log(cheapFoods);
// [
//   { id: 1, name: "ハンバーガー", price: 800 },
//   { id: 3, name: "サラダ", price: 600 }
// ]

const foods = [
  { id: 1, name: "ラーメン", price: 800 },
  { id: 2, name: "カレー", price: 750 },
  { id: 3, name: "うどん", price: 600 }
];

const FoodList = () => {
  return (
    <>
      <h3>メニューリスト</h3>
      <ul>
        {foods.map((food) => (
          <li key={food.id}>
            {food.name}は{food.price}円です
          </li>
        ))}
      </ul>
    </>
  );
};

const foods = [
  { id: 1, name: "ハンバーガー", price: 800 },
  { id: 2, name: "ステーキ", price: 1500 },
  { id: 3, name: "サラダ", price: 600 },
];

{foods.map((food) => (
  <li key={food.id}>
    {food.name}は{food.price}円です
    {food.price <= 1000 && <span style={{color: 'red'}}> お買い得!</span>}
  </li>
))}

[
  <li key="1">ハンバーガーは800円です <span style={{color: 'red'}}> お買い得!</span></li>,
  <li key="2">ステーキは1500円です</li>,
  <li key="3">サラダは600円です <span style={{color: 'red'}}> お買い得!</span></li>
]

const TodoList = () => {
  const [todos, setTodos] = useState([
    "数学の宿題",
    "買い物",
    "部活"
  ]);

  const addTodo = () => {
    // リストの先頭に「新しいTodo」を追加
    setTodos(["新しいTodo", ...todos]);
  };

  return (
    <ul>
      {/* ❌ keyなしの場合 */}
      {todos.map((todo) => (
        <li>{todo}</li>
      )}
    </ul>
  );
};

// ✅ 修正後 keyありの場合
const [todos, setTodos] = useState([
  { id: 1, text: "数学の宿題" },
  { id: 2, text: "買い物" },
  { id: 3, text: "部活" }
]);

return (
  <ul>
    {todos.map((todo) => (
      <li key={todo.id}>{todo.text}</li>
    ))}
  </ul>

const students = [
  { id: 1, name: "田中" },
  { id: 2, name: "鈴木" },
  { id: 2, name: "佐藤" }  // ❌ 同じidは使えません！
];

const SchoolRoster = () => {
  const classA = [
    { number: 1, name: "田中" },
    { number: 2, name: "鈴木" },
    { number: 3, name: "佐藤" }
  ];

  const classB = [
    { number: 1, name: "山田" },
    { number: 2, name: "伊藤" },
    { number: 3, name: "渡辺" }
  ];

  return (
    <div>
      <div>
        <h3>1年A組</h3>
        <ul>
          {classA.map((student) => (
            <li key={student.number}>{student.name}</li>
          )}
        </ul>
      </div>
      
      <div>
        <h3>1年B組</h3>
        <ul>
          {classB.map((student) => (
            <li key={student.number}>{student.name}</li>
          )}
        </ul>
      </div>
    </div>
  );
};

div
├── ul（A組）
│   ├── li (key=1) 田中さん
│   └── li (key=2) 鈴木さん
└── ul（B組）
    ├── li (key=1) 山田さん  // 別の親要素なのでOK
    └── li (key=2) 伊藤さん  // 別の親要素なのでOK

// ❌ 良くない例
<li key={Math.random()}>{todo}</li>

// ✅ 良い例
<li key={todo.id}>{todo}</li>

// ❌ あまり良くない例
{todos.map((todo, index) => (
  <li key={index}>{todo}</li>
))}

// ✅ 良い例
{todos.map(todo => (
  <li key={todo.id}>{todo}</li>
))}

 {[<li>サッカー</li>, <li>野球</li>, <li>バスケ</li>]}

 <li>サッカー</li>
 <li>野球</li>
 <li>バスケ</li>

const Example = () => {
  let displayVal; // 表示用の変数を用意

  return (
    <input
      type="text"
      onChange={(e) => {
        displayVal = e.target.value; // 入力された値をdisplayValに代入
        console.log(displayVal); // 値をコンソールに表示して確認
      }}
    />
  );
};

export default Example;

import { useState } from 'react';

const Example = () => {
  const [displayVal, setDisplayVal] = useState(''); // 初期値は空文字

  return (
    <input
      type="text"
      onChange={(e) => {
        setDisplayVal(e.target.value); // 値を更新関数で変更
      }}
      value={displayVal} // 表示される値もdisplayValに依存
    />
  );
};

export default Example;

import React, { useState } from 'react';

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

  const handleClick = () => {
    console.log("クリック前のcount:", count);
    setCount(count + 1);
    console.log("クリック後のcount:", count);
  };

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={handleClick}>カウントを増やす</button>
    </div>
  );
}

export default Counter;

setCount((prevCount) => prevCount + 1);

const [user, setUser] = useState({ name: "OZ", age: 17 });

setUser((prevUser) => ({ ...prevUser, name: '新しい名前' }));

{ name: '新しい名前', age: 17 }

import { useState } from "react";
import ChildComponent from "./Childcomponent";

function ParentComponent() {
  const [count, setCount] = useState(0);
  const incrementCount = () => setCount(count + 1);

  return (
    <div>
      <h1>現在のカウント： {count}</h1>
      <ChildComponent count={count} />
      <button onClick={incrementCount}>ボタン</button>
    </div>
  );
}

export default ParentComponent;

import React from 'react';

function ChildComponent({ count }) {
  return (
    <div>
      <p>子コンポーネントでのカウント: {count}</p>
    </div>
  );
}

export default ChildComponent;

import { useState } from "react";

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

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

function App() {
  const [showCounter, setShowCounter] = useState(true);

  return (
    <div>
      <button onClick={() => setShowCounter(!showCounter)}>
        カウンターを{showCounter ? "隠す" : "表示する"}
      </button>
      {showCounter && <Counter />}
    </div>
  );
}

export default App;

import { useState } from "react";

function Counter({ count, countIncrement }) {
  return (
    <div>
      <h2>カウント：{count}</h2>
      <button onClick={countIncrement}>カウントを増やす</button>
    </div>
  );
}

function App() {
  const [count, setCount] = useState(0);
  const [showCounter, setShowCounter] = useState(true);

  const countIncrement = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <button onClick={() => setShowCounter(!showCounter)}>
        カウンターを{showCounter ? "隠す" : "表示する"}
      </button>
      {showCounter && <Counter count={count} countIncrement={countIncrement} />}
    </div>
  );
}

export default App;

const Example = () => {
  const clickHandler = () => {
    alert('ボタンがクリックされました。');
  }
  
  const clickHandler2 = () => {
    console.log('ボタンがクリックされました。');
  }

  return (
    <>
      <button onClick={clickHandler}>クリックしてね</button>
      <button onClick={clickHandler2}>クリックしてね</button>
    </>
  );
};

const InputEvents = () => {
  return (
    <div>
      <h3>コンソールを確認してください。</h3>
      <label>
        入力値のイベント：
        <input
          type="text"
          onChange={() => console.log("onChange検知")}
          onBlur={() => console.log("onBlur検知")}
          onFocus={() => console.log("onFocus検知")}
        />
      </label>
      <div>
        <label>
          入力値を取得：
          <input type="text" onChange={(e) => console.log(e.target.value)} />
        </label>
      </div>
      <div
        className="hover-event"
        onMouseEnter={() => console.log("カーソルが入ってきました。")}
        onMouseLeave={() => console.log("カーソルが出ていきました。")}
      >
        ホバーしてね！
      </div>
    </div>
  );
};

const sample1 = <h1 className="greet">こんにちは！</h1>;
console.log(sample1);

const sample1 = <h1 className="greet">こんにちは！</h1>;
console.log(sample1);

// 出力結果
{
  type: 'h1',
  props: {
    className: 'greet',
    children: 'こんにちは！'
  }
}

// 元のJSX
const sample1 = <h1 className="greet">こんにちは！</h1>;

// Babelが変換した後のコード
const sample1 = React.createElement(
  'h1',
  { className: 'greet' },
  'こんにちは！'
);

// 実際に生成されるオブジェクト
{
  type: 'h1',
  props: {
    className: 'greet',
    children: 'こんにちは！'
  }
}

// JSXの例
const sample2 = (
  <div className="container">
    <h1 className="title">こんにちは！</h1>
    <p className="text">JSXの勉強中です</p>
  </div>
);

// Babelによる変換後
const sample2 = React.createElement(
  'div',
  { className: 'container' },
  React.createElement('h1', { className: 'title' }, 'こんにちは！'),
  React.createElement('p', { className: 'text' }, 'JSXの勉強中です')
);

// 生成される実際のオブジェクト
{
  type: 'div',
  props: {
    className: 'container',
    children: [
      {
        type: 'h1',
        props: {
          className: 'title',
          children: 'こんにちは！'
        }
      },
      {
        type: 'p',
        props: {
          className: 'text',
          children: 'JSXの勉強中です'
        }
      }
    ]
  }
}

// 実際のHTML DOM
<div class="container">
  <h1 class="title">こんにちは！</h1>
  <p class="text">JSXの勉強中です</p>
</div>

// 仮想DOM（JavaScriptオブジェクト）
{
  type: 'div',
  props: {
    className: 'container',
    children: [
      {
        type: 'h1',
        props: {
          className: 'title',
          children: 'こんにちは！'
        }
      },
      {
        type: 'p',
        props: {
          className: 'text',
          children: 'JSXの勉強中です'
        }
      }
    ]
  }
}

import "./ColorComponent.css";

const ColorComponent = (props) => {
  return (
    <div className={`color-box ${props.colorClass}`}>
      <h3>This is a color box</h3>
    </div>
  );
};

export default ColorComponent;

import ColorComponent from "./ColorComponent";

const App = () => {
  return (
    <div>
      <ColorComponent colorClass="blue" />
      <ColorComponent colorClass="red" />
      <ColorComponent colorClass="green" />
    </div>
  );
};

export default App;

.color-box {
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.color-box.blue {
  background-color: #ADD8E6;
  color: #1E90FF;
}

.color-box.red {
  background-color: #FF6961;
  color: #DC143C;
}

.color-box.green {
  background-color: #90EE90;
  color: #006400;
}

const ColorComponent = ({ colorClass }) => {
  return (
    <div className={`color-box ${colorClass}`}>
      <h3>This is a color box</h3>
    </div>
  );
};

import "./ColorComponent.css";

const ColorComponent = ({ colorClass, size }) => {
  return (
    <div className={`color-box ${colorClass} ${size}`}>
      <h3>This is a color box</h3>
    </div>
  );
};

export default ColorComponent;

import ColorComponent from "./components/Child";

const App = () => {
  return (
    <div>
      <ColorComponent colorClass="blue" size="small" />
      <ColorComponent colorClass="red" size="large" />
      <ColorComponent colorClass="green" size="small" />
    </div>
  );
};

export default App;

.color-box {
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.color-box.blue {
  background-color: #add8e6;
  color: #1e90ff;
}

.color-box.red {
  background-color: #ff6961;
  color: #dc143c;
}

.color-box.green {
  background-color: #90ee90;
  color: #006400;
}

.color-box.small {
  width: 50%;
  height: 100px;
}

.color-box.large {
  width: 90%;
  height: 200px;
}

const user = {
  name: "OZ",
  age: 17,
  club: "badminton",
};

const name = user.name;
const age = user.age;

const { name, age } = user;

const name = "OZ"; // userから取り出されたname
const age = 17;    // userから取り出されたage

<ColorComponent colorClass="blue" size="large" />

props
├── colorClass: "blue"
└── size: "large"

const ColorComponent = ({ colorClass, size }) => {
  return (
    <div className={`color-box ${colorClass} ${size}`}>
      <h3>This is a color box</h3>
    </div>
  );
};

const colorClass = "blue"; // propsから取り出されたcolorClass
const size = "large";      // propsから取り出されたsize

import "./ColorComponent.css";

// Propsの分割代入とデフォルト値の設定
const ColorComponent = ({
  colorClass = "green",       // デフォルトで "green" を設定
  num,
  fn,
  isVisible = false,          // デフォルトで false を設定
  user = { name: "NoName", age: 0 }, // デフォルトのオブジェクト
}) => {
  return (
    <div className={`color-box ${colorClass}`}>
      <h3>This is a Color Box</h3>
      <p>Number: {num}</p>
      <p>Message: {fn("こんにちは！")}</p>
      <p>Visibility: {isVisible ? "Visible" : "Hidden"}</p>
      <p>User: {user.name}, Age: {user.age}</p>
    </div>
  );
};

export default ColorComponent;

import ColorComponent from "./ColorComponent";

const App = () => {
  const greet = (text) => {
    return `挨拶するね！ ${text}!`;
  };

  return (
    <div>
      <ColorComponent 
        colorClass="blue" 
        num={123} 
        fn={greet} 
        isVisible={true} 
        user={{ name: "OZ", age: 17 }} 
      />
    </div>
  );
};

export default App;

import ColorComponent from "./ColorComponent";

const App = () => {
  const user = { name: "OZ", age: 17 };
  const componentProps = {
    colorClass: "blue",
    num: 123,
    fn: (text) => `挨拶するね！ ${text}!`,
    isVisible: true,
    user,
  };

  return (
    <div>
      <ColorComponent {...componentProps} />
    </div>
  );
};

export default App;

const Hello = (props) => {
  // POINT propsは読み取り専用
  // props.name = 'Bob';
  // エラーが発生！

  return (
    <div>
      <h3>Hello {props.name}</h3>
    </div>
  );
};

export default Hello;

const Greeting = (props) => {
  return (
    <div>
      <h2>Welcome!</h2>
      <div>{props.children}</div>
    </div>
  );
};

export default Greeting;

<Greeting>
  <p>こんにちは！これがGreetingコンポーネントの内部に表示される内容です。</p>
</Greeting>

<div>
  <h2>Welcome!</h2>
  <div>
    <p>こんにちは！これがGreetingコンポーネントの内部に表示される内容です。</p>
  </div>
</div>

const Greeting = (props) => {
  return <h2>Hello, {props.name}!</h2>;
};

<Greeting name="OZ" />

const MessageBox = (props) => {
  return (
    <div className="message-box">
      <h3>メッセージ:</h3>
      <div>{props.children}</div>
    </div>
  );
};

<MessageBox>
  <p>これは重要なお知らせです！</p>
</MessageBox>

<MessageBox>
  <p>これは重要なお知らせです！</p>
</MessageBox>