Chapter 01

はじめに

ご覧いただき、ありがとうございます。
本講座は『速修!React & Hooks(仮)』と題しReactを用いたWebアプリケーション開発をなるべく短時間で学べるように作成しました。

Reactは必要とされる前提知識や作法が比較的多く、使いこなすまでに時間がかかると言われています。しかしながら、Reactの設計思想はとてもシンプルなので 「全体像さえ掴んでしまえばそれほど難しくない」 というのが私の印象です。

この 「全体像」 を効率よく学べるようにこの講座を作成しました。
本講座の他にも、たくさんのチュートリアルや教材が存在しますが、

  • 簡単な手順の説明だけになってしまったり
  • 反対にJavaScriptの文法解説など網羅的すぎる

講座が多い印象です。素早く全体像を掴み、すぐ実践の中で学びたい人に向けた講座が必要だと思いました。

この講座をご覧いただいた皆様が、効率よくReactを学び「なんだ、意外とシンプルで簡単だな」と思ってもらえれば嬉しいです。

ゴール・目標設定

細部を丁寧に説明することはしませんが、自走できる状態までスキル・知識をつけることをゴールとして設定しています。
具体的には、以下の2つがゴールです。

  1. Reactのコードを見て、実装内容を理解できるようになる
  2. ドキュメントを読みながら自分で実装できるようになる

素早く全体像を掴んで、すぐに実務・実践に入っていただける状態になることができれば、あとは自走しながら細かい部分はフォローできるという考えです。

扱う内容

本講座で扱う内容は、以下の通りです。
基本から最新までを、流れの中で俯瞰できる内容と順番になるよう意識しています。

  • なぜReactが必要なのか
  • 仮想DOMとJSXについて
  • Classコンポーネント
  • StateProps
  • コンポーネントライフサイクル
  • 関数コンポーネント
  • Hooks
  • Redux
  • Context
  • Recoil
  • Suspense

Classコンポーネントについて

すでにReactについての知識をお持ちの方はお気づきかもしれませんが、あえて古いクラスコンポーネントを学ぶことに疑問を持つかもしれません。これには大きく2つの理由があります。

  1. 実際の業務においてまだ使われることがあるから
  2. 全体像の理解を助けるから

Reactの理解においては、初期バージョンから変遷を追っていくことが遠回りのようで実は効率が良いと考えています。また、実務で既存のプロジェクトを触る際にも役立ちます。

状態管理について

実際の開発では避けて通れないRedux / Contextを用いた状態管理も学習内容に含めています。
また、肥大化した状態管理をシンプルにすべく開発されているRecoilにも触れています。

今後Reactに追加予定の機能も

さらに最終章では、今後React本体に追加予定のSuspenseと呼ばれる機能にも触れています。Suspenseによって今後のReact開発は大きく変わると言われており、現在は必須の知識ではありませんが、長く使えるReactの知識習得を目指して内容に含めました。