React

Hooks 優先の React コア内容です。

使用するフレームワーク： React18 + Redux + ReactRouter + AntD

React は Meta 社が開発した、Web とネイティブのインタラクティブ UI を構築するためのライブラリです。 Web サイトやネイティブアプリの開発に使えます。

開発環境の構築

create-react-app を使うと、開発環境を素早く作れます。 内部では Webpack により構築され、設定の細部が隠されているため、すぐに使えます。

実行コマンド：

npx create-react-app react-basic

説明：

1. npx は Node.js のツールコマンドで、後続のパッケージコマンドを検索して実行します。
2. create-react-app はコアパッケージです。React プロジェクトを作るために使います。
3. react-basic は React プロジェクト名です。自由に変更できます。

プロジェクト構造

react - basic/
├── node_modules/		// 依存パッケージ
├── public/				// 公開ファイル
├── src/				// ソースコード
│ ├── App.js			// ルートコンポーネント
│ └── index.js			// プロジェクトエントリー
├── package - lock.json	// 依存バージョンを固定
└── package.json		// 実行コマンドと依存

index.js の説明

// プロジェクトエントリー

// React が依存するコアパッケージ
import React from 'react';
import ReactDOM from 'react-dom/client';

// ルートコンポーネントを読み込む
import App from './App';

// App ルートコンポーネントを id が root の DOM ノードへレンダリングする
// 位置は public.index.html
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

App.js

// ルートコンポーネント
function App() {
  return (
    <div className="App">
      this is App
    </div>
  );
}

export default App;

JSX の概念

JSX は JavaScript と XML（HTML）の略です。JS コード内に HTML テンプレート構造を書く方法で、React で UI テンプレートを書くための方式です。

利点：HTML の宣言的テンプレートの書き方と、JS のプログラミング能力を同時に使えます。

JSX は標準の JS 構文ではありません。JS の構文拡張です。ブラウザ自体は識別できないため、解析ツール（BABEL）で変換してからブラウザで実行します。

JSX で JS 式を使う

JSX では波括弧構文 {} で JavaScript の式を識別できます。よくある例は、変数、関数呼び出し、メソッド呼び出しなどです。

1. 引用符で文字列を渡す
2. JavaScript 変数を使う
3. 関数呼び出しとメソッド呼び出し
4. JavaScript オブジェクトを使う

const count = 'React';
function App() {
  return (
    <div className="App">
      this is App
      {/* 引用符で文字列を渡す */}
      {"this is message"}
      {/* JS 変数を識別 */}
      {count}
      {/* 関数呼び出し */}
      {getName()}
      {/* メソッド呼び出し */}
      {new Date().getDate()}
      {/* JS オブジェクトを使う */}
      <div style={ {color : 'red'} }>this is a div</div>
    </div>
  );
}
function getName() {
  return "this is name";
}
export default App;

JSX リストレンダリング

構文：JS の map メソッド を使い、リストを反復してレンダリングします。

const hobby = [{key: 1 ,name: "sing"}, {key: 2 ,name: "dance"}, {key: 3 ,name: "rap"}];
function App() {
  return (
    <div className="App">
      this is App
      {/* リストをレンダリング */}
      {/* key を付けないとエラーになる。key は React 内部で使われ、更新性能を高める */}
      <ul>{ hobby.map(item => <li key={item.key}>{item.name}</li>) }</ul>
    </div>
  );
}
export default App;

JSX 条件レンダリング

構文：React では、論理 AND 演算子 && と三項式（? :）を使い、基本的な条件レンダリングを実現できます。

{flag && <span>this is span</span>}
{loading ? <span>loading...</span> : <span>this is span</span>}

複雑な条件レンダリング： 例：リスト内の記事状態に応じて、単一画像、三画像、画像なしの三つのモードを使い分ける。 解決方法：カスタム関数 + if 文。

const articleType = 3
function getArticleTem() {
    if (articleType === 0) {
        return <div>画像なし文案</div>
    } else if (articleType === 1) {
        return <div>単一画像の記事</div>
    } else {
        return <div>三画像の記事</div>
    }
}

function App() {
    return (
    	<div className="Aoo">
            {/* 関数を呼び出して異なるテンプレートをレンダリング */}
        	{getArticleTem()}
        </div>
    )
}

export default App

React の基本イベントバインディング

構文：on + イベント名 = {イベントハンドラ}。camelCase に従います。 例：クリックイベントは on + click = onClick です。

function App(){
    const clickButton = () => {
        console.log("ボタンがクリックされました")
    }
    return (
        <div>
            <button onClick={clickButton}></button>
        </div>
    );
}
export default App;

イベントコールバック関数でパラメータ e を設定します。

function App() {
	const clickHandler = (e) => {
		console.log('button ボタンがクリックされました', e)
	}
    return <button onClick={clickHandler}>click me</button>
}
export default App;

カスタムパラメータを渡します。

function App() {
    const clickHandler = (name) => {
        console.log(name);
    }
    // 関数呼び出しを直接書かない。ここでのイベントバインディングには関数参照が必要
    return <button onClick={() => clickHandler('name')}>click me</button>
}
export default App;

イベントオブジェクトとカスタムパラメータを同時に渡します。 構文：イベントバインディングの位置でイベント実引数 e とカスタムパラメータを渡し、clickHandler で仮引数を宣言します。順序を合わせる必要があります。

function App(){
	const clickHandler = (name,e) => {
		console.log(name,e);
	}
	return <button onClick={(e) => clickHandler('name', e)}></button>
}
export default App;

React のコンポーネント

React では、コンポーネントは先頭が大文字の関数です。内部にはコンポーネントのロジックとビュー UI を置きます。レンダリングする時は、コンポーネントをタグとして書くだけです。

// コンポーネントを定義
function Button() {
    // コンポーネント内部ロジック
    return <button>click me</button>
}

// アロー関数でも書ける
const Button = () => {
    return <button>click me</button>
}

// コンポーネントを使う
function App() {
    return (
    	<div>
        	<Button />
            <Button></Button>
        </div>
    )
}
export default App;

useState の概念

useState は React Hook（関数）です。コンポーネントに状態変数を追加し、コンポーネントのレンダリング結果を制御できます。

本質：普通の JS 変数と違い、状態変数が変わるとコンポーネントのビュー UI も一緒に変わります。これはデータ駆動ビューです。

const [count, setCount] = useState(0)

1. useState は関数で、戻り値は配列です。
2. 配列の一つ目は状態変数、二つ目は状態変数を変更する set 関数です。
3. useState の引数は count の初期値になります。

例：ボタンカウンターを実装します。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  
  const buttonClick = () => {
    setCount(count + 1);
  }
  
  return (
    <div className="App">
      <h1>Counter: {count}</h1>
      <button onClick={buttonClick}>{count}</button>
    </div>
  );
}

export default App;

状態変更のルール

基本データ型を変更する

状態は不変です。React では状態は読み取り専用と考えられます。直接変更するのではなく、常に新しい値で置き換えるべきです。状態を直接変更してもビュー更新は発生しません。

let [count, setCount] = useState(0)

const handleClick = () => {
	// 直接変更してもビュー更新は発生しない
	count++
	console.log(count)
	
	// 渡した値で count を変更し、新しい count で UI を再レンダリングする
	setCount(count +1)
}

オブジェクトを変更する

ルール：オブジェクト型の状態変数では、常に新しいオブジェクトを set メソッドに渡して変更します。

const [form, setForm] = useState({name: 'jack'})

const changeForm = () => {
	setForm({
		...form,
		name: 'john'
	})
}