【React入門】未経験からReactを学んで最初のTODOアプリを作った話

はじめに

こんにちは、優也@月収100万を目指して月100時間勉強する男 です。

32歳でフリーランスのWebエンジニアとして独立し、月収100万円を目指して日々学習を続けています。これまでバックエンド(Java)を中心にやってきましたが、フルスタックエンジニアを目指してフロントエンド技術の習得に挑戦中です。

今回は、React学習の第一歩として、シンプルなTODOアプリを作成しました。この記事では、なぜTODOアプリを選んだのか、どんな学習プロセスを経て完成させたのか、そして作ってみて分かったことをリアルに共有します。

なぜReactを学ぼうと思ったのか

フリーランスとして独立した今、バックエンドだけでは案件の幅が限られると感じました。

• 案件の単価アップ: フルスタックで対応できれば、より高単価な案件が狙える
• 市場価値の向上: モダンなフロントエンド技術は需要が高い
• 個人開発の実現: 自分でサービスを作る場合、フロントエンドは必須

バックエンドエンジニアとしての経験はありますが、フロントエンドは正直ほぼ未経験。JavaScriptは読めるけど、Reactのようなライブラリは触ったことがない状態からのスタートでした。

なぜ最初のアプリにTODOアプリを選んだのか

Reactの学習を始めるにあたって、公式チュートリアル(三目並べ)は一通り終えました。でも、「次に何を作ろう?」と悩みました。

そこで選んだのがTODOアプリです。理由は以下の通り:

1. Reactの基本がすべて詰まっている

• useState: データ管理の基本
• イベントハンドラ: ユーザー操作への対応
• リストレンダリング: 繰り返し処理
• 配列操作: 追加・削除・更新

シンプルながらも、Reactで必要な技術がひと通り学べます。

2. 完成イメージが明確

TODOアプリは誰でも知っている機能なので、「何を作るべきか」で悩まずに、「どう実装するか」に集中できました。

3. 段階的に機能追加できる

最初は表示だけ、次に追加機能、その次に削除機能…というように、少しずつレベルアップできるのも魅力でした。

学習の進め方

私の学習プロセスはこんな感じでした:

Step 1: 公式チュートリアルを完走(約3時間)

まずはReact公式の三目並べチュートリアルを実施。ここでuseStateの基本とコンポーネントの考え方を理解しました。

Step 2: TODOアプリの設計(約30分)

作る前に、どんな機能が必要か整理しました:

• タスクの一覧表示
• タスクの追加
• タスクの削除
• タスクの完了

最初から全部作ろうとせず、まずは「表示」と「追加」だけに絞りました。

Step 3: 実装開始(約2時間)

最初は表示だけのシンプルなバージョンから始めて、徐々に機能を追加していきました。

最初のバージョン:

• 初期データを表示するだけ

2回目の更新:

• タスク追加機能を実装

3回目の更新:

• 削除機能を追加

4回目の更新:

• 完了機能を追加(完了タスクを別リストに移動)

作ってみて詰まったポイント

正直に言うと、めちゃくちゃ詰まりました。特に印象的だったのが以下の3つです。

1. e.value vs e.target.value

入力欄の値を取得しようとして、最初は e.value と書いていました。

const handleInputTask = (e) => {
  setInputTask(e.value);  <em>// ❌ 動かない!</em>
};

const handleInputTask = (e) => {
  setInputTask(e.value);  <em>// ❌ 動かない!</em>
};

正しくは e.target.value でした。

const handleInputTask = (e) => {
  setInputTask(e.target.value);  <em>// ✅ これが正解</em>
};

const handleInputTask = (e) => {
  setInputTask(e.target.value);  <em>// ✅ これが正解</em>
};

JavaScriptのイベントオブジェクトの基本なのですが、Reactだと少し書き方が違うのかと勘違いしていました。

2. stateの更新タイミング

stateを更新してもすぐには反映されない、というReactの特性に戸惑いました。

setTasks([...tasks, newTask]);
console.log(tasks);  <em>// まだ更新されていない!</em>

setTasks([...tasks, newTask]);
console.log(tasks);  <em>// まだ更新されていない!</em>

これはReactのstateが非同期で更新されるためです。最初は「バグかな?」と思いましたが、Reactの仕様だと理解してからは納得できました。

3. ID生成のロジック

タスクにユニークなIDを付ける必要がありましたが、どう実装するか悩みました。

最終的には、以下のようにシンプルな方法にしました:

const id = tasks.length === 0 
  ? 1 
  : Math.max(...tasks.map(task => task.id)) + 1;

const id = tasks.length === 0 
  ? 1 
  : Math.max(...tasks.map(task => task.id)) + 1;

配列が空なら1、そうでなければ最大ID + 1という方法です。

完成したTODOアプリ

最終的に完成したのは以下の機能を持つアプリです:

• ✅ タスクの追加
• ✅ タスクの削除
• ✅ タスクの完了(完了リストへ移動)
• ✅ 未完了タスクと完了タスクを分けて表示

コード行数は約80行程度。シンプルですが、Reactの基本はしっかり詰まっています。

作ってみて分かったこと

1. Reactは思ったよりシンプル

最初は「難しそう」と身構えていましたが、基本的な考え方はシンプルでした:

• データ(state)が変わる → 画面が自動で更新される

この仕組みを理解すれば、あとは普通のJavaScriptです。

2. 小さく作って徐々に機能追加が正解

最初から完璧なものを作ろうとせず、動くものを作ってから機能を追加していく方が、理解も深まるし挫折しにくいです。

3. 実際に作ることの重要性

チュートリアルを見るだけと、自分で考えながら作るのでは、理解度が全然違います。エラーに遭遇して解決する過程で、より深く学べました。

これから学びたいこと

TODOアプリを作って、Reactの基本は掴めました。次のステップとしては:

• localStorage対応: リロードしてもデータが消えないように
• スタイリング: Tailwind CSSで見た目を整える
• TypeScript導入: 型安全なコードに
• Next.jsへの移行: よりモダンな開発体験を

そして最終的には、実案件で使えるレベルまで技術を磨いていきたいと思っています。

まとめ

React未経験から約5時間の学習で、シンプルながら動作するTODOアプリを作ることができました。

ポイント:

• 公式チュートリアルで基礎を学ぶ
• TODOアプリは初心者に最適な教材
• 小さく作って徐々に機能追加
• 実際に手を動かすことが最も重要

この記事が、これからReactを学ぼうとしている方の参考になれば嬉しいです。

次回は、このTODOアプリの実装を詳しく解説していきます。Viteのセットアップから始めて、一緒に作っていきましょう!

この記事のシリーズ:

1. 【React入門】未経験からReactを学んで最初のTODOアプリを作った話 ← 今ここ
2. 【2025年版】Viteで始めるReact開発環境の構築方法(次回)

あとがき

月100時間の学習時間の中で、今月はReactに集中して取り組んでいます。Instagramでは、Instagramでは、フリーランスとして月収100万円を目指す道のりを、リアルタイムで発信していきますので、ぜひフォローしてください!