今後のフロントエンド開発で必須知識となるReact v18の機能を丁寧に理解する
What you'll learn
- 2022年3月にリリースされたReact v18の各種機能の使い方
- React v18の登場で今後のフロントエンド開発がどう変わるのか
- Suspenseの使い方や、Suspenseを使うことの本質について
- Transitionについて
- Automatic Batchingについて
- React v18での破壊的変更について
- CSR/SSR/Streaming HTML/Selective Hydrationについて
Requirements
- 基本文法などReactの基礎知識が既にあること
- React v18の登場で今後のフロントエンド開発がどう変わるのかを知りたい人
- 解説のコードにはTypeScriptを用いています(本質とは関係ないため知識がなくても理解はできると思います)
Description
React v18の登場で何が変わるのか。しっかり理解できているかどうかで2022年以降のフロントエンド開発についていけるかどうかが確実に左右されます!
しかしReactが目指す世界や、追加された機能というものは非常に複雑です。
公式のドキュメントや解説記事はありますが、ほとんどの学習者にとって難易度の高いものとなっています。
そんな中、なるべく多くの人にReactの新機能や今後のフロントエンド開発についてなるべくやさしく丁寧に理解してもらおうと本コースを作成しました。
単に機能の説明だけではなく、その本質や周辺知識についても解説しているので受講いただくことで初学者〜中級者の方まで今後のフロントエンド開発に活かせる知識を得られるかと思います。
■本コースでは以下の内容を取り扱います
React18の破壊的変更
React18にバージョンアップすることで起きる破壊的変更(既存コードの修正を伴うような変更)について、React18のプロジェクトとReact17のプロジェクトをどちらも作成し比較しながら解説していきます。
Automatic Batching
State更新をReactが自動で1つにまとめることでパフォーマンス向上の効果があるバッチ処理について、React18で何が変わったのかについて解説します。React17とReact18以降ではバッチ処理される箇所が変わったのでしっかりおさえておきましょう。
Transition
これまでのReactアプリケーションだとどのような問題があって、それがReact18で登場したTransitionを使うことでどのように解決できるのかについて、実際にサンプルアプリを作りながら解説していきます。また、新しく登場したuseTransitionとuseDeferredValueの違いや使い分けについても紹介します。
Suspense - その1(文法編)
React18の目玉機能であるSuspenseについて、実際にコードを書きながら使い方を学んでいきます。Suspenseは以前からも存在しましたが、React18で別物になったのでその点も解説します。シンプルな例の解説から始め、複数のSuspenseを組みわせる例やTransitionと組み合わせることでどのようなユーザー体験をもたらすことができるかも体感していただきます。
Suspense - その2(本質編)
Suspenseの使い方を紹介するにとどまっている記事が多いですが、Suspenseの本質はそこではありません。「SSR」「Streaming HTML」「Selective Hydration」このあたりのキーワードを中心にSuspenseを使うことで裏側で何が起きていて、今後どのようなフロントエンド開発になっていくのかについても解説します。
【おまけ】その他新しく追加されたHooks
おまけ的にReact18で追加された新しいフックについて、コース内で紹介したもの以外も簡単に紹介しています。
■それ以外の本コースの特徴
セクション毎の最後にQ&Aコーナーを設けており、事前に受講生の方々から募集した質問について回答する息抜きのコーナーがあります
コード入力時は画面を拡大する等、編集も工夫しているためスマホでもストレスなく閲覧できます
収録音声にも気をつかっているのでイヤホン等で視聴しても不快ではないです(声の好みは分かりませんが...)
Who this course is for:
- Reactの基礎知識があるが、v18でどんな機能が追加されたかまだ把握できていない人
- 2022年以降もフロントエンド開発に携わる可能性のある人
Instructor
ー経歴ー
SIerで基幹システム等を経験した後、フリーランスとして独立。
その後2020年に株式会社Reach Scriptを設立
「ユーザーの目に触れる部分の開発」に魅力を感じ、現在はフロントエンド周りの技術を軸にプロダクト開発支援、技術顧問等をしている。
会社は上記の受託開発をしつつ、犬や飼い主のための自社サービスの開発も行なっている。
大阪・広島でエンジニア、デザイナーのためのコミュニティである「ノーマウント勉強会」を主催。
ーひとことー
皆さんはじめまして!じゃけぇです!
私は何も知らない状態でぽーんとIT業界に入り、気がつけばフリーランスになりその後会社を設立し今では多くの人と仕事をさせて頂いています。
プログラミングの勉強楽しいですか?
私はただ参考書とにらめっこしていた時は正直しんどかったです。
でも今は毎日技術に触れることが楽しいです。
「感動」を忘れずに「楽しみながら身に付く」そんな講義を目指しています。
なので技術以外の小ネタ的な話も間に挟んでいったりします。
リラックスして気楽に受講してもらえればと思います!