Skip to content

DNET_React

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

React

概要

Facebook社が開発しているSingle Page Application開発用のUIサブシステム。

仕組み

生産性

  • 下記の特徴を見ると、JSのMV*もXAML的になったなぁという感覚がある。

  • ただ、IDEが良くならないとエンプラの要求する生産性にまで上がらなさそうではある。

エコシステム

  • ReactNativeに関しては、Microsoft社が力を入れているように見える。

  • また、Facebookが社内の標準開発環境を「Visual Studio Code」に変更するなど。

特徴

Just the UI

  • View(UI)部分のみを管理する

コンポーネント指向

  • Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築する。
  • なお、コンポーネントのインスタンスのことを「エレメント」と言う。

仮想DOM

  • 設計と速度が両立すると言われている。

  • 仮想DOMの構造体表現と、それを用いたdiff/patchアルゴリズム。

    • 最終的に生成されるHTMLの複雑なDOMではなく、仮想的なDOMを記述する。
    • 2つのツリー構造のdiffを算出して、それをDOMにpatchするアクションを作る。

  • JSXで記述する。

Data flow

  • コンポーネント中のデータの流れを

    と、一方向化している。

  • 詳しくは、Fluxを参照。

自分の言葉で言うと、

経緯

  • HTML再描画が、Ajaxによって部分描画のDOM操作になり、

  • HTML/JavaScriptにはイベントドリブンの仕掛けが整っている。

  • この土台の上で、リッチなUIサブシステムを実現しようとしたら、

    • DOM操作のビルティング・ブロック化が目標になり、

    • これを実現しているのがReact Fiberあたりの仕組みである。

    ...と言う事だろうか。

React Fiber

  • 仮想DOMを更新してUIに反映するアルゴリズムをリコンシリエーション（reconciliation）と言う。

  • 以前は、仮想DOMのツリーを上から再帰的に比較していくという処理だった。

  • Fiberでは再帰的な処理をやめて、ReactElementごとの更新処理を
    連結リストにして、一つ一つの更新処理を独立したものとして扱えるようにした。

    • 同期的な再帰処理を、停止・再開可能な非同期処理（Fiber）に分割した。
    • Fiberのスケジューリングが可能になった（インクリメンタルレンダリング）

※ そもそもFiberとは「ファイバー (コンピュータ) - Wikipedia」のこと。

基本的な事項

言語

JSXをサポートする言語を使用する。

Babel(ECMAScript)

  • 「Babel」（JavaScriptの該当節を参照 / ECMAScript）を導入する方法が最も簡単。
  • プログラム・ファイルの拡張子は、*.jsx。

TypeScript

  • また、「TypeScript」（JavaScriptの該当節を参照）でもサポートされている（TSX）。
  • プログラム・ファイルの拡張子は、*.tsx。

JSX

画面定義のマークアップ言語

特徴（JSX）

JSの拡張言語で、

  • React 要素を作成する仮想DOMを、簡便な形式でXMLマークアップのシンタックスを追加する。

  • XMLマークアップには、標準のHTML5 + 拡張属性で、HTMLタグとJSXタグが共存する。

  • 制御構文とXMLマークアップが混在するという意味で、Razor的。

変数出力

{変数名}でJavaScript変数を出力

イベント・ハンドラ

  • 基本的に以下のように書く。

    <button onClick={()=>this.renderChange()}>切替</button>

  • 以下は問題がある。

    • レンダリング時にclickActionが起動してしまう。

      <div onClick={this.clickAction()}>

    • thisにアクセスできない。

      <div onClick={this.clickAction}>

属性の指定

自由に属性を設定可能。

<div>
    <MyComponent
        myTitle={'タイトル'}
        myValue={this.state.value} />
</div>

子コンポーネントからprops.(定義した属性名)と利用。

Css in JS（JSX）

  • React自身にデザインの機能はないのでCSSを利用する。

  • 「Css in JS」と言われる考え方が登場し、
    React用のCSSをインポート可能になっている。

  • classはclassNameと書く。styleはstyleで良い。

    <button className="btn btn-default" style={{color:"gray"}}/>

コンポーネントの配置

JSXタグでコンポーネントを設置

  • タグ名＝コンポーネントクラス名の
  • JSXタグは頭文字が大文字になる。
<MyComponent />

コンポーネントのネスト

コンポーネントのRender内に、子コンポーネントを記述

<SubComponent />

基本形のコンポーネント

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
    constructor(props, context){
        super(props, context)
        this.state = { viewText : 'テストページ' }
    }
    render(){
        return (
            <div>
                <h1>Hello! World.</h1>
                <p>このページは{ this.state.viewText }です。</p>
            </div>
        )
    }
}

