これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org カスタムフックの抽出 カスタムフックとは名前がuseで始まり、ほかのフックを呼び出せるJavaScriptの関数。 import { useState, useEffect } from 'react'; function useFriendSt…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 独自フックの作成 独自のフックを作成することでコンポーネントからロジックを抽出して再利用可能な関数を作ることが可能。 以下の例はフレンドがオンラインかオフラインかを示す…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックのルール 解説 Reactは一つのコンポーネント内で複数のstateや副作用を使うことができるのはこれまでに学んできた。 Reactはフックが呼ばれる順番に依存してuseStateの呼び…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックのルール ESLint プラグイン 昨日話題に出ていたルールを適用しやすくするためのプラグイン Create React App で実行した場合はデフォルトで含まれているらしく、それ以外…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックのルール フックはJavaScriptの関数だが、2つのルールに従う必要がある。 ルール強制のためにlinterプラグインが公式に提供されているのでそれを使うといいらしい。 www.np…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 副作用を使う場合のヒント ヒント：副作用のスキップによるパフォーマンス改善 毎回レンダーをするとパフォーマンスへの影響が懸念される。 クラスの場合はcomponentDidUpdate の…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 副作用を使う場合のヒント 解説：なぜ副作用は毎回の更新ごとに実行されるのか クラスの考えでいくとクリーンアップをアンマウントだけでなく再レンダー時に毎回発生するのか不思…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 副作用を使う場合のヒント React経験者向きのuseEffectについての説明になるらしい。 ヒント：関心を分離するために複数の副作用を使う フック導入の動機はライフサイクルメソッ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org クリーンアップを有する副作用 まとめ useEffect を用いることで、コンポーネントのレンダー後に実行される様々な種類の副作用を表現できる。 useEffect(() => { function handle…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org クリーンアップを有する副作用 外部のデータソースへの購読をセットアップしたい場合、メモリリークが発生しないようにクリーンアップが必要。 メモリリークを避けるためにクリー…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org クリーンアップを有する副作用 外部のデータソースへの購読をセットアップしたい場合、メモリリークが発生しないようにクリーンアップが必要。 メモリリークを避けるためにクリー…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org クリーンアップを必要としない副作用 ReactがDOMを更新したあとで追加のコードを実行したいという場合があるので例を見ていく。 フックを使った例 import React, { useState, use…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org クリーンアップを必要としない副作用 ReactがDOMを更新したあとで追加のコードを実行したいという場合があるので例を見ていく。 クラスを使った例 Reactのクラスコンポーネントで…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 副作用フックの利用法 副作用フックによって関数コンポーネント内で副作用を実行することができるようになる。 サンプル import React, { useState, useEffect } from 'react'; f…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ステートフックの利用法 まとめ useStateフックをReactからインポートする。そうすることで関数コンポーネント内でローカルstateが使えるようになる。 Example コンポーネント内…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ステートフックの利用法 state の更新 クラスでは、this.stateを使うとcountステートを更新する。 <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> 関数内ではすで…

www.kindaikagaku.co.jp 少しずつ読んでいたのをようやく読み終えた。 その昔テストケースを考えてあれこれやっていた頃にこういうこと知ってればなーというのが体系的に書かれており、 自分の記憶の答え合わせのようで面白かった。 テストの考え方や、どう…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ステートフックの利用法 state の読み出し クラス内で現在のカウント値を表示したい場合、this.state.countを読み出す。 <p>You clicked {this.state.count} times</p> 関数内の場合はco…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ステートフックの利用法 state 変数の宣言 クラスを使った動作では、コンストラク内でthis.stateを{ count: 0}にセットする方法で、 stateであるcountを０へと初期化する。 関数…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ステートフックの利用法 フックとは何か？ ReactからuseStateをインポーするところから始める。 フックとはReactの機能に接続するための特別な関数。 例えばuseStateによってReac…

これは sora-unity-sdk-samples を Android で動かした手順をまとめた記事です。 目次 目次 GitHubへのリンク この記事はどこまで？ 実行環境 事前準備 準備完了からシーンオープンまで 接続先の設定 Sora Laboの使い方 ビルド準備 動いた おわりに GitHubへ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ステートフックの利用法 クラスによる同等の例 フックでできることをクラスでやった場合の例 class Example extends React.Component { constructor(props) { super(props); this…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック早わかり その他のフック 使用頻度低めなものの便利なフックは存在している。 useContextを使うとReactのコンテクストをコンポーネントのネストなしに利用できるようにな…

www.diamond.co.jp 超面白かったので数時間ぐらいで一気に読んでしまった。 元任天堂企画開発者と言うこともあって、有名なゲームを引き合いに出しながら、体験をデザインするとは何か？を解説してくれている。

勧められてスタートしたこのブログ、1 年が経ちました。(ちょっと遅くなってしまいましたが...) 毎回自己満足のために続けているのですが、結構楽しくてもっと続けてみたいなーと思っています。 書くネタも増やしていきたい。 1年といえど特に何もなく淡々と…

ちょっと理解しきってない部分があったので、再読。 だいぶ理解したと思うけど、たぶんまた何回も読むことになると思う。 良書は何度読んでも発見と知恵を授けてくれるけど、そんな感じの本です。 もっと早く出会ってたらもっと違ったと思うって何度読んでも…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック早わかり 独自フックの作成 state を用いたロジックをコンポーネント間で再利用したい場合 高階コンポーネントとレンダープロップを使って解決することが多かった。 カス…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック早わかり ✌️ フックのルール フックは JavaScript の関数だが2つルールがある。 フックは関数のトップレベルのみで呼び出すこと フックは React の関数コンポーネント内部…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック早わかり ⚡️ 副作用フック Reactコンポーネントの内部から外部データの取得などをする場合、他のコンポーネントに影響が出ることがある。 useEffectは副作用のためのフック…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック早わかり 要するにフックとは？ フックとは関数コンポーネントにstateやライフサイクルといったReactの機能を接続するための関数。 フックはReactをクラスなしに使うための…