Zenn
Open20

個人開発メモ

CSS
Next.js
React
TypeScript
とうもろこしとうもろこし

.../dummy?mode=edit のクエリパラメータ mode を取得したい

page.tsx
import { useSearchParams } from "next/navigation";

export const Page = () => {
  const searchParams = useSearchParams();
  const mode = searchParams.get("mode");

  ...
  }
とうもろこしとうもろこし

配列の find 関数で以下のように書いてしまい、検索結果がヒットしない凡ミス。

array.find((e) => {
    e.id === currentId
})

以下のどちらかにしないと動かない。

array.find((e) => e.id === currentId);

array.find((e) => {
    return e.id === currentId
})
とうもろこしとうもろこし

favicon.ico を適用するだけでは、iPhoneの「ホーム画面に追加」時のアイコンには反映されない。

こちらが参考になった。
https://zenn.dev/kazzyfrog/articles/about-favicon-with-nextjs

とうもろこしとうもろこし

iPhoneの「ホームに追加」すると、アイコンの背景が黒になる。
黒線で書いた透過画像を使っていたので、見た目がおかしくなってしまった。

とうもろこしとうもろこし

transition に複数プロパティ指定する方法。

.component {
  transition: width 0.3s, height 0.3s;
}
とうもろこしとうもろこし

CSSの animation で3つのオブジェクトをそれぞれ0〜30%, 30〜60%, 60〜90%のタイミングで入れ替わりで動かしたかったが、きっちり30%ずつ動かない。
例えば、オブジェクト1で0〜30%、オブジェクト2で30〜40%とすれば、実際に動いている時間は等しくなる。

とうもろこしとうもろこし

emotionを導入しようとしたが、Client Componentsでのみ使えるとのことだった。
あとで不都合が生じるかもしれないのでやめた。
Next.jsがサポートを明言している他のCSS-in-JSだと、引数を渡すことができない？

とうもろこしとうもろこし

CSSで transition opacity を使って2つのオブジェクトをスムーズに入れ替えるアニメーションが、iOSのChromeでチラついた。PCのlocalhostでは問題なかった。

とうもろこしとうもろこし

transition に関する解決方法、opacity に関する解決方法を試したがうまくいかなかった。
ライブラリならブラウザごとの問題を解決してくれるかと思い、motion を導入。
実装してみたがやはりちらつく。アニメーションではなく、スクロールに関する問題かも。

とうもろこしとうもろこし

motion の useScroll で scrollY を取得してその値でstateをセットしてみた。

  const { scrollY } = useScroll();

  useMotionValueEvent(scrollY, "change", (latest) => {
    if (latest > 157) {
      setShowStickyIcon(true);
    } else {
      setShowStickyIcon(false);
    }
  });
とうもろこしとうもろこし

メインの page.tsx に置いてstickyさせていたコンポーネントを、子コンポーネントとして別ファイルにしたら、stickyが効かなくなった。
スクロールさせながら getBoundingClientRect() で top を取得したら変化していないので、子コンポーネント内での位置の変化検知になっていそう。