extends

state, propsを使用する場合、React.Componentを継承する。

export

  • モジュール化することによってインポート可能なクラスにする。

    export class MyComponent extends React.Component {

  • defaultも付けると、デフォルトで読み込むモジュールになる

    export default class MyComponent extends React.Component {

import

exportでモジュール化したクラスは、importでインポートが可能。

  • １クラス、インポート

    import { SubComponent1 } from './SubComponent';

  • ｎクラス、インポート（１ファイルに複数定義されている場合）。

    import { SubComponent1, SubComponent2 } from './SubComponent';

state

  • コンポーネントの状態を表す変数。
  • コードからReact.Componentのプロパティと思われる。
  • this.setStateで設定し、this.stateで参照する。

props

  • データ（state）を親コンポーネントから子コンポーネントに渡す際に使用する。
  • 変更不可と書かれていることがあるが変更通知を使用すれば変更可能。
  • コードからReact.Componentのプロパティと思われる。

constructor

  • stateあり

    constructor(props, context) {
  super(props, context)
  this.state = {
    viewText: props.text,
    viewFlg: props.defaultFlg,
  }
}

  • stateなし
    stateを使わない、propsだけのコンポーネントの場合、

    constructor(props, context){
    super(props, context)
}

    constructorの記述自体を丸々省略できる。

render

  • 生成したいHTML（正確にはJSX）を書く。

  • return( の直下は1つのエレメントしか置けない。

  • 繰り返し処理
    map内にラムダ式を書く。

    • 配列

      items = [
    { value : 'apple' },
    { value : 'orange' },
    { value : 'banana' },
 ];

    • 値

      return items.map(_item => {
    return(
        <li>{_item.value}</li>
    )
})

    • キー、値

      return items.map((_item,_key) => {
    return(
        <li key={_key}>{_item.value}</li>
    )
})

  • コンポーネントの再描画

    • stateを更新して、コンポーネントを再描画する。
    • イベントなどで、上記のthis.stateを変更するとHTMLが再描画される。
    class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      viewText: props.text,
      viewFlg: props.defaultFlg,
    }
  }
  renderChange() {
    // viewFlgの状態を切替(0 <-> 1)
    let newFlg = this.state.viewFlg == 1 ? 0 : 1;
    this.setState({ viewFlg: newFlg });
  }
  render() {
    return (
      <div>
        <h1>Hello! World.</h1>
        <LeadText viewText={this.state.viewText} viewFlg={this.state.viewFlg} />
        <button onClick={()=>this.renderChange()}>切替</button>
      </div>
    )
  }
}

コンポーネント・ライフサイクル

  • Componentの状態の変化に合わせて色々メソッドを呼んでくれる。
  • それに合わせて初期化や後始末な処理を書くことが出来る。

componentWillMount

  • 初期化処理を行う。
  • ComponentがDOMツリーに追加される前に一度だけ呼ばれる。
  • server-side rendering時にも呼ばれる。

※ v16.3以降、deprecated（非推奨）

componentDidMount

  • DOMに関わる初期化処理を行う。
  • ComponentがDOMツリーに追加された状態で呼ばれる。
  • server-side renderingの時には呼ばれない。

componentWillReceiveProps

  • propsが更新される時に呼ばれる。

  • Componentが新しくDOMツリーに追加される時には呼ばれない。

  • 主に、Notification（変更通知）的に使う。

    • 親Componentのstateがpropsとして渡されていて、
    • その値が変化した時に何かしたいときに使用する。
    • setStateすると、描画もされる。

※ v16.3以降、deprecated（非推奨）

shouldComponentUpdate

  • Componentがrerenderされる前に呼ばれる。
  • Performanceの向上を目的に実装する。
    • trueを返すとVirtualDOMの比較を行いrerenderされる。
    • falseを返すとVirtualDOMの比較を行わずにrerenderもされなくなります。

componentWillUpdate

  • Component更新前に呼ばれる（初回時には呼ばれない）。
  • この中でsetStateを呼ぶことは出来ない（→ componentWillReceiveProps）。

componentDidUpdate

  • Component更新後に呼ばれる（初回時には呼ばれない）。
  • DOMの変化にフックして何かしたい場合に使う。

componentWillUnmount

  • ComponentがDOMから削除される時に呼ばれる。
  • イベントの解除などクリーンアップ処理に使用する。

参考（ライフサイクル）

Component と Container

Presentational Component

