はじめに
最近フロントエンドのフレームワークを勉強しようと思い、Udemyで一通り勉強しました。
しかしどうも身についた気がしないのと、もう少し実践的なことをやりたいと思ったため、
@Sicut_study(Watanabe Jin)さんが公開しているReact100本ノックをやってみました。
前の記事
ルール
- React, TypeScriptを使う
- その他ツールやライブラリの使用は自由
作成するもの
TODOリストアプリを作成する
目的(抜粋)
TODOリストは複数のタスクを管理する必要があるため、状態管理の初歩を学ぶのに適しています。Reactを使用する場合、useStateやuseReducerなどのHooksを使って状態管理の方法を学ぶことができます
成功条件（抜粋）
1 1.入力フィールド: ユーザーがタスクを入力するためのテキストフィールドが存在する。タスク名が1文字以上でない場合はバリデーションする
2. 追加ボタン: 入力されたタスクをTODOリストに追加するためのボタン。
3. タスクリスト表示: 追加されたタスクがリストとして表示される。
4. 削除ボタン: 各タスクの隣には削除ボタンがあり、それをクリックすることで該当のタスクをリストから削除する
成果物
使用技術
- React 18.2.0
- TypeScript 4.9.5
- Chakra-UI 2.8.5
URL
キャプチャ
初期レイアウト
Closeボタンクリックでモーダルは閉じられます。
+ボタンクリック（タスク登録モーダルが表示される）
未入力でSaveをクリック（バリデーションエラーが表示される）
1文字以上入力されるとメッセージは消えます。
TODO追加後
チェックを入れて完了したタスクであることを示します。
×ボタンをクリックすると一覧から削除されます。
実装手順
プロジェクトのセットアップ
# React×TypeScriptのプロジェクト作成
npx create-react-app todo --template typescript
# ディレクトリ変更
cd todo
# Chakra-UIのインストール
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
# react-helmetのインストール
npm i react-helmet
コンポーネントの作成
リポジトリのsrcフォルダ配下をご確認ください。
デプロイ
NetlifyにGitHubを連携してデプロイ
さいごに
React100本ノックの第3弾であるTodoリストアプリを作成してみました。
以前学習教材でTodoリストを作成したことがあるため、表示機能、追加機能、削除機能はそちらから踏襲しました。
レイアウトについては前回に続いてChakra UIを使用し、特にモーダルの使い方については理解できたかなと思います。
Atomic Componentを意識してコンポーネント分割をしましたが、
モーダルで入力した内容はTODOリストを表示するコンポーネントに渡さなければならず、
その辺りの分割をどうしようか考えることに時間がかかりました。
問題の作成者は2時間で解答したとのことですが私は大体5~6時間かかったと思います。