Reactで作るTODOアプリ開発シリーズ第1回

このシリーズでは、Reactの基礎から実践的なTODOアプリの開発まで、段階的に学習していきます。最終的には、基本編~発展編を経て、データベース連携まで行える本格的なアプリケーションを完成させることが目標です!
それは早速ですが、シリーズ初投稿となる第1回では
Reactの基礎知識と開発環境の構築方法
を解説します。
Reactは現在、Webアプリケーション開発で最も人気のあるJavaScriptライブラリの一つです。Facebook(現Meta)が開発したこのライブラリは、コンポーネントベースの開発手法により、効率的で保守性の高いWebアプリケーションを作ることができます。
- Reactとは何か(仮想DOM、コンポーネントベース開発)
- Node.jsとnpmのインストール方法
- Create React Appでのプロジェクト作成
- 開発サーバーの起動と基本操作
- JSXの基本文法
- 初めてのコンポーネント作成


TODOアプリ開発シリーズのまとめ記事はこちら
Reactとは何か
Reactは、ユーザーインターフェース(UI)を構築するためのJavaScriptライブラリです。特に以下の特徴があります。
仮想DOM(Virtual DOM)
Reactの最大の特徴の一つが仮想DOMです。従来のWeb開発では、HTMLの要素を直接操作していましたが、Reactでは仮想的なDOMツリーを作成し、実際のDOMとの差分のみを更新します。
これにより、パフォーマンスが大幅に向上し、複雑なUIでもスムーズに動作するアプリケーションを作ることができます。
コンポーネントベース開発
Reactでは、UIを小さな部品(コンポーネント)に分割して開発します。例えば、TODOアプリであれば、
- TodoList(TODOリスト全体)
- TodoItem(個別のTODOアイテム)
- TodoForm(TODO追加フォーム)
開発環境の準備
それではここからは実際に手を動かしていきましょう。まずはReactでTODOアプリ開発を行うための「開発環境の準備」からです。
Node.jsのインストール
Reactの開発には、Node.jsが必要です。Node.jsは、JavaScriptをサーバーサイドで実行できるようにするプラットフォームです。
インストールが完了したら、ターミナル(コマンドプロンプト)を開いて、以下のコマンドを実行して確認します。
node --version
npm --version
Create React Appの使用
Reactプロジェクトを作成する最も簡単な方法が、Create React Appを使用することです。これは、Facebookが提供する公式のツールで、Reactアプリケーションの開発に必要な設定がすべて含まれています。
今回は、デスクトップ上でターミナルを開き、以下のコマンドを実行します。
npx create-react-app todo-app
このコマンドにより、以下のファイル構造が自動的に作成されます。
コマンドで自動作成されるファイル構造
todo-app/
├── node_modules/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
└── README.md
開発サーバーの起動
次に、以下のコマンドでプロジェクトディレクトリに移動します。
cd todo-app
続いて、以下のコマンドで開発サーバーを起動します。
npm start
このコマンドを実行すると、ブラウザが自動的に開き、http://localhost:3000
でReactアプリケーションが表示されます。


JSXの基本文法
ここからはいったんReactで使用する文法について解説をしていきます。その後、実際に手を動かしてTODOアプリ開発の第一歩目を踏み出しましょう。
JSXは、JavaScriptの中にHTMLライクな記法を書くことができるReactの拡張構文です。
基本的なJSX
function App() {
return (
<div className="App">
<h1>Hello, React!</h1>
<p>これはJSXで書かれたコンポーネントです。</p>
</div>
);
}
JSXの特徴
- className属性: HTMLの
class
ではなく、className
を使用 - 閉じタグ: すべての要素は閉じタグが必要(
<img />
のように自己終了タグも可能) - JavaScript式の埋め込み:
{}
を使ってJavaScriptの式を埋め込むことが可能
function App() {
const name = "React";
const items = ["アイテム1", "アイテム2", "アイテム3"];
return (
<div className="App">
<h1>Hello, {name}!</h1>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
【実践】初めてのコンポーネント作成
それでは、ここから実際に手を動かしてコンポーネントを作成してみましょう。
普段お使いのエディタでtodo-appディレクトリを開いたら、src
フォルダ内に新しいファイルを作成します。
1. TodoItemコンポーネントの作成
src/TodoItem.js
ファイルを作成し、以下のコードを記述します。
import React from 'react';
function TodoItem({ text, completed }) {
return (
<div className="todo-item">
<input
type="checkbox"
checked={completed}
readOnly
/>
<span style={{
textDecoration: completed ? 'line-through' : 'none'
}}>
{text}
</span>
</div>
);
}
export default TodoItem;
2. App.jsの修正
src/App.js
を以下のように修正します。
import React from 'react';
import './App.css';
import TodoItem from './TodoItem';
function App() {
return (
<div className="App">
<h1>React TODOアプリ</h1>
<div className="todo-list">
<TodoItem text="Reactを学ぶ" completed={false} />
<TodoItem text="TODOアプリを作る" completed={true} />
<TodoItem text="データベース連携" completed={false} />
</div>
</div>
);
}
export default App;
3. スタイルの追加
src/App.css
に以下のスタイルを追加します。
.App {
text-align: center;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
.todo-list {
margin-top: 20px;
}
.todo-item {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px;
border-bottom: 1px solid #eee;
}
.todo-item input[type="checkbox"] {
margin-right: 10px;
}
.todo-item span {
font-size: 16px;
}
動作確認
開発サーバーが起動している状態で、ブラウザを確認すると、以下のような表示が確認できます。


- 「React TODOアプリ」というタイトル
- 3つのTODOアイテム(チェックボックス付き)
- 2番目のアイテムが完了状態(取り消し線付き)
発展課題
基本を理解したら、ぜひ以下の課題に挑戦してみてください!
- 新しいTODOアイテムを追加する(ハードコーディングで)
- アイテムの表示順序を変更する(ハードコーディングで)
- 異なるスタイルを適用する
FAQ
まとめ
今回は、Reactの基礎知識と開発環境の構築について学習しました!
Reactは仮想DOMとコンポーネントベース開発により、効率的で保守性の高いWebアプリケーションを作ることができるJavaScriptライブラリです。
開発環境の準備から初めてのコンポーネント作成まで、実際に手を動かしながら学習することで、Reactの基本的な概念を理解することができました。



次回は、コンポーネントとJSXについてより詳しく学習していきます。コンポーネントの分割方法や、propsの受け渡しについて理解を深めていきましょう!
この記事が少しでもお役に立ったなら何よりです。次回もお楽しみに!
コメント