はじめに
今回はReactの入門のまとめをやっていきます。以下の動画を参考にしていますので、気になる人はご覧になって下さい。
【React入門】完全初心者OK！１から簡単なTodoアプリを作ってReactの１歩を踏み出してみよう ~Reactチュートリアル~
1,ひな形作成
ターミナルならどこでもよいですが以下のコマンドを作りたいフォルダの中に移動して作成してください。
$npx create-react-app <プロジェクト名>
そうしたらvscodeを開いて先ほど作った"react-turtorial"を開いていきましょう
以下のようなファイル構成になっていれば無事にダウンロードできています。
プロジェクト名
├── node_module
├── public
│ ├── favicon.ico#アイコンを作成したり定義したりするファイル
│ ├── index.html#一番最初に出てくるページのhtmlファイル
│ ├── logo192.png#もともと入っている画像
│ ├── logo512.png#上に等しく
│ ├── manifest.json#Webアプリケーションやブラウザ拡張機能の開発に使用されるJSONファイルです。 このファイルは、ア
│ └── robots.txt#robots.txtとは、収集されたくないコンテンツをGoogleといった検索エンジンによってクロールされないよう制御するファイルを指します
├── src
│ ├── App.css#App.jsの詳細設定を行っている。
│ ├── App.js#コンポーネント
│ ├── App.test.js#testするためのファイル。使わない
│ ├── index.css
│ ├── index.js#index.htmlとコンポーネント（今の段階ではApp.jsのみ）との橋渡し的なもの。
│ ├── logo.svg#使わない
│ ├── reportWebVital.js#使わない
│ └── setupTest.js#使わない
├── .gitignore
├── package-lock.json
├── package.json#reactの詳細情報が書かれている。標準ライブラリなどが入っている。ここで新たなライブラリなどを定義する
└── README.md
ファイルのないようについてはおいておいていったんローカル上で実際にwebを立ち上げてみましょう
$npx start
コマンド打ったら勝手に開きます
そうしましたら次にコンポーネントをいじっていきましょう。
2,コンポーネント編集と作成
コンポーネントとは
コンポーネントとは、英語で言うと部品という意味です。このコンポーネントはReactを扱ううえで非常に重要なものです。一つ一つの機能をコンポーネントにわけることにより、機能の新たな実装や編集を楽にすることができます。それがコンポーネントです。
コンポーネント編集
デフォルトではApp.jsというコンポーネントが付いており（App.jsのコンポーネントは少し特殊でありすべてのコンポーネントをまとめるコンポーネントです。そのため、App.jsの中にコンポーネントをさらに作成していろいろな機能を実装していきます。まとめると、すべてのコンポーネントをまとめるコンポーネントと覚えておいて下さい。）それらをいじることにより最初に実験を行っていきましょう。まずは、'Hello React'と画面に表示するように編集していきましょう。以下のようにコードを書き換えてください。
import './App.css';
function App() {
return (
<div className="App">
Hello React
</div>
);
}
export default App;
次にコンポーネントを作成していきましょう。
srcディレクトリに新しいファイルであるTodoList.jsxという名前のフォルダを作成しましょう。（拡張子は.jsでもいいですが.jsxにすると部品ということがわかりやすくなります。）そうしましたら以下のものを書くとポップアップが出るはずです
rafce
これが出てこない場合はreactの拡張機能である"ES7"をインストールしてください。
これの上のほうのポップアップをクリックすると以下のようなテンプレートを勝手に書いてくれます。
import React from 'react'
const TodoList = () => {
return (
<div>TodoList</div>
)
}
export default TodoList
これが出てきたら、App.jsとの接続ポイントを作ってあげます。以下のように記述して下さい。
import TodoList from "./TodoList"//ここを書く
import './App.css';
function App() {
return (
<div>
<TodoList/>//TodoListのコンポーネントを表示する
</div>
);
}
export default App;
そうしましたらしっかりとTodoListがwebに表示するか確認してください。
次に以下のようにinput属性とbuttonタグを追加してください
import TodoList from "./TodoList"
import './App.css';
function App() {
return (
<div>
<TodoList/>
<input type="text"/>
<button>タスクを追加</button>
<button>完了したタスクの消去1</button>
<div>完了したタスク:0</div>
</div>
);
}
export default App;
3,useState Hooksと変数渡し
今回はTodosオブジェクトの状態管理（オブジェクトの名前やid、完了ステータスなど）をhooksを使って行っていきます。hooksとは何ぞやという人は以下のリンクをご参照ください。
5分でわかるReact Hooks
今回はそのhooksの中でもusestate hooksを使っていきます。このuseState hooksは指定した変数に何かしら更新があった時に勝手にレンダリングしてくれるようなhooksです。以下のように記述してください。
import TodoList from "./TodoList";
import { useState } from "react";//hooksを引っ張ってくる
import './App.css';
function App() {
const [todos, setTodos] = useState(["Todo1","Todo2"]);//todosはオブジェクト名useState()の()内はtodosの初期値
return (
<div>
<TodoList/>
<input type="text"/>
<button>タスクを追加</button>
<button>完了したタスクの消去1</button>
<div>完了したタスク:0</div>
</div>
);
}
export default App;
次にこのuseState Hooksで定義した変数をTodoListに渡していきます。以下のように記述してください。
import TodoList from "./TodoList";
import { useState } from "react";
import './App.css';
function App() {
const [todos, setTodos] = useState(["Todo1","Todo2"]);
return (
<div>
<TodoList todos = {todos}/>//todosという名前でtodosを渡す
<input type="text"/>
<button>タスクを追加</button>
<button>完了したタスクの消去1</button>
<div>完了したタスク:0</div>
</div>
);
}
export default App;
import React from 'react'
const TodoList = ({todos}) => {//todosを読み取り
return (
<div>
{todos}//todosを表示。{}がなければそのまま表示されてしまう。
</div>
)
}
export default TodoList
4,Todoコンポーネントの作成
次に行っていくのがTodoコンポーネントの作成です。useState関数で定義したtodosを一つ一つ取り出してtodoコンポーネントに入れていきます。今回はmap関数を使って一つ一つ変数を入れていきます。以下のように記述してください。
import React from 'react'
import Todo from "./Todo"#Todoコンポーネントをひっぱてくる
const TodoList = ({todos}) => {//一つ一つTodoコンポーネントにオブジェクトを入れていく。
return todos.map((todo) => <Todo todo={todo} key={todo}/>)
}
export default TodoList
import React from 'react'
const Todo = ({todo}) => {
return (
<div>{todo.name}</div>
)
}
export default Todo
import TodoList from "./TodoList";
import { useState } from "react";
import './App.css';
function App() {
const [todos, setTodos] = useState([
{id:1, name:"Todo1", completed:false}
]);//todosを辞書型のオブジェクトに変更
return (
<div>
<TodoList todos = {todos}/>
<input type="text"/>
<button>タスクを追加</button>
<button>完了したタスクの消去1</button>
<div>完了したタスク:0</div>
</div>
);
}
export default App;
5,チェックボックスの追加とTodoListの追加
次にTodoリストには欠かせないチェックボックスを追加していきます。以下のように記述していきましょう
import React from 'react'
const Todo = ({todo}) => {
return (
<div>
<label>
<input type="checkbox" checked={todo.completed} readOnly/>
</label>
{todo.name}
</div>
)
}
export default Todo
以上のように記述することでtodoのチェックしたかしてないかのステータスをへんすうであるtodo.completedで指定することができます。
次にフォームで書き込んだタスクを追加するコードを書いていきます。以下のコードを書いてください。
import TodoList from "./TodoList";
import { useState, useRef} from "react";//useRef Hooksを引っ張ってくる。
import './App.css';
function App() {
const [todos, setTodos] = useState([
{id:1, name:"Todo1", completed:false}
]);
const todoNameRef = useRef();//useRef Hooksは要素を簡単に取得できる。
const handleAddTodo = () => {//タスク追加の関数
console.log(todoNameRef)
}
return (
<div>
<TodoList todos = {todos}/>
<input type="text" ref={todoNameRef}/>
<button onClick={handleAddTodo}>タスクを追加</button>
<button>完了したタスクの消去1</button>
<div>完了したタスク:0</div>
</div>
);
}
export default App;
このコードを書いた後にwebサイトのほうで何かを入力して追加ボタンを押すと、webページのコンソールを見てみると以下のようになっています。
以上の画面からtodoNameRefの中のcurrentの中のvalueにあることがわかります。そのため以下のように書き加えてください。
const handleAddTodo = () => {//タスク追加の関数
console.log(todoNameRef.current.value)
}
次に以下の関数を定義して、todoオブジェクトを追加していきましょう。
const handleAddTodo = () => {
const name = todoNameRef.current.value;
setTodos((prevTodos) => {//オブジェクトを追加するための関数。
return [...prevTodos, {id:"1",name:name,completed:false}];//スプレッド構文で新しいオブジェクトを追加する。右にある｛｝内のものが追加される
todoNameRef = null;//中身をリセット
});
};
6,uuidライブラリの導入
以上までのコードだとtodoのkeyがnameに入れられているので、同じ名前のtodoを入力するとwarningを吐いてしまいます。そのためuuidライブラリという完全ランダムなidを入れてくれるライブラリを入れていきたいと思います。
以下のサイトの通りに進めていきます。
uuid
コマンドプロンプトで以下のようにコマンドを売ってください。（vscode上でも構いません）
$npm install uuid
package.jsonにuuidが追加されていれば成功です。次に、App.jsにimportしていきましょう。ライブラリの使い方は各々のサイトに載っています。
import TodoList from "./TodoList";
import { useState, useRef} from "react";
import { v4 as uuidv4 } from "uuid";//ここ
import './App.css';
function App() {
const [todos, setTodos] = useState([
{id:1, name:"Todo1", completed:false}
]);
const todoNameRef = useRef();
const handleAddTodo = () => {
const name = todoNameRef.current.value;
setTodos((prevTodos) => {
return [...prevTodos, {id:uuidv4(),name:name,completed:false}];//ここ
});
todoNameRef = null;
};
return (
<div>
<TodoList todos = {todos}/>
<input type="text" ref={todoNameRef}/>
<button onClick={handleAddTodo}>タスクを追加</button>
<button>完了したタスクの消去1</button>
<div>完了したタスク:0</div>
</div>
);
}
export default App;
import React from 'react'
import Todo from "./Todo"
const TodoList = ({todos}) => {
return todos.map((todo) => <Todo todo={todo} key={todo.id}/>)<-ここ
}
export default TodoList
7,チェックボックスの完了未完了実装
今までの状態ですと、チェックボックスがtodoオブジェクトのcompleteステータスのままで切り替えができないためその切り替えができるコードを実装していきます。
import TodoList from "./TodoList";
import { useState, useRef} from "react";
import { v4 as uuidv4 } from "uuid";
import './App.css';
function App() {
const [todos, setTodos] = useState([
{id:1, name:"Todo1", completed:false}
]);
const todoNameRef = useRef();
const handleAddTodo = () => {
const name = todoNameRef.current.value;
setTodos((prevTodos) => {
return [...prevTodos, {id:uuidv4(),name:name,completed:false}];
});
todoNameRef = null;
};
const toggleTodo = (id) => {
const newTodos = [...todos];//todosをnewTodosに代入（todosは辞書であり、イミュータブルなものなのでいじりずらい。または、いじらないほうがいいため）
const todo = newTodos.find((todo) => todo.id === id);//find関数todoの中のtodo.idと引数できたidが一致するオブジェクトを見つける。
todo.completed = !todo.completed;//TrueならFalseにFalseならTrueにする。
setTodos(newTodos);//ステータスを更新
};
return (
<div>
<TodoList todos = {todos} toggleTodo={toggleTodo}/><-ここ
<input type="text" ref={todoNameRef}/>
<button onClick={handleAddTodo}>タスクを追加</button>
<button>完了したタスクの消去1</button>
<div>完了したタスク:0</div>
</div>
);
}
export default App;
import React from 'react'
import Todo from "./Todo"
const TodoList = ({todos ,toggleTodo}) => {
return todos.map((todo) => <Todo todo={todo} key={todo.id} toggleTodo = {toggleTodo}/>)//ここ
}
export default TodoList
import React from 'react'
const Todo = ({todo, toggleTodo}) => {
const handleTodoClick = () =>{//handleTodoClickを定義して
toggleTodo(todo.id);//toggleTodo関数を実行
}
return (
<div>
<label>
<input type="checkbox" checked={todo.completed} readOnly onChange={handleTodoClick}/><-変わった時にhandleTodoClickを実行
</label>
{todo.name}
</div>
)
}
export default Todo
8,残りのタスクの表示
<div>
<TodoList todos = {todos} toggleTodo={toggleTodo}/>
<input type="text" ref={todoNameRef}/>
<button onClick={handleAddTodo}>タスクを追加</button>
<button>完了したタスクの消去1</button>
<div>完了したタスク:{todos.filter((todo) => !todo.completed).length}</div> <!--Trueのものだけを抽出。今回はtodo.completedがTrueの時をfalseに変えてfalseの時をTrueに変えるため、実質falseのみを抽出していることになる
</div>
9,チェックしていないタスクの消去
以下のようにコードを書いてください。
const handleClear = () => {
const newTodos = todos.filter((todo) => !todo.completed);//これも先ほど同様チェックのついていないものだけを抽出する
setTodos(newTodos);//その抽出したものを更新する
}
return (
<div>
<TodoList todos = {todos} toggleTodo={toggleTodo}/>
<input type="text" ref={todoNameRef}/>
<button onClick={handleAddTodo}>タスクを追加</button>
<button onClick={handleClear}>完了したタスクの消去1</button>
<div>残りのタスク:{todos.filter((todo) => !todo.completed).length}</div>
</div>
);