見た目を担当するコンポーネント

  • 独自のマークアップとスタイルを持つ。

  • アクションやストアの部分は分離される。

  • 多くの場合

    • this.props.childrenとして他に内包され、
    • propsとしてデータとコールバックを受け取れる。

  • 稀に独自のstateを持つ。
    （それはデータではなくUIの状態として持つ。）

  • SFCとして記述できる場合は、SFCとして記述する。

Container Component

ロジック（物事の振る舞い）に関与するコンポーネント

  • 通常、ラッピングのdivを除いてDOMマークアップ、スタイルを持たない。

    • Presentational Componentや、
      その他のコンポーネントにデータと振る舞いを提供する。

    • 基本的に状態保持と処理を行う

      • アクション呼び出しなどをコールバック
        としてPresentational Componentに渡す。

      • データソースとして機能する傾向がある

  • 通常、上位コンポーネントを使用して生成される

    • React Reduxのconnect

    • RelayのcreateContainer

    • Flux UtilsのContainer.create

参考（Component と Container）

その他のコンポーネント

状態を持たないコンポーネント（SFC）

  • SFC : Stateless functional components

  • stateを自身で持たないシンプルなコンポーネントの場合、
    React.Componentを継承したクラスの定義は不要。

  • 以下が不要な場合は、SFCとしてComponentを定義可能。

    • stateの管理
    • lifecycle系のメソッド
    • Context、refs
    • サードパーティライブラリのインスタンス管理
    • パフォーマンスの効率化

  • 定義

    • propsがない場合

      • 匿名関数

        const Hello = function() {
  return <div>Hello XXXX</div>
}

      • ラムダ式

        const Hello = () => <div>Hello XXXX</div>

      • 使い方

        <Hello />

    • propsがある場合

      • 匿名関数

        const Hello = function(name) {
  return <div>Hello name</div>
}

      • ラムダ式
        関数の引数でDestructuring

        const Hello = ({name}) => <div>Hello {name}</div>

      • 使い方

        <Hello name="XXXX" />

  • 参考

テンプレート・コンポーネント

  • 定義
    {this.props.children}で子を描画。

    // テンプレート・コンポーネント
class TemplateComponent extends React.Component {
  render() {
    return (
      <main>
        <header>
          <h2>{this.props.title}</h2>
        </header>
        <div>
          {this.props.children}
        </div>
        <footer>
          <p>copyright company</p>
        </footer>
      </main>
    )
  }
}

  • 利用
    TemplateComponentにChildComponentを指定。

    // Mainコンポーネント
class MainComponent extends React.Component {
  render() {
    return (
      <section>
        <h1>Main Title</h1>
        <TemplateComponent title={'コンテンツタイトル'}>
          <ChildComponent />
        </TemplateComponent>
      </section>
    )
  }
}

コンポーネントの属性

ref属性

同一コンポーネントのインスタンスを識別する。

データおよびイベント連携

親から子

props（親から子）

JSX Spread Attributes

親コンポーネントが保持しているデータを
全て子コンポーネントのpropsに渡す。

  • 子側の定義は不要で、以下のように利用可能。

  • 親側でスプレッド演算子（ECMAScriptの該当節を参照）によりデータを指定。

    • 任意のデータ

      var props = {};
props.foo = x;
props.bar = y;
var component = <子 {...props} />;

    • 親側のpropsデータ

      <子 {...this.props}>

componentWillReceiveProps（親から子）

  • 親側は、

    • this.stateを子のpropsにバインドしておき、

    • setStateでstateの変更を反映する。

  • 子側は、

    • コンポーネントが変更された、新しいpropsを受け取ると、
      componentWillReceivePropsが変更通知として実行される。

    • propsの更新をsetStateで反映する。

      componentWillReceiveProps(newProps) {
  //JSON.stringify(newProps);
  this.setState({count: newProps.count});
}

子から親

  • 親のハンドラをthis.propsで子に渡して、
    子からハンドラを呼び出す（引数指定可能）。

  • その後、必要に応じて、「親から子」のデータ連携を行う。

参考（データおよびイベント連携）

js STUDIO

Qiita（データおよびイベント連携）

Css in JS

概要（Css in JS）

（元 Wiki では未記載）

参考（Css in JS）

コンポーネント・ライブラリ

CSS

react-bootstrap

Material-UI

  • マテリアルデザインをReact.jsで実現するライブラリ。

  • Bootstrapと提供機能はほとんど同じ。

    npm install material-ui --save

拡張機能

react-hot-loader（AppContainer）

Reactコンポーネントが状態を失うことなく、
ライブで再ロードされるようにするプラグイン。

react-router-dom（BrowserRouter）

https://reacttraining.com/react-router/
https://reacttraining.com/react-router/web/guides/philosophy

  • Router

    • BrowserRouter
      通常のRouter

    • HashRouter
      URLフラグメント、URLハッシュ値を使用したRouter

  • パラメタ

    • パラメタを持たないコンポーネント

      <Route exact path="/" component={FormInput}/>

    • パラメタを持つコンポーネント

      • オブジェクト

        <Route exact path="/" render={props => <FormInput data={this.state.data} />} />

<p>Data:{ this.state.data }</p>

      • URL

        <Route path="/:id" component={FormInput}/>

<p>ID:{props.match.params.id}</p>

  • タグ

    • Link
    • Redirect

isomorphic-fetch（fetch）

XMLHttpRequest代替のfetch APIのPolyfill（WHATWG Fetch polyfill）。

データ連携

リサイズ・移動など

React-Resizable

Drag&Dropで画面項目をリサイズ

React-Draggable

Drag&Dropで画面項目を移動

UIコンポーネント

React Contextmenu

右クリックでメニューを表示する

React Tree Menu Component

ツリーメニュー

rc-calendar

カレンダーでの日付表示、日付入力機能

react-big-calendar

スケジューラ用途のカレンダー

React Bootstrap Table

高機能テーブルコンポーネント（ソートやフィルタリング、ページジング）。

新機能

React.

Fragment

  • １つのタグにまとめるルートのタグとして使用できる。
  • Fragmentタグ自体はレンダリングされない。
  • 配列も返すことが出来る（ただし、keyが必要）。

createRef

  • ref属性を定義した要素のRefsを取得する方法の一つ。
  • RefsによりDOMやReactコンポーネントへのアクセスが可能となる。
  • createRef以外にもcallbackによる取得も可能。

createContext

  • バケツリレー（prop drilling）問題を解決する。

  • react-reduxのProviderとほぼ同様の機能

  • ProviderとConsumerというComponentを使う。

  • ProviderでwrapしたComponent以下は
    Consumer経由でいつでもProviderに
    設定されたパラメータをpropsで参照できる。

Suspense

  • React.Timeoutだったり、React.Placeholderだったりしたもの。

  • 子コンポーネントでPromiseをthrowすることで、

    • 子コンポーネントのレンダリングを中断し、
    • Promiseの完了時にレンダリングを再実行する。

lazy

遅延ロード用のコンポーネントをimportするための機能

  • JavaScriptファイルを分割ロード
  • React.Suspenseと一緒に利用

memo

FCでshouldComponentUpdate相当のことができる。

getDerivedStateFromProps

React v16.3以降、ライフサイクルメソッドの

deprecated（非推奨）のため、代用が必要。

Pointer Events

（元 Wiki では未記載）

エラー処理

ErrorBoundary

  • this.props.childrenの評価時に発生したエラーを
    親コンポーネントのcomponentDidCatchで取得できる。

  • React.Suspenseで利用されている機構。

getDerivedStateFromError

（元 Wiki では未記載）

step by step 的な

step by step 的な２

「Vite + React + TypeScript + Tailwind」と「Claude Sonnet」で爆速♨

ReactNative

ReactNative

参考

＠IT

Qiita（参考）

Schoo

学べる生放送コミュニケーションサービス

POSTD

マイクロソフト系技術情報 Wiki

移行メモ

  • 「React自信にデザインの機能はない」→「React自身に」、 「JSXタグは頭文字を大文字になる」→「頭文字が大文字になる」、 「React 要素作成する仮想DOM」→「React 要素を作成する仮想DOM」に修正した。
  • 「ｎクラス、インポート（１ファイルに複数定義されている場合。」の 閉じ括弧の欠落を補った。
  • 本文の無い見出し（「Pointer Events」「getDerivedStateFromError」「Css in JS」の概要）には 未記載である旨を明示し、「データ連携」「step by step 的な」配下は箇条書きにまとめた。
  • 同名の見出し（「特徴」「Css in JS」「参考」「Qiita」「概要」「props」 「componentWillReceiveProps」）が複数あり GitHub Wiki でアンカが衝突するため、 括弧で文脈を補って一意にした。
  • マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への URL リンクは、移行済みの XAML / ASP.NET Core SPAテンプレート / ASP.NET Core React.jsテンプレート / ASP.NET Core React+Reduxテンプレート に張り替えた。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。
  • 本フェーズで新たに参照された「Flux」「Hooks」「Reactのサード・ステップ」 「Reactの4thステップ」「Reactの5thステップ」「Reactのファースト・ステップ２」 「Reactのセカンド・ステップ２」を TODO.md に予約した。

Tags: 移行, React, JSX, 仮想DOM, コンポーネント, state, props, SPA, Redux, Flux, Hooks

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally