【初心者向けReact入門】激シンプルなToDoリストの作り方を解説【概要編】

2022年12月25日2022年12月28日

当ページのリンクには広告が含まれています。

何かフロントエンドについて勉強したいと思い、最近Reactの勉強を始めました。

React入門の記事は大量にあるんですが、イマイチしっくり来なくて理解できてる気がしなかったので、Youtubeのハンズオン動画を見ながら勉強を進めてます。

その動画でToDoリストの作り方を解説していたので、それを見ながら実際に作ってみたものの、動画を見ながらだととにかくコードを書くことに精一杯で理解は追いついていない気がしてます。

そのため、本記事では動画で解説されていたToDoリストの詳細について自分なりに理解して、それをアウトプットしていこうと思います。

らけ

同じようにReactを勉強している人の参考になれば幸いです！

ソースコードはGitHubのリポジトリに置いてあるので、よかったら参考にどうぞ。

【ハンズオンとして使わせていただいたToDoリストの作り方を解説している動画はこちら】

本記事は、概要編とコンポーネント編の2部構成になっています。
今回は、全体の概要の解説がメインの『概要編』です。

タップできる目次

ToDoリストの概要

今回作成したToDoリストは非常にシンプル。

inputフォームに文字を入力してプラスボタンをクリックすると、項目が追加されます。

追加された項目は、チェックマークのボタンをクリックするとタスク完了としてグレーアウトし、ゴミ箱ボタンをクリックすると削除されます。

以下で実際にToDoリストを触ることができるので、一度触ってみるとわかりやすいかと思います。

サンプルプログラム – ToDoList

らけ

では、こちらのToDoリストについて、作り方を解説していきます。

プロジェクトの作成

まずは以下コマンドにてプロジェクトを作成します。

npx create-react-app todolist

らけ

この『todolist』はプロジェクト名なので、好きな名前でOKです。

npxコマンドを使うためにはnode.jsが必要なので、あらかじめインストールしておいてください。

プロジェクトの作成ができたら、todolistディレクトリ内で以下コマンドを実行して、正常に表示されることを確認します。

npm start

全体の構成と役割

プロジェクトの作成ができたら、次はソースコード全体の構成と、それぞれのファイルの役割について解説していきます。

らけ

最初はそれぞれのファイルの意味がわからないので、まずはここを抑えておきましょう。

構成の解説

今回のToDoリストは、以下のファイルおよびディレクトリで構成されています。

public/index.html
src/index.js
src/App.js
src/components

では、それぞれがどんな役割を持っているのか順に解説していきますね。

厳密にはApp.cssファイルでCSSの適用も行っていますが、こちらは普通のCSSなので、今回は割愛します。

【役割の解説①】public/index.html

まずはpublicディレクトリに入っているindex.htmlファイルです。

一般的にWebアプリケーションを作った際、ページが遷移します。

例えば、index.htmlがトップページ、login.htmlがログインページのような感じです。

しかし、Reactの場合、HTMLファイルはこのindex.htmlだけ使います。

このindex.htmlの中でJavascriptを使ってログインフォームやボタンなどを描画（レンダリング）することになります。

【役割の解説②】src/index.js

次にsrcディレクトリに入っているindex.jsファイルについてです。

このindex.jsが、index.html内にJavascriptを適用しているイメージです。

具体的な処理については後ほど解説します。

【役割の解説③】src/App.js

次にApp.jsファイルについてです。

App.jsは、これから作成するフォームやボタンなどの要素（コンポーネント）を取りまとめているファイルです。

このコンポーネントを取りまとめているApp.jsをindex.jsで呼び出しています。

【役割の解説④】src/components

今回componentsディレクトリには、コンポーネントと呼ばれるフォームやボタンなどの要素を入れています。

必ずしも「components」という名前にしないといけない訳ではありませんが、役割としてわかりやすいため推奨です。

今回は、

Title
InputForm
TodoList

これら3つのコンポーネントを使っています。

ソースコードの解説

ここからは、実際にソースコードの中身について解説していきます。

index関連ファイルの解説

まずはindex.jsファイルを見てみましょう。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

5行目の

const root = ReactDOM.createRoot(document.getElementById(‘root’));

こちらの行で、Reactをレンダリングする箇所を指定しています。

IDが「root」の要素を指定していますね。

