Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する効果を持ちます。 これらは最適化のためのツールなので、「過度な最適化」を避けるように啓蒙する言説がよく見られます。 すなわち、ちゃんと本当に最適化のために必要なところにだけこれらを使おうということです。 特に、React.memoはpropsが以前と変わっているかどうかを判定するためのオーバーヘッドがあるし、useMemoやuseCallbackもフック呼び出しのオーバーヘッドがあります。 意味がないところでReact.memo

React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript

こんにちは。最近は仕事で React を書き始めました。数年前に React を触った時は class component をせっせと書いた覚えがあるのですが、最近は functional component と react hooks を組み合わせて書くこともできるようです。react hooks の概要は公式ドキュメント等を読んでもらうことにして、本記事では、自作のカスタムフックで stateful なコンポーネントを整理する一例を紹介し、それによって享受できるメリットを少し深掘りしたいと思います。 整理する前のコード まずは僕が最初にお試しで書いた TypeScript のコードをお見せします。インターネットに転がっている例をつぎはぎして、見よう見まねで書いた投稿フォームです。コード中の useQuery は、apollo client のフックで、与えられた GraphQL クエリ

まず env-cmd をインストール。 yarn add env-cmd ステージング環境用の環境変数を記述した .env.staging ファイルを用意。 REACT_APP_BASE_PATH="https://testapi-staging.example.com" React アプリ内では process.env を使って環境変数を参照しておく。 const basePath = process.env.REACT_APP_BASE_PATH; package.json の scripts に、ステージング環境用のビルドを行うスクリプトを追加。 { "scripts": { "build": "react-scripts build", "build:staging": "env-cmd .env.staging npm run build" } } あとは yarn build:

前回の記事では同期的なTODOアプリを例としてReact + Reduxの基本的な使い方を学びなおしました。 今回は非同期処理の扱い方を勉強してサンプルのアプリケーションを作ったので、要点などをメモしておきます。 Reduxでの非同期処理について 実際のアプリケーションではAPI通信など非同期処理が必ずと言っていいほど入ってくると思います。 たとえば fetch() を使って何かデータを取ってくる Action creator を定義したいとします。 const fetchSomeThing = (url) => { return fetch(url) .then(res => res.json()) .then(json => { return { type: 'FETCH_DATA', payload: { response: json } } }); }; fetchSomeThin

TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、

React Reduxを使ってプロダクトを作りはじめて、かれこれ半年くらい経ちます。 しかし、どうもうまく書けていない気がすることがときどきあり、悩んでいたところ、ツイッターで次のような助言をもらいました。 @__tai2__ 達人かどうかは微妙なところがありますが、ある程度の規模のコードはここにリンク集あります https://t.co/B79B5s1DTe — Yuki Kodama (@kuy) 8 December 2016 この記事は、上記のリンク集でまとめられている実際のReact Reduxプロダクトのソースコードを調査することで、筆者がふだんReact Reduxで開発をしていて感じる疑問への答えを探る試みです。 筆者が答えを得たいと思っている疑問は次の3つです 1 Storeはどんな具合に階層化すべきか Store初期化(hydration)用データの定義はどうすべきか

ducksというデザインパターンを使用して簡単なTodoアプリを作成しようと思います。 機能としては以下になります。 タスクを追加できる タスクが終わったかどうかのラベルをつけることができる 環境構築 今回は自分みたいにブログの更新に時間がない方などが手軽にちょちょいと構築できるツールでcreate-react-appを使用します。 以下のコマンドを実行します。 create-react-app ducks_todo ducksについて ducksの公式サイトには以下のようなルールが記載してあります。 reducerはexport deaultをしなければならない action creatorは関数してexportしなければならない actionは定数で定義する などが挙げられます。 早速実際にアプリを作成していきましょう。 まずプロジェクトフォルダに移動してください。 cd ducks_

Ducks というデザインパターン Reduxのファイル構成は『Ducks』がオススメ – Qiita The Ducks File Structure for Redux – S.C. Barrus – Medium erikras/ducks-modular-redux: A proposal for bundling reducers, action types and actions when using Redux Redux Way React + Redux で構築する際のディレクトリ構成としてよく知られるのは、redux-way と呼ばれるやつです。Reduxの登場人物であるところの、container, reducer, action(action creator) それぞれについてディレクトリを分けてファイル単位で分割します。ディレクトリ構成はこんな感じになります。 s

