React の履歴(No.8)

フレームワーク	特徴
AngularJS	MVCに対応したフルスタックフレームワーク．パフォーマンス面でReactとVue.jsに負けている
Vue.js	UIに特化したフレームワーク．Reactと比較すると少しパフォーマンス面で劣っている

試してはいないググった情報

↑

プロジェクトの作成と実行†

プリジェクトの作成にはnpxコマンドを使う

# プロジェクトの作成
% npx create-react-app プロジェクト名

# （対象ディレクトリに移動して）Reactプロジェクトの実行
% npm start

↑

初期状態†

プロジェクト作成後の初期状態で注目すべきファイルは'index.js'

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
   <App />
 </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

createRoot
- ReactElementの起点となる要素（ルート要素）を指定する
- ルート要素に対して`root.render()`を実行してReactElementを描画している

StrictMode
- Strict（厳密）モードで動作させる
- レガシーなAPIや正しくないライフサイクルでの利用を監視し，警告を出してくれる
- 開発モードでのみ機能する

reportWebVitals
- パフォーマンス監視を行う
- `reportWebVitals(console.log);`とすることでパフォーマンス監視ログをコンソールに出力することができる

↑

コンポーネント†

コンポーネントを定義する方法は2つある
以前のバージョンではクラスコンポーネントのみで利用することのできる機能があったが，バージョンアップで両者ともできることの差は殆どなくなった
公式では関数コンポーネントの利用を推奨している

関数コンポーネント: 関数として定義
クラスコンポーネント: class構文で定義

↑

JSX†

コンポーネントはJSX式を返す必要がある
JSXは実行時にReact.createElementメソッドに自動的に変換される

↑

式を埋め込む†

JSX式には`{...}`で式を埋め込むことができる

const name = "John";
const element = <h1>Hello, {name}</h1>;

