はじめに 4ヶ月ほど前に初めてTodoアプリを作成しました。（こちらの記事）当時は、Reactの公式チュートリアルを終えたばかりで、手探り状態でなんとか完成させたという感じでした。 あれから時間も経ち、色々学習を進めたのでその時の経験を踏まえ、さらに学びを深めるためにもう一度Todoアプリを作成してみましたので、作業ログを残しておきます。 使用する技術 React Typescript CSS tailwind Recoil 仕様 Todoに持たせる情報 ID タイトル ステータス の3つ 機能 Todoを追加できる Todoを削除できる Todoを編集できる Todoを絞り込んで表示できる Todoの数を表示する 環境設定 PCはMacで node.jsやnpmはインストールしている前提で進めます。 react-create-app や vite といった時短で環境構築ができるものもあり

はじめに React の勉強をしていて、イベントハンドラーの中でe.preventDefault() という処理が出てきたので、理解のために調べてみたものをまとめます。 e.preventDefault()とは e.preventDefault()は、ブラウザが元々持っている特定のイベントの動作を、動作させないようにするもの。 例えば、フォームを送信する際に、ブラウザのデフォルトの挙動だと送信時にページがリロードされてしまいます。（一瞬画面がチラつく） const handleSubmit = (e) => { e.preventDefault(); // フォーム送信の処理 }; e.preventDefault()　　を入れることで、リロードすることを防ぐことができました。 フォームを送る時以外にも例えば、リンクをクリックした時にリンク先に遷移することを防ぎたい時にも使えます。 con

はじめに 分割代入はJavaScriptの機能で、オブジェクトのプロパティを個別の変数として取り出すことができる機能です。例えば const user = { name: 'Bob', age: 20 }; // これを name = 'Bob', age = 20 という変数として取り出したい場合以下のようにして取ることができる const name = user.name const age = user.age // これを分割代入を使うことで、以下のように変数を定義できる const { name, age } = user; console.log(name); // 'Bob' console.log(age); // 20 これ位であればわかりやすいのですが、　Reactのpropsや、typescriptの型情報、別名での変数名定義などが組み合わさった複雑な構造をしていると

はじめに React の useEffect を学習中に、副作用について「副作用とは、コンポーネントのレンダリングに直接関係しないが、実行する必要がある処理のことを指す。」という説明を見て、そもそもコンポーネントのレンダリングについて理解が曖昧だったため、通常のレンダリングと、副作用の違いについて調べて整理してみます。 レンダリング とは Reactがコンポーネントの内容をブラウザの画面に表示するプロセスのこと。 具体的には、次のような流れになります 初期レンダリング コンポーネントが最初にマウントされたときに、Reactはコンポーネントのrenderメソッドや関数コンポーネントの内容を実行し、その結果を仮想DOMに描画します。 その後、仮想DOMと実際のDOMを比較し、必要な変更を実際のDOMに反映させます。 再レンダリング コンポーネントの状態（state）やプロパティ（props）が

useEffecttとは useEffectは、Reactのフックの一つで、関数コンポーネントにおいて副作用を扱うために使用するhook。副作用とは、コンポーネントのレンダリングに直接関係しないが、実行する必要がある処理のことを指す。例えば、データのフェッチ、DOMの操作、など。 関数の実行タイミングをReactのレンダリング後まで遅らせるhookといえます。 記述方法 第二引数の依存配列によって次のように動作に差が出ます。 [ ](空配列) ぺージを開いた時（初回レンダリング）だけ処理を行う [ 特定の state 名] 特定のstateが変わった時だけ処理を行う（再レンダリング） 何も記載しない コンポーネントがレンダリングされるたびに副作用関数が実行される。 無限ループの温床になるため実際には、第2引数を省略するケースはほとんどないそうです。 使った場合の挙動 useEffectを使