{"id":689,"date":"2022-04-23T13:36:19","date_gmt":"2022-04-23T04:36:19","guid":{"rendered":"https:\/\/gallery.ntorelabo.com\/?p=689"},"modified":"2024-05-20T15:14:44","modified_gmt":"2024-05-20T06:14:44","slug":"web%e5%88%b6%e4%bd%9c%e4%bc%9a%e7%a4%be%e3%81%b8%e3%81%ae%e8%bb%a2%e8%81%b7%e6%b4%bb%e5%8b%95%e8%a8%98%e9%8c%b2","status":"publish","type":"post","link":"https:\/\/gallery.ntorelabo.com\/?p=689","title":{"rendered":"React\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb useState() Props"},"content":{"rendered":"\n

todo\u30ea\u30b9\u30c8<\/h2>\n\n\n\n

\u53c2\u8003\u30b5\u30a4\u30c8\uff1a
https:\/\/www.youtube.com\/watch?v=nRCNL9T3J98<\/a><\/p>\n\n\n\n

\u30ce\u30fc\u30c9js\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u78ba\u8a8d\u3001React\u3072\u306a\u578b\u4f5c\u6210<\/h3>\n\n\n\n
PS C:\\Users\\\u2026\\react-project> node -v\nv18.17.1\nPS C:\\Users\\\u2026\\react-project> npx create-react-app<\/strong> react-tutorial  <\/code><\/pre>\n\n\n\n
\u2192\u5b8c\u4e86\u3059\u308b\u3068Happy hacking!\u306e\u8868\u793a<\/p>\n\n\n\n
\u4e0d\u8981\u306a\u30d5\u30a1\u30a4\u30eb\u306e\u524a\u9664\\src\\App.test.js src\\logo.svg \\src\\reportWebVitals.js \\src\\setupTests.js<\/p>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210<\/h3>\n\n\n\n
\u25bc\\src\\TodoList.js\u3092\u4f5c\u6210<\/p>\n\n\n\n
VSCode\u30d7\u30e9\u30b0\u30a4\u30f3ES7+ React\/Redux\/React-Native \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3044\u308c\u3070rafce\u30bf\u30d6\u88dc\u5b8c<\/span>\u3068\u5165\u529b\u3059\u308c\u3070\u4e0b\u8a18\u306e\u3088\u3046\u306b\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u5165\u529b\u3055\u308c\u307e\u3059<\/p>\n\n\n\n
import React from 'react'\n\nexport const TodoList = () => {\n  return (\n    <div>TodoList<\/div>\n  )\n}<\/code><\/pre><\/div>\n\n\n\n
\u25bcApp.js\u3092\u7de8\u96c6<\/p>\n\n\n\n
\u30a4\u30f3\u30dd\u30fc\u30c8\u306e\u8a18\u8f09<\/p>\n\n\n\n
import { TodoList } from ".\/TodoList";\n\nfunction App() {\n  return (\n    <div className="App">\n      <TodoList \/>\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre><\/div>\n\n\n\n
\u5165\u529b\u6b04\u3001\u30dc\u30bf\u30f3\u4f5c\u6210<\/h3>\n\n\n\n
\u25bc.js<\/p>\n\n\n\n
import TodoList from \".\/TodoList\";\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <div>\n        <TodoList \/>\n        <input type=\"text\" \/>\n        <button>\u30bf\u30b9\u30af\u3092\u8ffd\u52a0<\/button>\n        <button>\u5b8c\u4e86\u3057\u305f\u30bf\u30b9\u30af\u306e\u524a\u9664<\/button>\n        <div>\u6b8b\u308a\u306e\u30bf\u30b9\u30af\uff1a0<\/div><\/span>\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
1\uff09useState\u3067\u72b6\u614b\u3092\u76e3\u8996\u2192\u5909\u66f4\u3067\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0
2\uff09props\u3067todos={todos}\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u9593\u306e\u30c7\u30fc\u30bf\u306e\u53d7\u3051\u6e21\u3057<\/strong><\/h3>\n\n\n\n
\u25bcApp.js<\/p>\n\n\n\n
import { useState } from \"react\";\nimport TodoList from \".\/TodoList\";\n\nfunction App() {\n  const [todos, setTodos] = useState([\"Todo1\", \"Todo2\"]);<\/span>\n\n  return (\n    <div className=\"App\">\n      <div>\n        <TodoList todos={todos}<\/span>\/>\n        <input type=\"text\" \/>\n        <button>\u30bf\u30b9\u30af\u3092\u8ffd\u52a0<\/button>\n        <button>\u5b8c\u4e86\u3057\u305f\u30bf\u30b9\u30af\u306e\u524a\u9664<\/button>\n        <div>\u6b8b\u308a\u306e\u30bf\u30b9\u30af\uff1a0<\/div>\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
\n
useState()<\/h4>\n\n\n\n
useState()<\/code>\u306f\u3001\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067state\u3092\u7ba1\u7406\uff08state<\/code>\u306e\u4fdd\u6301\u3068\u66f4\u65b0\uff09<\/p>\n\n\n\n
state<\/code>\u3068\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u5185\u90e8\u3067\u4fdd\u6301\u3059\u308b\u300c\u72b6\u614b\u300d<\/p>\n<\/div><\/div>\n\n\n\n
\u25bcTodoList.js<\/p>\n\n\n\n
import React from 'react'\n\nconst TodoList = ({ todos<\/span> }) => {\n  return (\n    <div>{todos<\/span>}<\/div>\n  )\n}\n\nexport default TodoList<\/code><\/pre>\n\n\n\n
Todo.js\u3092\u4f5c\u6210\uff08\u5404\u30bf\u30b9\u30af\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u304a\u304d\u304b\u3048\u308b\uff09<\/h3>\n\n\n\n
\u25bcTodoList.js<\/p>\n\n\n\n
import React from 'react';\nimport Todo from '.\/Todo';\n\nconst TodoList = ({ todos }) => {\n  return todos.map((todo) => <Todo todo={todo} \/>);<\/span>\n}\n\nexport default TodoList<\/code><\/pre>\n\n\n\n
\u25bcTodo.js<\/p>\n\n\n\n
import React from 'react'\n\nconst Todo = ({ todo }) => {\n  return (\n    <div>{todo}<\/div>\n  )\n}\n\nexport default Todo<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
todo\u3092\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3068\u3057\u3066\u7ba1\u7406<\/h3>\n\n\n\n
\u25bcApp.js<\/p>\n\n\n\n
function App() {\n  const [todos, setTodos] = useState([\n    { id: 1, name: \"Todo1\", completed: false },<\/span>\n  ]);<\/code><\/pre>\n\n\n\n
\u25bcTodo.js<\/p>\n\n\n\n
const Todo = ({ todo }) => {\n  return (\n    <div>{todo.name<\/span>}<\/div>\n  )\n}<\/code><\/pre>\n\n\n\n
\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u5b9f\u88c5\uff08\u30c1\u30a7\u30c3\u30af\u30aa\u30f3\u30aa\u30d5\u306f\u5f8c\u304b\u3089\u5b9f\u88c5\uff09<\/h3>\n\n\n\n
\u25bcTodo.js<\/p>\n\n\n\n
    <div>\n        <label>\n            <input type=\"checkbox\" checked={todo.completed} readOnly \/><\/span>\n        <\/label>\n        {todo.name}\n    <\/div><\/code><\/pre>\n\n\n\n
\u30bf\u30b9\u30af\u306e\u8ffd\u52a0\u3000
useRef\u3067\u8981\u7d20\u306e\u53d6\u5f97\uff08\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u304a\u3051\u308b\u30b9\u30d7\u30ec\u30c3\u30c9\u69cb\u6587\u306e\u8ffd\u52a0\uff09<\/h3>\n\n\n\n
\u25bcuseRef\u3067\u53d6\u5f97\u3057\u305f\u5185\u5bb9\u3092console.log()\u3067\u78ba\u8a8d<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u25bcApp.js<\/p>\n\n\n\n
import { useState, useRef<\/span> } from \"react\";\nimport TodoList from \".\/TodoList\";\n\nfunction App() {\n  const [todos, setTodos] = useState([\n    { id: 1, name: \"Todo1\", completed: false },\n  ]);\n\n  \/\/ useRef\u3067input\u306e\u5024\u3092\u53d6\u5f97\n  const todoNameRef = useRef();\n\n  \/\/ \u30bf\u30b9\u30af\u3092\u8ffd\u52a0\u3059\u308b\n  const handleAddTodo = () => {<\/span>\n\n    const name = todoNameRef.current.value;<\/span>\n\n    \/\/ \u7a7a\u767d\u306e\u30bf\u30b9\u30af\u3092\u751f\u6210\u3057\u306a\u3044\n    if(name === \"\") return;\n\n    \/\/ setTodos\u3067Todos\u306e\u5185\u5bb9\u3092\u66f4\u65b0\n    \/\/ \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u304a\u3051\u308b\u30b9\u30d7\u30ec\u30c3\u30c9\u69cb\u6587\u306e\u8ffd\u52a0\n    setTodos((prevTodos) => {\n      return [...prevTodos, { id: \"1\", name: name, completed: false }];\n    });\n\n    todoNameRef.current.value = null;\n  };<\/span>\n\n  return (\n    <div className=\"App\">\n      <div>\n        <TodoList todos={todos}\/>\n        <input type=\"text\" ref={todoNameRef}<\/span> \/>\n        <button onClick={handleAddTodo}>\u30bf\u30b9\u30af\u3092\u8ffd\u52a0<\/button>\n        <button>\u5b8c\u4e86\u3057\u305f\u30bf\u30b9\u30af\u306e\u524a\u9664<\/button>\n        <div>\u6b8b\u308a\u306e\u30bf\u30b9\u30af\uff1a0<\/div>\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
\u5bfe\u5fdc\uff09Warning: Each child in a list should have a unique “key” prop.<\/h3>\n\n\n\n
uuid\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h4>\n\n\n\n
\u30e6\u30cb\u30fc\u30af\u30ad\u30fc\u306e\u751f\u6210\u304c\u53ef\u80fd<\/p>\n\n\n\n
\nhttps:\/\/www.npmjs.com\/package\/uuid\n<\/div><\/figure>\n\n\n\n
\u25bcnpm install uuid<\/code>\u2192package.json\u306b\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u306e\u78ba\u8a8d\u304c\u3067\u304d\u307e\u3059<\/p>\n\n\n\n
  \"dependencies\": {\n    \"@testing-library\/jest-dom\": \"^5.17.0\",\n    \"@testing-library\/react\": \"^13.4.0\",\n    \"@testing-library\/user-event\": \"^13.5.0\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"react-scripts\": \"5.0.1\",\n    \"uuid\": \"^9.0.1\",<\/span>\n    \"web-vitals\": \"^2.1.4\"\n  },<\/code><\/pre>\n\n\n\n
\u25bcApp.js\u3092\u7de8\u96c6<\/p>\n\n\n\n
import { useState, useRef } from \"react\";\nimport { TodoList } from \".\/TodoList\";\nimport { v4 as uuidv4 } from 'uuid';<\/span>\n\nfunction App() {\n  const [todos, setTodos] = useState([\n    { id: 1, name: \"Todo1\", competed: false }\n  ]);\n\n  const todoNameRef = useRef();\n\n  const handleAddTodo = () => {\n    \/\/ \u30bf\u30b9\u30af\u3092\u8ffd\u52a0\n    const name = todoNameRef.current.value;\n    setTodos((prevTodos) => {\n      return [...prevTodos, { id: uuidv4()<\/span>, name: name, completed: false }]\n    });\n    todoNameRef.current.value = null;\n  };\n<\/code><\/pre>\n\n\n\n
\u25bcTodoList.js\u3092\u7de8\u96c6<\/p>\n\n\n\n
export const TodoList = ({ todos }) => {\n  return todos.map((todo) => <Todo todo={todo} key={todo.id<\/span>}\/>);\n}<\/code><\/pre>\n\n\n\n
\u521d\u671f\u5024\u3092\u304b\u3089\u884c\u5217\u306bApp.js<\/p>\n\n\n\n
function App() {\n  const [todos, setTodos] = useState([])<\/span>;\n<\/code><\/pre>\n\n\n\n
toggleTodo\u3067\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u7ba1\u7406<\/h3>\n\n\n\n
\u25bcApp.js\u3092\u7de8\u96c6<\/p>\n\n\n\n
\n  \/\/ \u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u64cd\u4f5c\n  const toggleTodo = (id) => {\n\n    \/\/ \u76f4\u63a5\u5024\u3092\u5909\u66f4\u3057\u306a\u3044\u70banewTodos\u306b\u30b3\u30d4\u30fc\u3057\u3066\u3044\u308b\n    const newTodos = [...todos];\n\n    \/\/ \u5f15\u6570\u306eid\u3068todo\u306eid\u304c\u4e00\u81f4\u3057\u305f\u3089\u3001completed\u3092\u53cd\u8ee2\n    const todo = newTodos.find((todo) => todo.id === id);\n    todo.completed = !todo.completed;\n    setTodos(newTodos);\n  };<\/span>\n\n  return (\n    <div className=\"App\">\n      <div>\n        <TodoList todos={todos} toggleTodo={toggleTodo}<\/span> \/>\n        <input type=\"text\" ref={todoNameRef} \/>\n        <button onClick={handleAddTodo}>\u30bf\u30b9\u30af\u3092\u8ffd\u52a0<\/button>\n        <button>\u5b8c\u4e86\u3057\u305f\u30bf\u30b9\u30af\u306e\u524a\u9664<\/button>\n        <div>\u6b8b\u308a\u306e\u30bf\u30b9\u30af\uff1a0<\/div>\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
\u25bcTodoList.js\u3092\u7de8\u96c6<\/p>\n\n\n\n
\nconst TodoList = ({ todos, toggleTodo }) => {\n  return todos.map((todo) => <Todo todo={todo} key={todo.id} toggleTodo={toggleTodo}<\/span> \/>);\n}<\/code><\/pre>\n\n\n\n
\u25bcTodo.js\u3092\u7de8\u96c6<\/p>\n\n\n\n
import React from 'react'\n\nconst Todo = ({ todo, toggleTodo <\/span>}) => {\n\n    const handleTodoClick = () => {\n        toggleTodo(todo.id);\n    };\n\n    return (\n        <div>\n            <label>\n                <input \n                    type=\"checkbox\" \n                    checked={todo.completed} \n                    readOnly \n                    onClick={handleTodoClick} <\/span>\n                \/>\n            <\/label>\n            {todo.name}\n        <\/div>\n    )\n}\n\nexport default Todo<\/code><\/pre>\n\n\n\n
\u6b8b\u308a\u306e\u30bf\u30b9\u30af\u306e\u6570\u3092\u3044\u308c\u308b<\/h3>\n\n\n\n
\u25bcApp.js\u3092\u7de8\u96c6<\/p>\n\n\n\n
\n    <div className=\"App\">\n      <div>\n        <TodoList todos={todos} toggleTodo={toggleTodo} \/>\n        <input type=\"text\" ref={todoNameRef} \/>\n        <button onClick={handleAddTodo}>\u30bf\u30b9\u30af\u3092\u8ffd\u52a0<\/button>\n        <button>\u5b8c\u4e86\u3057\u305f\u30bf\u30b9\u30af\u306e\u524a\u9664<\/button>\n        <div>\u6b8b\u308a\u306e\u30bf\u30b9\u30af\uff1a{todos.filter((todo) => !todo.completed).length}<\/span><\/div>\n      <\/div>\n    <\/div>\n<\/code><\/pre>\n\n\n\n
\u5b8c\u4e86\u3057\u305f\u30bf\u30b9\u30af\u306e\u524a\u9664<\/h3>\n\n\n\n
  \/\/ \u5b8c\u4e86\u3057\u305f\u30bf\u30b9\u30af\u306e\u524a\u9664\n  const handleClear = () => {\n    const newTodos = todos.filter((todo) => !todo.completed);\n    setTodos(newTodos);\n  }<\/span>\n\n  return (\n    <div className=\"App\">\n      <div>\n        <TodoList todos={todos} toggleTodo={toggleTodo} \/>\n        <input type=\"text\" ref={todoNameRef} \/>\n        <button onClick={handleAddTodo}>\u30bf\u30b9\u30af\u3092\u8ffd\u52a0<\/button>\n        <div>\u6b8b\u308a\u306e\u30bf\u30b9\u30af\uff1a{todos.filter((todo) => !todo.completed).length}<\/div>\n        <button onClick={handleClear}<\/span>>\u5b8c\u4e86\u3057\u305f\u30bf\u30b9\u30af\u306e\u524a\u9664<\/button>\n      <\/div>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
\u30ec\u30f3\u30bf\u30eb\u30b5\u30fc\u30d0\u3067\u516c\u958b<\/h2>\n\n\n\n
\u53c2\u8003\u30b5\u30a4\u30c8\uff1ahttps:\/\/zenn.dev\/kiriyama\/articles\/538face511307d<\/a><\/p>\n\n\n\n
\u25bcpackage.json\u3092\u7de8\u96c6<\/p>\n\n\n\n
{\n  \"homepage\": \"https:\/\/xx\/\",<\/code><\/pre>\n\n\n\n
\u25bc\\public.htaccess\u3092\u4f5c\u6210\uff08publick\u30d5\u30a9\u30eb\u30c0\u306b\u300c.htaccess\u300d\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\uff09<\/p>\n\n\n\n
Options -MultiViews\nRewriteEngine On\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteRule ^ index.html [QSA,L]<\/code><\/pre>\n\n\n\n
\u25bc\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3067\u4e0b\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3067\u30d3\u30eb\u30c9<\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n
build\u3068\u3044\u3046\u30d5\u30a9\u30eb\u30c0\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u3001\u305d\u306e\u4e2d\u8eab\u3092FTP\u3067\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/p>\n\n\n\n
\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u305f\u30b5\u30a4\u30c8\uff1ahttps:\/\/internet.mints.ne.jp\/react-todo\/<\/a><\/p>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n