// 変数と文字列を結合した場合は`{...}`内で行う
// 属性値を指定する場合は`"{...}"`のように囲わない
const profile = <img src={'https://profile/' + name + '.jpg' />;

↑

無視される値†

`{...}`内にBoolean/Undefined/Nullが書かれた場合は無視される（何も表示されない）
```
const name = true;
const element = <h1>{name}</h1>;
// → <h1></h1>が描画される
```

↑

条件分岐†

JSX式で条件分岐を実現する方法はいくつかある

↑

if文†

let elem = <p>Hello</p>;
if (!nameHidden) {
   elem = <p>Hello, {name}</p>
}

return (
   <h1>Welcome</h1>
   {elem}
);

↑

即時関数†

return (
   <h1>Welcome</h1>
   {(() => {
      if (nameHidden) {
         return <p>Hello</p>;
      }
      else {
         return <p>Hello, {name}</p>;
      }
   })()}
);

↑

3項演算子†

return (
   <h1>Welcome</h1>
   <p>Hello {nameHidden ? null : (', ' + name)}</p>
);

↑

短絡評価†

nameHiddenがtrueの場合は短絡評価により2番目が評価されない
`nameHidden && xxx`の場合はnameHiddenがfalseで2番目が評価されない
```
return (
   <h1>Welcome</h1>
   <p>Hello {nameHidden || (', ' + name)}</p>
);
```

↑

ルート要素†

JSXでは常に1つの要素を返す必要がある

// divで囲って1つの要素としている
return (
   <div>
      <h1>Hello</h1>
      <p>JSX</p>
   </div>
);

div等のタグ階層を深くしない`<React.Fragment>`も用意されている
- React.Fragmentはダミー要素であり描画時には無視される
- 省略形として`<>...</>`でもReact.Fragmentが利用できる

↑

Props†

親コンポーネントから子コンポーネントへ値を渡すための手段
子コンポーネントはPropsの値を変数のように保持して動的に変更することはできない
Propsにはオブジェクトや関数などJavaScriptで式で表せるものは渡すことができる

App.js

export default function App() {
   return (
      <Label name="John" />
   );
}

Label.js

export default function Label(props) {
   return (
      <>
         <h1>Hello</h1>
         <p>{props.name}</p>
      </>
   );
}

↑

分割代入†

子コンポーネントの引数に`{名前, ...}`とすることでも親コンポーネントから値を受け取ることができる
分割代入を用いればデフォルト値も指定することができる
呼び出し時に要求するPropsが明確になるメリットがある

Label.js

export default function Label({ name = 'React' }) {
   ...
}

↑

State†

関数コンポーネントでStateを使用するためにはuseState関数で初期化とセッター作成を行う

const [stateを格納する変数, stateの値を更新する関数] = useState(初期値)

Counter.js

import { useState } from 'react';

export default function Counter({ init }) {
   const [count, setCount] = useState(init);
   return (
      <>
         <p>{ count }</p>
         <button onClick={ () => setCount( c => c + 1 ) }>++</button>
      </>
   );
}

↑

Form†

onChange属性を使用すると値の変更がされたときにハンドラを呼び出すことができる

export default function UserForm() {
   const [form, setForm] = useState({
       name: '',
       email: ''
   });

   const formHandler = e => {
       setForm({
           ...form,
           [e.target.name]: e.target.value
       })
   };

   return (
       <form>
           <p>User: {form.name}</p>
           <p>Email: {form.email}</p>

           <div>
               <label htmlFor="name">Name</label>
               <input id="name" name="name" type="text"
                      onChange={formHandler} value={form.name} />
           </div>

           <div>
               <label htmlFor='email'>E-mail</label>
               <input id="email" name="email" type="email"
                      onChange={formHandler} value={form.email} />
           </div>

           <div>
               <button type="button" onClick={ () => alert(`Hello ${form.name}`)}>
                   送信
               </button>
           </div>
       </form>
   );
}

↑

Ref†

Stateは更新時にDOMの再描画が行われるが，再描画を行いたくない場合はRefを使う
Refは`useRef(初期値)`で宣言可能で，`ref変数.current = xxx`で値の更新を行う

Refで宣言された変数は要素が再描画された場合でも変数の中身を保持することができる

export default function Counter() {
   // countRefの値が変更されても再描画はされない
   const countRef = useRef(0);

   const handleClick = () => {
       // Ref変数.currentで値にアクセスできる
       countRef.current = countRef.current + 1;
   };

   return (
       <>
           <button onClick={handleClick}>Count++</button>
           <button onClick={() => alert(countRef.current)}>Show</button>
       </>
   );
}

↑

Reducer†

State同様に値を保持する
Actionを用いたセッターを使用
複雑なセッターが複数個ある場合にロジックを1箇所にまとめておくことができる
useReducer関数を使用してStateとReducerを呼び出すためのdispatch関数を作成する

Reducer
- Stateの更新の際に呼ばれる関数
- 保持されているStateと更新時のdispatch関数に渡すActionオブジェクトが渡され，それを元に更新後のStateを返却する
- Reducerに渡されるStateは読み取り専用であるため更新をしてはいけない

Dispatch関数
- typeプロパティとReducerに渡したい値を含んだActionオブジェクトを渡して，Reducerを呼び出す

useReducer(
   reducer,
   initialArg,
   init?
)

initialArg: Stateの初期値になる値（3つ目の引数[関数]を指定する場合はその引数になる値）
init?: オプション．Stateの初期値を関数によって決定したい場合に指定する

export default function Counter({init = 0}) {
   const [count, dispatch] = useReducer(
       (count, action) => {
           switch (action.type) {
               case 'increment':
                   return count + 1;
               case 'reset':
                   return init;
               default:
                   throw Error('Unknown action: ' + action.type);
           }
       },
       init
   );

   return (
       <>
           <p>{count}</p>
           <button onClick={() => dispatch({type: 'increment'})}>++</button>
           <button onClick={() => dispatch({type: 'reset'})}>reset</button>
       </>
   );
}

↑

少し複雑な例†

App.js

import {useReducer} from "react";
import AddNote from "./AddNote";
import NoteList from "./NoteList";

let initialNotes = [];

function notesReducer(notes, action) {
 switch (action.type) {
   case 'added': {
     return [...notes, {
       id: crypto.randomUUID(),
       text: action.text,
     }];
   }

   case 'edited': {
     return notes.map( e => {
       return e.id === action.note.id ? action.note : e;
     });
   }

   case 'deleted': {
     return notes.filter( e => e.id !== action.id);
   }

   default: {
     throw Error('Unknown action: ' + action.type);
   }
 }
}

export default function App() {
 const [notes, dispatch] = useReducer(
     notesReducer,
     initialNotes
 );

 // ノートを追加
 function handleAddNote(text) {
   dispatch({
     type: 'added',
     text: text,
   });
 }

 // ノートを編集
 function handleEditNote(note) {
   dispatch({
     type: 'edited',
     note: note,
   });
 }

 // ノートを削除
 function handleDeleteNote(id) {
   dispatch({
     type: "deleted",
     id: id,
   });
 }

 return (
     <>
       <h1>Notes</h1>
       <AddNote onAddNote={handleAddNote}/>
       <NoteList
         notes={notes}
         onEditNote={handleEditNote}
         onDeleteNote={handleDeleteNote}
       />
     </>
 );
}

AddNote.js

import {useState} from "react";

export default function AddNote({onAddNote}) {
   const [text, setText] = useState('');
   return (
       <>
           <input
               placeholder="ノートを追加"
               value={text}
               onChange={e => setText(e.target.value)}
           />
           <button onClick={() => {
               onAddNote(text);
               setText('');
           }}>追加</button>
       </>
   );
}

NoteList.js

import {useState} from "react";

export default function NoteList({
   notes,
   onEditNote,
   onDeleteNote,
}) {
   return (
       <>
           {notes.map(e => (
               <div key={e.id}>
                   <NoteRow
                       note={e}
                       onEdit={onEditNote}
                       onDelete={onDeleteNote}
                   />
               </div>
           ))}
       </>
   );
}

function NoteRow({
   note,
   onEdit,
   onDelete
}) {
   const [isEditing, setIsEditing] = useState(false);

   if (isEditing) {
       return (
           <>
               <input
                   value={note.text}
                   onChange={e => {
                       onEdit({
                           ...note,
                           text: e.target.value
                       });
                   }} />
               <button onClick={() => setIsEditing(false)}>
                   保存
               </button>
           </>
       );
   }
   else {
       return (
           <>
               {note.text}
               <button onClick={() => setIsEditing(true)}>
                   編集
               </button>
               <button onClick={() => onDelete(note.id)}>
                   削除
               </button>
           </>
       );
   }
}

↑

Context†

上位のコンポーネントの値にアクセスするためのフック
createContext関数でContextオブジェクトを定義
useContext関数で上位コンポーネントで定義されたContextオブジェクトを参照可能
`Contextオブジェクト.Provider`コンポーネント以下の子コンポーネントではContextオブジェクトのdefaultValueではなくvalue属性で指定した値が参照される

const Contextオブジェクト = createContext(defaultValue);

const 値 = useContext(Contextオブジェクト);

import {createContext, useContext} from "react";

export const MessageContext = createContext('hello');

export default function Context() {
   return (
       <>
           {/* Context.Provider以下のコンポーネントではvalueの値になる */}
           <MessageContext.Provider value='hello world'>
               <Label /> {/* 'hello world'が描画される */}
           </MessageContext.Provider>

           {/* Context.Provider以下のコンポーネントでない場合はdefaultValueが使用される */}
           <Label /> {/* defaultValueの'hello'が描画される */}
       </>
   );
}

function Label() {
   return <Message />
}

function Message() {
   const message = useContext(MessageContext);
   return <p>{message}</p>
}