React の履歴(No.4)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 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>
  );