ではこのrootというIDはどこにあるんでしょうか？

答えはindex.htmlです。

index.htmlファイルを見ると、以下のような記述がありますね。

<div id="root"></div>

このIDがrootのdiv要素に適用してることがわかります。

index.jsファイルに戻ります。

6行目で、取得したIDがrootのdiv要素に対してrender、つまりレンダリング（描画）しています。

そして、そのレンダリングの中身は以下の通り。

<React.StrictMode>
  <App />
</React.StrictMode>

『React.StrictMode』の厳密な意味についてはイマイチまだよくわかっていないのですが、これに囲まれたコンポーネントを呼び出すという動作をしています。

つまりここでは『App』を呼び出しているんです。

そして、このAppとは、App.js内で定義したAppメソッド（モジュール）のことです。

こちらは3行目の

import App from ‘./App’;

を見るとわかります。

『”./App”からAppをインポート』と書かれていますよね。

この”./App”とはApp.jsのことです。

つまり、App.js内のメソッドをAppとしてインポートしているんです。

基本的にJSファイルを呼び出す際”.js”などの拡張子は省略されます。

App.jsの解説

では次にApp.jsを見ていきましょう。

import {useState} from 'react';
import { InputForm } from './components/InputForm';
import {Title} from './components/Title'
import { TodoList } from './components/TodoList';

function App() {
  const [taskList, setTaskList] = useState([]);

  return (
    <div className="body">
      <Title />
      <InputForm taskList={taskList} setTaskList={setTaskList} />
      <TodoList taskList={taskList} setTaskList={setTaskList} />
    </div>
  );
}

export default App;

まずはざっくりと概要を見ていきましょう。

App.jsでは、Appというメソッドが定義されています。

そしてこのAppメソッドでは、クラス名がbodyのdiv要素をreturnしていますね。

つまり、index.jsでインポートしていたのはこのAppメソッドになります。

<React.StrictMode>
  <App />
</React.StrictMode>

このAppで呼び出している部分にAppメソッドのreturnされた値が入ることになります。

つまり、クラス名がbodyのdiv要素ですね。

そのため、returnされた値を反映させるとこうなります。

<React.StrictMode>
  <div className="body">
      <Title />
      <InputForm taskList={taskList} setTaskList={setTaskList} />
      <TodoList taskList={taskList} setTaskList={setTaskList} />
    </div>
</React.StrictMode>

同様に、div要素の中にあるTitle、InputForm、TodoListもreturnされた値を反映させることで、画面が作られていくってイメージですね。

また、最後に忘れてはいけないのがエクスポート処理。

export default App;

Appメソッドを他のファイルから呼び出せるようにエクスポートする設定になります。

らけ

index.jsでインポートしましたよね。
あのようにインポートして使うためには、このようにエクスポートの設定が必須となります。

useStateについて

Appメソッドの中で使われているこの1行。

const [taskList, setTaskList] = useState([]);

こちらはhooksと呼ばれるReact 16.8で新しく追加された機能です。

この1行をざっくり説明するとこんなイメージ。

taskList → 変数
setTaskList → taskList変数を操作するための関数
useState → 初期値の設定

useStateで宣言された変数（今回はtaskList）が他の変数と違う点は、setTaskList関数を使わないと値を変更することができない点です。

つまり、taskListの値を変えたければ、必ずsetTaskListを使う必要があるんです。

らけ

どのような値を入れるかはsetTaskList関数の引数で設定します。

右辺のuseStateで、hooksを使うことを宣言するとともに、初期値を設定します。

今回の場合、useState([])なので空配列が初期値となりますね。

らけ

このhooksをどのように活用していくのかは、それぞれのコンポーネントを解説している『コンポーネント編』で説明しますね。

useStateを使うときは、インポートを忘れないようにしましょう。

シンプルなToDoリストの作り方(概要編)のまとめ

今回、それぞれのファイルの役割と、ページを表示するindexファイルの解説、そしてindexファイルから呼び出されてコンポーネントを取りまとめているApp.jsの概要について解説してきました。

次回は、App.jsから呼び出されるそれぞれのコンポーネントについての中身、そしてコンポーネントの使い方について解説していきます。

らけ

まだ私自身もReactの勉強を始めたばかりなので、もし間違っている部分があればご指摘いただけると幸いです。