React.js＆Next.js超入門第2版まとめ Part1

PDD研究会

2023年3月6日 06:40

はじめに

Reactの勉強のために、「React.js＆Next.js超入門第2版」を読みました。

この記事は、その本のまとめです。プログラミング初心者の方には、このまとめだけでは理解が難しいかもしれません。そのため、実際に本を読むことをおすすめします。

本書は、JavaScript初心者でも理解できるように丁寧に解説されていると感じました。興味がある方は、ぜひ読んでみてください。

Reactとは

Meta（旧Facebook）によって開発されたオープンソースのフロントエンドフレームワークです。

特徴

リアクティブ・プログラミング
- 「何かの値が変化するとそれがすぐに反映される」という仕組みを持ちます。
- 「値がどのように伝わっていくか」を重視しています。
- 元になる値を操作すると、それを利用する表示も自動的に更新されます。
仮想DOM
- DOMはData Object Modelの略で、画面で表示している様々な要素をJavaScriptのオブジェクトとして扱えるようにしたものです。
- 便利な反面、たくさんの要素を高速に変更したりすると、表示に負荷がかかります。
- そこで、通常のDOMに比べてかなり高速な「仮想DOM」を用意しています。
- 仮想DOMは、プログラム的に仮のDOMを構築し、それを操作することで、本来のDOMに反映されるようになっています。

JSX記法
- HTMLのタグを直接JavaScriptのスクリプトに記述する仕組みのことです。

<script>
	let el = (
		<div>
			<h2>JSX sample</h2>
			<p>This is sample message.</p>
		</div>
	)
</script>

開発する際に必要なもの

npm

JavaScriptのパッケージ管理ツールで、JavaScriptのさまざまなソフトウェアのインストールやアップデートも簡単に行えるようになります。

Node.js

JavaScriptの実行環境です。特にサーバーサイドを含めたアプリケーションをJavaScriptで開発するために使用されます。npmはNode.jsに内蔵されています。

React Developer Tools

Reactの動作状況に応じて、表示などを解析するためのデバッグ用ツールです。ChromeやFirefoxのプラグイン（アドオン）プログラムとして作成されています。

ポイントは、「現在の値」のチェック
「Reactの内部で使われている値」は、実行中に常に書き換わっているため、単にスクリプトの内容を見ただけでは、「今、どうなっているのか」がわかりません。

プロジェクト操作のコマンド

Node.jsに組み込まれている「npx」または「npm」というプログラムを利用します。

プロジェクトの作成

「Create React App」というプログラムを使ってReactのアプリケーションを作成します。

#npxの場合
npx create-react-app プロジェクト名

#npmの場合
npm init react-app プロジェクト名

コマンドプロンプトまたはターミナルで上記のコードを実行すると、入力したプロジェクト名のフォルダ（Reactアプリケーションのプロジェクト）がその場に作成されます。

プロジェクトの操作

npm start （または　yarn start）

開発用のWebサーバープログラムを起動し、Webアプリケーションを公開します。その後、Webブラウザでアクセスし、動作を確認できます。

npm run build （または　yarn build）

プロジェクトのファイルから、実際にWebサーバーにアップロードして利用するためのファイル類を生成します。

npm test （または　yarn test）

テストプログラムを実行し、アプリケーションのテストを行います。

npm run eject （または　yarn eject）

プロジェクトの様々な依存関係をすべてプロジェクト内に移動し、完全に独立した形で扱えるようにします。

yarn,npx,npmの違い

yarn
- Metaが開発するパッケージ管理ツールです。npmと同じ機能がありますが、別途インストールする必要があります。
np
- パッケージ管理ツールの一種で、パッケージのダウンロードと実行を一括して行うことができます。npmと同様に標準で使用できます。

プロジェクトの中身

フォルダ関係

「node_modules」フォルダ：npmで管理されるモジュール類（プログラム）をまとめてある。
「public」フォルダ：公開フォルダ。HTMLやCSSなど公開されるファイル類が保管される。
「src」フォルダ：Reactで作成したファイルなどがまとめられる。
「build」フォルダ：プロジェクトをビルドすると作成される。作成したプロジェクトを公開したい場合、このフォルダの中身をWebサーバーにアップロードすれば、アプリケーションを公開することができる。

ファイル関係

.gitignore：Gitというツールで使うもの。
package.json：npmでパッケージ管理するための設定情報ファイル。
README.md：リードミーファイル
package-lock.jsonまたはyarn.lock：npmあるいはyarnに関する設定情報を記述したファイル。

Reactの基本

サンプルコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>React</title>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
  <h1>React</h1>
  <div id="root">...</div>
  <script>
	  <!--表示作成のスクリプト-->
  </script>
</body>
</html>

<script>タグの用意

最初にReactのスクリプトをロードする必要があります。

react.js：Reactの本体
react-dom.js：Reactの仮想DOMのスクリプトファイル

React組み込み用のタグ

Reactによる表示を適用するためのタグです。

<div id="root">...</div>

表示を組み込むためのタグをあらかじめ用意してページをデザインしておくことが大切です。必ずしもid=”root”のようにする必要はありません。

スクリプトの用意

<script> 
   <!--表示作成のスクリプト-->
</script>

Reactによる表示を組み込む処理をここで実行します。

DOMの仕組み

DOMは、1つ1つのタグをJavaScriptのオブジェクトとして表します。
それぞれのタグには、DOＭのオブジェクトが用意されており、そこにタグの表示や属性などの情報がすべて詰まっています。
オブジェクトに用意されている値などを操作すると、そのオブジェクトに対応するタグの表示が変更されるようになっています。
DOＭで用意されるオブジェクトは、大まかに「エレメント」と「ノード」があります。
- エレメント
  - HTMLの各タグを扱うオブジェクトです。
  - 例えば、<p>タグや<div>タグなどです。
  - JavaScriptではそれぞれのタグに対応するエレメントとして用意されています。
- ノード
  - HTMLにあるあらゆる要素を扱うためのオブジェクトです。
  - エレメントもノードの一種です。
  - 下のソースコードでは「<div>のエレメント」「<p>のエレメント」「<div>と<p>の間のテキストノード」「</p>と</div>の間のテキストノード」と4つのノードが用意されていることになります。

<div>
	<p>Hello!</p>
</div>

React.js＆Next.js超入門 第2版まとめ Part1