コース

React

「HTMLとCSSは書けるけれど、Reactの記事を読むと急に分からなくなる」——その段差を埋めるコースです。ViteとTailwindで環境を作り、コンポーネント・props・stateを1つずつ確かめながら、検索とお気に入りが動く小さな図鑑アプリを完成させます。

はじめよう

Reactって何？

React・レッスン 1 / 45

Reactを知る全2レッスン

  1. 01Reactって何？
  2. 02Reactの前に、JavaScriptの書き方を確認する=>...map()import&&

まず動かしてみる全3レッスン

  1. 03ViteとTailwindで環境をつくるnpm create vite@latestnpm run dev@tailwindcss/vite@import "tailwindcss";
  2. 04JSXの読み方——HTMLに見えるけどJavaScriptclassName{}<></>{/* */}
  3. 05コンポーネントに切り分けるexport defaultimport<BirdCard />

データを流しこむ全3レッスン

  1. 06propsで値を渡すpropschildren
  2. 07配列から一覧を作る（mapとkey）map()keygrid-cols-*
  3. 08条件で出し分ける&&return null

動きをつける全3レッスン

  1. 09useStateで状態を持つuseState()onClick
  2. 10イベントと入力を受け取るonChangevaluefilter()preventDefault()
  3. 11状態を親に持ち上げるonToggleFavoriteincludes()filter()

つまずきを自力で直す全1レッスン

  1. 12エラーの読み方と開発者ツールconsole.log()React DevTools

外のデータとつなぐ全3レッスン

  1. 13useEffectで外のデータを読むuseEffect()fetch()public/
  2. 14フォームでデータを増やすonSubmitpreventDefault()trim()crypto.randomUUID()
  3. 15カスタムフックにまとめるuseFavorites()localStorageJSON.stringify()

ページを増やして、共有する全3レッスン

  1. 16ページを分ける（React Router）react-router-dom<Link><Route>useParams()
  2. 17Contextで配らずに共有するcreateContext()useContext()useNavigate()
  3. 18状態管理ライブラリを入れる（Zustand）zustandcreate()persistセレクタ

仕事で使うために全5レッスン

  1. 19再描画のしくみとmemo・useMemo・useCallbackmemo()useMemo()useCallback()
  2. 20stateが増えたらuseReduceruseReducer()dispatch()action
  3. 21DOMを直接触る（refとポータル）useRefcreatePortalref<dialog>
  4. 22残りのフックと、いつ使うかuseIduseLayoutEffectuseImperativeHandleuseSyncExternalStore
  5. 23画面全体を落とさない（Error BoundaryとSuspense）ErrorBoundarygetDerivedStateFromError()lazy()Suspense

TypeScriptで書く全4レッスン

  1. 24プロジェクトをTypeScriptに移行するtypescripttsconfig.jsontsc -b.tsx
  2. 25props・state・イベントに型を付けるtype PropsuseState<T>()ChangeEventuseRef<T>()
  3. 26データ・Context・フックに型を通すcreateContext<T>()asundefinedBird['id']
  4. 27型と長く付き合うコツanyunknownimport type?.

実務の道具立て全10レッスン

  1. 28データ取得は自前で書かない（TanStack Query）useQuery()queryKeystaleTimeuseMutation()
  2. 29フォームはライブラリに任せる（React Hook Form ＋ zod）useForm()register()zodResolver()z.object()
  3. 30テストを書く（Vitest ＋ Testing Library）vitestrender()getByRole()userEvent
  4. 31本物のブラウザで通しで試す（Playwright）playwrightgetByRole()webServerstrict mode
  5. 32部品をカタログにする（Storybook）storybookCSFargsdecorators
  6. 33Tailwind以外のスタイリングCSS ModulesCSS-in-JSshadcn/uiRadix UI
  7. 34Reactでのアクセシビリティaria-livetabIndexuseRef()role
  8. 35動きをつける（Motion）motionAnimatePresencelayoutprefers-reduced-motion
  9. 36コードの置き場所と分け方features/index.tseslintprettier
  10. 37古いReactのコードを読むクラスコンポーネントHOCrender propsPropTypes

本番で気をつけること全5レッスン

  1. 38Reactの安全な書き方（XSS）XSSdangerouslySetInnerHTMLDOMPurify環境変数
  2. 39ログインと、入れないページ保護ルートNavigateトークンログイン状態
  3. 40多言語にする（i18next）i18nextuseTranslationTransIntl
  4. 41データが増えても重くならないように仮想化react-windowuseInfiniteQueryデバウンス
  5. 42本番のエラーに気づくエラー監視ソースマップwindow.onerrorWeb Vitals

新しい書き方とその先全2レッスン

  1. 43React 19の新しい書き方（Actions）useActionState()useOptimistic()useTransition()use()
  2. 44Next.jsへ移るときapp/use clientServer Component

公開する全1レッスン

  1. 45ビルドして公開するnpm run buildnpm run previewdist/

このコースについて

Reactは、画面を「コンポーネント」という部品に分けて組み立てるライブラリです。素のJavaScriptだと「どの要素を、どう書きかえるか」を毎回指示することになりますが、Reactでは「いまのデータならこう見える」とだけ書きます。あとの書きかえはReactがやります。この発想の切りかえがいちばんの山場なので、最初の回でそこだけを扱います。

JSX・コンポーネント・props・stateという4つの土台から始めて、一覧の描画、条件による出し分け、フォームの入力、状態の持ち上げ、useEffectでのデータ取得、カスタムフックまで進みます。毎回ひとつの作品「しまちゃんのことりずかん」を育てるので、部品の知識がばらばらにならず、最後に検索とお気に入りが動くアプリが手元に残ります。

前提はHTML・CSS・JavaScriptのコースです。TailwindとnpmはWebの現場でReactとほぼ必ずセットで出てくるので、このコースでも使います（Tailwindを知らなくても読めるようにクラスの意味は都度そえます）。環境はVite。前半はJavaScriptで進み、最後の章で**プロジェクトごとTypeScriptに移行**します（実務でよくある入り方です）。