tmegos blog

Web developer

Material UIでFont iconsを使うときに自動翻訳されないようにする

現象

Google Chromeなどで翻訳機能をONにしていると、Font iconsが翻訳されてアイコンが表示されない

f:id:tmegos:20210801112349p:plain
ハンバーガーメニューのアイコンが出るはずなのに「メ」になっている

f:id:tmegos:20210801112352p:plain
開発者ツールで見ると、「menu」が「メニュー」と訳されてしまっている

続きを読む

Material UI v5でのスタイリングエンジンをemotionからstyled-componentsに切り替える

Material UI v5ではスタイリング用のライブラリとしてemotionが使われるようです

next.material-ui.com

Material UIとは別にstyled-componentsを利用している場合、スタイリング用のライブラリが複数存在することになります

Material UIでもstyled-componentsを使いたい場合、@material-ui/styled-engineエイリアスとして@material-ui/styled-engine-scを指定することで実現できるようです

https://github.com/mui-org/material-ui/tree/623c59dc0a6cc71866cc310a2a9363be2226710b/packages/material-ui-styled-engine-sc

Reactの再レンダリングをWhy Did You RenderとReact Profilerを使って調べる

Reactでできたアプリケーションのパフォーマンスチューニングのために、再レンダリングを調査し、改善したときのメモです

方針

  1. Why Did You Renderを使って、propsやstateが同じはずなのに再レンダリングが発生しているところを見つける
  2. 1で見つかった再レンダリングについて、それぞれの原因に応じた修正を行う
  3. Why Did You Renderがログを出さなく(またはログが少なく)なるまで1と2を繰り返す
  4. React Profilerを使って、再レンダリングが発生しているところを見つける
  5. 4で見つかった再レンダリングについて、componentの分割やMemo化を試みる
続きを読む

macOS Big SurでメニューバーからSidecarを有効にできるようにする

システム環境設定から、Dockとメニューバーを選択します

そして、ディスプレイの項目で

  • 「メニューバーに表示」にチェックを入れる
  • 「常に」を選択する

の2つの項目を設定します

f:id:tmegos:20210411004901p:plain:w500

すると、メニューバーにディスプレイのアイコンが追加され、ここからSidecarを有効にできるようになります

f:id:tmegos:20210411005809p:plain:w400

Catalina以前だと、ディスプレイの設定から「使用可能な場合はメニューバーにミラーリングオプションを表示」にチェックを入れておけばOKだったので、Big Surからは機能自体が無くなってしまったかと思っていました

この設定で、今まで通り簡単にSidecarを使うことができます

NetlifyでNode.jsのバージョンを指定する

NODE_VERSION でバージョンを指定します

指定する場所は、
Site settings > Build & deploy > Environment > Environment variables
です

https://docs.netlify.com/configure-builds/environment-variables/#netlify-configuration-variables

https://docs.netlify.com/configure-builds/environment-variables/#declare-variables

iOS Chromeでresizeイベント後にwindow.innerWidth/innerHeightが異なる問題に対するワークアラウンド

現象

iOS端末を回転させてwindow sizeが変わって、resizeイベント後にwindow.innerWidth/innerHeightを参照しても、実際の値と異なる

例えば画面を横から縦に変えた場合、widthは合っていますが、heightは異なる値を示しています

f:id:tmegos:20210404161451p:plain:w400

bugs.webkit.org

環境

解決案

※ どうしてもiOS Chromeでresizeしたときに実際のwindow.innerWidth/innerHeightが使いたい!ときに試す

  1. 画面全体を覆うダミーのdivを置く
    position: fixed とか 100vw, 100vh とか
  2. ダミーのdivをResizeObserverで監視して、divのwidth, heightを使う
続きを読む