useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数あることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure#

Chrome 102 以降で Navigation API が、Chrome 111 以降で View Transitions API がサポートされました。 本記事ではこの二つの API を用いてページ遷移アニメーションを実装してみようと思います。 デモサイト&コード 本記事では以下のデモサイトとコードをもとに説明を行うことがあります。全体的な挙動やコードを確認したい際には以下をご参照ください。 View Transitions API View Transitions API は異なる DOM 状態間におけるアニメーション付きの画面遷移と DOM の更新を、従来よりもシンプルな方法で提供する API です。 View Transitions API の詳細な説明については View Transitions API - Web APIs | MDN をご参照ください。 デモページ&コード

本記事執筆時点(2023.6.3)において、Tailwind Variantsのバージョンはv0.1.5となっています。 Tailwind Variantsとは Tailwind Variants a first-class variant API library for TailwindCSS. 引用元: https://www.tailwind-variants.org/docs/introduction ドキュメントに書かれているように、Tailwind VariantsはTailwindCSSの機能とファーストクラスのVariant APIを組み合わせた技術です。TypeScriptベースで作成されているので型安全であり、特定のフレームワークに依存しないユーティリティライブラリとなっています。 ここで登場したVariant APIという言葉ですが、これはStitchesというCSS

カスケードレイヤー@layerがモダンブラウザでサポートされたとはいえ、互換性の問題から、実際に現場で見かけるのは、まだまだ未来の話と思っていました。ふと、思い立ってCan I use... Support tables for HTML5, CSS3, etcを確認してみたところ、現時点（2022.12.27）でも、すでにGlobalで9割近くサポートされています。これは来年あたりから見かける機会が増えそうだと思ったので、そろそろカスケードレイヤーと向き合いたいと思います。 カスケードレイヤー@layer カスケードレイヤーはスタイルの優先順位を制御するためアルゴリズムの1つです。カスケードレイヤーを使用することで、スタイルの優先順位をレイヤー化（階層化）して管理することができます。とりわけ覚えておかなければならないのは、カスケードアルゴリズムは詳細度アルゴリズムよりも優先されるというこ

1行のテキストを両端揃えしたいことってありますよね。たとえば以下のようなデザインに出会ったことはないでしょうか。 「うどん」「そば」「ラーメン」のテキストが両端揃えになっています。 今回はこのようなデザインをCSS（もしくはHTMLとJavaScript）で実現する方法について考えてみます。