これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org サスペンスを使ったデータ取得（実験的機能） 早期から取得を開始する データ取得ライブラリを使うのであればレンダーより前に取得を開始することが大切。 // Start fetching ear…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org サスペンスを使ったデータ取得（実験的機能） アプローチ 3: Render-as-You-Fetch（サスペンスを使用） これまではsetStateを呼び出す前にデータの取得が必要だった。 サスペンス…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org サスペンスを使ったデータ取得（実験的機能） アプローチ 2: Fetch-Then-Render（サスペンス不使用） ライブラリはより中央集権的なデータ取得の方法を提供することで、ウォータ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org サスペンスを使ったデータ取得（実験的機能） アプローチ 1: Fetch-on-Render（サスペンス不使用） 現状Reactではeffectを使用してデータを取得する。 // In a function componen…

www.sotechsha.jp Jetson nano を始めて触るなんてときにものすごく丁寧にいろいろと説明してくれている一冊。 自分としては電源周りの部分の理解が深まったのでとてもよかった。 電子工作についても軽く触れられており、そのあたりに手を出してみたいとか考…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org サスペンスを使ったデータ取得（実験的機能） 既存アプローチ vs サスペンス Fetch-on-render：コンポーネントのレンダーを開始する。 Fetch-then-render：次の画面のためのデー…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org サスペンスを使ったデータ取得（実験的機能） 現環境でのサスペンスの使用 FacebookではRelay のサスペンス連携機能のみすでに利用しているらしい。 Relay を使ってない場合はも…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org サスペンスを使ったデータ取得（実験的機能） そもそもサスペンスとは何なのか？ 昨日も触れたようにサスペンスはレンダー可能になる前にコンポーネントが何かを待機できるように…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org サスペンスを使ったデータ取得（実験的機能） React 16.6 で追加されたコードのロードを待機してロード中状態を指定できるSuspenseコンポーネントが追加された。 const ProfilePa…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org] 研究からプロダクトへ 並列モードは以下を目標に掲げているらしい。 目標は、人間・コンピュータ間の相互作用に関する研究から得られた知見を現実の UI に取り込むことです。 Re…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org] 並列モードの導入（実験的機能） 並列性 これまでの2つの例から統合の仕方を見ていく。 並列モードではReactは複数の状態の更新を同時に行うことができる。 CPUバウンドな更新の…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org] 並列モードの導入（実験的機能） 計画的なローディングシーケンス ブランチの作業は短期的なものもそうだけど、時間をかけて十分になるまで維持することもある。 それと同様に並…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org] 並列モードの導入（実験的機能） 中断可能なレンダリング フィルタ出来るリストがあった場合、リストのフィルタにタイピングをしようとすると、 都度検索が走って引っ掛かりのよ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org] 並列モードの導入（実験的機能） ブロッキングレンダリングと中断可能レンダリング Git以前のバージョン管理はほかの人が作業をしていると触ることすらできなかった。 ブランチ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org] 並列モードの導入（実験的機能） 並列モードとは？ Reactアプリをレスポンシブに保ち、デバイスの能力やネットワークの速度にうまく適応できるようにするための新機能群。 実験…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 並列モードの導入（実験的機能） まだ安定リリースされてない機能らしい。 ビギナーはお呼びじゃない機能なのであまりやらなくてもよいとか。 セクションとしてはこんな構成らし…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト環境 End-to-end テスト E2Eテストは長いワークフローをテストするのに向いており、 本物のブラウザを使い、実運用に即したテストを行う。 Cypress のようなフレームワーク…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト環境 タイマーのモック コンポーネントがsetTimeout、setInterval や Date.now といった時間に依存する関数を使っていた場合 関数部分をモックで置き換えて手動で操作をで…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト環境 モジュールのモック テストに関係ない場所に依存しているコンポーネントをテストしたい場合、 その部分だけをモック化して適切な代替物で置き換えることができるので…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト環境 関数のモック テストを書く際はテスト環境に同等物がないコードのモック化をしたい場面がある。 関数の監視をしてテストの部位が関数同士でどのように作用するか観察…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト環境 描画画面のモック jsdomを使って描画のテストをするとよい。 ブラウザとほぼ同様の動きをするが、レイアウトやナビゲーションがないのは注意。 ユーザ操作のモデルを…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト環境 Jest、mocha、avaといったテストランナーをつかうとJavaScriptでテストスイートを書き、実行できるようになる。 テストスイートは継続的インテグレーションの一部とし…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 複数のレンダラ レアケースだが、複数のレンダラを使うコンポーネントへテストをしないといけない場合がある。 react-test-rendererを使っているがその子のコン…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 スナップショットテスト JestのようなフレームワークではtoMatchSnapshot / toMatchInlineSnapshotを使う。 これでスナップショットを保存できる。 一般的には…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 タイマー タイマー用のモックもある 例えばこんな感じ // card.test.js import React from "react"; import { render, unmountComponentAtNode } from "react-d…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 イベント DOMの要素に対して本物のDOMイベントをディスパッチ。 結果に対してアサーションを行うようにした方が良い。 React ではイベントは自動的に document …

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 モジュールのモック化 テスト環境ではうまく機能しないもの、本質的にテストとは違うもの、色々なモジュールがある。 これらをダミーに差し替えることでテスト…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 データの取得 本当のAPIを呼ぶ代わりにリクエストをモック化してダミーデータを返すようにできる。 フェイクデータを用意することでバックエンドが利用できない…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 レンダー 与えられたpropsに対してコンポーネントが正しくレンダーされているかをテストしたい場合、propsに合わせてメッセージレンダーをするコンポーネントを…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 act() UIテストを記述するときのレンダーなどはインタラクションのユニットと考えられる。 Reactのact()はアサーション前にユニットに関する更新が実行され、DO…