1. はじめに Reactの学習を進めていると、コンポーネントの中にデータ取得・ローディング管理・エラー処理がどんどん増えて読みにくくなっていく場面に遭遇しました。カスタムフックはそのロジック部分を別ファイルに切り出して、コンポーネントをUIの描画だけに専念させるための仕...
1. はじめに 今回はTypeScriptの基礎から、React × TypeScriptの実践的な使い方まで幅広く学びました。 変数・引数・返却値への型指定に始まり、APIデータの型定義、propsの型定義、型定義ファイルの管理、オプショナルチェーンまでを順番に整理して...
1. はじめに 今回は以下のQiitaロードマップの課題2に取り組みました。 課題1で作ったReactの学習記録アプリは、リロードするとデータが消えてしまう問題がありました。 そこで今回はSupabaseを使ったデータ永続化を実装し、さらにFirebase Host...
1. はじめに 今回はYouTubeの動画「【初心者完全版】0からReactでCI/CD構築までできるチュートリアル【GitHub Actions/Firebase/Vitest/TypeScript】」を参考に、React TypeScript Viteでシンプ...
1. はじめに 今回はReactのコンポーネント設計手法である「Atomic Design」を学びました。 コンポーネントをどう分割するか迷うことが多かったので、この設計思想はとても参考になりました。 今回作ったアプリは、ユーザー一覧画面とトップページを持つシンプルな構...
1. はじめに 今回はUdemyの講座でReact Routerを使ったルーティングを学びました。 学習で書いたコードはv5系のものですが、現在主流のv6との違いも合わせて整理しています。 SPAにおけるページ遷移の基本的な仕組みを理解することが今回のメインテーマです。 ...
1. はじめに 今回はReactでスタイルを適用する方法を5つ学びました。 Reactにはスタイリングの手法がいくつかあり、それぞれ書き方や特徴が異なるみたいです。 この記事では各手法の基本的な書き方を整理します。 2. Inline Styles Reactでは、HT...
1. はじめに 今回はReactのパフォーマンス最適化について学びました。 具体的には、メモ化の3つの手法であるuseMemo・React.memo・useCallbackを学び、それぞれの使い分けを整理しました。 2. メモ化とは何か Reactにおけるメモ化の全体像...
1. はじめに 以下のロードマップ記事のChapter2として、UdemyのReact入門コースで動画を視聴した後、学んだ内容をもとに2-2. 課題1に挑戦してみました。 参考にしたロードマップ: https://qiita.com/Sicut_study/items/...
1. はじめに 「挫折しないReactの教科書」でReactの基礎を学んだので、state管理・イベント処理・レンダリングの仕組み・リスト表示まで、実際に手を動かして理解したことを整理しています。 2. state(状態管理) ユーザーの操作に応じて変化するデータをRe...