これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 差分検出処理 差分アルゴリズム Keys Reactはkey属性をサポートしている。 子要素がkeyを持っている場合Reactはkeyを利用して元のツリーの子要素と次のツリーの子要素を対応させ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 差分検出処理 差分アルゴリズム 子要素の再帰的な処理 DOMノードの子に対して再帰的に処理を行う場合、デフォルトでは両方の子要素のリストのそれぞれ最初から同時に処理を行って…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 差分検出処理 差分アルゴリズム 同じ型のコンポーネント要素 コンポーネントが更新される場合、インスタンスは同じままとなる。 レンダー間でstateは保持される。 Reactは対応す…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 差分検出処理 差分アルゴリズム 同じ型の DOM 要素 同じ型の２つのReactDOM要素を比較した場合、Reactはそれぞれの属性を調べ、対応する共通のDOMノードを保持し、変更された属性…

2019年も終わり。 今年の振り返りを列挙していきます。 生活とか環境など たくさん失敗した 始めたけど中断したものもあった だめだったものもあった 勧められるままにブログを書き続けてみることにした VRKaigiでボランティアスタッフやってた 仕事はちょっ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 差分検出処理 差分アルゴリズム 2つのツリーが異なっている場合Reactは最初に二つのルート要素を比較する。 異なる型の要素 Reactの機能として、ルート要素が異なる型を持つ場合…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 差分検出処理 Reactは更新時に何が更新されるべきかをAPIで処理できるようにしている。 こういった機能があるからこそReactアプリは作成が容易にできる。 Reactがどのように処理…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ポータル ポータルを介したイベントのバブリング ポータルはDOMツリーのどこでも存在できる。 基本的にはReactの子要素と変わらずに振舞う。 イベントのバブリングも含まれ、ポー…

はじめに これは【推し祭り】技術書典で出会った良書 Advent Calendar 2019 22日目の記事です。 adventar.org 今回はでんでんらぼさんの「WebRTCをブラウザ外で使ってブラウザでできることを増やしてみませんか?」を推していきます。 booth.pm…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ポータル ポータルとは親コンポーネントのDOM海草街にあるDOMノードに対して子コンポーネントをレンダーするための公式の仕組みのことである。 ReactDOM.createPortal(child, con…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 データを変更しないことの効果 propsやstateで使用する値のミューテートを避けることで、更新の要否を判断することができるようになることは昨日確認しまし…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 例 shouldComponentUpdateについての続きです。 こんなコードがあったとします。 class CounterButton extends React.Component { constructor(props) { su…

これはWebRTC Native Client MomoをJetson Nanoで動かした手順をまとめた記事です。 目次 目次 GitHubへのリンク Jetson Nano向けのドキュメントはこちら この記事はどこまで？ 事前の事前(Jetson Nanoのセットアップ) 事前準備 準備完了から動かすまで 接続…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 shouldComponentUpdate の実際の動作 図中のSCUはshouldComponentUpdateが返した値で、緑がtrue、赤はfalseを示す。 vDOMEqはレンダーされたReact要素が等…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 リコンシリエーション（差分検出処理）を避ける ReactはレンダーされたUIの内部表現を構築して維持する。 内部表現の中にはコンポーネントが返したReact要…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 長いリストの仮想化 アプリケーションが長いデータのリストをレンダーする際は「ウィンドウィング」というテクニックを使うといい。 このテクニックはある…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 DevToolsプロファイラを使用したコンポーネントのプロファイリング react-dom16.5以降とreact-native0.57以降では開発モードで強化されたプロファイリング…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 Chrome のパフォーマンスタブでコンポーネントをプロファイルする 開発モードであればブラウザの解析ツールでコンポーネントの様子を可視化することができ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 本番用ビルドを使用する Create React App webpack Webpackの説明がされているが、Create React Appを利用している場合はそちらのやり方に従う。 直接webpa…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 本番用ビルドを使用する Create React App Rollup この記事も参考になりそう。 qiita.com 導入にはプラグインを入れる。 # If you use npm npm install --s…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 本番用ビルドを使用する Create React App Browserify BrowserifyはNode.js製のツールらしい。 Node.jsのコアモジュールやnpmをブラウザでも利用できるよう…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 本番用ビルドを使用する Create React App Brunch Brunchで本番用ビルドやるなら‘terser-brunch‘を使うとよいらしい。 github.com インストールはnpmやYarn…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 本番用ビルドを使用する Create React App Create React Appで構成されたアプリケーションであれば、 npm run buildコマンドを実行するとプロジェクト配下…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org パフォーマンス最適化 ReactはUIの更新時にDOM操作の回数を最小化するために、内部的に処理を行っている。 多くの場合最適化などを行わなくてもReactを使えばレスポンスの向上は…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JSX における props JSX における子要素 真偽値、null、undefined は無視される true,false,null,undefinedは子要素として渡すことができ、何もレンダーしない。 // 以下はすべて…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JSX における props JSX における子要素 子要素としての関数 JSXタグに囲まれたJavaScript式は多くの場合以下のように評価される。 ・文字列 ・React要素 ・上記のリストとして評…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JSX における props JSX における子要素 子要素としての JavaScript 式 JavaScriptの式は{}で囲むことによって子要素として渡すことが可能。 JSXも同様の機能を持っている。 <Mycomponent>Samp</mycomponent>…

※注意※ 下記の方法は古い情報になります。 最新の動作方法については Sora Unity SDK のリポジトリをご確認ください。 ※注意※ これは sora-unity-sdk-samples を動かした手順をまとめた記事です。 目次 目次 GitHub へのリンク この記事はどこまで？ Mac で…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JSX における props JSX における子要素 子要素としての JSX 要素 JSX要素を子要素とする方法もある。 子要素にする理由としてはネストしたコンポーネントを表示したい場合などに…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JSX における props JSX における子要素 開始タグと終了タグの両方を含むJSX式に置いて、タグに囲まれた部分はprops.childrenというプロパティとして渡される。 こういった子要素…