はじめに

本書のねらい

Reactの確かな理解とスキルを身につけることが本書の目標です。ウェブアプリケーションの仕組み、JavaScriptの基礎知識から、Reactの基本および発展的内容まで、Reactアプリケーション開発の広い範囲を本書はカバーしています。

本書の一部には、言葉による概念の説明が続く所がありますが、本書の大部分はコードを自分の手で実際に書き、自分の目で実際に働きを確認しながら進めてもらうことを想定しています。自分の手で作ったものが動いたときの喜びは格別です。このような楽しさを読者の方に味わってもらうことが、実はReactをマスターすること以上の本書の最大のねらいといえます。

「自分でもできるんだ」という小さな成功体験と、自分に対する信頼の上昇は前へと進む原動力になり、いずれ私たちをより大きな成功へと導いてくれます。本書を読んだあと、読者の方に「もっと知りたい！」と思ってもらえたなら、本書のねらいは成功したといえるでしょう。

本書の対象読者

本書を読むときの前提知識はHTMLとCSSだけです。JavaScriptの知識は第3章で基礎から解説します。

私はReact入門書（下記）をすでに数冊書いていますが、これらを読み終えた人に次に読んでもらいたい一冊として本書は書かれています（各本はこちらのアマゾンリンクよりご確認いただけます：https://www.amazon.co.jp/stores/author/B099Z51QF2）。

これらの入門書では、読者に最短距離で成功体験をひとつ作ってもらうことを一番のねらいとしていたので、Reactの基本コンセプトやコードのくわしい解説は省いていました。

一方で本書では、「オブジェクト」や「ファンクション」といった専門用語を積極的に使い、さらにコードのくわしい解説も加えてあります。上記入門書を読んで、「Reactのもっと深い理解を見つけたい」という読者に最適な一冊が本書です。

上記入門書を読まれていない方でも、本書では基礎の基礎から解説をするので安心してください。

本書のおすすめの使い方は、3回程度繰り返すことです。同じ本を何度も読むのは効率が悪く思えますが、複数の本を1回ずつ読むよりも同じ本を繰り返す方が学びは深まります。また、複数回繰り返すことを前提にすると、「一回ですべてを理解しよう」という不要なプレッシャーを自分に与えずにすみます。1回目でうまく理解できずに詰まったところでも、2回、3回と繰り返すと、不思議とスムーズに進められることに気がつくでしょう。

これから1回目をはじめる読者の方は、わからないところ、頭にうまく入ってこないところがあっても、とにかく前へ前へと進むこと、とにかく最後のページまで到達することを優先させてください。最後のページまで行き、本書の全体像、つまりReactの全体像がぼんやりとでもつかめたら、どのエリアが自分は得意で、どのエリアがまだ苦手なのかが、よりはっきりと見えるようになるでしょう。

本書を終えた方は、続編の『React + TS徹底フォーカス：TypeScriptマスター with React（2024年3月発売）』もご覧ください。

https://note.com/monotein/n/n62b9bada87f4

本書の構成

本書は全6章から構成されています。

第1章から第3章まではReact、JavaScriptの基礎知識の紹介、そして第4、5章では実際にReactアプリ開発を進めます。最後の第6章では、それまでに触れる機会のなかったReactの発展的事項を紹介します。分量としては、React開発をする第4章と5章が本書の60%以上を占めています。以下、各章で学ぶことをすこしくわしく見ていきましょう。

第1章では、アプリケーションについての基礎知識、アプリケーションの構造やフロントエンド／バックエンドの働きについて学びます。章の後半は、Node.jsやVS Codeのインストールなど、React開発をはじめる準備です。

第2章ではReactの概要や特徴から、コンポーネント、仮想DOM、そしてレンダリングといったReactを使う上でかならず知っておきたい概念を紹介します。

第3章は、オブジェクトや定数宣言などのJavaScriptの基礎の基礎から、組み込みファンクション、ファンクションの構造など、React開発でも必須となるJavaScriptの知識を実際にコードを書きながら説明します。

第4章からは実際にReactアプリ開発を始めます。React + Viteをベースとして、レシピを検索するアプリを開発していきます。このアプリには、ダークモードや検索履歴を表示する機能もついています。

シンプルなアプリですが、React開発をする上で知っておきたいことを細かく解説しているので、第4章の分量は非常に多くなっています。そのため、いきなり上記アプリの完成を目指すのではなく、基礎部分の開発に第4章では集中します。

その基礎部分に、ダークモードと検索履歴を追加してアプリを完成させるのが第5章です。章の最後ではアプリをオンラインで公開する方法も解説しています。

本書最後の第6章では、それまでに触れることのできなかったReactの発展的内容を紹介します。具体的には、コンポーネントの様々な記法、レンダリングの制御、useReducer、Redux、テスト、サーバーコンポーネント（Next.js）といったことで、カバーしているエリアは広範囲にわたっています。

各章の最初には、その章で学ぶことを箇条書きでリスト化しているので参考にしてください。