React の履歴(No.6)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• React へ行く。
  • 1 (2024-02-12 (月) 18:29:10)
  • 2 (2024-02-16 (金) 21:55:17)
  • 3 (2024-02-18 (日) 19:20:49)
  • 4 (2024-02-18 (日) 19:20:49)
  • 5 (2024-02-20 (火) 07:32:07)
  • 6 (2024-02-20 (火) 22:07:05)
  • 7 (2024-02-23 (金) 23:31:54)
  • 8 (2024-02-25 (日) 14:52:28)

---

FrontPage

目次†

JavaScriptモジュールバンドラ†

• 複数のJSファイルを静的にまとめて1つのファイルに出力する
• 1つにまとめることをバンドルと言い，それを行うツールをモジュールバンドラ（module bundler）という
• 1つにまとめることで開発者は<script src="...">をいちいち書く必要がなくなる

Vite†

• Webpackと比較して高速〜とか紹介されているJSモジュールバンドラ
• Viteの利用にはNode.jsが必要

Node.js†

• JavaScript実行環境の1つ
• ブラウザでしか動作しなかったJSがその他の環境でも動作する．として有名に
• npmを同梱
• WebSocketサーバとして用いられることが多い?
• 2011年8月に0.1.14がリリース．比較的新しいものだが多く使われている

npm†

• Node Package Managerの略称
• JavaScriptのパッケージ管理を行う

React†

• UI構築のためのフレームワーク
• 宣言的UIで開発
• 仮想DOMというメモリのDOMと実DOMを比較し，差分のあるコンポーネントのみを再描画する仕組みをもち高速

その他のフレームワークと特徴†

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

• プリジェクトの作成には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>
         </>
     );
  }