CIでたまに落ちるFlaky Test。isMountedをやめてAbortControllerで直した新着!!
これまで、ローカルでは再現しないのでマシンスペックのせいかと思って再実行で済ませてましたが、調べてみたらコード側に原因があったのでメモします。 修正が必要そうなのは、Reactコンポーネントのデータ取得後のレンダリング待 […]
addEventListener消し忘れでブラウザが落ちた？DevToolsでメモリリーク修正記録新着!!
ポートフォリオ用のSPAを触っていたところ、しばらく経ったところでファンが回り出して動作が重くなり、最終的にブラウザごと落ちました。 DOM要素がたかが数百程度のポートフォリオサイトなのに、何かがリソースを食いつぶしてい […]
【Figma】ホバー時にボタンが跳ねる？解決の備忘録
Figmaのホバー機能（マウスオーバー）でボタンが不自然に動いてしまう現象の原因と、「ディゾルブ」を使った一時的な解決策についての備忘録です。 紙グラフィックからwebデザインを勉強中の人間です。 figmaがだいぶん楽 […]
Next.jsでブラウザAPI使おうとして「window is not defined」って怒られたら
Next.jsで開発してると必ず出くわすエラーです。 最初のうちはもちろん、もう知ってるはずなのに、ついwindow.localStorageと書いちゃってまたこのエラーが出ちゃうことも珍しくないです。 一応、モジュール […]
ボタンのテキスト長くしたら、隣のアイコンがぺしゃんこに。flex-basisが原因だった
「送信」って書いてあるボタン、あとから「お問い合わせ内容を送信する」に文言を変えたくなること、ありますよね。先日、まさにその修正をすることになって、テキスト変えるだけなら余裕だと思って、ささっと変更したんです。 そしたら […]
justify-contentに頼らない「Flexbox×margin: auto」で手軽レイアウト
Webサイト作ってるとき、レイアウト調整といえば、大抵Flexboxを使っています。 でも実装しているときに気づくのが、親要素（Flexコンテナ）にてjustify-contentだけで配置しようとしすぎちゃう点。 それ […]
inputのフォーカス外れ？コンポーネント内のコンポーネント定義のバグ
プロジェクトで、検索フォームコンポーネントを作成していたのですが、テキスト入力欄に文字を入力するたびに、謎のフォーカス外れが発生してました。 こんな感じです。ユーザーからしたら単純なバグでは済まない、明らかにUXが損なっ […]
Tailwind全盛期に、あえて「素のCSS変数」でデザインシステムを作る
普段からTailwind CSSにはお世話になっていますが、中規模以上のプロジェクトを経験する中で、Tailwindだけに頼ると後々の保守が大変になるケースに何度も直面してきました。 Tailwindを活かしつつも、あえ […]
名刺デザインのバリエーションを広げる！構図を活用したラフ作成のコツ
デザインの方向性を早期に固めてクライアントの要望を整理するため、基本構図を活用した名刺デザインの複数案（ラフ）作成の実践例をご紹介します。 なるべく早くお客様と方向を一致させるために クライアントと私たちの間で、デザイン […]
Next.jsのHydration Errorに、useEffect以外で3つのやり方で回避する
Next.jsで開発しているとよく遭遇するあのエラー。 Hydration Errorです。サーバー側のレンダリング結果とクライアント側の結果がズレたときに出るやつです。 とりあえずuseEffectという力技はやめて、 […]