React: Material-UI 4.0のコンポーネントへのCSS設定はwithStyles()からmakeStyles()にJavaScriptReactmaterial-uicss-in-js Material-UIは、Googleの提唱するマテリアルデザインを実装したReactコンポーネントです。また、CSSのスタイルシートをJavaScriptコードに書き込むCSS-in-JSを採用しました。そして、そのスタイルシートをコンポーネントに提供する関数がmakeStyles()です。本稿では、この関数を使って、Reactの簡単なアプリケーションの関数コンポーネントにスタイルシートを定めてみます。 これまでスタイルの定めには、コンポーネントをラップするwithStyles()関数が用いられました(「React: Material-UIのwithStyles()でCSSをJavaScr

React Routerの使い方を学んでいく。 先月にv4がリリースされたので、それに準拠した内容を学んでいく。 ここで述べていることは正確な仕様とは異なる可能性が十分にあるので、正確なことを知りたい場合は公式のドキュメントを読みましょう。 React Router: Declarative Routing for React.js 何のためにReact Routerを使うのか 具体的な使い方に入る前に、そもそも何のためにReact Routerを使うのかを少し書いてみる。 聞きかじったり自分で考えたりしたものなので、これもまた、間違っている可能性が大いにあります。 SPAとは、ページ遷移を行わず単一ページでコンテンツの切り替えを行うウェブアプリケーションのこと。 ページの読み込みは最初の1回だけで、後はそのページのなかで、JavaScriptによって描画やAPIへのアクセスを行う。 この

はじめに 本投稿の背景と目的 Reactの公式チュートリアルは大変よくできているので、初学者がReactの基本を学ぶためには、まずは公式チュートリアルに沿って手を動かしていくのが一番だと思います。 私自身、公式チュートリアルをやってみて基本的な部分の理解はできたものの、以下の点が自分にとっては課題に感じました。 TypeScriptで書きたい場合にどうすればよいか分からず、いろいろ調べる必要があった 三目並べという題材が若干トリッキーに感じた というわけで、TypeScriptを使ってReactに入門するための、よりシンプルな題材のチュートリアルを作成することが本投稿の目的です。 私自身が初学者なので、初学者目線での説明を心がけていますが、わかりにくい箇所や間違っている箇所などありましたら忌憚のないコメントを頂けると有り難いです。 （2020-09-22追記） TypeScriptでRea

ReactにHooksの仕組みが導入されてからずいぶん経ちました。Hooks導入当時のコミュニティの熱狂は、それはもう凄いものでした。「Reactにとんでもない機能が実装されたぞ！」と大騒ぎで、Hooksについての新しい記事を見ない日はありませんでした。 そんな盛り上がりも冷めつつあり、Hooksも実務に密着した「当たり前」の機能になったのかな、と思いました。しかしその一方でまだHooksについてはよくわからないという人も多く、知識の二極化を生んでいるように感じます。 世の中にはReactにすでに全く馴染んでいる人向けのHooksの解説記事は多く見当たりますが、最近のReact初心者に向けてのHooks解説記事はあまり多くありません。この記事では、Hooksについて実例を示しつつReactの基礎的な面からの解説を行います。 React初心者向けのHooks 世の中にはもう多くの高品質なHo

Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ

Material-UI ではアプリ全体の見た目や動作をThemeで設定することができます。 過去に数回のフロントエンド開発で Material-UI を使ってきたのですが、その中に必ずと言っていいほど設定するTheme項目があります。 そんな必ず設定するようなTheme項目をまとめました。 対象バージョンは4.0.0以降です。 尚、ここで紹介した設定項目を全て適用したThemeとデフォルトのThemeを比較できるサンプルを作成したので参考にしてください。 ボタンのラベルが大文字になるのを防ぐ - typography.button.textTransform="none" TextField のバリエーションを変更する - props.MuiTextField.variant テーマカラーの設定 - palette.primary 入力コントロールの色を統一する - props.{MuiC

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert