XXとしてる: ProxyとMutationObserver

Reactでサイトを作り変えているところ、こんな感じな画面になった。

<div style="text-align: center">下に余白がある</div>

フッターが中途半端な部分にあって、ちょっとダサい感じ。

なのでbodyタグの高さが画面より低かったら画面下部に固定するようにしたかったが、一筋縄ではいかなかったので、メモを残していく。

## とりあえずReactのrender関数で

手っ取り早いのでReact.Coponentのrender関数内でフッターのスタイルを動的に切り替えようと試みてみた。

```js
export class Footer extends React.Component<Props, State> {
  render() {
    const body = document.body
    let STYLE = {
      position: undefined,
      bottom: undefined
    } as React.CSSProperties
    if (body.scrollHeight < window.innerHeight) {
      STYLE.width = '100vw'
      STYLE.position = 'absolute'
      STYLE.bottom = 0
    }
    return // ...
  }
}
```

<div style="text-align: center">へへ、bodyの高さが0のままだぜ</div>

そりゃ、Reactで今から描画しようとしているんだから、書きかけな状態ではまだ全体の高さはわからないよ。

というわけで、次に移行する

## Reactのライフサイクル関数をフックする

それじゃ描画後に高さを計算したらいいんじゃないと言うわけで`componentDidMount()`内でスタイルの切り替えを行うようにしてみた。

[State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)

```js
export interface State {
  isFixedBottom: boolean
}
export class Footer extends React.Component<Props, State> {
  componentDidMount() {
    // 描画後に呼び出される
    const body = document.body
    this.setState({isFixedBottom: body.scrollHeight < window.innerHeight})
  }
  render() {
    // this.state.isFixedBottomを使ってスタイルを切り替えるように変更
  }
}
```

<div style="text-align: center">やった！高さがちゃんと取得できたぞ！</div>

ちなみにページ内容をタブで切り替えられるようにしていたので`componentDidMount()`だけでは不十分で`componentDidUpdate()`で更新したときにも処理をはさまないといけない。

```js
export interface State {
  isFixedBottom: boolean
}
export class Footer extends React.Component<Props, State> {
  componentDidUpdate() {
    //なにか更新があったときに呼び出される
    const body = document.body
    this.setState({isFixedBottom: body.scrollHeight < window.innerHeight})
  }
}
```

<div style="text-align: center">いや〜、出来た出来・・うん？</div>

<div style="text-align: center">'componentDidUpdate()'が呼びされない・・だと・・・</div>

<div style="text-align: center">なぜだぁ・・・なぜなんだ・・・</div>

<div style="text-align: center">フッターそのものは更新されないぞ</div>

その通りである、実際に更新されるのはページ内の他のコンポーネントなので、フッターそのものは更新されないのである。

困った。これは困った。

フッターではなくてページ単位でフックするようにしたらいいのだと思うけど、コンポーネント間のやり取りが出来てしまって管理が大変になるし、
毎回ページにそれ関係のコードを追加するのがめんどくさいぞ。

いったいどうしたらいいんだ・・・

## ProxyをつかってダイレクトにBodyの高さを監視する

じゃあさぁ・・・bodyタグの高さの変更をフッターコンポーネント内で監視するようにしたらいいんじゃない？

というわけで早速調べてみると、JavaScriptにProxyというものがあってそれがぴったり今回の問題に使えそうであった。

[Proxy](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)

```js
export class Footer extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)
    const bodyProxy = new Proxy(document.body, {
      set: (target: HTMLElement, name: string | number | symbol, value: any): boolean => {
        if ('scrollHeight' !== name) {
          return true
        }
        // 現在の状態と異なっていたときに変更するようにしたほうがいいけど簡略のためにこうしている
        this.setState({isFixedBottom: document.body.scrollHeight < window.innerHeight})
        return true
      }
    })
    document.body = bodyProxy // エラー
  }
}
```

<b>Proxy経由で値を変更しないと設定したハンドラーは実行されないので</b>、なんとかしてdocumentにあるbodyをそれと差し替えないといけない。

上のコードのようにReactでは直接値を書き換えることは禁止されているので、どうしたらいいんだ・・・。

## DOMのイベントハンドラーに都合のいいイベントありますか？

`Document.onvisibilitychange`はウィンドウやタブ単位の可視性が変わったときに発行されるイベントで今回とは異なる。
`Window:afterprintイベント`もドキュメントが描画されから終わった後に発行されるので、これも異なる。

JSではうまく検知できない問題？

そんなことない！

#### <i>MutationObserver！！</i>

jsにはMutationObserverというDomツリーの変更を監視できるインターフェースが用意されている。

[MutationObserver ドキュメント](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
Proxyでは生成したインスタンス経由で値を変更しないとコールバックが呼び出されなかったので断念したが、これを使えばできる！

それで以下のようなコードを書くと、

```js
export class Footer extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      isFixedBottom: false
    }
    let config = {
      childList: true,
      subtree: true,
    } as MutationObserverInit
    const callback = (_mutationList: MutationRecord[], _observer: MutationObserver): void => {
      const lowBodyHeight = document.body.scrollHeight < window.innerHeight
      if (this.state.isFixedBottom !== lowBodyHeight) {
        this.setState({
          isFixedBottom: lowBodyHeight
        })
      }
    }
    let observer = new MutationObserver(callback)
    observer.observe(document.body, config)
  }
// ...
```

無事、目的を達成することが出来る。

`observer.observe(document.body, config)`の部分で監視を始めている。

第一引数に監視対象を、第二引数に監視内容を渡す。

今回は子要素も含めたノードで子の追加/削除があったときにコールバックを呼び出すように設定してある。

これで他のコンポーネントの更新があったかが擬似的にわかるようになったので、
あとはそれに合わせてフッターを画面下部に固定するかしないかを決めるだけであっさりと出来上がり。

（画像は以下のものを使用させていただきました。）

XXとしてる

2019年4月16日火曜日

ProxyとMutationObserver

0 件のコメント:

コメントを投稿