2020-02-03

Reactガイドを読んでいくその118

React

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

意図しない副作用の検出

Reactは２つのフェーズで動作する。

レンダーフェーズ変更対象にどのような変更が必要か決める。
Reactはrenderを呼び出して前回のレンダー結果と比較をする。
コミットフェーズ Reactは変更を反映する。
componentDidMount や componentDidUpdate などのライフサイクルの呼び出しも行う。

比較したり描画する必要があるレンダーフェーズでは処理が遅くなることがある。
そうするとブラウザに何も表示されないことになってしまう場合があるので、それを避けるために
細分化して処理を軽くするような非同期処理を実行できるようにすることができる。

レンダーフェーズで呼ばれるメソッドは以下
・constructor
・componentWillMount (or UNSAFE_componentWillMount)
・componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
・componentWillUpdate (or UNSAFE_componentWillUpdate)
・getDerivedStateFromProps
・shouldComponentUpdate
・render
・setState 更新関数（第 1 引数）

これらのメソッドは複数回呼ばれることがあるので、副作用があるような実装にするとうまく動かないことがある。

strictモードを使うと多少この検出が楽になる。
意図的に2回以下のメソッドを呼ぶことで発見の手助けになる。
・クラス型コンポーネントの constructor メソッド
・render メソッド
・setState 更新関数（第 1 引数）
・スタティックなライフサイクル getDerivedStateFromProps

今日はここまで。

2020-02-02

支払調書ってなんですか

会計

これはなに

支払調書っていう存在を知ったのでなんなん？ってのを自分で解釈したのをまとめたものです。
下記参考のfreeeさんのやつがわかりやすかったように思います。

支払調書どんなものか

個人事業主からすると源泉徴収票に近いもの
提出は雇用主側(報酬を支払う側)が税務署に提出する(税務署はこれを使って確定申告の答え合わせができる)
対象となる報酬を1人につき年間5万円以上支払った場合には、支払調書を税務署に提出する
源泉徴収票と違い雇用者へ発行義務はない

支払調書をつくるタイミング

締め切りは1/31まで。年明けから総務の人は忙しそう

支払調書の種類

主な支払調書が必要なパターンは4種類　1．報酬、料金、契約金及び賞金の支払調書　2．不動産の使用料等の支払調書　3．不動産等の譲り受けの対価の支払調書　4．不動産等の売買又は貸付のあっせん手数料の支払調書

支払調書に書かれる情報

支払者の情報
支払を受ける人の情報
区分・細目（授業料とか業務依頼とか）
金額

※マイナンバーの番号が必要なので情報管理がひと手間なんじゃないかと予想。

所感

会計士やらそういう専門家がお金をもらってやるのわかったきがした。大変すぎる。
国税庁の法定調書のページを読んだけど🤪←こんな感じになった
六法全書よりは読みやすいけど…

参考

2020-02-02

Reactガイドを読んでいくその117

React

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

非推奨な findDOMNode の使用に対する警告

Reactにはクラスのインスタンスをもとにツリー内のDOMノードを見つけるfindDOMNode がサポートされていたが、DOMノードにrefを付与できるようになったため不要となった。

findDOMNodeは過去のバージョンで作っていたアプリの場合残っていることがあるので、refフォワーディングを使うように切り替えると従来の動きを損ねず動かすことができる。
またコンポーネントのラッパーのDOMノードを追加し、そこに直接refを付与することもできる。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.wrapper = React.createRef();
  }
  render() {
    return <div ref={this.wrapper}>{this.props.children}</div>;
  }
}

今日はここまで。

2020-02-01

Reactガイドを読んでいくその116

React

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

レガシーな文字列 ref API の使用に対する警告

これからReactを始める場合はそこまで気にする必要はないが、Reactはrefを管理する方法としてレガシーとコールバックの二つのAPIを提供していた。
文字列refAPIは便利だったが、不都合な点があり、コールバック形式を正式に推奨するようになって行った。

リンク先をざくっと読んだ感じ、refAPI(日本語版は文字列APIって訳してるっぽい)がハングしてしまうらしい。

github.com

React16.3では第３の選択肢として上記の問題を避けてうまく使えるようにしたらしい。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

オブジェクトによる ref は文字列 ref を置きかえるために追加されたので、 strict モードでは文字列 ref の使用に対して警告が出る。

今日はここまで。

2020-01-31

Reactガイドを読んでいくその115

React

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

安全でないライフサイクルの特定

Strictモードを使用することでライフサイクルメソッドを非同期なReactアプリで使用する際に役立つことがある。
Strictモードが有効の時、Reactは安全でないライフサイクルをすべてのクラスの型コンポーネントをまとめて警告ログを出すようになっている。
なので安全でないライフサイクルを検知でき、安全なアプリケーションを作ることができる。

少ないですが今日はここまで。