React の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• React へ行く。
• React の差分を削除

#author("2024-03-01T21:26:31+09:00","default:shota","shota")
#author("2024-03-01T21:31:44+09:00","default:shota","shota")
[[FrontPage]]

*目次 [#mb382e5b]
#contents

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

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

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

*npm [#vc10b720]
- Node Package Managerの略称
-JavaScriptのパッケージ管理を行う

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

**その他のフレームワークと特徴 [#h04fca67]
|フレームワーク|特徴|h
|AngularJS|MVCに対応したフルスタックフレームワーク．パフォーマンス面でReactとVue.jsに負けている|
|Vue.js|UIに特化したフレームワーク．Reactと比較すると少しパフォーマンス面で劣っている|
CENTER:&size(10){試してはいないググった情報};

*プロジェクトの作成と実行 [#g93b56f9]
-プリジェクトの作成にはnpxコマンドを使う

 # プロジェクトの作成
 % npx create-react-app プロジェクト名
 
 # （対象ディレクトリに移動して）Reactプロジェクトの実行
 % npm start

**初期状態 [#h3da960a]
-プロジェクト作成後の初期状態で注目すべきファイルは'index.js'
#highlightjs(javascript)
 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);`とすることでパフォーマンス監視ログをコンソールに出力することができる

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

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

**式を埋め込む [#t1867b02]
-JSX式には`{...}`で式を埋め込むことができる

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

***無視される値 [#a6adba92]
-`{...}`内にBoolean/Undefined/Nullが書かれた場合は無視される（何も表示されない）
#highlightjs(javascript)
 const name = true;
 const element = <h1>{name}</h1>;
 // → <h1></h1>が描画される

**条件分岐 [#lcc6c7bf]
-JSX式で条件分岐を実現する方法はいくつかある

***if文 [#kce68c0e]
#highlightjs(javascript)
 let elem = <p>Hello</p>;
 if (!nameHidden) {
    elem = <p>Hello, {name}</p>
 }
 
 return (
    <h1>Welcome</h1>
    {elem}
 );

***即時関数 [#g6c936a1]
#highlightjs(javascript)
 return (
    <h1>Welcome</h1>
    {(() => {
       if (nameHidden) {
          return <p>Hello</p>;
       }
       else {
          return <p>Hello, {name}</p>;
       }
    })()}
 );

***3項演算子 [#r329540f]
#highlightjs(javascript)
 return (
    <h1>Welcome</h1>
    <p>Hello {nameHidden ? null : (', ' + name)}</p>
 );

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

**ルート要素 [#v5cdd9e8]
-JSXでは常に1つの要素を返す必要がある
#highlightjs(javascript)
 // divで囲って1つの要素としている
 return (
    <div>
       <h1>Hello</h1>
       <p>JSX</p>
    </div>
 );

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

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

App.js
#highlightjs(javascript)
 export default function App() {
    return (
       <Label name="John" />
    );
 }

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

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

Label.js
#highlightjs(javascript)
 export default function Label({ name = 'React' }) {
    ...
 }

*基本機能 [#fea35e29]
-[[フック>React/フック]]